:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; color:#18202a; background:#f3f6f8; }
* { box-sizing:border-box; }
body { margin:0; }
button, input, select, textarea { font:inherit; }
button, a { cursor:pointer; }
.topbar { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px 32px; background:#fff; border-bottom:1px solid #dce3e8; position:sticky; top:0; z-index:2; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(1.4rem,3vw,2rem); }
.eyebrow { color:#19708f; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
nav { display:flex; gap:10px; align-items:center; }
button, nav a { border:1px solid #bdcbd3; background:#fff; color:#183746; border-radius:10px; padding:10px 14px; text-decoration:none; }
main { max-width:1180px; margin:0 auto; padding:28px; }
.summary { display:flex; align-items:center; gap:24px; background:linear-gradient(135deg,#0e526c,#167f9f); color:#fff; padding:24px; border-radius:18px; }
.summary div { min-width:120px; text-align:center; }
.summary strong { display:block; font-size:2.4rem; }
.summary span { font-size:.84rem; }
.summary p { margin:0; flex:1; }
.prompt-button { background:#fff; color:#0e526c; border-color:#fff; font-weight:750; max-width:230px; }
.status { min-height:24px; margin:18px 2px; color:#52636d; }
.status.error { color:#a32222; }
.tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid #ccd8de; }
.tab { border:0; border-bottom:3px solid transparent; border-radius:10px 10px 0 0; background:transparent; padding:12px 20px; font-weight:750; }
.tab.active { color:#126d8a; border-bottom-color:#126d8a; background:#fff; }
.candidate-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.card { background:#fff; border:1px solid #d9e2e7; border-radius:16px; padding:18px; box-shadow:0 5px 18px rgba(25,56,70,.06); }
.card h2 { font-size:1.15rem; margin-bottom:5px; }
.artist { color:#536873; margin-bottom:14px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; min-height:24px; }
.chip { background:#e8f3f7; color:#23566a; border-radius:999px; padding:4px 9px; font-size:.78rem; }
.card .primary { width:100%; }
.primary { background:#126d8a; color:#fff; border-color:#126d8a; font-weight:700; }
.empty { grid-column:1/-1; padding:44px; text-align:center; background:#fff; border-radius:16px; color:#64757e; }
.search { max-width:420px; margin-bottom:16px; }
.posted-list { display:grid; gap:12px; }
.posted-card { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(260px,1fr) auto; align-items:center; gap:22px; background:#fff; border:1px solid #d9e2e7; border-radius:16px; padding:18px 20px; }
.posted-card h2 { font-size:1.08rem; margin-bottom:4px; }
.posted-card .artist { margin-bottom:7px; }
.post-meta { margin:0; color:#70818a; font-size:.82rem; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.metrics div { padding:8px; text-align:center; background:#f2f7f9; border-radius:10px; }
.metrics strong,.metrics span { display:block; }
.metrics strong { font-size:1.05rem; }
.metrics span { color:#657780; font-size:.72rem; margin-top:2px; }
.exception-panel { margin-top:28px; background:#fff; border:1px solid #d9e2e7; border-radius:16px; padding:18px; }
.exception-panel summary { font-weight:700; cursor:pointer; }
form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
label { display:grid; gap:6px; font-weight:650; font-size:.9rem; }
input,select,textarea { width:100%; padding:11px; border:1px solid #bdcbd3; border-radius:9px; background:#fff; }
.wide { grid-column:1/-1; }
dialog { width:min(520px,calc(100% - 28px)); border:0; border-radius:18px; padding:24px; box-shadow:0 20px 70px rgba(0,0,0,.28); }
dialog::backdrop { background:rgba(12,28,36,.52); }
dialog form { display:block; margin:0; }
dialog label { margin-top:14px; }
.edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.form-note { margin:14px 0 0; padding:10px 12px; color:#49616c; background:#eef5f7; border-radius:9px; font-size:.82rem; }
.close { float:right; border:0; font-size:1.4rem; padding:2px 8px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
@media (max-width:650px) {
  .topbar { align-items:flex-start; padding:18px; }
  nav { flex-direction:column; align-items:stretch; }
  main { padding:18px; }
  .summary { align-items:flex-start; flex-wrap:wrap; }
  .summary div { min-width:80px; }
  .prompt-button { max-width:none; width:100%; }
  .posted-card { grid-template-columns:1fr; gap:14px; }
  form { grid-template-columns:1fr; }
  .edit-grid { grid-template-columns:1fr; }
  .wide { grid-column:auto; }
}

/* sak Uta 投稿管理 / クリアシアン + 数値ゴールド */
:root {
  color-scheme: dark;
  color: #f4fbfc;
  background: #0b0f12;
}

body.has-suite-nav {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% -110px, rgba(53,217,230,.18), transparent 360px),
    linear-gradient(180deg,#0c1519 0,#0b0f12 390px),
    #0b0f12;
  color: #f4fbfc;
}

body.has-suite-nav .topbar {
  border-color: rgba(255,255,255,.1);
  background: rgba(10,15,18,.82);
  backdrop-filter: blur(20px);
}

body.has-suite-nav .topbar nav a,
body.has-suite-nav .topbar nav button,
body.has-suite-nav button {
  border-color: rgba(255,255,255,.12);
  background: #172126;
  color: #e6f1f3;
}

body.has-suite-nav .eyebrow { color: #75e5eb; font-size: .9rem; }
body.has-suite-nav h1 { font-size: clamp(1.7rem,3vw,2.35rem); }
body.has-suite-nav main { max-width: 1240px; }

body.has-suite-nav .summary {
  border: 1px solid rgba(88,220,228,.25);
  background: linear-gradient(135deg,rgba(43,145,154,.42),rgba(17,25,29,.94));
  box-shadow: 0 18px 44px rgba(0,0,0,.2);
}

body.has-suite-nav .summary strong { color: #ffc857; font-size: 2.65rem; }
body.has-suite-nav .summary span { color: #d9e7e9; font-size: .98rem; }
body.has-suite-nav .summary p { color: #c4d1d4; font-size: 1rem; line-height: 1.6; }
body.has-suite-nav .prompt-button { border-color: rgba(88,220,228,.38); background: rgba(75,212,221,.16); color: #b1f1f4; }
body.has-suite-nav .status { color: #a4b1b5; font-size: 1rem; }

body.has-suite-nav .tabs { border-color: rgba(255,255,255,.12); }
body.has-suite-nav .tab { color: #b8c5c8; font-size: 1.02rem; }
body.has-suite-nav .tab.active { border-bottom-color: #58dce4; background: rgba(43,145,154,.24); color: #f4fbfc; }

body.has-suite-nav .card,
body.has-suite-nav .posted-card,
body.has-suite-nav .exception-panel,
body.has-suite-nav .empty {
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(145deg,rgba(20,30,35,.97),rgba(15,21,25,.97));
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  color: #f4fbfc;
}

body.has-suite-nav .card h2,
body.has-suite-nav .posted-card h2 { font-size: 1.3rem; }
body.has-suite-nav .artist { color: #bcc9cc; font-size: 1rem; }
body.has-suite-nav .chip { background: rgba(75,212,221,.14); color: #a8edf1; font-size: .9rem; }
body.has-suite-nav .card .primary,
body.has-suite-nav dialog .primary {
  border-color: #58dce4;
  background: linear-gradient(135deg,#4bd4dd,#75e5eb);
  color: #082126;
  font-weight: 800;
}

body.has-suite-nav .post-meta { color: #9eacb0; font-size: .94rem; }
body.has-suite-nav .metrics div { background: rgba(255,255,255,.06); }
body.has-suite-nav .metrics strong { color: #ffc857; font-size: 1.3rem; }
body.has-suite-nav .metrics span { color: #afbec1; font-size: .86rem; }

body.has-suite-nav label { color: #d8e4e6; font-size: 1rem; }
body.has-suite-nav input,
body.has-suite-nav select,
body.has-suite-nav textarea {
  border-color: rgba(255,255,255,.16);
  background: #11191d;
  color: #f4fbfc;
  font-size: 1rem;
}
body.has-suite-nav input:focus,
body.has-suite-nav select:focus,
body.has-suite-nav textarea:focus { outline: 3px solid rgba(75,212,221,.18); border-color: #58dce4; }

body.has-suite-nav dialog {
  border: 1px solid rgba(255,255,255,.12);
  background: #11191d;
  color: #f4fbfc;
}
body.has-suite-nav dialog::backdrop { background: rgba(3,8,10,.72); backdrop-filter: blur(5px); }
body.has-suite-nav .form-note { background: rgba(75,212,221,.1); color: #b7cacc; }

@media (min-width: 900px) {
  body.has-suite-nav main { padding: 32px 36px; }
  body.has-suite-nav .candidate-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  body.has-suite-nav .card { min-height: 210px; display: flex; flex-direction: column; }
  body.has-suite-nav .card .primary { margin-top: auto; }
  body.has-suite-nav .posted-card { grid-template-columns: minmax(260px,1.5fr) minmax(340px,1fr) auto; padding: 20px 22px; }
}

@media (max-width: 899px) {
  body.has-suite-nav .topbar { position: static; padding: 18px 16px; }
  body.has-suite-nav .topbar nav a { display: none; }
  body.has-suite-nav .topbar nav { flex-direction: row; }
  body.has-suite-nav main { padding: 18px 14px calc(28px + var(--suite-nav-mobile-height)); }
  body.has-suite-nav .summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 14px; }
  body.has-suite-nav .summary div { min-width: 0; }
  body.has-suite-nav .summary p,
  body.has-suite-nav .prompt-button { grid-column: 1 / -1; }
  body.has-suite-nav .summary strong { font-size: 2.35rem; }
  body.has-suite-nav .candidate-grid { grid-template-columns: 1fr; }
  body.has-suite-nav .card { padding: 16px; }
  body.has-suite-nav .posted-card { padding: 16px; }
  body.has-suite-nav .metrics strong { font-size: 1.25rem; }
}