:root{--suite-bg: #0b0f12;--suite-surface: #11191d;--suite-surface-raised: #172126;--suite-text: #f4fbfc;--suite-muted: #a4b1b5;--suite-line: rgba(255, 255, 255, 0.1);--suite-accent: #58dce4;--suite-accent-strong: #4bd4dd;--suite-accent-bright: #75e5eb;--suite-accent-soft: rgba(75, 212, 221, 0.16);--suite-action: #58dce4;--suite-on-accent: #082126;--suite-gold: #ffc857;--suite-gold-soft: rgba(255, 200, 87, 0.14);--suite-support: #ffc857;--suite-support-soft: rgba(255, 200, 87, 0.14);--suite-radius-control: 8px;--suite-radius-card: 10px;--suite-control-height: 48px;--suite-nav-mobile-height: 68px;--suite-nav-desktop-width: 240px}
.suite-nav{position:fixed;right:0;bottom:0;left:0;z-index:70;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:var(--suite-nav-mobile-height);padding:7px 6px max(7px,env(safe-area-inset-bottom));border-top:1px solid var(--suite-line);background:rgba(12,13,18,.94);box-shadow:0 -12px 34px rgba(0,0,0,.34);backdrop-filter:blur(20px)}
.suite-nav-brand{display:none}.suite-nav a,.suite-nav button{display:grid;min-width:0;min-height:48px;place-items:center;align-content:center;gap:3px;padding:3px;border:0;border-radius:11px;background:transparent;color:var(--suite-muted);cursor:pointer;font:inherit;font-size:1.04rem;text-decoration:none}.suite-nav a small,.suite-nav button small{display:block;max-width:100%;overflow:hidden;font-size:.64rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.suite-nav a[aria-current=page]{background:var(--suite-accent-soft);color:var(--suite-accent)}.suite-nav [aria-disabled=true]{opacity:.58}
.suite-toast{position:fixed;right:14px;bottom:calc(var(--suite-nav-mobile-height) + 14px);left:14px;z-index:90;width:min(440px,calc(100% - 28px));margin:0 auto;padding:12px 15px;border:1px solid var(--suite-line);border-radius:12px;background:var(--suite-surface-raised);box-shadow:0 14px 38px rgba(0,0,0,.42);color:var(--suite-text);font-size:.8rem;text-align:center}.suite-public-mode .suite-owner-only{display:none!important}.suite-public-mode .suite-nav{grid-template-columns:1fr}.suite-public-mode .suite-nav [data-suite-section]:not([data-suite-section=library]){display:none}body.has-suite-nav{--bg:var(--suite-bg);--panel:var(--suite-surface);--panel2:var(--suite-surface-raised);--text:var(--suite-text);--muted:var(--suite-muted);--line:var(--suite-line);--accent:var(--suite-accent);--accent2:#ff9b8f;padding-bottom:var(--suite-nav-mobile-height)}
.local-tools{display:flex;justify-content:flex-end;gap:7px;margin:0 0 10px}.local-tools button{display:flex;align-items:center;gap:5px;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);font-size:12px}.local-tools button.active{border-color:var(--suite-accent);color:var(--suite-accent)}.local-tools small{font-size:inherit}
@media(min-width:900px){.suite-nav{top:0;right:auto;grid-template-columns:1fr;grid-template-rows:auto repeat(4,auto) 1fr;width:var(--suite-nav-desktop-width);min-height:100vh;padding:24px 14px;border-top:0;border-right:1px solid var(--suite-line);background:rgba(12,13,18,.97);box-shadow:12px 0 34px rgba(0,0,0,.2)}.suite-nav-brand{display:flex;align-items:center;gap:10px;min-height:52px;margin:0 8px 22px;color:var(--suite-text);font-size:1.18rem;font-weight:800}.suite-nav-brand:before{content:"♪";display:grid;width:36px;height:36px;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--suite-accent),#9e8cff);color:#fff}.suite-nav a,.suite-nav button{grid-template-columns:26px 1fr;min-height:48px;place-items:center start;align-content:center;padding:10px 12px;text-align:left}.suite-nav a small,.suite-nav button small{font-size:.82rem}body.has-suite-nav{padding-bottom:0;padding-left:var(--suite-nav-desktop-width)}.suite-toast{bottom:20px;left:calc(var(--suite-nav-desktop-width) + 14px)}body.has-suite-nav main{max-width:980px}.local-tools{max-width:980px;margin-right:auto;margin-left:auto}}
@media(max-width:360px){.suite-nav a small,.suite-nav button small{font-size:.58rem}.local-tools button{padding:6px 8px}}

/* sak Uta / クリアシアン + 評価ゴールド */
body.has-suite-nav{--bg:var(--suite-bg);--panel:var(--suite-surface);--panel2:var(--suite-surface-raised);--text:var(--suite-text);--muted:var(--suite-muted);--line:var(--suite-line);--accent:var(--suite-accent-strong);--accent2:var(--suite-accent);background:radial-gradient(circle at 82% -8%,rgba(53,217,230,.18),transparent 34rem),linear-gradient(180deg,#0c1519 0,var(--suite-bg) 48%);background-attachment:fixed}
.has-suite-nav .topbar{border-color:var(--suite-line);background:rgba(13,11,18,.78);box-shadow:0 10px 32px rgba(0,0,0,.12)}
.has-suite-nav .brand{letter-spacing:.01em}.has-suite-nav .brand:before{content:"♪";margin-right:8px;color:var(--suite-accent);text-shadow:0 0 24px rgba(75,212,221,.55)}.has-suite-nav .brand span{font-size:.58em;font-weight:650;color:var(--suite-muted)}
.has-suite-nav main{padding-top:18px}.has-suite-nav .searchbox input{border-color:var(--suite-line);background:rgba(18,27,32,.86);box-shadow:inset 0 1px rgba(255,255,255,.025)}.has-suite-nav .searchbox input:focus{border-color:var(--suite-accent);box-shadow:0 0 0 3px var(--suite-accent-soft)}.has-suite-nav .searchbox button{border-color:rgba(75,212,221,.28);background:var(--suite-accent-soft);color:#9beaf0}
.has-suite-nav .filters button{border-color:var(--suite-line);background:rgba(18,27,32,.76);color:#d6e1e4}.has-suite-nav .filters button.active{border-color:var(--suite-accent);background:rgba(43,145,154,.26);color:#f7fcfd;box-shadow:0 7px 22px rgba(53,217,230,.15)}.has-suite-nav .filters button.active small{color:var(--suite-support);font-weight:800}
.has-suite-nav .card{border-color:var(--suite-line);border-radius:15px;background:linear-gradient(145deg,rgba(20,30,35,.97),rgba(15,21,25,.97));box-shadow:0 10px 30px rgba(0,0,0,.16);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.has-suite-nav .card:hover{border-color:rgba(75,212,221,.3);transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.has-suite-nav .primary{background:linear-gradient(135deg,var(--suite-accent-strong),var(--suite-accent));color:#072126;box-shadow:0 10px 30px rgba(53,217,230,.22)}.has-suite-nav .secondary{border-color:var(--suite-line);background:var(--suite-surface-raised)}
.has-suite-nav dialog{background:var(--suite-bg);color:var(--suite-text)}.has-suite-nav .modalHead{border-color:var(--suite-line);background:rgba(18,14,24,.92);backdrop-filter:blur(18px)}.has-suite-nav .candidateForm input,.has-suite-nav .candidateForm select,.has-suite-nav .candidateForm textarea{border-color:var(--suite-line);background:var(--suite-surface)}
.suite-nav a,.suite-nav button{transition:background-color .2s ease,color .2s ease,transform .2s ease}.suite-nav a:hover,.suite-nav button:hover{background:rgba(255,255,255,.045);color:var(--suite-text)}
@media(min-width:900px){.suite-nav{background:rgba(10,15,18,.95);box-shadow:12px 0 42px rgba(0,0,0,.24);backdrop-filter:blur(24px)}.suite-nav-brand:before{background:linear-gradient(135deg,var(--suite-accent-strong),#8ceaf0);box-shadow:0 10px 30px rgba(53,217,230,.22);color:#082126}}
.suite-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:900px){.suite-nav{grid-template-columns:1fr;grid-template-rows:auto repeat(4,auto) 1fr}}

/* 高密度の一覧性を維持しながら操作対象を明確化 */
.has-suite-nav .card{cursor:pointer;outline:none}.has-suite-nav .card:focus-visible{border-color:var(--suite-accent);box-shadow:0 0 0 3px var(--suite-accent-soft)}
.has-suite-nav .favMini{color:var(--suite-support)}.has-suite-nav .favMini:hover{background:var(--suite-support-soft);color:#ffdc8a}.has-suite-nav .cardInfo b{color:var(--suite-support);font-weight:750}
.has-suite-nav .cardDesktop{display:none}
.has-suite-nav .sdActions .primary{order:-1}.has-suite-nav .sdActions>a{background:#f1f8f9;color:#0c1a1e}.has-suite-nav .sdActions>a i{background:#e22b51}.has-suite-nav .sdArt{border-color:var(--suite-line);background:radial-gradient(circle at 70% 25%,#245967,#16313a 38%,#10181c 74%);box-shadow:0 15px 40px rgba(27,102,116,.22)}.has-suite-nav .sdReadiness,.has-suite-nav .sdPitchCard,.has-suite-nav .sdLoadGrid>div,.has-suite-nav .sdManage{border-color:var(--suite-line)}.has-suite-nav .sdSource a{color:var(--suite-accent)}
.has-suite-nav .sdCopyPair{display:grid;grid-template-columns:1fr 1fr;gap:9px}.has-suite-nav .sdCopyPair button{min-height:48px}
@media(max-width:540px){.has-suite-nav main{padding-right:12px;padding-left:12px}.has-suite-nav .searchbox{grid-template-columns:1fr}.has-suite-nav .searchbox button{min-height:42px}}
@media(min-width:900px){
  body.has-suite-nav main{max-width:1160px;padding-right:28px;padding-left:28px}.has-suite-nav .local-tools{max-width:1104px}.has-suite-nav .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.has-suite-nav .card{display:flex;min-height:190px;flex-direction:column;padding:15px 16px}.has-suite-nav .cardHeading{flex-wrap:wrap}.has-suite-nav .cardInfo{overflow:visible;flex-wrap:wrap}.has-suite-nav .cardDesktop{display:flex;flex:1;flex-direction:column;margin-top:13px;padding-top:12px;border-top:1px solid var(--suite-line)}.has-suite-nav .cardDesktopFacts{display:flex;flex-wrap:wrap;gap:8px 18px}.has-suite-nav .cardDesktopFacts span{display:grid;gap:2px}.has-suite-nav .cardDesktopFacts small{color:#817989;font-size:10px}.has-suite-nav .cardDesktopFacts b{color:#d9d2df;font-size:12px}.has-suite-nav .cardDesktop p{display:-webkit-box;overflow:hidden;margin:10px 0 0;color:#9f97a7;font-size:11px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.has-suite-nav .cardDesktop>strong{align-self:flex-end;margin-top:auto;padding-top:9px;color:var(--suite-accent);font-size:11px}
}

/* 読みやすさを優先した文字サイズ */
.has-suite-nav .sub{font-size:14px}.has-suite-nav .syncStatus{font-size:12px}.has-suite-nav .searchbox input{font-size:17px}.has-suite-nav .searchbox button{font-size:14px}.has-suite-nav .filters button{font-size:15px}.has-suite-nav .filters button small{font-size:12px}.has-suite-nav .sortrow{font-size:15px}.has-suite-nav .title{font-size:20px}.has-suite-nav .artistInline,.has-suite-nav .artist{font-size:15px}.has-suite-nav .badge{font-size:12px}.has-suite-nav .cardInfo{font-size:13.5px}.has-suite-nav .cardInfo b{font-size:14px}.has-suite-nav .local-tools button{font-size:14px}.suite-nav a small,.suite-nav button small{font-size:.72rem}
@media(max-width:899px){
  /* スマホでは文字サイズを保ったまま、一覧までの縦余白を圧縮する */
  .has-suite-nav .local-tools{display:none}
  .has-suite-nav .topbar{padding:calc(8px + env(safe-area-inset-top)) 12px 7px}
  .has-suite-nav .brand{font-size:23px;line-height:1.15}
  .has-suite-nav .sub{display:none}
  .has-suite-nav .headActions{gap:0}
  .has-suite-nav .syncStatus{padding:4px 7px}
  .has-suite-nav .iconbtn{padding:4px 5px}
  .has-suite-nav main{padding-top:10px}
  .has-suite-nav .searchbox{gap:6px}
  .has-suite-nav .searchbox input{padding-top:10px;padding-bottom:10px}
  .has-suite-nav .searchbox button{min-height:38px}
  .has-suite-nav .filterGroups{padding-top:6px}
  .has-suite-nav .filters{padding-bottom:5px}
  .has-suite-nav .filters button{padding-top:6px;padding-bottom:6px}
  .has-suite-nav .sortrow{margin-top:1px;margin-bottom:5px}
  .has-suite-nav .card{padding:9px 11px}
  .has-suite-nav .cardInfo{margin-top:5px}
  .has-suite-nav .list{gap:6px}
}
@media(min-width:900px){.suite-nav a small,.suite-nav button small{font-size:.9rem}.has-suite-nav .cardDesktopFacts small{font-size:12px}.has-suite-nav .cardDesktopFacts b{font-size:14px}.has-suite-nav .cardDesktop p{font-size:13px}.has-suite-nav .cardDesktop>strong{font-size:13px}}

/* 設定モーダル / スマホは全画面、PCは広めのパネル */
.suite-nav-settings { font: inherit; }

.suite-settings {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--suite-bg);
  color: var(--suite-text);
}

.suite-settings::backdrop { background: rgba(0, 0, 0, 0.66); }

.suite-settings-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid var(--suite-line);
  background: var(--suite-surface);
}

.suite-settings-head strong { font-size: 1.16rem; }

.suite-settings-head button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--suite-line);
  border-radius: 10px;
  background: var(--suite-surface-raised);
  color: var(--suite-text);
  font: inherit;
  font-weight: 700;
}

.suite-settings-body {
  display: grid;
  gap: 22px;
  padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}

.suite-set-group {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--suite-line);
  border-radius: 14px;
  background: var(--suite-surface);
}

.suite-set-group h2 { margin: 0; font-size: 1.02rem; color: var(--suite-accent); }
.suite-set-group > p { margin: 0; color: var(--suite-muted); font-size: 0.9rem; line-height: 1.6; }

.suite-set-row {
  display: grid;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--suite-line);
}

.suite-set-label { display: grid; gap: 4px; }
.suite-set-label strong { font-size: 1rem; }
.suite-set-label small { color: var(--suite-muted); font-size: 0.86rem; line-height: 1.55; }

.suite-set-state {
  justify-self: start;
  padding: 3px 9px;
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  color: var(--suite-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.suite-set-state.is-set {
  border-color: rgba(117, 229, 235, 0.5);
  background: var(--suite-accent-soft);
  color: var(--suite-accent);
}

.suite-set-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }

.suite-set-controls input {
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--suite-line);
  border-radius: 10px;
  background: var(--suite-surface-raised);
  color: var(--suite-text);
  font: inherit;
  font-size: 16px;
}

.suite-set-controls input:focus {
  border-color: var(--suite-accent);
  box-shadow: 0 0 0 3px var(--suite-accent-soft);
  outline: none;
}

.suite-set-controls button,
.suite-set-cache button,
.suite-set-clear-all {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--suite-line);
  border-radius: 10px;
  background: var(--suite-surface-raised);
  color: var(--suite-text);
  font: inherit;
  font-weight: 700;
}

.suite-set-save { border-color: var(--suite-accent) !important; background: var(--suite-accent) !important; color: #082126 !important; }
.suite-set-controls button:disabled,
.suite-set-cache button:disabled { opacity: 0.45; }

.suite-set-cache-list { display: grid; gap: 8px; }

.suite-set-cache {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--suite-line);
  border-radius: 11px;
  background: var(--suite-surface-raised);
  font-size: 0.95rem;
}

.suite-set-cache small { color: var(--suite-muted); font-size: 0.85rem; }
.suite-set-cache button { min-height: 38px; padding: 0 12px; font-size: 0.88rem; }

.suite-set-note { margin: 0; color: var(--suite-muted); font-size: 0.85rem; line-height: 1.6; }

.suite-set-info { display: grid; gap: 6px; margin: 0; }
.suite-set-info dt { color: var(--suite-muted); font-size: 0.82rem; }
.suite-set-info dd { margin: 0 0 6px; overflow-wrap: anywhere; font-size: 0.9rem; }

@media (min-width: 900px) {
  .suite-settings {
    width: min(100%, 900px);
    height: min(100%, 88vh);
    max-height: 88vh;
    margin: auto;
    border: 1px solid var(--suite-line);
    border-radius: 18px;
  }

  .suite-settings-head { border-radius: 18px 18px 0 0; padding: 18px 24px; }
  .suite-settings-body { padding: 24px; }
  .suite-set-group { padding: 20px 22px; }
  .suite-set-row { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; gap: 20px; }
  .suite-set-controls { align-content: start; }
  .suite-set-info { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; }
  .suite-set-info dd { margin-bottom: 0; }
}

/* PCナビ最終行は残り高さを埋める1frのため、設定ボタンは上端へ寄せて他項目と並べる */
@media (min-width: 900px) {
  .suite-nav-settings { align-self: start; }
}

/* 各アプリのCSSが素の nav セレクタで gap や align-items を当てていても
   共通ナビの並びがずれないよう、ここで明示的に打ち消す
   （例: pokekara.css の nav{display:flex;gap:10px;align-items:center} ） */
.suite-nav { gap: 0; align-items: stretch; }

/* ホスト側CSSが素の button セレクタを装飾していても（例: pokekara.css の
   body.has-suite-nav button{background:#172126}）、共通ナビの項目が
   「選択中」と紛らわしい見た目にならないよう、非選択時の状態を確定させる。
   詳細度をホスト側より高くするため body.has-suite-nav から書く */
body.has-suite-nav .suite-nav a,
body.has-suite-nav .suite-nav button {
  border: 0;
  background: transparent;
  color: var(--suite-muted);
}

body.has-suite-nav .suite-nav a[aria-current="page"] {
  background: var(--suite-accent-soft);
  color: var(--suite-accent);
}

/* 旧テーマ（紫）の名残をsak Utaのシアンへ寄せる。
   detail-enhance.css / styles.css 側の直書き色を上書きする */
.has-suite-nav .sdManage form button {
  background: linear-gradient(135deg, var(--suite-accent-strong), var(--suite-accent-bright));
  color: var(--suite-on-accent);
}
.has-suite-nav .sdManage form button.shelve {
  border: 1px solid #66523a;
  background: #211b15;
  color: #d8c8b1;
}
.has-suite-nav .sdManage form button.complete {
  border: 1px solid #356c56;
  background: #14251f;
  color: #bdebd7;
}
.has-suite-nav .candidateForm label b { color: var(--suite-accent-bright); }
.has-suite-nav .syncStatus.loading {
  border-color: var(--suite-accent-strong);
  background: rgba(75, 212, 221, 0.14);
  color: var(--suite-accent-bright);
}

/* sak Uta ブランドヘッダー：開いた直後は没入感、一覧中はコンパクトに変化する */
.brandTopbar {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 4%, rgba(0, 168, 255, 0.24), transparent 42%),
    linear-gradient(145deg, #0d2028, #101820 58%, #171622);
}
.brandHeaderIdentity { min-width: 0; }
.brandLockup { display: flex; align-items: center; gap: 6px; }
.brandLockup img { display: block; width: 42px; height: 42px; flex: none; }
.brandText { display: grid; align-content: center; gap: 4px; min-width: 0; }
.brandWordmark {
  display: block;
  color: var(--suite-text);
  font-family: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brandWordmark > span {
  background: linear-gradient(180deg, #00e0ce 0%, #00a8ff 55%, #0072ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
}
.brandSignature {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--suite-muted);
  font-family: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}
.brandSignature > span { color: #00a8ff; font-family: "Noto Sans JP", system-ui, sans-serif; }
.brandSignature > i { color: rgba(255,255,255,.28); font-style: normal; }
.brandPageTitle { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; color: var(--suite-text); font-size: 29px; line-height: 1; }
.brandPageIcon {
  display: inline-block;
  width: auto;
  height: auto;
  flex: none;
  color: var(--suite-accent-bright);
  font-family: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
}
.brandTopbar .headActions { display: flex; flex: none; align-items: center; gap: 8px; }
.has-suite-nav .suiteHeaderAction {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--suite-line);
  border-radius: 10px;
  background: var(--suite-surface-raised);
  color: var(--suite-text);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.has-suite-nav .suiteHeaderPrimary { padding: 0 14px; border-color: var(--suite-accent); background: var(--suite-accent); color: var(--suite-on-accent); }
.has-suite-nav .suiteHeaderRefresh { width: 40px; padding: 0; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 22px; }
.has-suite-nav .suiteHeaderAction:focus-visible { outline: 3px solid var(--suite-accent-soft); outline-offset: 2px; }
.suiteDataStatus { min-height: 24px; margin: 7px 2px 0; color: var(--suite-muted); }
.suiteDataStatus .syncStatus { display: inline-flex; align-items: center; }

@media (max-width: 899px) {
  .has-suite-nav .brandTopbar {
    min-height: 154px;
    align-items: flex-start;
    padding: calc(12px + env(safe-area-inset-top)) 12px 16px;
    transition: min-height .24s ease, padding .24s ease, background-color .24s ease;
  }
  .has-suite-nav.next-page .brandTopbar:not(.is-compact) {
    min-height: 0;
    padding-bottom: 12px;
  }
  .has-suite-nav.next-page .brandTopbar:not(.is-compact) .brandPageTitle {
    margin-top: 12px;
  }
  .brandTopbar .headActions { padding-top: 2px; }
  .brandTopbar.is-compact {
    min-height: 56px;
    align-items: center;
    padding: calc(6px + env(safe-area-inset-top)) 8px 6px 11px;
    background: linear-gradient(90deg, rgba(13,32,40,.98), rgba(16,24,32,.98) 70%, rgba(23,22,34,.98));
  }
  .brandTopbar.is-compact .brandHeaderIdentity { display: flex; min-width: 0; align-items: center; gap: 8px; line-height: 1; }
  .brandTopbar.is-compact .brandLockup { gap: 4px; }
  .brandTopbar.is-compact .brandLockup img { width: 30px; height: 30px; }
  .brandTopbar.is-compact .brandText { display: flex; align-items: center; }
  .brandTopbar.is-compact .brandWordmark { font-size: 16px; line-height: 1; white-space: nowrap; }
  .brandTopbar.is-compact .brandSignature { display: none; }
  .brandTopbar.is-compact .brandPageTitle {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    margin: 0;
    color: var(--suite-muted);
    font-size: 15px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brandTopbar.is-compact .brandPageIcon { width: auto; height: auto; font-size: 17px; }
  .brandTopbar.is-compact .brandPageTitle::before {
    width: 1px;
    height: 18px;
    margin-right: 8px;
    background: var(--suite-line);
    content: "";
  }
  .brandTopbar.is-compact .headActions { align-self: center; padding-top: 0; }
  .brandTopbar.is-compact .suiteHeaderAction { width: 36px; min-height: 36px; }
}

@media (min-width: 900px) {
  .brandTopbar { padding: 22px 28px 18px; }
  .brandPageTitle { margin-top: 10px; }
}

/* PC左ペインのブランド表示 */
@media (min-width: 900px) {
  .suite-nav {
    grid-template-rows: auto repeat(4, auto) 1fr;
    padding: 24px 15px 16px;
  }

  .suite-nav-brand {
    display: flex;
    min-height: 154px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 16px;
    padding: 2px 4px 22px;
    border-bottom: 1px solid var(--suite-line);
    text-align: center;
  }

  .suite-nav-brand::before { content: none; }

  .suite-nav-brand img {
    display: block;
    width: 62px;
    height: 62px;
    margin: 0 0 7px;
    filter: drop-shadow(0 8px 18px rgba(0, 168, 255, 0.17));
  }

  .suite-nav-brand strong {
    color: var(--suite-text);
    font-family: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .suite-nav-brand strong > span {
    background: linear-gradient(180deg, #00e0ce 0%, #00a8ff 55%, #0072ff 100%);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
  }

  .suite-nav-brand-kana {
    margin-top: 8px;
    color: #00a8ff;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
  }

  .suite-nav-brand-copy {
    margin-top: 7px;
    color: var(--suite-muted);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1;
    white-space: nowrap;
  }

  .brandTopbar .brandLockup { display: none; }
  .brandTopbar .brandPageTitle { margin-top: 0; }
}


/* 共通画面フレーム：3画面で body → suite-content → header/main を同じ寸法にする */
body.has-suite-nav {
  background:
    radial-gradient(circle at 82% -8%, rgba(53, 217, 230, 0.18), transparent 34rem),
    linear-gradient(180deg, #0c1519 0, var(--suite-bg) 48%);
  background-attachment: fixed;
}

body.has-suite-nav .suite-content {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body.has-suite-nav .suite-content > .brandTopbar {
  width: 100%;
  margin: 0;
  border-bottom: 1px solid var(--suite-line);
  background:
    radial-gradient(circle at 84% 4%, rgba(0, 168, 255, 0.24), transparent 42%),
    linear-gradient(145deg, #0d2028, #101820 58%, #171622);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

body.has-suite-nav .suite-content > main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 28px 32px;
}

body.has-suite-nav .suite-content.player-compact > main {
  padding-bottom: 180px;
}

@media (max-width: 899px) {
  body.has-suite-nav .suite-content > main {
    padding: 12px 12px calc(28px + var(--suite-nav-mobile-height));
  }

  body.has-suite-nav .suite-content.player-compact > main {
    padding-bottom: 180px;
  }
}

/* 同じ役割の部品を3画面で同じ形にする。
   角丸は音源8px・投稿管理16px・次に歌う15pxと倍近く違い、
   検索欄の高さも52pxと42pxで10px差があった。
   密度（カード内の余白）は画面ごとの情報量に任せ、ここでは形だけ揃える */
body.has-suite-nav .search-box,
body.has-suite-nav .searchbox input,
body.has-suite-nav input[type="search"] {
  border-radius: var(--suite-radius-control);
}

body.has-suite-nav .search-box,
body.has-suite-nav .searchbox input,
body.has-suite-nav input[type="search"] {
  min-height: var(--suite-control-height);
}

body.has-suite-nav .track-card,
body.has-suite-nav .list > .card,
body.has-suite-nav .posted-card,
body.has-suite-nav .cards > .card {
  border-radius: var(--suite-radius-card);
}

/* 一覧の件数表示と検索クリア。3画面で同じ見た目・同じ位置にする */
body.has-suite-nav .listCount {
  margin: 8px 2px 10px;
  color: var(--suite-muted);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

body.has-suite-nav .searchField { position: relative; display: block; }
body.has-suite-nav .searchField input { width: 100%; padding-right: 42px; }

body.has-suite-nav .searchField button {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: var(--suite-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

body.has-suite-nav .searchField button:hover,
body.has-suite-nav .searchField button:focus-visible {
  background: var(--suite-accent-soft);
  color: var(--suite-accent);
}

/* 保存に失敗したトーストは、成功と見分けがつくようにする */
.suite-toast.is-error {
  border-color: rgba(255, 138, 138, .5);
  background: #2a1618;
  color: #ffc9c9;
}

/* その場で開く詳細の閉じるボタン。ダイアログの閉じる操作と同じ大きさ・同じ配色にする */
body.has-suite-nav .inline-detail { position: relative; }

body.has-suite-nav .inline-detail-close {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--suite-line);
  border-radius: var(--suite-radius-control);
  background: var(--suite-surface-raised);
  color: var(--suite-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

body.has-suite-nav .inline-detail-close:hover,
body.has-suite-nav .inline-detail-close:focus-visible {
  border-color: var(--suite-accent);
  color: var(--suite-accent);
}

/* popover はブラウザ既定で inset:0 / margin:auto / 独自の枠と背景が付くため、
   トーストの位置と見た目を明示的に取り戻す。
   ダイアログと同じトップレイヤーへ出すためにpopoverを使っている */
.suite-toast[popover] {
  top: auto;
  right: 14px;
  bottom: calc(var(--suite-nav-mobile-height) + 14px);
  left: 14px;
  width: min(440px, calc(100% - 28px));
  height: auto;
  margin: 0 auto;
  padding: 12px 15px;
  overflow: visible;
  border: 1px solid var(--suite-line);
  border-radius: var(--suite-radius-control);
  background: var(--suite-surface-raised);
  color: var(--suite-text);
}

.suite-toast[popover]:not(:popover-open) { display: none; }

@media (min-width: 900px) {
  .suite-toast[popover] {
    bottom: 20px;
    left: calc(var(--suite-nav-desktop-width) + 14px);
  }
}

/* 更新通知。音源の .update-notice と同じ位置・同じ見た目にする。
   自前の通知を持たない画面（投稿管理）で共通シェルが描画する */
body.has-suite-nav .suite-update-notice {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(calc(100% - 24px), 720px);
  min-height: 52px;
  margin: 0 auto;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--suite-radius-control);
  background: var(--suite-surface-raised);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .42);
  color: var(--suite-text);
  font-size: .92rem;
}

body.has-suite-nav .suite-update-notice[hidden] { display: none; }

body.has-suite-nav .suite-update-actions { display: flex; flex: none; gap: 8px; }

body.has-suite-nav .suite-update-actions button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--suite-line);
  border-radius: var(--suite-radius-control);
  background: var(--suite-surface);
  color: var(--suite-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

body.has-suite-nav .suite-update-actions .suite-update-apply {
  border-color: var(--suite-accent);
  background: var(--suite-accent);
  color: var(--suite-on-accent);
}

body.has-suite-nav .suite-update-actions button:disabled { opacity: .6; }