/* === APP VERSION 3.6.0 ===
   表記: 大きな機能改善.小さな機能改善.修正 */
.app-code-version{
  margin-top:7px;
  width:100%;
  box-sizing:border-box;
  text-align:right;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}
body.light-mode .app-code-version{
  color:#64748b !important;
}


/* === APP VERSION 3.3.14: モーダル表示中の背面スクロール禁止 === */
body.global-modal-scroll-lock{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none;
}

/* モーダル内部のスクロールは維持 */
.site-dialog-mask > *,
.mypage-modal > *,
.admin-form-mask > *,
.admin-modal,
.mdl-mask > *{
  touch-action:pan-y;
}


/* === APP VERSION 3.3.14: 管理者用 登録曲一括削除 === */
.admin-bulk-delete-area{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.admin-bulk-delete-area.hidden{
  display:none !important;
}
.admin-bulk-delete-btn{
  min-height:34px;
  padding:0 12px;
  border:1px solid #b91c1c;
  border-radius:7px;
  background:#3f0d12;
  color:#fca5a5;
  font-size:10px;
  font-weight:900;
}
.admin-bulk-delete-btn:disabled{
  opacity:.55;
}
body.light-mode .admin-bulk-delete-btn{
  background:#fee2e2 !important;
  color:#b91c1c !important;
  -webkit-text-fill-color:#b91c1c !important;
  border-color:#ef4444 !important;
}


/* === APP VERSION 3.3.14: ライトモードの青背景は白文字で統一 === */
body.light-mode .skill-sync-dialog .skill-sync-step-no{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body.light-mode .skill-sync-encoding-note{
  margin-top:6px;
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}

/* ライトモードで青系の主要アクション背景を使う要素は白文字に統一 */
body.light-mode .p-tab-btn.active,
body.light-mode .btn-add-inline,
body.light-mode .btn-submit,
body.light-mode .site-dialog-ok,
body.light-mode .menu-primary-btn,
body.light-mode .mypage-action-btn,
body.light-mode .feature-save-btn,
body.light-mode .feedback-submit-btn,
body.light-mode [class*="primary"][class*="btn"],
body.light-mode [class*="btn"][class*="primary"]{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* === APP VERSION 3.3.14: 同期画面 Android Chrome案内 === */
.skill-sync-card-warning{
  margin-top:8px;padding:10px 12px;border:1px solid #f59e0b;border-radius:8px;
  background:rgba(245,158,11,.12);color:#fbbf24;font-size:12px;font-weight:800;line-height:1.55;
}
.skill-sync-android-note{
  margin-top:8px;padding:10px 12px;border:1px solid #3b82f6;border-radius:8px;
  background:rgba(59,130,246,.10);color:var(--text);font-size:12px;line-height:1.6;
}
.skill-sync-android-note strong{display:block;margin-bottom:4px;color:#60a5fa;font-size:12px;font-weight:900}
.skill-sync-android-note span{display:block}
body.light-mode .skill-sync-card-warning{
  background:#fff7ed !important;border-color:#f59e0b !important;color:#92400e !important;
  -webkit-text-fill-color:#92400e !important;
}
body.light-mode .skill-sync-android-note{
  background:#eff6ff !important;border-color:#93c5fd !important;color:#1e293b !important;
  -webkit-text-fill-color:#1e293b !important;
}
body.light-mode .skill-sync-android-note strong{
  color:#1d4ed8 !important;-webkit-text-fill-color:#1d4ed8 !important;
}


/* === APP VERSION 3.3.14: スキル対象同期の説明文を通常の文字色へ === */
.skill-sync-dialog .section-note,
.skill-sync-dialog .skill-sync-browser-guide,
.skill-sync-dialog .skill-sync-encoding-note{
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  opacity:1 !important;
}
body.light-mode .skill-sync-dialog .section-note,
body.light-mode .skill-sync-dialog .skill-sync-browser-guide,
body.light-mode .skill-sync-dialog .skill-sync-encoding-note{
  color:#1e293b !important;
  -webkit-text-fill-color:#1e293b !important;
  opacity:1 !important;
}


/* === APP VERSION 3.3.14: ユーザーリストのページ番号ナビ === */
.user-list-pager{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 4px 12px;
}
.user-pager-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
}
.user-pager-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
}
.user-pager-page,
.user-pager-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 7px;
  border:1px solid #475569;
  border-radius:7px;
  background:#111827;
  color:#e5e7eb;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.user-pager-page.active{
  background:#3b82f6;
  border-color:#2563eb;
  color:#fff;
}
.user-pager-arrow:disabled{
  opacity:.35;
}
.user-pager-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  color:#94a3b8;
  font-size:14px;
  font-weight:900;
}
.user-list-page-summary{
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
}
body.light-mode .user-pager-page,
body.light-mode .user-pager-arrow{
  background:#f8fafc !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}
body.light-mode .user-pager-page.active{
  background:#3b82f6 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:#2563eb !important;
}
body.light-mode .user-pager-ellipsis,
body.light-mode .user-list-page-summary{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
@media (max-width:380px){
  .user-pager-page,
  .user-pager-arrow{
    min-width:31px;
    height:32px;
    padding:0 5px;
  }
  .user-pager-main{gap:3px}
  .user-pager-numbers{gap:3px}
}


/* === APP VERSION 3.3.14: ページ番号ナビの旧CSS競合を解消 === */
#userListPager.user-list-pager{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:100% !important;
  min-height:0 !important;
  padding:10px 6px 12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#userListPager .user-pager-main{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

#userListPager .user-pager-numbers{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}

#userListPager button.user-pager-page,
#userListPager button.user-pager-arrow{
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:7px !important;
  box-sizing:border-box !important;
}

#userListPager .user-pager-ellipsis{
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
}

#userListPager .user-list-page-summary{
  width:auto !important;
  text-align:center !important;
}

@media (max-width:420px){
  #userListPager.user-list-pager{
    padding-left:4px !important;
    padding-right:4px !important;
  }
  #userListPager .user-pager-main,
  #userListPager .user-pager-numbers{
    gap:3px !important;
  }
  #userListPager button.user-pager-page,
  #userListPager button.user-pager-arrow{
    flex-basis:32px !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
  }
  #userListPager .user-pager-ellipsis{
    flex-basis:16px !important;
    width:16px !important;
    min-width:16px !important;
  }
}


/* === APP VERSION 3.3.14: 任意ページへ直接移動できるページャー === */
#userListPager .user-pager-nearby{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
}
#userListPager .user-pager-jump{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}
#userListPager .user-pager-jump select{
  height:34px;
  min-width:70px;
  padding:0 24px 0 8px;
  border:1px solid #475569;
  border-radius:7px;
  background:#111827;
  color:#e5e7eb;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
body.light-mode #userListPager .user-pager-jump select{
  background:#f8fafc !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}
@media (max-width:520px){
  #userListPager .user-pager-nearby .user-pager-page{
    display:none !important;
  }
  #userListPager .user-pager-jump select{
    min-width:88px;
  }
}


/* === APP VERSION 3.3.14: ライトモードの全プルダウン表示を統一 === */
body.light-mode select{
  color-scheme:light !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  background-color:#f8fafc !important;
  border-color:#94a3b8 !important;

  /* Safari / Chrome で標準矢印が消える指定を打ち消し、
     共通の濃い▼を右側に表示する */
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:38px !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
}

body.light-mode select:disabled{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
  background-color:#e2e8f0 !important;
}

/* ページ選択も他のプルダウンと同じ▼表示 */
body.light-mode #userListPager .user-pager-jump select{
  padding-right:30px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%) !important;
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 8px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
}


/* === APP VERSION 3.3.14: スコア登録プルダウンの▼を確実に表示 === */
body.light-mode #scoreModal select,
body.light-mode .score-modal select,
body.light-mode .score-form select,
body.light-mode #scoreForm select{
  -webkit-appearance:none !important;
  appearance:none !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  background-color:#f8fafc !important;
  border-color:#94a3b8 !important;
  padding-right:38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
}

/* IDを持つ登録フォーム部品にも適用（後勝ちCSS対策） */
body.light-mode #scorePart,
body.light-mode #scoreFc,
body.light-mode #scoreOption,
body.light-mode #partSelect,
body.light-mode #fcSelect,
body.light-mode #optionSelect{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
}


/* === APP VERSION 3.3.14: プルダウン矢印をダーク/ライトで共通デザイン化 ===
   ブラウザ標準の矢印表示には依存せず、全selectで同じシェブロンを表示する。 */
select{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:38px !important;
  background-repeat:no-repeat !important;
  background-size:16px 16px !important;
  background-position:calc(100% - 12px) 50% !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ライトモードは同じ形を濃色で表示 */
body.light-mode select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ページ選択は横幅が狭いので少し内側へ */
#userListPager .user-pager-jump select{
  padding-right:30px !important;
  background-position:calc(100% - 8px) 50% !important;
  background-size:14px 14px !important;
}

/* disabledも矢印自体は見えるようにし、操作不可は色で表す */
select:disabled{
  opacity:.65;
}
body.light-mode select:disabled{
  opacity:1 !important;
}


/* === APP VERSION 3.6.0: MENUスクロール / VERSION幅 / OFUSEモーダル === */
.app-menu-sheet{
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}
.app-menu-version{
  width:100% !important;
  box-sizing:border-box !important;
}
.app-menu-version .version-select,
#versionSelect{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.support-dialog{
  border:1px solid #475569;
  border-radius:12px;
  background:#111827;
  color:#f8fafc;
}
.support-ofuse-button{
  border-radius:9px;
  background:#3b82f6;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:900;
}
body.light-mode .support-dialog{
  border-color:#94a3b8 !important;
}
body.light-mode .support-dialog-body{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}


/* === APP VERSION 3.6.0: 運営支援をMENU共通デザインへ統一 === */
#menuOfuseSupport.app-menu-item{
  width:100% !important;
  margin:0 !important;
}

/* VERSIONは他のMENU項目と同じ横幅 */
.app-menu-version,
.app-menu-version #versionSelect{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* 支援画面は要望・不具合報告等と同じダイアログ外観を使用 */
.support-dialog{
  width:min(92vw,560px) !important;
  max-height:calc(100dvh - 28px) !important;
  overflow-y:auto !important;
}
.support-dialog-body{
  padding:16px 18px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  font-size:13px !important;
  line-height:1.7 !important;
}
.support-dialog-body p{
  margin:0 !important;
}
.support-ofuse-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:46px !important;
  margin-top:4px !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}
body.light-mode .support-dialog{
  background:#f3f4f6 !important;
  color:#111827 !important;
}
body.light-mode .support-dialog-body,
body.light-mode .support-dialog-body p{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
body.light-mode .support-ofuse-button{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}


/* === APP VERSION 3.6.0: 運営支援の戻るボタンをMENU共通仕様へ === */
#btnCloseSupport.menu-back-btn{
  width:auto !important;
  height:32px !important;
  padding:0 !important;
  background:transparent !important;
  color:#60a5fa !important;
  -webkit-text-fill-color:#60a5fa !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:900 !important;
}
body.light-mode #btnCloseSupport.menu-back-btn{
  background:transparent !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  border:0 !important;
  box-shadow:none !important;
}


/* === APP VERSION 3.6.0: MENUサイズ最適化 / 余白復元 / 戻るボタン統一 === */

/* 3.4.3で追加したVERSION下の余白を戻す */
.app-menu-version{
  padding-bottom:0 !important;
}

/* MENUは内容量に合わせ、必要な時だけ内部スクロール */
.app-menu-sheet{
  height:auto !important;
  max-height:calc(100dvh - 40px) !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
}

/* MENU配下画面の「戻る」を共通の枠付きボタンへ */
.app-menu-head .menu-back-btn,
.skill-sync-head .menu-back-btn,
.mypage-title-row .menu-back-btn,
#btnCloseSupport.menu-back-btn{
  width:auto !important;
  min-width:46px !important;
  height:34px !important;
  padding:0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  color:#60a5fa !important;
  -webkit-text-fill-color:#60a5fa !important;
  border:1px solid #64748b !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

body.light-mode .app-menu-head .menu-back-btn,
body.light-mode .skill-sync-head .menu-back-btn,
body.light-mode .mypage-title-row .menu-back-btn,
body.light-mode #btnCloseSupport.menu-back-btn{
  background:transparent !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  border:1px solid #94a3b8 !important;
  box-shadow:none !important;
}


/* === APP VERSION 3.6.0: MENUを他モーダルと同じ中央配置へ / 戻るボタン完全統一 === */

/* MENU本体:
   旧仕様の top/right 固定ポップアップをやめて、site-dialog-mask の中央配置を使う */
#menuMask{
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}

#menuMask .app-menu-sheet{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;

  width:100% !important;
  max-width:520px !important;
  height:auto !important;
  max-height:calc(100dvh - 32px) !important;
  margin:0 !important;
  padding:16px !important;

  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;

  border-radius:14px !important;
  box-sizing:border-box !important;
}

/* MENU内のVERSION末尾に余計な追加余白は入れない */
#menuMask .app-menu-version{
  padding-bottom:0 !important;
}

/* MENU配下で使う「戻る」はID指定で旧ルールを確実に上書き */
#btnCloseMypage.menu-back-btn,
#btnCloseFeatureSettings.menu-back-btn,
#btnCloseSkillSync.menu-back-btn,
#btnCloseRivalManage.menu-back-btn,
#btnCloseHowTo.menu-back-btn,
#btnCloseFeedback.menu-back-btn,
#btnCloseSupport.menu-back-btn,
#btnCloseSkillRanking.menu-back-btn,
#btnCloseSkillShare.menu-back-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:52px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 11px !important;
  margin:0 !important;

  border:1px solid #64748b !important;
  border-radius:8px !important;
  background:#111827 !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  box-shadow:none !important;

  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-align:center !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

body.light-mode #btnCloseMypage.menu-back-btn,
body.light-mode #btnCloseFeatureSettings.menu-back-btn,
body.light-mode #btnCloseSkillSync.menu-back-btn,
body.light-mode #btnCloseRivalManage.menu-back-btn,
body.light-mode #btnCloseHowTo.menu-back-btn,
body.light-mode #btnCloseFeedback.menu-back-btn,
body.light-mode #btnCloseSupport.menu-back-btn,
body.light-mode #btnCloseSkillRanking.menu-back-btn,
body.light-mode #btnCloseSkillShare.menu-back-btn{
  border:1px solid #94a3b8 !important;
  background:#f8fafc !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  box-shadow:none !important;
}

@media (max-width:600px){
  #menuMask{
    padding:12px !important;
  }
  #menuMask .app-menu-sheet{
    max-width:460px !important;
    max-height:calc(100dvh - 24px) !important;
  }
}


/* === APP VERSION 3.8.0: 全ユーザー向け・曲ごとの非公開コメント === */
#formPrivateComment{
  width:100%;
  min-height:58px;
  resize:vertical;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid #334155;
  border-radius:8px;
  background:#111827;
  color:#f8fafc;
  font:inherit;
  line-height:1.5;
}
#formPrivateComment::placeholder{
  color:#64748b;
}
.score-private-comment-note{
  margin-top:4px;
  color:#64748b;
  font-size:9px;
  line-height:1.4;
}
.rate-comment-history{
  padding:9px 14px;
  border-bottom:1px solid #334155;
  background:#111827;
  color:#e2e8f0;
  font-size:11px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.comment-history-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin-bottom:7px;
}
.comment-history-heading label{
  color:#94a3b8;
  font-size:11px;
  font-weight:900;
}
#rateCommentHistory select{
  width:100%;
  min-width:0;
  min-height:36px;
  border:1px solid #475569;
  border-radius:7px;
  padding:6px 38px 6px 10px;
  background-color:#111827;
  color:#e5e7eb;
  font-size:12px;
  box-sizing:border-box;
}
.comment-history-record{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.comment-history-record :is(.fc-unified-badge,.opt-badge){
  flex:0 0 auto;
  width:auto !important;
  min-width:48px !important;
  padding:2px 6px !important;
  box-sizing:border-box;
}
.comment-history-rate{white-space:nowrap;}
.comment-history-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:4.65em;
  overflow-y:auto;
}
body.light-mode #formPrivateComment{
  background:#fff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}
body.light-mode #formPrivateComment::placeholder{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}
body.light-mode .rate-comment-history{
  background:#e9edf2 !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#cbd5e1 !important;
}
body.light-mode .comment-history-heading label{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}

/* === APP VERSION 3.6.1: スコア登録プルダウンの矢印を確実に表示 ===
   iPhone Safariではselectのbackground-imageが表示されない場合があるため、
   selectの外側に共通シェブロンを重ねて表示する。 */
#domModal .select-arrow-wrap{
  position:relative;
  width:100%;
}
#domModal .select-arrow-wrap::after{
  content:"";
  position:absolute;
  border-right:2px solid #e5e7eb;
  border-bottom:2px solid #e5e7eb;
  transform-origin:center;
  pointer-events:none;
  z-index:2;
}
#domModal .select-arrow-wrap > select{
  width:100%;
  padding-right:40px !important;
}
body.light-mode #domModal .select-arrow-wrap::after{
  border-right-color:#334155;
  border-bottom-color:#334155;
}

/* === APP VERSION 3.6.2: ライトモードのモーダルスクロールバー ===
   iPhoneがダーク設定でも、ライトモードではSafariのシステムUIを
   ライト配色として描画させ、白いスクロールバーを防ぐ。 */
body.light-mode{
  color-scheme:light !important;
}
body.light-mode :is(
  .mdl-sheet,
  .mypage-sheet,
  .admin-form-sheet,
  .feature-settings-dialog,
  .feedback-dialog,
  .howto-dialog,
  .rival-manage-dialog,
  .skill-sync-dialog,
  .support-dialog,
  .site-dialog,
  .rate-compare-dialog,
  .rate-compare-body,
  .admin-modal,
  .user-detail-page,
  .suggestion-list
){
  color-scheme:light !important;
  scrollbar-color:#64748b #e2e8f0;
}
body.light-mode :is(
  .mdl-sheet,
  .mypage-sheet,
  .admin-form-sheet,
  .feature-settings-dialog,
  .feedback-dialog,
  .howto-dialog,
  .rival-manage-dialog,
  .skill-sync-dialog,
  .support-dialog,
  .site-dialog,
  .rate-compare-dialog,
  .rate-compare-body,
  .admin-modal,
  .user-detail-page,
  .suggestion-list
)::-webkit-scrollbar{
  width:10px;
  height:10px;
}
body.light-mode :is(
  .mdl-sheet,
  .mypage-sheet,
  .admin-form-sheet,
  .feature-settings-dialog,
  .feedback-dialog,
  .howto-dialog,
  .rival-manage-dialog,
  .skill-sync-dialog,
  .support-dialog,
  .site-dialog,
  .rate-compare-dialog,
  .rate-compare-body,
  .admin-modal,
  .user-detail-page,
  .suggestion-list
)::-webkit-scrollbar-track{
  background:#e2e8f0;
  border-radius:999px;
}
body.light-mode :is(
  .mdl-sheet,
  .mypage-sheet,
  .admin-form-sheet,
  .feature-settings-dialog,
  .feedback-dialog,
  .howto-dialog,
  .rival-manage-dialog,
  .skill-sync-dialog,
  .support-dialog,
  .site-dialog,
  .rate-compare-dialog,
  .rate-compare-body,
  .admin-modal,
  .user-detail-page,
  .suggestion-list
)::-webkit-scrollbar-thumb{
  background:#64748b;
  border:2px solid #e2e8f0;
  border-radius:999px;
}

/* === APP VERSION 3.10.0: DMオプション・歴代自己ベスト表示 === */
.opt-bass-mirror,
.rate-badges .opt-bass-mirror{
  width:auto !important;
  min-width:54px !important;
  padding-left:5px !important;
  padding-right:5px !important;
  color:#c4b5fd !important;
  -webkit-text-fill-color:#c4b5fd !important;
  background:rgba(76,29,149,.28) !important;
  border:1px solid #7c3aed !important;
}
body.light-mode .opt-bass-mirror,
body.light-mode #viewAllManage .opt-bass-mirror,
body.light-mode #userDetailRecords .opt-bass-mirror,
body.light-mode .dc-card .opt-bass-mirror,
body.light-mode .rate-badges .opt-bass-mirror{
  color:#6d28d9 !important;
  -webkit-text-fill-color:#6d28d9 !important;
  background:#f5f3ff !important;
  border-color:#7c3aed !important;
}
.rate-personal-best{
  flex-wrap:wrap !important;
  align-items:center !important;
}
.rate-personal-best-version{
  flex:1 1 110px;
  min-width:0;
}
.rate-personal-best-badges{
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  white-space:nowrap;
}
.rate-personal-best-badges .fc-unified-badge,
.rate-personal-best-badges .opt-badge,
.history-option-badge{
  width:auto !important;
  min-width:48px !important;
  padding:2px 6px !important;
  box-sizing:border-box;
}
.history-option-badge{
  display:inline-block;
  border:1px solid #475569;
  border-radius:2px;
  background:transparent;
  color:#cbd5e1;
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  text-align:center;
}
body.light-mode .history-option-badge{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  background:#f8fafc !important;
  border-color:#94a3b8 !important;
}

/* === APP VERSION 3.10.1: スコア登録モーダルの縦幅圧縮 === */
#domModal.mdl-mask{
  padding:8px !important;
}
#domModal .mdl-sheet{
  max-height:calc(100dvh - 16px) !important;
  padding:10px !important;
}
#domModal .mdl-sheet #domModalTitle{
  margin:0 0 6px !important;
  font-size:15px !important;
  line-height:1.25 !important;
}
#domModal .f-group{
  margin-bottom:4px !important;
}
#domModal .f-group label{
  margin-bottom:2px !important;
  font-size:10px !important;
  line-height:1.2 !important;
}
#domModal .form-grid-two{
  gap:6px !important;
}
#domModal .mdl-sheet .f-group input:not(#formTitle),
#domModal .f-group select,
#domModal #formTitle,
#domModal #formLevel,
#domModal .skill-preview{
  min-height:38px !important;
  height:38px !important;
  font-size:12px !important;
}
#domModal .mdl-sheet .f-group input:not(#formTitle),
#domModal #formTitle{
  padding-top:5px !important;
  padding-bottom:5px !important;
}
#domModal .f-group select{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
#domModal .skill-preview{
  min-height:36px !important;
  height:36px !important;
  padding:5px 8px !important;
  font-size:15px !important;
}
#domModal .level-correction-area,
#domModal .master-request-area{
  margin:3px 0 4px !important;
  padding:5px 7px !important;
}
#domModal .level-correction-head{
  gap:6px !important;
}
#domModal .level-correction-title,
#domModal .master-request-title{
  font-size:9.5px !important;
  line-height:1.25 !important;
}
#domModal .level-correction-note,
#domModal .master-request-note{
  margin-top:1px !important;
  font-size:8.5px !important;
  line-height:1.25 !important;
}
#domModal #btnOpenLevelCorrection{
  min-height:30px !important;
  padding:0 8px !important;
  font-size:9px !important;
}
#domModal .level-correction-form{
  margin-top:5px !important;
  padding-top:5px !important;
}
#domModal .level-correction-input-row{
  gap:5px !important;
}
#domModal .level-correction-input-row input{
  min-height:34px !important;
  height:34px !important;
}
#domModal #btnSendLevelCorrection{
  min-width:108px !important;
  padding:0 7px !important;
  font-size:9px !important;
}
#domModal #formPrivateComment{
  min-height:48px !important;
  height:48px !important;
  font-size:12px !important;
}
#domModal .score-private-comment-note{
  margin-top:2px !important;
  font-size:8px !important;
  line-height:1.2 !important;
}
#domModal .edit-delete-area{
  margin-top:4px !important;
  padding-top:4px !important;
}
#domModal .btn-delete-editing-score{
  min-height:34px !important;
  height:34px !important;
  font-size:10px !important;
}
#domModal .btn-block{
  margin-top:6px !important;
  gap:6px !important;
}
#domModal .btn-submit,
#domModal .btn-cancel{
  min-height:40px !important;
  height:40px !important;
  font-size:12px !important;
}

/* === APP VERSION 3.10.2: 登録欄の高さ完全統一・コメント1行化 === */
#domModal #formTitle,
#domModal #partSelect,
#domModal #formLevel,
#domModal #formRate,
#domModal #formFc,
#domModal #formOption,
#domModal #formDmOption,
#domModal #formPrivateComment{
  box-sizing:border-box !important;
  min-height:38px !important;
  height:38px !important;
  max-height:38px !important;
  line-height:normal !important;
  border-width:1px !important;
  border-radius:8px !important;
  font-size:12px !important;
}
#domModal .select-arrow-wrap{
  height:38px !important;
}
#domModal .select-arrow-wrap > select{
  min-height:38px !important;
  height:38px !important;
  max-height:38px !important;
}
#domModal #formPrivateComment{
  resize:none !important;
  overflow-y:auto !important;
  padding:8px !important;
  line-height:20px !important;
}

/* === APP VERSION 3.10.3: 達成率横Skill・難易度報告入力統一 === */
#domModal #formSkill{
  box-sizing:border-box !important;
  min-height:38px !important;
  height:38px !important;
  max-height:38px !important;
}

@media (max-width:430px){
  .record-search-row{
    flex-wrap:nowrap;
  }
  .record-search-row .search-input{
    flex:1 1 auto;
    min-width:0;
  }
  .record-search-row .btn-add-inline{
    flex:0 0 auto;
  }
}

/* === v4.18.0 管理者限定・登録曲タグ === */
#recordTagFilterField{
  min-width:0;
}
#recordTagFilter{width:100%}
.score-tag-choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:38px;
}
.score-tag-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.score-tag-choice span{
  display:block;
  padding:8px 12px;
  border:1px solid #475569;
  border-radius:999px;
  background:#111827;
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
}
.score-tag-empty,.tag-settings-empty{
  color:#94a3b8;
  font-size:12px;
}
.score-tag-load-error{
  color:#fca5a5;
  font-size:12px;
  font-weight:800;
}
.tag-settings-dialog{
  width:min(100%, 480px);
  max-height:calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #334155;
  border-radius:14px;
  background:#0f172a;
  color:#f8fafc;
}
.tag-settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #334155;
}
.tag-settings-head button{
  width:38px;
  height:38px;
  border:0;
  border-radius:8px;
  background:#1e293b;
  color:#fff;
  font-size:23px;
  font-weight:900;
}
.tag-settings-body{
  min-height:0;
  padding:14px;
  overflow:auto;
  overscroll-behavior:contain;
}
.tag-settings-body > p{
  margin:0 0 12px;
  color:#cbd5e1;
  font-size:12px;
  line-height:1.5;
}
.tag-settings-rows{
  display:grid;
  gap:8px;
}
.tag-settings-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.tag-settings-row input{
  min-width:0;
  min-height:42px;
  padding:8px 10px;
  border:1px solid #475569;
  border-radius:8px;
  background:#111827;
  color:#f8fafc;
  font-size:14px;
}
.tag-settings-row button{
  min-width:58px;
  border:0;
  border-radius:8px;
  background:#7f1d1d;
  color:#fecaca;
  font-weight:900;
}
.tag-settings-add{
  width:100%;
  min-height:42px;
  margin-top:10px;
  border:1px dashed #64748b;
  border-radius:8px;
  background:#1e293b;
  color:#bfdbfe;
  font-weight:900;
}
.tag-settings-add:disabled{opacity:.45}
.tag-settings-status{
  min-height:20px;
  margin-top:8px;
  color:#fca5a5;
  font-size:12px;
}
.tag-settings-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
body.light-mode .tag-settings-dialog{
  border-color:#94a3b8;
  background:#e2e8f0;
  color:#0f172a;
}
body.light-mode .tag-settings-head{border-color:#94a3b8}
body.light-mode .tag-settings-head button,
body.light-mode .tag-settings-add{background:#cbd5e1;color:#0f172a}
body.light-mode .tag-settings-body > p,
body.light-mode .score-tag-empty,
body.light-mode .tag-settings-empty{color:#475569}
body.light-mode .score-tag-load-error{color:#b91c1c}
body.light-mode .tag-settings-row input,
body.light-mode .score-tag-choice span{background:#f8fafc;color:#0f172a}
.score-tag-choice input:checked + span{
  border-color:#2563eb;
  background:#3b82f6;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#domModal #correctionLevel{
  box-sizing:border-box !important;
  min-height:38px !important;
  height:38px !important;
  max-height:38px !important;
  padding:5px 9px !important;
  border:1px solid #475569 !important;
  border-radius:8px !important;
  outline:none !important;
  background:#111827 !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-size:12px !important;
  line-height:normal !important;
}
#domModal #correctionLevel:focus{
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 2px rgba(59,130,246,.18) !important;
}
#domModal #btnSendLevelCorrection{
  min-height:38px !important;
  height:38px !important;
  border-radius:8px !important;
}
body.light-mode #domModal #correctionLevel{
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}

/* === APP VERSION 3.11.0: バスミラー全ユーザー公開・歴代自己ベスト整列 === */
.rate-personal-best{
  display:block !important;
  padding:10px 14px !important;
}
.rate-personal-best-label{
  display:block !important;
  margin:0 0 6px !important;
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
}
.option-share-title{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
}
.rate-compare-section-title{
  flex:0 0 auto;
  padding:10px 14px 0;
  color:#94a3b8;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
}
.rate-personal-best-detail{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
.rate-personal-best-detail .rate-personal-best-value{
  margin:0 !important;
  line-height:1.2 !important;
}
.rate-personal-best-detail .rate-personal-best-badges{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  margin:0 !important;
}
.rate-personal-best-detail .rate-personal-best-version{
  flex:0 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.rate-option-summary:not(:empty){
  border-top:1px solid #334155 !important;
}
body.light-mode .rate-option-summary:not(:empty){
  border-top-color:#94a3b8 !important;
}
body.light-mode .rate-personal-best-label,
body.light-mode .option-share-title,
body.light-mode .rate-compare-section-title{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}

/* === APP VERSION 3.12.0: 管理者向けブラウザ別同期ガイド === */
.skill-sync-visual-guide{
  margin-top:12px;
}
.sync-tutorial-video{
  margin:12px 0;
  display:grid;
  gap:8px;
  font-size:12px;
}
.sync-tutorial-video video{
  display:block;
  width:100%;
  height:auto;
  max-height:50dvh;
  object-fit:contain;
  background:#000;
  border-radius:8px;
}
.sync-tutorial-download{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  text-decoration:none;
}
.sync-visual-device{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:6px 10px;
  border:1px solid #334155;
  border-radius:9px;
  background:#111827;
  color:#e2e8f0;
  font-size:11px;
}
.sync-browser-mark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:50%;
}
.sync-browser-mark.safari{
  overflow:hidden;
  border:2px solid #e2e8f0;
  background:radial-gradient(circle at 50% 50%,#e0f2fe 0 18%,#38bdf8 20% 54%,#2563eb 56% 100%);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.22);
}
.sync-browser-mark.safari::before{
  content:"";
  position:absolute;
  width:2px;
  height:15px;
  border-radius:2px;
  background:linear-gradient(to bottom,#ef4444 0 49%,#ffffff 50% 100%);
  transform:rotate(45deg);
  box-shadow:0 0 1px rgba(15,23,42,.55);
}
.sync-browser-mark.safari::after{
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(15,23,42,.25);
}
.sync-browser-mark.chrome{
  background:conic-gradient(#dc2626 0 33%,#eab308 0 66%,#16a34a 0);
}
.sync-browser-mark.chrome::after{
  content:"";
  width:8px;
  height:8px;
  border:2px solid #dbeafe;
  border-radius:50%;
  background:#3b82f6;
}
.sync-visual-card{
  display:grid;
  grid-template-columns:28px 118px minmax(0,1fr);
  align-items:center;
  gap:9px;
  margin-top:9px;
  padding:10px;
  border:1px solid #334155;
  border-radius:11px;
  background:#111827;
}
.sync-visual-no{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#3b82f6;
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.sync-visual-content{
  min-width:0;
}
.sync-visual-content>strong{
  display:block;
  color:#f8fafc;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}
.sync-visual-content p{
  margin:5px 0 0;
  color:#94a3b8;
  font-size:9.5px;
  font-weight:700;
  line-height:1.5;
}
.sync-visual-content .sync-bookmark-name{
  color:#e2e8f0;
  font-weight:900;
}
.sync-bookmark-name small{
  color:#94a3b8;
  font-size:8.5px;
  font-weight:700;
}
.sync-visual-primary{
  width:100%;
  min-height:36px;
  margin-top:7px;
  padding:6px 8px;
  border:1px solid #3b82f6;
  border-radius:7px;
  background:#3b82f6;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1.25;
}
.sync-mini-copy,
.sync-mini-browser,
.sync-mini-edit{
  box-sizing:border-box;
  width:118px;
  min-height:82px;
  overflow:hidden;
  border:1px solid #475569;
  border-radius:8px;
  background:#1e293b;
  box-shadow:0 5px 12px rgba(0,0,0,.22);
  color:#e2e8f0;
}
.sync-mini-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:7px;
  background:#1e293b;
  color:#e2e8f0;
}
.sync-mini-copy span{
  color:#2563eb;
  font-size:7px;
  font-weight:900;
}
.sync-mini-copy strong{
  font-size:12px;
  letter-spacing:.6px;
}
.sync-mini-copy i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:27px;
  margin-top:3px;
  border-radius:5px;
  background:#3b82f6;
  color:#fff;
  font-style:normal;
}
.sync-mini-copy-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sync-mini-address,
.sync-mini-search{
  margin:6px;
  padding:5px 6px;
  overflow:hidden;
  border-radius:5px;
  background:#0f172a;
  color:#cbd5e1;
  font-size:6.5px;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.sync-mini-address strong{
  float:right;
  color:#fff;
  font-size:9px;
}
.sync-mini-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-around;
  height:23px;
  color:#94a3b8;
  font-size:12px;
}
.sync-mini-toolbar-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#60a5fa;
}
.sync-mini-toolbar-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sync-mini-callout{
  margin:0 6px 6px;
  padding:5px 3px;
  border:1px solid #3b82f6;
  border-radius:5px;
  background:#172554;
  color:#bfdbfe;
  font-size:6.5px;
  font-weight:900;
  text-align:center;
}
.sync-mini-menu{
  margin:0 6px 6px;
  padding:4px;
  border-radius:5px;
  background:#0f172a;
  font-size:6.5px;
}
.sync-mini-menu span,
.sync-mini-menu strong{
  display:block;
  padding:3px 4px;
}
.sync-mini-menu strong{
  border:1px solid #3b82f6;
  border-radius:4px;
  color:#bfdbfe;
}
.sync-mini-edit{
  padding:7px;
}
.sync-mini-edit b{
  display:block;
  margin-bottom:6px;
  color:#f8fafc;
  font-size:7px;
}
.sync-mini-edit span,
.sync-mini-edit strong{
  display:block;
  padding:6px;
  border:1px solid #475569;
  border-radius:4px;
  background:#0f172a;
  font-size:6.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sync-mini-edit strong{
  margin-top:5px;
  border-color:#3b82f6;
  color:#bfdbfe;
}
.sync-mini-suggestion{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 6px 6px;
  padding:6px;
  border:1px solid #3b82f6;
  border-radius:5px;
  background:#0f172a;
  font-size:6.5px;
}
.sync-mini-suggestion span{
  color:#94a3b8;
}
.sync-mini-suggestion strong{
  display:flex;
  align-items:center;
  gap:4px;
}
.sync-mini-globe{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 12px;
  width:12px;
  height:12px;
  color:#94a3b8;
}
.sync-mini-globe svg{
  width:12px;
  height:12px;
}
.sync-mini-globe circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.sync-mini-globe path{
  fill:currentColor;
}
body.light-mode .sync-visual-device,
body.light-mode .sync-visual-card{
  border-color:#cbd5e1 !important;
  background:#f8fafc !important;
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
}
body.light-mode .sync-visual-content>strong,
body.light-mode .sync-visual-content .sync-bookmark-name{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}

body.light-mode .sync-visual-content p,
body.light-mode .sync-bookmark-name small{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
body.light-mode .sync-visual-no,
body.light-mode .sync-visual-primary{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
body.light-mode .sync-mini-copy,
body.light-mode .sync-mini-browser,
body.light-mode .sync-mini-edit{
  border-color:#94a3b8 !important;
  background:#f1f5f9 !important;
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  box-shadow:0 4px 10px rgba(15,23,42,.12) !important;
}
body.light-mode .sync-mini-address,
body.light-mode .sync-mini-search,
body.light-mode .sync-mini-menu,
body.light-mode .sync-mini-edit span,
body.light-mode .sync-mini-edit strong,
body.light-mode .sync-mini-suggestion{
  background:#ffffff !important;
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
}
body.light-mode .sync-mini-address strong,
body.light-mode .sync-mini-edit b{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
body.light-mode .sync-mini-callout{
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  -webkit-text-fill-color:#1d4ed8 !important;
}
body.light-mode .sync-mini-menu strong{
  color:#1d4ed8 !important;
  -webkit-text-fill-color:#1d4ed8 !important;
}
body.light-mode .sync-mini-toolbar{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
@media(max-width:420px){
  .skill-sync-dialog{
    padding:14px;
  }
  .sync-visual-card{
    grid-template-columns:24px 86px minmax(0,1fr);
    gap:7px;
    padding:8px;
  }
  .sync-visual-no{
    width:23px;
    height:23px;
    font-size:10px;
  }
  .sync-mini-copy,
  .sync-mini-browser,
  .sync-mini-edit{
    width:86px;
    min-height:74px;
  }
  .sync-visual-content>strong{
    font-size:11px;
  }
  .sync-visual-content p{
    font-size:8.5px;
  }
  .sync-visual-primary{
    min-height:34px;
    font-size:9px;
  }
}

/* === APP VERSION 3.13.0: 表示カスタマイズ === */

:is(#viewSkill,#userDetailSkill) .sk-section h2{
  min-height:30px;
  display:flex;
  align-items:center;
  margin:2px 0 5px !important;
  padding:5px 7px !important;
  border-left:0 !important;
  border-radius:5px;
  color:#0b1020 !important;
  font-size:12px !important;
}
:is(#viewSkill,#userDetailSkill) .skill-hot-section h2{
  background:#e94b88 !important;
}
:is(#viewSkill,#userDetailSkill) .skill-other-section h2{
  background:#83c63d !important;
}

/* 文字サイズUP：主要画面・入力・モーダルを一段階大きくする */
body.text-size-up{
  font-size:17px;
}
body.text-size-up :is(button,input,select,textarea){
  font-size:15px !important;
}
body.text-size-up .score-lbl{ font-size:11px !important; }
body.text-size-up .p-tab-btn{ font-size:15px !important; }
body.text-size-up .sk-section h2{ font-size:15px !important; }
body.text-size-up .dc-card .dc-song-title{ font-size:15px !important; }
body.text-size-up .dc-card :is(.dc-lv,.dc-rate){ font-size:13px !important; }
body.text-size-up .dc-card .dc-skill{ font-size:14px !important; }
body.text-size-up .dc-card .p-badge{ font-size:13px !important; }
body.text-size-up .dc-card .hot-tag{ font-size:12px !important; }
body.text-size-up .dc-card :is(.fc-unified-badge,.opt-badge){ font-size:10px !important; }
body.text-size-up :is(.app-menu-item,.menu-entry,.user-list-row,.favorite-user-row){
  font-size:15px !important;
}
body.text-size-up :is(.feature-setting-row strong,.mypage-section-title,.rate-compare-title){
  font-size:15px !important;
}
body.text-size-up :is(.feature-setting-row small,.section-note,.feature-settings-status){
  font-size:12px !important;
}
body.text-size-up :is(.howto-body p,.feedback-body,.support-dialog-body,.skill-sync-dialog,.rate-compare-dialog){
  font-size:15px !important;
}
@media(max-width:700px){
  body.text-size-up.skill-target-columns :is(#viewSkill,#userDetailSkill) .sk-section h2{
    font-size:13px !important;
  }
}
/* 他ユーザー詳細の固定エリアも、ユーザー一覧と同じく最下部に影を付ける */
.user-detail-sticky{
  box-shadow:0 5px 10px rgba(0,0,0,.28) !important;
}
body.light-mode .user-detail-sticky{
  box-shadow:0 5px 10px rgba(15,23,42,.18) !important;
}

/* === APP VERSION 3.15.0: スキル対象ランキング === */
.skill-ranking-dialog{
  width:min(94vw,760px);
  max-height:min(92dvh,900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #334155;
  border-radius:14px;
  background:#0f172a;
  color:#f8fafc;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.skill-ranking-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid #334155;
  background:#111827;
}
.skill-ranking-title-line{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:16px;
  font-weight:900;
}
.skill-ranking-admin-badge{
  padding:2px 6px;
  border:1px solid #c2410c;
  border-radius:4px;
  background:#431407;
  color:#fdba74;
  font-size:8px;
  font-weight:900;
}
.skill-ranking-context{
  margin-top:3px;
  color:#94a3b8;
  font-size:9px;
  font-weight:800;
}
.skill-ranking-body{
  position:relative;
  min-height:0;
  padding:0 12px 12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:#64748b #0f172a;
  scrollbar-width:auto;
}
.skill-ranking-fixed-controls{
  position:sticky;
  top:0;
  z-index:5;
  margin:0 -12px;
  padding:6px 12px 7px;
  background:#0f172a;
  box-shadow:0 6px 10px rgba(0,0,0,.28);
}
.skill-ranking-range{
  display:grid;
  grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 82px;
  align-items:center;
  gap:5px;
}
.skill-ranking-sort-wrap{
  display:flex;
  flex-direction:column;
  gap:0;
  color:#94a3b8;
  font-size:9px;
  font-weight:900;
}
.skill-ranking-range select,
.skill-ranking-sort-wrap select{
  width:100%;
  height:34px;
  min-height:34px;
  padding:0 28px 0 10px;
  border:1px solid #475569;
  border-radius:7px;
  background-color:#0f172a;
  color:#f8fafc;
  font-size:12px;
  font-weight:900;
}
.skill-ranking-range-separator{
  color:#94a3b8;
  text-align:center;
  font-weight:900;
}
.skill-ranking-load{
  height:34px;
  min-height:34px;
  border:1px solid #3b82f6;
  border-radius:7px;
  background:#3b82f6;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.skill-ranking-load:disabled{opacity:.55;}
.skill-ranking-status{
  min-width:0;
  padding:0 2px;
  color:#94a3b8;
  font-size:9px;
  font-weight:800;
  line-height:1.15;
}
.skill-ranking-status.error{color:#fca5a5;}
.skill-ranking-control-labels{
  display:grid;
  grid-template-columns:42% minmax(0,1fr);
  align-items:end;
  gap:8px;
  margin-top:4px;
}
.skill-ranking-sort-label{
  padding-left:2px;
  color:#94a3b8;
  font-size:9px;
  font-weight:900;
  line-height:1.15;
}
.skill-ranking-controls{
  display:flex;
  align-items:end;
  gap:8px;
  margin-top:2px;
}
.skill-ranking-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:0 0 42%;
  width:42%;
  max-width:220px;
  height:34px;
  padding:2px;
  border:1px solid #334155;
  border-radius:8px;
  background:#111827;
  box-sizing:border-box;
}
.skill-ranking-tab{
  height:28px;
  min-height:28px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#94a3b8;
  font-size:10px;
  font-weight:900;
}
.skill-ranking-tab.active[data-ranking-category="HOT"]{
  background:#9d174d;
  color:#fff;
}
.skill-ranking-tab.active[data-ranking-category="OTHER"]{
  background:#3f6212;
  color:#fff;
}
.skill-ranking-sort-wrap{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}
.skill-ranking-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:5px;
}
.skill-ranking-row{
  padding:5px 7px;
  border:1px solid #334155;
  border-radius:8px;
  background:#111827;
}
.skill-ranking-row-top{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 54px 48px;
  align-items:center;
  gap:6px;
  min-width:0;
}
.skill-ranking-position{
  color:#60a5fa;
  font-size:11px;
  font-weight:900;
  line-height:1.1;
}
.skill-ranking-song{
  min-width:0;
  overflow:hidden;
  color:#f8fafc;
  font-size:11px;
  font-weight:900;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-ranking-row .p-badge{
  width:54px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:9px;
  line-height:1;
}
.skill-ranking-level{
  color:#94a3b8;
  font-size:9px;
  font-weight:900;
  line-height:1.1;
  text-align:right;
}
.skill-ranking-metrics{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr;
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid rgba(148,163,184,.24);
}
.skill-ranking-metric{
  min-width:0;
  padding:0 7px;
  border-left:1px solid rgba(148,163,184,.2);
}
.skill-ranking-metric:first-child{
  padding-left:0;
  border-left:0;
}
.skill-ranking-metric:last-child{padding-right:0;}
.skill-ranking-metric small{
  display:block;
  color:#94a3b8;
  font-size:8px;
  font-weight:900;
  line-height:1.1;
}
.skill-ranking-metric strong{
  display:block;
  margin-top:1px;
  color:#f8fafc;
  font-size:12px;
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
}
.skill-ranking-metric em{
  display:block;
  margin-top:0;
  color:#94a3b8;
  font-size:8px;
  font-style:normal;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
}
.skill-ranking-comparison.positive{color:#86efac;}
.skill-ranking-comparison.negative{color:#fca5a5;}
.skill-ranking-comparison.neutral{color:#e2e8f0;}
.skill-ranking-empty{
  padding:24px 10px;
  border:1px dashed #475569;
  border-radius:8px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
body.light-mode .skill-ranking-dialog,
body.light-mode .skill-ranking-head,
body.light-mode .skill-ranking-tabs,
body.light-mode .skill-ranking-row{
  background:#f8fafc;
  color:#111827;
  border-color:#94a3b8;
}
body.light-mode .skill-ranking-body{
  background:#f1f5f9;
  scrollbar-color:#94a3b8 #f1f5f9;
}
body.light-mode .skill-ranking-fixed-controls{
  background:#f1f5f9;
  box-shadow:0 6px 10px rgba(15,23,42,.18);
}
body.light-mode .skill-ranking-song,
body.light-mode .skill-ranking-metric strong{
  color:#111827;
}
body.light-mode .skill-ranking-comparison.neutral{color:#475569;}
body.light-mode .skill-ranking-range select,
body.light-mode .skill-ranking-sort-wrap select{
  border-color:#94a3b8;
  background-color:#fff;
  color:#111827;
}
@media(max-width:560px){
  .skill-ranking-dialog{width:96vw;max-height:94dvh;}
  .skill-ranking-head{padding:11px;}
  .skill-ranking-body{padding:0 9px 9px;}
  .skill-ranking-fixed-controls{
    margin:0 -9px;
    padding:5px 9px 6px;
  }
  .skill-ranking-range{
    grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 76px;
  }
  .skill-ranking-controls{align-items:stretch;}
  .skill-ranking-tabs{flex-basis:42%;width:42%;max-width:none;align-self:end;}
  .skill-ranking-sort-wrap{width:auto;flex:1 1 auto;}
  .skill-ranking-row-top{grid-template-columns:28px minmax(0,1fr) 50px 43px;gap:4px;}
  .skill-ranking-row .p-badge{width:50px;}
  .skill-ranking-metric{padding:0 5px;}
}

/* APP VERSION 3.18.4: 理論値のCLASSIC登録削除・大量スコア分割取得 */
select:not([multiple]){
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:38px !important;
  background-repeat:no-repeat !important;
  background-size:16px 16px !important;
  background-position:calc(100% - 12px) 50% !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.light-mode select:not([multiple]){
  color-scheme:light !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  background-color:#f8fafc !important;
  border-color:#94a3b8 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
}
/* iPhone Safari対策の外付け矢印も、通常selectと同じ濃い▼を使う */
#domModal .select-arrow-wrap > select{
  background-image:none !important;
}
#domModal .select-arrow-wrap::after{
  top:50% !important;
  right:12px !important;
  width:16px !important;
  height:16px !important;
  border:0 !important;
  background-repeat:no-repeat !important;
  background-size:16px 16px !important;
  background-position:center !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  transform:translateY(-50%) !important;
}
body.light-mode #domModal .select-arrow-wrap::after{
  right:12px !important;
  width:12px !important;
  height:12px !important;
  border:0 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%) !important;
  background-position:0 50%,6px 50% !important;
  background-size:6px 6px,6px 6px !important;
  background-repeat:no-repeat !important;
  transform:translateY(-50%) !important;
}

/* 後段のライトモード共通指定より9500帯を優先する。 */
body.light-mode .user-list-row.user-list-row-sparkle-rainbow,
body.light-mode .user-list-row.user-list-row-sparkle-rainbow:active {
  border:2px solid #db2777 !important;
  background:linear-gradient(90deg,rgba(219,39,119,.16),rgba(124,58,237,.13),rgba(14,165,233,.11),#d8dde5 65%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62) !important;
  animation:none !important;
  filter:none !important;
}
body.light-mode .dc-card:has(.skill-box-sparkle-rainbow)::before {
  padding:2.3px !important;
  background-image:
    linear-gradient(rgba(255,255,255,var(--skill-border-light-alpha)) 0 100%),
    var(--song-skill-border, #475569) !important;
  background-position:0 0,0 0 !important;
  background-size:100% 100%,100% 100% !important;
  background-repeat:no-repeat,no-repeat !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:none !important;
  animation:skill-sparkle-border-pulse-light var(--skill-sparkle-cycle) ease-in-out infinite !important;
}

body.skill-target-columns #recordTypeFilter {
  display:none !important;
}
body.skill-target-columns .record-filter-row {
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
body.skill-target-columns .record-column-placeholder {
  min-width:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ダークモードの登録曲編集ボタンは、通常・横並びとも青背景＋白文字に統一。 */
body:not(.light-mode) #viewAllManage .dc-edit .m-action-btn.btn-e {
  background:#3b82f6 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:1px solid #1d4ed8 !important;
}
body:not(.light-mode) #viewAllManage .dc-edit .m-action-btn.btn-e:active {
  background:#2563eb !important;
}

/* 自分のスキル対象から開いた詳細だけ、4段目に編集ボタンを表示する。 */
.rate-compare-edit-area {
  border-top:1px solid #334155;
}
.rate-compare-edit-button {
  border:0;
  border-radius:8px;
  background:#3b82f6;
  color:#ffffff;
  font-weight:900;
}
.rate-compare-edit-button:active {
  background:#2563eb;
}
body.light-mode .rate-compare-edit-area {
  border-top-color:#cbd5e1;
}
body.light-mode .rate-compare-edit-button {
  background:#f3f4f6 !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  border:1px solid #94a3b8 !important;
}
body.light-mode .rate-compare-edit-button:active {
  background:#eff6ff !important;
}

/* ライトモードの登録曲編集ボタンも、白背景・青文字・枠ありに統一。 */
body.light-mode #viewAllManage .dc-edit .m-action-btn.btn-e {
  background:#f3f4f6 !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  border:1px solid #94a3b8 !important;
  box-shadow:none !important;
}
body.light-mode #viewAllManage .dc-edit .m-action-btn.btn-e:active {
  background:#eff6ff !important;
}

/* APP VERSION 3.18.5: 管理画面のライトモード対応 */
body.light-mode .admin-modal {
  color-scheme:light;
  background:#f8fafc !important;
  color:#111827 !important;
}
body.light-mode .admin-header {
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom-color:#cbd5e1 !important;
  box-shadow:0 3px 8px rgba(15,23,42,.12);
}
body.light-mode .admin-title,
body.light-mode .admin-card-title {
  color:#111827 !important;
}
body.light-mode .admin-code-version,
body.light-mode .admin-card-meta,
body.light-mode .admin-request-title-wrap label,
body.light-mode .admin-master-summary,
body.light-mode .admin-master-pager {
  color:#64748b !important;
}
body.light-mode .admin-close {
  background:#ffffff !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  border:1px solid #94a3b8 !important;
}
body.light-mode .admin-tab {
  background:#e2e8f0 !important;
  color:#475569 !important;
  -webkit-text-fill-color:#475569 !important;
  border:1px solid transparent !important;
}
body.light-mode .admin-tab.active {
  background:#3b82f6 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#2563eb !important;
}
body.light-mode .admin-toolbar input {
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  caret-color:#111827 !important;
  border-color:#94a3b8 !important;
  box-shadow:none !important;
}
body.light-mode .admin-toolbar input::placeholder {
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
  opacity:1 !important;
}
body.light-mode .admin-toolbar input:focus {
  outline:2px solid rgba(37,99,235,.20) !important;
  border-color:#2563eb !important;
}
body.light-mode .admin-toolbar button {
  background:#3b82f6 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body.light-mode .admin-card {
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #cbd5e1 !important;
  box-shadow:0 1px 3px rgba(15,23,42,.12) !important;
}
body.light-mode .master-sheet-wrap,
body.light-mode .master-sheet,
body.light-mode .master-sheet td {
  background:#ffffff !important;
  color:#111827 !important;
}
body.light-mode .master-sheet th {
  background:#e2e8f0 !important;
  color:#111827 !important;
}
body.light-mode .master-sheet th,
body.light-mode .master-sheet td {
  border-color:#cbd5e1 !important;
}
body.light-mode .master-sheet input[type="text"],
body.light-mode .master-sheet input[type="number"],
body.light-mode .request-title-edit,
body.light-mode .request-level-edit,
body.light-mode .request-part-edit,
body.light-mode .admin-form-sheet input,
body.light-mode .admin-form-sheet select,
body.light-mode .admin-form-sheet textarea {
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  caret-color:#111827 !important;
  border-color:#94a3b8 !important;
}
body.light-mode .master-sheet input::placeholder,
body.light-mode .request-title-edit::placeholder,
body.light-mode .request-level-edit::placeholder,
body.light-mode .admin-form-sheet input::placeholder,
body.light-mode .admin-form-sheet textarea::placeholder {
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
  opacity:1 !important;
}
body.light-mode .admin-master-pager button {
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}
body.light-mode .admin-form-sheet {
  background:#ffffff !important;
  color:#111827 !important;
}
body.light-mode .admin-form-sheet label {
  color:#475569 !important;
}
body.light-mode .feedback-admin-message,
body.light-mode .feedback-admin-reply-box {
  background:#f8fafc !important;
  color:#1e293b !important;
  border-color:#cbd5e1 !important;
}
body.light-mode .feedback-admin-reply-label {
  color:#475569 !important;
}

/* APP VERSION 3.19.1: 登録曲の編集ボタンをスキル値と同幅に統一 */
#viewAllManage .dc-edit {
  justify-content:flex-end !important;
}
#viewAllManage .dc-edit .m-action-btn.btn-e,
body.light-mode #viewAllManage .dc-edit .m-action-btn.btn-e {
  width:65px !important;
  min-width:65px !important;
  max-width:65px !important;
  min-height:24px !important;
  height:24px !important;
  padding:2px 6px !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
}
.rate-compare-edit-area {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:8px 14px 12px;
}
.rate-compare-edit-button {
  width:auto;
  min-width:0;
  min-height:32px;
  padding:5px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1.2;
}

/* APP VERSION 3.19.1: 全ユーザー向け共有対象選択 */
.skill-share-dialog {
  width:min(92vw,420px);
  overflow:hidden;
  border:1px solid #334155;
  border-radius:14px;
  background:#0f172a;
  color:#f8fafc;
  box-shadow:0 20px 50px rgba(0,0,0,.48);
}
.skill-share-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px 10px;
}
.skill-share-head strong {
  font-size:16px;
  font-weight:900;
}
.skill-share-head .menu-back-btn {
  flex:0 0 auto;
}
.skill-share-body {
  padding:8px 16px 16px;
}
.skill-share-note {
  margin:0 0 10px;
  color:#94a3b8;
  font-size:11px;
  line-height:1.5;
}
.skill-share-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:12px;
}
.skill-share-option {
  min-width:0;
  min-height:42px;
  padding:6px 4px;
  border:1px solid #475569;
  border-radius:9px;
  background:#1e293b;
  color:#cbd5e1;
  font-size:12px;
  font-weight:900;
}
.skill-share-option.active {
  border-color:#60a5fa;
  background:#3b82f6;
  color:#fff;
  box-shadow:0 0 0 1px rgba(96,165,250,.25);
}
.skill-share-execute {
  width:100%;
  min-height:44px;
  border:0;
  border-radius:9px;
  background:#3b82f6;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.skill-share-execute:disabled {
  opacity:.65;
}
body.light-mode .skill-share-dialog {
  border-color:#9aacc4;
  background:#f8fafc;
  color:#0f172a;
  box-shadow:0 18px 45px rgba(15,23,42,.24);
}
body.light-mode .skill-share-note {
  color:#64748b;
}
body.light-mode .skill-share-option {
  border-color:#9aacc4;
  background:#fff;
  color:#0f172a;
}
body.light-mode .skill-share-option.active {
  border-color:#2563eb;
  background:#3b82f6;
  color:#fff;
}

/* === APP VERSION 4.0.1: 文字サイズUP適用範囲の再調整 === */

/* 上部VERSIONは、ダークでは視認性を上げ、ライトでは文字色を一段濃くする。 */
.header-active-version{
  color:#94a3b8;
}
body.light-mode .header-active-version{
  color:#475569 !important;
}

/* 文字サイズUPで意図せず縮小していた箇所は、通常時のサイズを維持する。 */
body.text-size-up .menu-entry{
  font-size:20px !important;
}
body.text-size-up .score-val{
  font-size:18px !important;
}
body.text-size-up .favorite-toggle{
  font-size:20px !important;
}
body.text-size-up .mypage-sheet input{
  font-size:16px !important;
}

/* 上部VERSION */
body.text-size-up .header-active-version{
  font-size:10px !important;
  flex:0 0 auto !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  letter-spacing:0 !important;
}

/* 登録タブ：通常表示と横並び表示で、編集ボタンの指定サイズを分ける。 */
body.text-size-up:not(.skill-target-columns) #viewAllManage .dc-edit .m-action-btn.btn-e{
  font-size:15px !important;
}
body.text-size-up.skill-target-columns #viewAllManage .dc-card-manage .dc-edit .m-action-btn.btn-e{
  font-size:12px !important;
}

body.text-size-up .user-list-name{
  font-size:12px !important;
}
body.text-size-up :is(.user-list-skill-value,.user-list-total-skill){
  font-size:11px !important;
}

/* 曲詳細 */
body.text-size-up .rate-personal-best-label{
  font-size:11px !important;
}
body.text-size-up .rate-personal-best-value{
  font-size:14px !important;
}
body.text-size-up .rate-personal-best-version{
  font-size:11px !important;
}
body.text-size-up .rate-personal-best-badges :is(.fc-unified-badge,.opt-badge,.history-option-badge){
  font-size:10px !important;
}
body.text-size-up .option-share-title{
  font-size:10px !important;
}
body.text-size-up .rate-compare-section-title{
  font-size:11px !important;
}
body.text-size-up .rate-value{
  font-size:15px !important;
}
body.text-size-up .rate-skill{
  font-size:12px !important;
}
body.text-size-up .rate-comment-history{
  font-size:13px !important;
}

/* 曲登録・編集 */
body.text-size-up #domModal .f-group label{
  font-size:12px !important;
}
body.text-size-up #domModal :is(
  #formTitle,
  #partSelect,
  #formLevel,
  #formRate,
  #formFc,
  #formOption,
  #formDmOption,
  #formPrivateComment
){
  font-size:14px !important;
}
body.text-size-up #domModal :is(.level-correction-title,.master-request-title){
  font-size:11px !important;
}
body.text-size-up #domModal :is(.level-correction-note,.master-request-note){
  font-size:10px !important;
}
body.text-size-up #domModal #btnOpenLevelCorrection,
body.text-size-up #domModal #btnSendLevelCorrection{
  font-size:11px !important;
}
body.text-size-up #domModal .score-private-comment-note{
  font-size:10px !important;
}
body.text-size-up #domModal .btn-delete-editing-score,
body.text-size-up #domModal :is(.btn-submit,.btn-cancel){
  font-size:14px !important;
}

/* MENU / How to use / マイページ */
body.text-size-up .app-menu-version label{
  font-size:11px !important;
}
body.text-size-up .howto-body b{
  font-size:15px !important;
}
body.text-size-up .mypage-title-row h3{
  font-size:17px !important;
}
body.text-size-up .mypage-sheet > label,
body.text-size-up .mypage-x-block > label{
  font-size:12px !important;
}

/* スキル対象同期 */
body.text-size-up .skill-sync-kicker{
  font-size:11px !important;
}
body.text-size-up .skill-sync-status{
  font-size:12px !important;
}
body.text-size-up .sync-visual-content > strong{
  font-size:14px !important;
}
body.text-size-up .sync-visual-content p{
  font-size:11.5px !important;
}
@media(max-width:420px){
  body.text-size-up .sync-visual-content > strong{
    font-size:13px !important;
  }
  body.text-size-up .sync-visual-content p{
    font-size:10.5px !important;
  }
}

/* スキル対象の画像共有 */
body.text-size-up .skill-share-note{
  font-size:14px !important;
}

/* スキル対象ランキング */
body.text-size-up .skill-ranking-context,
body.text-size-up :is(.skill-ranking-status,.skill-ranking-sort-label){
  font-size:11px !important;
}
body.text-size-up :is(.skill-ranking-position,.skill-ranking-song){
  font-size:12px !important;
}
body.text-size-up .skill-ranking-row :is(.p-badge,.skill-ranking-level){
  font-size:11px !important;
}
body.text-size-up .skill-ranking-metric small{
  font-size:10px !important;
}
body.text-size-up .skill-ranking-empty{
  font-size:12px !important;
}

/* === APP VERSION 4.1.0: GF初期オプション / アカウント切り替え === */
.feature-setting-select{
  flex:0 0 auto;
  width:124px;
  min-height:38px;
  padding:5px 32px 5px 10px;
  border:1px solid #475569;
  border-radius:7px;
  background-color:#0f172a;
  color:#f8fafc;
  font-size:12px;
  font-weight:900;
}

/* 青背景の主要ボタンは、ダーク・ライトとも白文字を標準とする。 */
.app-primary-button,
body.light-mode button.app-primary-button{
  border-color:#1d4ed8 !important;
  background:#3b82f6 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.app-primary-button:disabled,
body.light-mode button.app-primary-button:disabled{
  border-color:#94a3b8 !important;
  background:#cbd5e1 !important;
  color:#475569 !important;
  -webkit-text-fill-color:#475569 !important;
}

.mypage-user-switch{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #334155;
}
.mypage-user-switch-button{
  width:100%;
  min-height:42px;
  margin-bottom:5px;
}
body.light-mode .mypage-user-switch{
  border-color:#cbd5e1;
}
body.light-mode .feature-setting-select{
  border-color:#94a3b8 !important;
  background-color:#ffffff !important;
  color:#111827 !important;
}

.account-switch-dialog{
  width:min(92vw,520px);
  max-height:min(90dvh,760px);
  overflow:auto;
}
.account-switch-body{
  display:grid;
  gap:10px;
}
.account-switch-list{
  display:grid;
  gap:7px;
}
.account-switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid #334155;
  border-radius:9px;
  background:#111827;
}
.account-switch-row.current{
  border-color:#2563eb;
  background:#172554;
}
.account-switch-row > div:first-child{
  display:grid;
  gap:2px;
  min-width:0;
}
.account-switch-row strong{
  overflow:hidden;
  color:#f8fafc;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-switch-row small,
.account-switch-empty,
.account-switch-note{
  color:#94a3b8;
  font-size:10px;
}
.account-switch-actions{
  display:flex;
  gap:5px;
  flex:0 0 auto;
}
.account-switch-actions button{
  min-height:32px;
  padding:5px 9px;
  border:1px solid #2563eb;
  border-radius:7px;
  background:#3b82f6;
  color:#ffffff;
  font-size:11px;
  font-weight:900;
}
.account-switch-actions button:disabled{
  border-color:#475569;
  background:#334155;
  color:#cbd5e1;
}
.account-switch-actions .account-switch-remove{
  width:auto;
  min-height:32px;
  border-color:#7f1d1d;
  background:#2a1115;
  color:#fca5a5;
}
.account-switch-add{
  display:grid;
  gap:7px;
  padding-top:10px;
  border-top:1px solid #334155;
}
.account-switch-add strong{
  font-size:13px;
}
.account-switch-add input{
  width:100%;
  min-height:42px;
  padding:8px 10px;
  border:1px solid #475569;
  border-radius:7px;
  background:#0f172a;
  color:#f8fafc;
  font-size:16px;
  box-sizing:border-box;
}
.account-switch-add-button{
  min-height:42px;
  border:0;
  border-radius:8px;
  background:#3b82f6;
  color:#ffffff;
  font-weight:900;
}
.account-switch-status{
  min-height:1.3em;
  color:#fca5a5;
  font-size:10px;
  white-space:pre-wrap;
}
#accountSwitchCaptchaHost .auth-captcha-wrap{
  margin:0;
}
body.light-mode .account-switch-row{
  border-color:#cbd5e1;
  background:#ffffff;
}
body.light-mode .account-switch-row.current{
  border-color:#2563eb;
  background:#eff6ff;
}
body.light-mode .account-switch-row strong,
body.light-mode .account-switch-add strong{
  color:#111827;
}
body.light-mode .account-switch-row small,
body.light-mode .account-switch-empty,
body.light-mode .account-switch-note{
  color:#64748b;
}
body.light-mode .account-switch-actions .account-switch-remove{
  border-color:#ef4444;
  background:#fee2e2;
  color:#b91c1c;
  -webkit-text-fill-color:#b91c1c;
}
body.light-mode .account-switch-add{
  border-color:#cbd5e1;
}
body.light-mode .account-switch-add input{
  border-color:#94a3b8;
  background:#ffffff;
  color:#111827;
}

/* 要望・不具合 */
body.text-size-up :is(
  .feedback-env-note,
  .feedback-admin-env,
  .feedback-history-env,
  .feedback-history-head span,
  .feedback-history-date,
  .feedback-history-status
){
  font-size:12px !important;
}

/* === APP VERSION 4.2.0: 設定利用率 / 管理者ユーザー日時ソート === */
#adminUserToolbar{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(112px,auto) 74px;
  align-items:center;
}
#adminUserToolbar select{
  min-height:42px;
  padding:7px 30px 7px 9px;
  border:1px solid #334155;
  border-radius:7px;
  background-color:#111827;
  color:#f8fafc;
  font-size:11px;
  font-weight:900;
}
.admin-card-meta b{
  color:inherit;
  font-weight:900;
}
.admin-usage-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  padding:11px;
  border:1px solid #334155;
  border-radius:9px;
  background:#111827;
}
.admin-usage-summary > div{
  display:grid;
  gap:3px;
}
.admin-usage-summary strong{
  color:#f8fafc;
  font-size:14px;
}
.admin-usage-summary small{
  color:#94a3b8;
  font-size:10px;
}
.admin-usage-summary button{
  min-height:34px;
  padding:5px 10px;
  border:0;
  border-radius:7px;
  background:#3b82f6;
  color:#ffffff;
  font-size:11px;
  font-weight:900;
}
.admin-usage-section-title{
  margin:12px 2px 6px;
  color:#cbd5e1;
  font-size:12px;
  font-weight:900;
}
.admin-usage-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.admin-usage-options{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.admin-usage-card{
  display:grid;
  gap:3px;
  padding:10px;
  border:1px solid #334155;
  border-radius:8px;
  background:#ffffff;
  color:#111827;
}
.admin-usage-card span{
  min-height:2.6em;
  color:#475569;
  font-size:10px;
  font-weight:900;
}
.admin-usage-card strong{
  color:#111827;
  font-size:19px;
}
.admin-usage-card small{
  color:#64748b;
  font-size:9px;
}

.admin-version-manager{
  display:grid;
  gap:10px;
}
.admin-version-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border:1px solid #334155;
  border-radius:8px;
  background:#0f172a;
}
.admin-version-heading h2{
  margin:0;
  color:#f8fafc;
  font-size:15px;
}
.admin-version-heading p{
  margin:3px 0 0;
  color:#94a3b8;
  font-size:10px;
  line-height:1.45;
}
.admin-version-heading button,
.admin-version-actions button{
  min-height:36px;
  border:1px solid #475569;
  border-radius:7px;
  background:#1e293b;
  color:#f8fafc;
  font-weight:900;
}
.admin-version-heading button{
  padding:0 12px;
  background:#3b82f6;
  border-color:#2563eb;
}
.admin-version-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-version-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #334155;
  border-radius:8px;
  background:#111827;
  color:#f8fafc;
}
.admin-version-info{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.admin-version-name{
  font-weight:900;
  overflow-wrap:anywhere;
}
.admin-version-current{
  padding:2px 6px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.admin-version-info small{
  flex-basis:100%;
  color:#94a3b8;
  font-size:9px;
}
.admin-version-actions{
  flex:0 0 auto;
  display:flex;
  gap:6px;
}
.admin-version-actions button{
  min-width:38px;
  padding:4px 10px;
}
.admin-version-actions .btn-version-delete{
  color:#fecaca;
  border-color:#7f1d1d;
  background:#450a0a;
}
.admin-version-actions button:disabled{
  opacity:.35;
  cursor:not-allowed;
}
body.light-mode .admin-version-heading,
body.light-mode .admin-version-row{
  border-color:#94a3b8;
  background:#ffffff;
  color:#111827;
}
body.light-mode .admin-version-heading h2,
body.light-mode .admin-version-name{
  color:#111827;
}
body.light-mode .admin-version-heading p,
body.light-mode .admin-version-info small{
  color:#64748b;
}
body.light-mode .admin-version-actions button{
  border-color:#94a3b8;
  background:#e2e8f0;
  color:#111827;
}
body.light-mode .admin-version-actions .btn-version-delete{
  color:#b91c1c;
  border-color:#fca5a5;
  background:#fef2f2;
}
@media(max-width:520px){
  .admin-version-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .admin-version-actions{
    width:100%;
  }
  .admin-version-actions button{
    flex:1;
  }
}
body.light-mode #adminUserToolbar select{
  border-color:#94a3b8 !important;
  background-color:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
body.light-mode .admin-usage-summary{
  border-color:#cbd5e1;
  background:#ffffff;
}
body.light-mode .admin-usage-summary strong{
  color:#111827;
}
body.light-mode .admin-usage-summary small,
body.light-mode .admin-usage-section-title{
  color:#64748b;
}
body.light-mode .admin-usage-card{
  border-color:#cbd5e1;
  background:#ffffff;
}
@media(max-width:620px){
  #adminUserToolbar input,
  #adminUserToolbar select{
    min-width:0;
    font-size:10px;
  }
  .admin-usage-grid,
  .admin-usage-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* === APP VERSION 4.3.0: 管理者向けスキル対象履歴 === */
.skill-history-dialog{
  width:min(620px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #334155;
  border-radius:14px;
  background:#0f172a;
  color:#e2e8f0;
  box-shadow:0 18px 50px rgba(0,0,0,.42);
}
.skill-history-head{
  min-height:58px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #334155;
}
.skill-history-head > div{min-width:0;}
.skill-history-head strong{font-size:18px;font-weight:900;}
.skill-history-context{
  margin-top:3px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
}
#btnCloseSkillHistory.menu-back-btn{
  min-width:52px;
  height:34px;
  padding:0 11px;
  border:1px solid #64748b;
  border-radius:8px;
  background:#111827;
  color:#e2e8f0;
  font-size:12px;
  font-weight:900;
}
.skill-history-body{
  min-height:0;
  padding:12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.skill-history-save,
.skill-history-share{
  width:100%;
  min-height:46px;
  border:0;
  border-radius:9px;
  background:#3b82f6;
  color:#fff;
  font-size:14px;
  font-weight:900;
}
.skill-history-save-title{
  margin:0 0 7px;
  color:#e2e8f0;
  font-size:13px;
  font-weight:900;
}
.skill-history-save-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.skill-history-save-option{
  min-height:38px;
  border:1px solid #64748b;
  border-radius:8px;
  background:#111827;
  color:#e2e8f0;
  font-size:12px;
  font-weight:900;
}
.skill-history-save-option.active,
.skill-history-save-submit{
  border-color:#2563eb;
  background:#3b82f6;
  color:#fff;
}
.skill-history-status{
  min-height:15px;
  padding:4px 2px 2px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
}
.skill-history-list-title{
  margin:2px 1px 4px;
  color:#cbd5e1;
  font-size:11px;
  font-weight:900;
}
.skill-history-list{display:grid;gap:4px;}
.skill-history-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:5px;
}
.skill-history-row.has-compare{
  grid-template-columns:minmax(0,1fr) auto auto auto;
}
.skill-history-summary{
  min-width:0;
  min-height:38px;
  padding:5px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  border:1px solid #334155;
  border-radius:7px;
  background:#111827;
  color:#e2e8f0;
  font-size:11px;
  font-weight:900;
  text-align:left;
}
.skill-history-date{
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.skill-history-value{
  flex:0 0 auto;
  font-size:14px;
  font-weight:900;
  font-family:"SFMono-Regular","Roboto Mono","Noto Sans Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:0;
  white-space:nowrap;
}
.skill-history-display,
.skill-history-delete{
  min-width:46px;
  padding:0 5px;
  border-radius:7px;
  font-size:11px;
  font-weight:900;
}
.skill-history-display{
  border:1px solid #3b82f6;
  background:#172554;
  color:#bfdbfe;
}
.skill-history-delete{
  border:1px solid #ef4444;
  background:#3f171b;
  color:#fca5a5;
}
.skill-history-compare{
  min-width:46px;
  padding:0 5px;
  border:1px solid #3b82f6;
  border-radius:7px;
  background:#172554;
  color:#bfdbfe;
  font-size:11px;
  font-weight:900;
}
@media (max-width:430px){
  .skill-history-row{gap:3px;}
  .skill-history-summary{
    padding:4px 5px;
    gap:4px;
    font-size:10px;
  }
  .skill-history-value{font-size:13px;}
  .skill-history-display,
  .skill-history-compare,
  .skill-history-delete{
    min-width:40px;
    padding:0 3px;
    font-size:10px;
  }
}
.skill-history-unified-select{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-bottom:8px;
}
.skill-history-unified-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.skill-history-unified-action{
  min-width:0;
  min-height:42px;
  padding:5px 3px;
  border:1px solid #2563eb;
  border-radius:8px;
  background:#3b82f6;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1.25;
}
.skill-history-unified-action:disabled{
  opacity:.55;
  cursor:wait;
}
.skill-history-more{
  width:100%;
  min-height:40px;
  margin-top:8px;
  border:1px solid #475569;
  border-radius:8px;
  background:#1e293b;
  color:#e2e8f0;
  font-size:12px;
  font-weight:900;
}
.skill-history-empty{
  padding:24px 10px;
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.skill-history-preview-actions{
  position:sticky;
  top:-12px;
  z-index:2;
  padding:0 0 10px;
  background:#0f172a;
}
.skill-history-preview-image{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #334155;
  border-radius:8px;
  background:#07101d;
}
body.light-mode .skill-history-dialog{
  border-color:#94a3b8;
  background:#f3f4f6;
  color:#0f172a;
  box-shadow:0 18px 45px rgba(15,23,42,.24);
}
body.light-mode .skill-history-head{border-color:#cbd5e1;}
body.light-mode .skill-history-context,
body.light-mode .skill-history-status{color:#64748b;}
body.light-mode .skill-history-list-title{color:#334155;}
body.light-mode #btnCloseSkillHistory.menu-back-btn{
  border-color:#94a3b8;
  background:#f8fafc;
  color:#2563eb;
}
body.light-mode .skill-history-summary{
  border-color:#9aacc4;
  background:#fff;
  color:#0f172a;
}
body.light-mode .skill-history-summary strong{color:#0f172a;}
body.light-mode .skill-history-save-title{color:#0f172a;}
body.light-mode .skill-history-save-option{
  border-color:#9aacc4;
  background:#fff;
  color:#0f172a;
}
body.light-mode .skill-history-save-option.active,
body.light-mode .skill-history-save-submit{
  border-color:#2563eb;
  background:#3b82f6;
  color:#fff;
}
body.light-mode .skill-history-delete{
  background:#fff1f2;
  color:#dc2626;
}
body.light-mode .skill-history-display,
body.light-mode .skill-history-compare{
  background:#eff6ff;
  color:#2563eb;
}
body.light-mode .skill-history-unified-action{
  border-color:#2563eb;
  background:#3b82f6;
  color:#fff;
}
body.light-mode .skill-history-more{
  border-color:#9aacc4;
  background:#fff;
  color:#2563eb;
}
body.light-mode .skill-history-preview-actions{background:#f3f4f6;}
body.light-mode .skill-history-preview-image{border-color:#94a3b8;}
.skill-history-save-option[data-skill-history-instrument="GF"].active,
body.light-mode .skill-history-save-option[data-skill-history-instrument="GF"].active{
  border-color:#e8336a;
  background:#e8336a;
  color:#fff;
}
.skill-history-save-option[data-skill-history-instrument="DM"].active,
body.light-mode .skill-history-save-option[data-skill-history-instrument="DM"].active{
  border-color:#3caa2a;
  background:#3caa2a;
  color:#fff;
}
.skill-history-save-option[data-skill-unified-selection="GF"].active,
body.light-mode .skill-history-save-option[data-skill-unified-selection="GF"].active{
  border-color:#e8336a;
  background:#e8336a;
  color:#fff;
}
.skill-history-save-option[data-skill-unified-selection="DM"].active,
body.light-mode .skill-history-save-option[data-skill-unified-selection="DM"].active{
  border-color:#3caa2a;
  background:#3caa2a;
  color:#fff;
}
.skill-history-save-option[data-skill-unified-selection="BOTH"].active,
body.light-mode .skill-history-save-option[data-skill-unified-selection="BOTH"].active{
  border-color:#926f4a;
  background:#926f4a;
  color:#fff;
}

/* === APP VERSION 4.4.2: MENUを用途別に整理 === */
#menuMask .app-menu-group-label{
  margin:9px 2px 3px;
  padding-top:9px;
  border-top:1px solid #253247;
  color:#94a3b8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
#menuMask .app-menu-head + .app-menu-group-label{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
#menuMask .app-menu-item{
  margin:4px 0;
  padding:12px;
}
body.light-mode #menuMask .app-menu-group-label{
  border-color:#cbd5e1;
  color:#64748b;
}
body.text-size-up #menuMask .app-menu-group-label{
  font-size:10px !important;
}

/* === APP VERSION 4.7.0: 全ユーザー向け曲名分類／管理者向け一括保存 === */
.admin-song-picker{
  display:grid;
  grid-template-columns:minmax(112px, .72fr) minmax(0, 1.7fr);
  gap:8px;
  margin-top:7px;
}
.admin-song-picker.hidden{ display:none !important; }
.admin-song-picker-field > label{
  display:block;
  margin:0 0 5px;
  font-size:12px;
  font-weight:900;
}
.admin-song-picker select{
  width:100%;
  min-height:42px;
  font-size:13px;
}
.master-initial-cell{
  min-width:108px;
  width:108px;
}
#adminMasterTable .master-initial-cell select,
#adminMasterTable .master-order-cell input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
#btnAdminSaveAllSongs{
  background:#059669;
  white-space:nowrap;
}
#btnAdminSaveAllSongs:disabled{
  opacity:.55;
}
body.light-mode #btnAdminSaveAllSongs{
  background:#059669;
  color:#fff;
}
@media (max-width:600px){
  .admin-song-picker{
    grid-template-columns:112px minmax(0, 1fr);
    gap:6px;
  }
  .admin-song-picker select{ font-size:12px; }
  #adminSongToolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #adminSongToolbar input{
    grid-column:1 / -1;
  }
  #adminSongToolbar button{
    min-height:40px;
  }
}

/* === APP VERSION 4.6.3: 曲マスターのページ番号ナビ === */
.admin-master-pager{
  gap:4px;
  flex-wrap:nowrap;
  padding-left:6px;
  padding-right:6px;
}
.admin-master-nearby{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
}
.admin-master-pager button.admin-master-page,
.admin-master-pager button.admin-master-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-width:34px;
  max-width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  border:1px solid #475569;
  border-radius:7px;
  background:#111827;
  color:#e5e7eb;
  font-size:12px;
  font-weight:900;
}
.admin-master-pager button.admin-master-page.active{
  background:#3b82f6;
  border-color:#2563eb;
  color:#fff;
}
.admin-master-jump{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}
.admin-master-jump select{
  height:34px;
  min-width:76px;
  padding:0 30px 0 8px !important;
  border:1px solid #475569;
  border-radius:7px;
  background-color:#111827;
  color:#e5e7eb;
  background-position:calc(100% - 8px) 50% !important;
  background-size:14px 14px !important;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
body.light-mode .admin-master-pager button.admin-master-page,
body.light-mode .admin-master-pager button.admin-master-arrow,
body.light-mode .admin-master-jump select{
  background-color:#f8fafc !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}
body.light-mode .admin-master-pager button.admin-master-page.active{
  background:#3b82f6 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:#2563eb !important;
}
@media (max-width:520px){
  .admin-master-nearby{ display:none; }
  .admin-master-jump select{ min-width:92px; }
}

/* === APP VERSION 4.11.5: 登録曲フィルタを見出し付き横一列に統一 === */
.record-filter-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: flex-end !important;
  gap: 7px !important;
}
.record-type-filter-field {
  display: flex;
  min-width:0;
  width:100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: #e5e7eb;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.record-rank-filter-group {
  display:contents;
}
.record-rank-filter-field {
  min-width:0;
  width:100%;
}
body.light-mode .record-type-filter-field {
  color: #111827;
}
body.skill-target-columns #recordTypeFilterField {
  display: none !important;
}
#recordTypeFilter,
#recordClearRankFilter,
#recordFcFilter,
#recordTagFilter {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 38px !important;
  padding: 0 32px 0 10px !important;
  background-color: #111827 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 10px) 50% !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
  border: 1px solid #475569 !important;
  border-radius: 7px !important;
  color-scheme: dark !important;
}
#recordTypeFilter,
#recordClearRankFilter,
#recordFcFilter,
#recordTagFilter { width:100% !important; }
body.light-mode #recordTypeFilter,
body.light-mode #recordClearRankFilter,
body.light-mode #recordFcFilter,
body.light-mode #recordTagFilter {
  padding: 0 32px 0 10px !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 10px) 50% !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid #94a3b8 !important;
  color-scheme: light !important;
}

/* === APP VERSION 4.6.7: ページ表示を「前へ・現在/全体・次へ」に統一 === */
#userListPager .user-pager-status,
.admin-master-pager .admin-master-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  height:34px;
  padding:0 12px;
  border:1px solid #475569;
  border-radius:7px;
  background:#111827;
  color:#e5e7eb;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-sizing:border-box;
}
body.light-mode #userListPager .user-pager-status,
body.light-mode .admin-master-pager .admin-master-status{
  background:#f8fafc !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#94a3b8 !important;
}

/* === APP VERSION 4.12.0: 曲マスターフィルタ / ユーザーアクティブ度 === */
#adminMasterTable .master-title-cell{
  width:240px !important;
}
#adminMasterTable .master-initial-cell{
  width:108px !important;
}
#adminMasterTable .master-order-cell{
  width:100px !important;
  min-width:100px;
}
#adminMasterTable .master-initial-cell select{
  min-width:100px;
  min-height:34px;
  padding:5px 30px 5px 7px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:5px !important;
  background-color:#fff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50% !important;
  background-size:5px 5px,5px 5px !important;
  background-repeat:no-repeat !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  color-scheme:light !important;
  font-size:12px;
  font-weight:400;
}
body.light-mode #adminMasterTable .master-initial-cell select{
  border-color:#94a3b8 !important;
  background-color:#fff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
#adminSongToolbar .admin-toolbar-select,
#adminUserToolbar select{
  appearance:none !important;
  -webkit-appearance:none !important;
  min-height:42px;
  padding:7px 32px 7px 10px !important;
  border:1px solid #475569 !important;
  border-radius:7px !important;
  background-color:#111827 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position:calc(100% - 10px) 50% !important;
  background-size:16px 16px !important;
  background-repeat:no-repeat !important;
  color:#e5e7eb !important;
  -webkit-text-fill-color:#e5e7eb !important;
  color-scheme:dark !important;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
#adminSongTypeFilter{ width:112px; }
body.light-mode #adminSongToolbar .admin-toolbar-select,
body.light-mode #adminUserToolbar select{
  border-color:#94a3b8 !important;
  background-color:#f8fafc !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10l4-3.5' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  color-scheme:light !important;
}
.admin-card-user-heading{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
.admin-activity-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:7px;
  color:#fff;
  font-size:14px;
  font-weight:900;
}
.admin-activity-badge.level-s{ background:#e11d48; }
.admin-activity-badge.level-a{ background:#ea580c; }
.admin-activity-badge.level-b{ background:#ca8a04; }
.admin-activity-badge.level-c{ background:#16a34a; }
.admin-activity-badge.level-d{ background:#0284c7; }
.admin-activity-badge.level-e{ background:#64748b; }
.admin-activity-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 10px;
  margin-bottom:9px;
  padding:8px 10px;
  border:1px solid #334155;
  border-radius:8px;
  background:#111827;
  color:#94a3b8;
  font-size:9px;
}
.admin-activity-legend b{ color:#e2e8f0; }
body.light-mode .admin-activity-legend{
  border-color:#cbd5e1;
  background:#fff;
  color:#64748b;
}
body.light-mode .admin-activity-legend b{ color:#111827; }
@media(max-width:620px){
  #adminSongToolbar .admin-toolbar-select{
    width:100%;
    min-width:0;
  }
  #adminUserToolbar{
    grid-template-columns:minmax(0,1fr) 76px;
  }
  #adminUserToolbar input{
    grid-column:1 / -1;
  }
  #adminUserToolbar select{
    width:100%;
    min-width:0;
  }
}

/* === APP VERSION 4.12.1: タブ直下・曲カード間隔 / スキルヘッダー高さ統一 === */
/* スキル値の文字サイズは維持し、TOTAL/HOT/OTHERの帯だけ少し低くする。 */
.score-row{
  height:54px !important;
}

/* 各タブの最初の要素を、ユーザー行同士と同じ4px間隔で開始する。 */
.p-container{
  padding-top:4px !important;
}
#searchArea.search-bar-container{
  padding-top:4px !important;
}
#viewSkill > .sk-section:first-child > h2{
  margin-top:0 !important;
}

/* 登録曲側に残っていた下マージンを外し、全カードをgap:4pxへ統一する。 */
:is(#viewAllManage,#userDetailRecords) .dc-card{
  margin-bottom:0 !important;
}

/* === APP VERSION 4.12.5: 管理画面 曲マスターCSV入出力 === */
#btnAdminCsvDownload{
  background:#3b82f6;
  white-space:nowrap;
}
#btnAdminCsvUpload{
  background:#c2410c;
  white-space:nowrap;
}
body.light-mode :is(#btnAdminCsvDownload,#btnAdminCsvUpload){
  color:#fff !important;
}
.admin-csv-sheet{
  width:min(94vw,560px) !important;
  max-height:calc(100dvh - 32px) !important;
  overflow-y:auto !important;
  border-radius:12px !important;
  padding:16px !important;
  background:#0f172a !important;
  color:#f8fafc !important;
}
.admin-csv-sheet h3{
  margin-bottom:10px;
  font-size:16px;
}
.admin-csv-note{
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid #334155;
  border-radius:7px;
  background:#111827;
  color:#cbd5e1;
  font-size:10px;
  line-height:1.55;
}
.admin-csv-sheet label:not(.admin-csv-current){
  display:block;
  margin:8px 0 4px;
  color:#cbd5e1;
  font-size:11px;
  font-weight:900;
}
.admin-csv-sheet :is(input[type="text"],input[type="file"],select){
  width:100%;
  min-height:42px;
  padding:7px 10px;
  border:1px solid #475569;
  border-radius:7px;
  background:#111827;
  color:#f8fafc;
  font-size:12px;
}
.admin-csv-new-version{
  margin-top:10px;
  padding:10px;
  border:1px solid #475569;
  border-radius:8px;
  background:#111827;
}
.admin-csv-current{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  color:#e2e8f0;
  font-size:11px;
  font-weight:900;
}
.admin-csv-current input{
  width:18px !important;
  min-height:18px !important;
  height:18px !important;
  accent-color:#2563eb;
}
.admin-csv-status{
  min-height:18px;
  margin-top:8px;
  color:#93c5fd;
  font-size:10px;
  font-weight:900;
}
.admin-csv-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px;
}
.admin-csv-actions button{
  min-height:40px;
  border:0;
  border-radius:7px;
  font-weight:900;
}
#btnAdminCsvImport{ background:#3b82f6;color:#fff; }
#btnAdminCsvCancel{ background:#334155;color:#e2e8f0; }
body.light-mode .admin-csv-sheet{
  background:#f8fafc !important;
  color:#111827 !important;
}
body.light-mode .admin-csv-note,
body.light-mode .admin-csv-new-version{
  border-color:#cbd5e1;
  background:#fff;
  color:#475569;
}
body.light-mode .admin-csv-sheet label:not(.admin-csv-current),
body.light-mode .admin-csv-current{
  color:#111827;
}
body.light-mode .admin-csv-sheet :is(input[type="text"],input[type="file"],select){
  border-color:#94a3b8;
  background:#fff;
  color:#111827;
}
@media(max-width:620px){
  #adminSongToolbar{
    grid-template-columns:1fr 1fr;
  }
  #adminSongToolbar :is(button,select){
    width:100%;
    min-width:0;
  }
}

/* === APP VERSION 4.12.6: 曲候補の未選択表示を他のプレースホルダーと統一 === */
#adminSongCandidate:disabled{
  opacity:1 !important;
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
body.light-mode #adminSongCandidate:disabled{
  color:#7b8798 !important;
  -webkit-text-fill-color:#7b8798 !important;
}

/* === APP VERSION 4.12.11: 曲詳細のスキル値をマイページと同じデザインへ統一 === */
.rate-compare-dialog .rate-skill[class*="skill-box-"]{
  width:65px !important;
  min-width:65px !important;
  max-width:65px !important;
  padding:6px 0 !important;
  border-radius:3px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  font-family:inherit !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
}
body.text-size-up .rate-compare-dialog .rate-skill[class*="skill-box-"]{
  font-size:14px !important;
}
body.light-mode .rate-compare-dialog .rate-skill[class*="skill-box-"]{
  background-color:#f3f4f6 !important;
}

/* 編集ボタンの文字をボタン内の見た目上の中央へ揃える。 */
#viewAllManage .dc-edit .m-action-btn.btn-e{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:1px 6px 0 !important;
  line-height:1 !important;
}
/* === APP VERSION 4.12.18: 全画面のスキル帯・内枠を共通化 === */
/* 横並び登録カードを正とし、左右5pxの帯を避けた位置に上下枠を描画する。 */
:is(.dc-card .dc-skill,.rate-compare-dialog .rate-skill)[class*="skill-box-"]{
  position:relative !important;
  padding:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  overflow:hidden !important;
  background-origin:border-box !important;
  background-clip:border-box !important;
}
.dc-card .dc-skill[class*="skill-box-"]{
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  font-size:12px !important;
}
body.skill-target-columns .dc-card .dc-skill[class*="skill-box-"]{
  height:21px !important;
  min-height:21px !important;
  max-height:21px !important;
  font-size:11px !important;
}
.rate-compare-dialog .rate-skill[class*="skill-box-"]{
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  font-size:12px !important;
}
:is(.dc-card .dc-skill,.rate-compare-dialog .rate-skill)[class*="skill-box-"]::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:5px;
  right:5px;
  top:0;
  bottom:0;
  border-top:1px solid #334155;
  border-bottom:1px solid #334155;
  pointer-events:none;
  z-index:0;
}
/* 9500帯は数字を含む親要素ではなく、左右5pxの専用レイヤーだけを明滅させる。 */
:is(.dc-card .dc-skill,.rate-compare-dialog .rate-skill).skill-box-sparkle-rainbow::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  background-image:
    var(--skill-side-paint),
    var(--skill-side-paint);
  background-position:left top,right top;
  background-size:5px 100%,5px 100%;
  background-repeat:no-repeat,no-repeat;
  opacity:1;
  pointer-events:none;
  z-index:1;
}
body.light-mode :is(.dc-card .dc-skill,.rate-compare-dialog .rate-skill)[class*="skill-box-"]::before{
  border-top-color:#cbd5e1;
  border-bottom-color:#cbd5e1;
}
:is(.dc-card .dc-skill,.rate-compare-dialog .rate-skill) > .dc-skill-value{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  color:inherit;
  -webkit-text-fill-color:inherit;
  line-height:1;
}
body.text-size-up .dc-card .dc-skill[class*="skill-box-"],
body.text-size-up .rate-compare-dialog .rate-skill[class*="skill-box-"]{
  font-size:13px !important;
}
body.text-size-up.skill-target-columns .dc-card .dc-skill[class*="skill-box-"]{
  font-size:12px !important;
}

/* 横並びカードのFC・EXC・オプションも、パートと同じ方式で文字を中央へ置く。 */
body.skill-target-columns :is(
  #viewSkill,
  #userDetailSkill,
  #viewAllManage,
  #userDetailRecords
) .dc-card :is(.fc-unified-badge,.opt-badge){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
}

/* === APP VERSION 4.12.28: ライトモードの面色を単一定義へ整理 === */
body.light-mode{
  --app-light-page-bg:#e5e7eb;
  --app-light-card-bg:#f3f4f6;
}

/* ページ下地。タブ周囲も同じ色にして帯状の色差を残さない。 */
body.light-mode .p-tabs,
body.light-mode .p-container,
body.light-mode #viewSkill,
body.light-mode #viewAllManage,
body.light-mode #viewUsers,
body.light-mode .user-detail-body,
body.light-mode .sk-section,
body.light-mode .empty-state{
  background:var(--app-light-page-bg) !important;
  background-image:none !important;
  color:#111827 !important;
}

/* 非選択の3タブすべてで背景を統一する。 */
body.light-mode .p-tabs > .p-tab-btn:not(.active){
  background:var(--app-light-page-bg) !important;
  background-image:none !important;
}

/* 登録画面の固定操作領域。 */
body.light-mode #searchArea,
body.light-mode .record-search-row,
body.light-mode .record-filter-row{
  background:var(--app-light-page-bg) !important;
  background-image:none !important;
}
body.light-mode .record-filter-row > *,
body.light-mode .record-type-filter-field,
body.light-mode .record-rank-filter-group,
body.light-mode .record-rank-filter-field,
body.light-mode .record-filter-row label,
body.light-mode .record-filter-row label > span{
  background:transparent !important;
  background-image:none !important;
}

/* ユーザー一覧の一覧下地を1色にする。 */
body.light-mode #viewUsers #userList,
body.light-mode #viewUsers #userListPager{
  background:var(--app-light-page-bg) !important;
  background-color:var(--app-light-page-bg) !important;
  background-image:none !important;
}
body.light-mode #viewUsers .user-list-row,
body.light-mode #viewUsers .user-list-row:active,
body.light-mode #viewUsers .user-list-row.user-list-row-sparkle-rainbow,
body.light-mode #viewUsers .user-list-row.user-list-row-sparkle-rainbow:active{
  background:var(--app-light-page-bg) !important;
  background-color:var(--app-light-page-bg) !important;
  background-image:none !important;
  border:1px solid #8b98aa !important;
  box-shadow:none !important;
  animation:none !important;
  filter:none !important;
}

/* 曲カード内のスキル帯も、カードと同じ明るさを維持する。 */
body.light-mode .dc-card .dc-skill[class*="skill-box-"],
body.light-mode .rate-compare-dialog .rate-skill[class*="skill-box-"]{
  background-color:var(--app-light-card-bg) !important;
}

/* 白背景だった補助ボタンはページ下地色へ合わせる。 */
body.light-mode .user-detail-tab:not(.active),
body.light-mode #btnRefreshApp,
body.light-mode #btnMenu,
body.light-mode .favorite-toggle,
body.light-mode .user-detail-back{
  background-color:var(--app-light-page-bg) !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}

/* === APP VERSION 4.12.29: 検索行の残色・タブ配色・固定行の影を調整 === */
/* 非選択タブはリンク色ではなく、状態差が自然な濃いグレーにする。 */
body.light-mode .p-tabs > .p-tab-btn:not(.active){
  color:#475569 !important;
  -webkit-text-fill-color:#475569 !important;
}
body.light-mode .p-tabs > .p-tab-btn.active{
  background:#4776b5 !important;
  border-color:#3f6ba4 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* スキル対象・登録を含む固定ヘッダー下の影は使用しない。 */
.p-header{
  box-shadow:none !important;
}

/* === APP VERSION 4.12.30: ユーザー詳細のタブ・固定領域を共通化 === */
/* ユーザー詳細もメインタブと同じ面・間隔・枠線にする。 */
body.light-mode .user-detail-tabs{
  gap:6px !important;
  padding:6px !important;
  background:var(--app-light-page-bg) !important;
  border-color:#cbd5e1 !important;
}
body.light-mode .user-detail-tabs > .user-detail-tab:not(.active){
  background:var(--app-light-page-bg) !important;
  border:1px solid #94a3b8 !important;
  border-radius:7px !important;
  color:#475569 !important;
  -webkit-text-fill-color:#475569 !important;
  box-shadow:none !important;
}
body.light-mode .user-detail-tabs > .user-detail-tab.active{
  background:#4776b5 !important;
  border:1px solid #3f6ba4 !important;
  border-radius:7px !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:none !important;
}

/* スキル対象・登録曲のどちらでも固定領域下に影を出さない。 */
.user-detail-sticky,
body.light-mode .user-detail-sticky{
  box-shadow:none !important;
}

/* 「登録曲 n件」の見出しに残っていた白背景をページ下地へ合わせる。 */
body.light-mode #userDetailRecords .sk-section > h2{
  background:var(--app-light-page-bg) !important;
  background-image:none !important;
}

/* === APP VERSION 4.12.31: 操作用アクセントカラーを共通化 === */
:root{
  --app-accent:#3b82f6;
  --app-accent-pressed:#2563eb;
  --app-accent-soft:#eff6ff;
}

/* 選択タブ・主要アクションは同じ基準色を使う。 */
.p-tab-btn.active,
.user-detail-tab.active,
.btn-add-inline:not(:disabled),
.btn-submit:not(:disabled),
.app-primary-button:not(:disabled),
body.light-mode .p-tabs > .p-tab-btn.active,
body.light-mode .user-detail-tabs > .user-detail-tab.active,
body.light-mode .btn-add-inline:not(:disabled),
body.light-mode .btn-submit:not(:disabled),
body.light-mode button.app-primary-button:not(:disabled){
  background:var(--app-accent) !important;
  border-color:var(--app-accent) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.btn-add-inline:not(:disabled):active,
.btn-submit:not(:disabled):active,
.app-primary-button:not(:disabled):active,
body.light-mode .btn-add-inline:not(:disabled):active,
body.light-mode .btn-submit:not(:disabled):active,
body.light-mode button.app-primary-button:not(:disabled):active{
  background:var(--app-accent-pressed) !important;
  border-color:var(--app-accent-pressed) !important;
}

/* ライトモードの編集系は同じ青の文字・枠を使うアウトラインボタンにする。 */
body.light-mode .btn-e,
body.light-mode #viewAllManage button[data-edit-index],
body.light-mode #viewAllManage .btn-edit,
body.light-mode #viewAllManage .m-edit-btn,
body.light-mode #viewAllManage .m-btn-edit,
body.light-mode #viewAllManage .dc-edit .m-action-btn.btn-e,
body.light-mode .rate-compare-edit-button{
  background:var(--app-light-card-bg) !important;
  border-color:var(--app-accent) !important;
  color:var(--app-accent) !important;
  -webkit-text-fill-color:var(--app-accent) !important;
  box-shadow:none !important;
}
body.light-mode .btn-e:active,
body.light-mode #viewAllManage button[data-edit-index]:active,
body.light-mode #viewAllManage .btn-edit:active,
body.light-mode #viewAllManage .m-edit-btn:active,
body.light-mode #viewAllManage .m-btn-edit:active,
body.light-mode #viewAllManage .dc-edit .m-action-btn.btn-e:active,
body.light-mode .rate-compare-edit-button:active{
  background:var(--app-accent-soft) !important;
  border-color:var(--app-accent-pressed) !important;
  color:var(--app-accent-pressed) !important;
  -webkit-text-fill-color:var(--app-accent-pressed) !important;
}

/* === APP VERSION 4.13.0: 公開登録曲をHOT/OTHER各25曲ずつ段階表示 === */
.user-detail-records-more{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 6px 4px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
}
.user-detail-records-more button{
  width:min(100%,240px);
  min-height:38px;
  border:1px solid var(--app-accent);
  border-radius:7px;
  background:var(--app-accent);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.user-detail-records-more button:active{
  border-color:var(--app-accent-pressed);
  background:var(--app-accent-pressed);
}
body.light-mode .user-detail-records-more{
  background:var(--app-light-page-bg) !important;
  color:#64748b !important;
}

/* === APP VERSION 4.13.1: ダークユーザー一覧の面色・9500行を統一 === */
body:not(.light-mode){
  --app-dark-user-list-bg:#0b1220;
  --app-dark-control-bg:#111827;
}
body:not(.light-mode):has(#viewUsers:not(.hidden)) .p-container{
  background:var(--app-dark-user-list-bg) !important;
}

/* 固定領域・一覧下地・ユーザー行を同じ面色にする。 */
body:not(.light-mode) #viewUsers,
body:not(.light-mode) #viewUsers #userList,
body:not(.light-mode) #viewUsers #userListPager,
body:not(.light-mode) #viewUsers .user-list-row,
body:not(.light-mode) #viewUsers .user-list-row:active{
  background:var(--app-dark-user-list-bg) !important;
  background-color:var(--app-dark-user-list-bg) !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* 9500ユーザー行の赤・ピンク系の枠と背景だけを外し、文字演出は維持する。 */
body:not(.light-mode) #viewUsers .user-list-row.user-list-row-sparkle-rainbow,
body:not(.light-mode) #viewUsers .user-list-row.user-list-row-sparkle-rainbow:active{
  border:1px solid #475569 !important;
  background:var(--app-dark-user-list-bg) !important;
  background-color:var(--app-dark-user-list-bg) !important;
  background-image:none !important;
  box-shadow:none !important;
  animation:none !important;
  filter:none !important;
}

/* === APP VERSION 4.13.2: ユーザー詳細の固定領域・見出し背景を統一 === */
/* ダーク／ライトともタブの上下余白を同じにし、固定領域の縦幅を揃える。 */
.user-detail-tabs{
  gap:6px !important;
  padding:6px !important;
  box-sizing:border-box !important;
}

/* === APP VERSION 4.13.3: 自ページ／ユーザー詳細の登録曲を50件ずつ段階表示 === */
.own-registered-records-more{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
}
body.light-mode .own-registered-records-more{
  background:var(--app-light-page-bg) !important;
}

/* === APP VERSION 4.13.4: 登録曲の段階表示件数を表示方式別に切替 === */

/* === APP VERSION 4.13.5: スキル対象見出しを横並びONのデザインへ統一 === */

/* === APP VERSION 4.13.8: カード枠を4.13.5以前の描画へ復元 === */

/* === APP VERSION 4.13.9: 横並び時のHOT／OTHER見出し上端を揃える === */
body.skill-target-columns #viewSkill > .sk-section > h2{
  margin-top:0 !important;
}

/* === APP VERSION 4.13.10: iPhone Safari最下部バウンド時の固定ずれを防止 === */
html.ios-webkit,
html.ios-webkit body{
  overscroll-behavior-y:none;
}

/* === APP VERSION 4.13.11: ページ最下部に操作しやすい余白を確保 === */
:root{
  --app-page-bottom-space:calc(72px + env(safe-area-inset-bottom,0px));
}
.p-container,
.user-detail-body{
  padding-bottom:var(--app-page-bottom-space) !important;
}

/* === APP VERSION 4.13.13: ダークモード登録タブの背景色を統一 === */
body:not(.light-mode) #viewAllManage,
body:not(.light-mode) #viewAllManage .own-registered-records-more{
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  background-image:none !important;
}