:root { --main:#1d8f96; --accent:#2ec7cf; --bg:#eef2f5; --ink:#223; --warn:#b3261e; --card:#fff; --line:#d5dde3; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:"Yu Gothic UI","Hiragino Sans","Noto Sans JP",sans-serif; font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; }
header#bar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; background:var(--main); color:#fff; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); }
#title { flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#net { font-size:12px; background:rgba(255,255,255,.2); border-radius:12px; padding:2px 10px; white-space:nowrap; }
#net.ng { background:#fff; color:var(--warn); font-weight:700; }
#recbar { position:sticky; top:48px; z-index:4; background:var(--warn); color:#fff; padding:4px 12px; font-size:14px; }
main { max-width:720px; margin:0 auto; padding:12px 16px calc(40px + env(safe-area-inset-bottom)); }
h2 { font-size:17px; margin:18px 0 8px; }
h3 { font-size:15px; margin:18px 0 6px; color:#345; }
.note { font-size:13px; color:#567; margin:6px 0; }
.warn { color:var(--warn); font-size:14px; min-height:1em; }
button { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:10px 14px; min-height:44px; }
button.primary { background:var(--main); border-color:var(--main); color:#fff; font-weight:700; }
button.danger { background:var(--warn); border-color:var(--warn); color:#fff; font-weight:700; }
button.ghost { background:transparent; border:0; color:#fff; font-size:20px; min-height:0; padding:0 8px; }
button.big { width:100%; font-size:18px; padding:16px; }
button:disabled { opacity:.5; }
button.rec-on { background:var(--warn); border-color:var(--warn); color:#fff; }
input, textarea, select { font:inherit; width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; color:var(--ink); }
label { display:block; font-size:14px; margin:10px 0; }
label.inline { display:flex; align-items:center; gap:6px; font-size:13px; color:#567; }
label.inline input { width:auto; }
.row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.rows { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.rows button { min-height:40px; padding:6px 0; flex:1 1 15%; font-size:15px; }
.rows button.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.list { list-style:none; margin:0; padding:0; }
.list li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:6px 0; }
.alert { background:#fff4e5; border:1px solid #e0a94a; border-left:5px solid #e0a94a; border-radius:8px; padding:10px 12px; font-size:14px; margin:8px 0; }
.alert.bad { background:#fdeaea; border-color:var(--warn); border-left-color:var(--warn); color:var(--warn); font-weight:700; }
.list li.tap { cursor:pointer; }
.list.small li { font-size:13px; padding:6px 10px; }
.list .sub { display:block; font-size:12px; color:#678; }
#tabs { display:flex; gap:4px; background:var(--bg); padding:6px 0; }
#tabs button { flex:1; padding:8px 2px; font-size:14px; min-height:40px; }
#tabs button.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:6px 0; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.card .by { font-size:12px; color:#678; display:block; }
details.card summary { cursor:pointer; font-weight:700; }
.transcript { background:#fff; border:1px dashed var(--line); border-radius:8px; padding:8px 10px; font:13px/1.6 inherit; white-space:pre-wrap; overflow-wrap:anywhere; min-height:1.6em; margin:8px 0; }
.transcript:empty { display:none; }
.meter { height:14px; background:#dfe6ea; border-radius:7px; overflow:hidden; margin:8px 0; }
#level { height:100%; width:0; background:var(--accent); transition:width .08s linear; }
.clock { font-size:44px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; margin:8px 0; }
.osusume { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px 10px 32px; font-size:14px; margin:6px 0; }
#darkScreen { position:fixed; inset:0; z-index:50; background:#000; color:#2a2a2a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; user-select:none; -webkit-user-select:none; touch-action:none; }
#darkScreen[hidden] { display:none; }
#darkClock { font-size:40px; font-variant-numeric:tabular-nums; color:#3a3a3a; }
#darkState.ng { color:#a33; font-weight:700; }
#darkHint { font-size:12px; }