:root{
  --bg:#0f1520; --card:#182130; --line:#2a3547; --ink:#eef2f8; --sub:#9aa8bd;
  --gold:#d8b45a; --ok:#4bbd85; --bad:#e0705f; --warn:#e8a13c;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f4f6fa; --card:#fff; --line:#e0e5ee; --ink:#1b2331; --sub:#63708a; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.75;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Segoe UI",system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
header{
  background:linear-gradient(135deg,#12233f,#1d3a63); color:#fff;
  padding:calc(26px + env(safe-area-inset-top)) 20px 22px; text-align:center;
}
header h1{margin:0 0 6px; font-size:24px; letter-spacing:.06em}
header p{margin:0; font-size:13px; color:#c2cee0}
header b{color:var(--gold)}
main{max-width:640px; margin:0 auto; padding:16px 14px 40px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 17px; margin-bottom:14px}
h2{font-size:15px; margin:0 0 12px; color:var(--sub); letter-spacing:.08em}

.notice p{margin:0 0 9px; font-size:13.5px; color:var(--sub)}
.notice p:last-child{margin-bottom:0}
.notice b{color:var(--ink)}
.priv{font-size:12.5px !important; padding-top:8px; border-top:1px solid var(--line)}

.summary{display:grid; grid-template-columns:repeat(3,1fr); text-align:center; gap:8px}
.summary div{display:flex; flex-direction:column}
.summary b{font-size:26px; line-height:1.2; color:var(--gold)}
.summary span{font-size:11.5px; color:var(--sub)}

.tabs{display:flex; gap:8px; margin-bottom:14px}
.tabs button{
  flex:1; padding:11px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--sub); font-size:15px; font-weight:700; cursor:pointer;
}
.tabs button.on{background:var(--gold); border-color:var(--gold); color:#1b2331}

.fieldLabel{display:block; font-size:12.5px; color:var(--sub); margin-bottom:6px}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
select{
  flex:1; min-width:0; padding:11px; font-size:16px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
}
button,.fileBtn{font-family:inherit}
.ghost{
  padding:11px 15px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:14px; cursor:pointer;
}
.ghost.danger{color:var(--bad); border-color:var(--bad)}
.fileBtn{display:inline-block; cursor:pointer}

.rec{
  width:100%; margin-top:14px; padding:17px; font-size:17px; font-weight:700;
  border:none; border-radius:13px; background:var(--gold); color:#1b2331; cursor:pointer;
}
.rec.recording{background:var(--bad); color:#fff}

.status{min-height:1.5em; margin:10px 0 0; font-size:13px; color:var(--sub)}
.status.ok{color:var(--ok)} .status.warn{color:var(--warn)} .status.rec{color:var(--bad)}

.verdict{display:flex; align-items:baseline; gap:10px; margin:16px 0 10px}
.verdict span{font-size:23px; font-weight:700; color:var(--gold)}
.verdict em{font-style:normal; font-size:13px; color:var(--sub)}
.bar{display:grid; grid-template-columns:1fr 3fr auto; align-items:center; gap:9px; margin-bottom:6px; font-size:13px}
.bar i{display:block; height:8px; border-radius:5px; background:var(--gold); min-width:2px}
.bar b{font-size:12px; color:var(--sub); font-weight:500}
.caveat{font-size:12px; color:var(--sub); margin:10px 0 0}

.scoreRow{margin-bottom:15px}
.scoreRow:last-child{margin-bottom:0}
.scoreHead{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px}
.scoreHead b{font-size:19px}
.meter{height:9px; background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin:5px 0 5px}
.meter i{display:block; height:100%; background:var(--sub)}
.scoreRow.ok .meter i{background:var(--ok)} .scoreRow.ok .scoreHead b{color:var(--ok)}
.scoreRow.bad .meter i{background:var(--bad)} .scoreRow.bad .scoreHead b{color:var(--bad)}
.scoreRow.base .meter i{background:var(--line)}
.scoreRow p{margin:0; font-size:12px; color:var(--sub)}
.hint{font-size:12.5px; color:var(--sub); margin:0 0 10px}

.classList{list-style:none; margin:0; padding:0}
.classList li{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.classList li:last-child{border-bottom:none}
.classList li span{flex:1}
.classList li b{font-size:13px; color:var(--sub); font-weight:500}
.classList li button{
  border:none; background:transparent; color:var(--sub); font-size:19px; cursor:pointer; line-height:1; padding:0 4px;
}
.classList .empty{color:var(--sub); font-size:13px; justify-content:center}

footer{text-align:center; padding:6px 0 0}
footer p{font-size:11.5px; color:var(--sub); margin:0}
.subtle{display:block;text-align:center;margin-top:9px;font-size:13px;color:var(--sub);border:none}

/* 使い方 */
.guide{padding:0}
.guide summary{
  list-style:none; cursor:pointer; padding:15px 17px; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between;
}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:'▾'; color:var(--gold); font-size:13px; transition:transform .15s}
.guide[open] summary::after{transform:rotate(180deg)}
.guide[open] summary{border-bottom:1px solid var(--line)}
.guide > *:not(summary){padding-left:17px; padding-right:17px}
.guide h3{font-size:14px; color:var(--gold); margin:18px 0 6px; letter-spacing:.04em}
.guideSteps{margin:14px 0 0; padding-left:1.25em; font-size:13.5px}
.guideSteps li{margin-bottom:11px; color:var(--sub)}
.guideSteps b{color:var(--ink)}
.guideSteps i{font-style:normal; color:var(--ink)}
.guideTips{margin:0; padding-left:1.15em; font-size:13px; color:var(--sub)}
.guideTips li{margin-bottom:8px}
.guideTips b{color:var(--ink)}
.guideNote{font-size:13px; color:var(--sub); margin:0 0 8px}
.guideNote b{color:var(--ink)}
.guide > *:last-child{padding-bottom:17px}