:root.bl-root { --bg:#000; --fg:#f2f2f2; --muted:#9ea0a4; --card:#121212; --surface:#151515; --border:#252525; --accent:#00ff00; color-scheme:dark;  --label-fs:18px; }
html,body.bl-root { background: var(--bg) !important; color: var(--fg) !important; }
:root.bl-root {
  --bg:#000000; --fg:#f2f2f2; --muted:#9ea0a4;
  --card:#121212; --surface:#151515; --border:#252525;
  --accent:#00FF00; --accent2:#00bfff; --danger:#ff375f;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  color-scheme: dark;
}
html,body.bl-root { background:#000 !important; }
:root.bl-root {
  --bg:#0a0a0a; --fg:#f2f2f2; --muted:#9ea0a4;
  --card:#121212; --surface:#151515; --border:#252525;
  --accent:#00ff00; --accent2:#00bfff; --danger:#ff375f;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  color-scheme: dark;
}
.bl-root :where(*) { box-sizing: border-box; }
body.bl-root { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans JP', sans-serif; background:var(--bg); color:var(--fg); }
header{ position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--border); padding:12px 14px; }
header h1{ margin:0; font-size:var(--label-fs); color:var(--accent);}
main{ padding:12px; display:grid; gap:16px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:var(--shadow); }
.section-title{ color:var(--accent); font-weight:700; margin:0; font-size:22px; }
.muted{ color:var(--muted); }
.row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.btn{ appearance:none; border:1px solid var(--border); background:#1a1a1a; color:#f2f2f2; padding:10px 14px; border-radius:14px; font-size:14px; cursor:pointer; }
.btn:hover{ border-color:#2f2f2f; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; filter:grayscale(.6); }
.btn-acc{ background: var(--accent); color:#001b00; border-color:#026902; font-weight:700; }
.btn-info{ background: var(--accent2); color:#00121a; border-color:#0f4e66; font-weight:700; }
.btn-danger{ color:var(--danger); background:#221216; border-color:#4b2025; }
.btn-ghost{ background:transparent; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }

/* form */
.form-grid{ display:grid; gap:14px; }
.field{ display:grid; gap:8px; }
.label{ font-size:var(--label-fs); color:var(--muted);}
.input{ width:100%; border:1px solid var(--border); background:#0f0f0f; color:#f2f2f2;
        padding:14px; border-radius:12px; font-size:18px; }
.step-row{ display:flex; gap:10px; }
.step-btn{ flex:1 1 0; border-radius:6px !important;  font-size:18px !important;}
.submit-big{ width:100%; padding:16px; font-size:18px; }

/* list */
.log-item{ padding:12px 8px; border-top:1px solid var(--border);}
.log-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.log-date{ color:#6ec1ff; font-size:20px; font-weight:800; }
.log-grid{ display:grid; grid-template-columns: auto 1fr; column-gap:12px; row-gap:6px; margin-top:8px; }
.metric-name{ color:#cfd1d4; }
.metric-val{ text-align:right; }

/* mini menu */
.menu{ position:relative; }
.kebab{ appearance:none; background:transparent; border:none; color:#ddd; font-size:22px; line-height:1; padding:6px; cursor:pointer; }
.kebab::after{ content:"\22EE"; }
.menu-panel{ position:absolute; top:36px; right:0; background:#111; border:1px solid var(--border); border-radius:12px; padding:6px; min-width:120px; box-shadow:var(--shadow); display:none; z-index:20; }
.menu.open .menu-panel{ display:block; }
.menu-item{ padding:8px 10px; border-radius:8px; cursor:pointer; }
.menu-item:hover{ background:#1a1a1a; }

/* modals */
.backdrop[hidden]{ display:none!important; }
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; z-index:2000; }
.modal{ width:min(92vw,560px); max-height:min(86vh,640px); overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border);}
.modal-title{ margin:0; font-size:20px; color:var(--accent);}
.modal-body{ padding:12px; display:grid; gap:12px; }
.modal-foot{ padding:12px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.close-x{ appearance:none; background:transparent; border:none; color:#cfd1d4; font-size:22px; line-height:1; cursor:pointer; }

/* toast */
.toast[hidden]{ display:none!important; }
.toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:#1b1b1b; border:1px solid var(--border); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); z-index:2100; opacity:0; transition:opacity .2s ease; }
.toast.show{ opacity:1; }

/* chart */
.legend-row{ display:flex; gap:12px; flex-wrap:wrap; }
.legend-row label{ display:flex; align-items:center; gap:6px; }
.period{ width:140px; }

/* Toolbar right alignment + wrap behavior */
#logs-header .toolbar{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
#logs-header.wrap-right .toolbar{ flex-basis:100%; }
#logs-header .section-title{ font-size:var(--label-fs);  white-space:nowrap; }

p{ font-size:18px; }
#log-list{ font-size:18px; }

/* Glossary spacing tighten */
.glossary-body p{ margin:6px 0; }
.backdrop[data-modal="glossary"] .modal-body p{ margin:2px 0; }
.backdrop[data-modal="glossary"] .modal-body{ line-height:1.3; }


/* overrides: align with user_info */

/* align buttons to user_info */
.btn{ background:#1a1a1a; color:var(--fg); border:1px solid var(--border); }
.btn-ghost{ background:transparent !important; }
.btn-acc{ background: var(--accent) !important; color:#001b00 !important; border-color:#026902 !important; font-weight:700; }

.section-title.small{ font-size:var(--label-fs); }


/* Disclosure-style title for logs open/close */
.section-title.disclosure{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:none; color:var(--accent); font:inherit; padding:0; cursor:pointer; }
.section-title.disclosure .caret::before{ content:'▾'; color:#fff; display:inline-block; transition:transform .2s; }
.section-title.disclosure[aria-expanded="false"] .caret::before{ content:'▸'; }
/* Ensure toolbar stays right-aligned in logs header */
#logs-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#logs-header .toolbar{ margin-left:auto; display:flex; gap:10px; }


/* r14: ensure label text is green, caret only white */
.section-title.disclosure{ color: var(--accent) !important; }
.section-title.disclosure .label{ color: var(--accent) !important; }
.section-title.disclosure .caret::before{ color:#fff !important; }
.section-title.disclosure:focus{ outline: none; }
.section-title.disclosure:focus-visible{ outline: 2px solid var(--accent2); outline-offset: 2px; }


/* r15: make Body Logs disclosure title bold again */
.section-title.disclosure,
.section-title.disclosure .label{
  font-weight: 700 !important;
}

/* unify help '?' style */
.btn.ghost.q{ background:#0f0f0f; color:var(--fg); border:1px solid var(--border); }