:root {
  --ink: #17211c;
  --muted: #667168;
  --paper: #f7f4eb;
  --card: #fffdf7;
  --line: #d9d2c1;
  --accent: #d85f32;
  --accent-dark: #a53d1d;
  --green: #234f3d;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at top right, #f5cfa7 0, transparent 34%), var(--paper); font-family: "Avenir Next", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; line-height: 1.65; }
a { color: var(--accent-dark); }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 80px; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.hero h1 { margin: 0; font-family: "Avenir Next", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.eyebrow { margin: 0 0 8px; color: var(--accent-dark); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.subtitle, .note { color: var(--muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.card, .feedback-card, .auth-card, .nav-card { background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 36px rgb(44 35 20 / 8%); padding: 24px; margin-bottom: 20px; }
.primary-btn, .ghost-btn, button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.primary-btn { border: 1px solid var(--accent); color: white; background: var(--accent); }
.ghost-btn { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.badge { padding: 7px 12px; border-radius: 999px; background: #e2eadf; color: var(--green); font-size: .88rem; }
.dashboard-grid, .scenario-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.nav-card { display: block; color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.nav-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(44 35 20 / 14%); }
.nav-card span { color: var(--accent-dark); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.nav-card strong { display: block; margin-top: 8px; font-size: 1.25rem; }
.operator-page { width: min(1500px, calc(100% - 32px)); }
.operator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.operator-nav-card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 16px; color: inherit; background: linear-gradient(180deg, #fff, #fbf8ef); text-decoration: none; }
.operator-nav-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.operator-nav-card p { margin: 0; color: var(--muted); }
.auth-page { min-height: 100vh; display: grid; place-items: center; }
.auth-shell { width: min(480px, calc(100% - 32px)); }
.auth-card h1 { margin: 0 0 28px; font-family: "Avenir Next", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: clamp(2.5rem, 10vw, 4.35rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.auth-form, .wh-form-grid, .admin-form-grid { display: grid; gap: 14px; }
.auth-form label, .admin-form-label { display: grid; gap: 6px; font-weight: 700; }
.auth-back { display: inline-block; margin-top: 18px; color: var(--muted); font-size: .9rem; }
.auth-input, input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: white; color: var(--ink); font: inherit; }
.data-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.data-table th, .data-table td { border-bottom: 1px solid var(--line); padding: 11px; text-align: left; white-space: nowrap; }
.score-bars { display: grid; gap: 10px; }
.score-bar-item { display: grid; grid-template-columns: 120px 1fr 42px; align-items: center; gap: 12px; }
.bar-track { height: 9px; border-radius: 999px; background: #e8e2d5; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #efa74f); }
.feedback-card-header { display: flex; justify-content: space-between; align-items: center; }
.feedback-score { display: grid; place-items: center; min-width: 48px; height: 48px; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }
.fb-block { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.fb-label, .wh-label { display: block; color: var(--accent-dark); font-weight: 800; }
.wh-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.wh-alert-error { background: #fde8e2; color: #812c1b; }
.wh-alert-warn { background: #fff0c9; color: #694b05; }
.wh-alert-ok { background: #e2f1e8; color: #215638; }
audio { max-width: 100%; }
@media (max-width: 720px) { .hero { flex-direction: column; } .score-bar-item { grid-template-columns: 90px 1fr 36px; } .card, .feedback-card { padding: 18px; } }

/* Assistant beta */
.wh-beta { display:inline-block; font-size:11px; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:#eef2fa; color:#2b4a8b; border:1px solid #ccd8ee; vertical-align:middle; }
.wh-chat-log { display:flex; flex-direction:column; gap:14px; max-height:60vh; overflow-y:auto; padding:4px 2px 12px; }
.wh-msg { border:1px solid #e2e5ea; border-radius:10px; padding:12px 14px; max-width:92%; }
.wh-msg-user { align-self:flex-end; background:#eef2fa; border-color:#ccd8ee; }
.wh-msg-assistant { align-self:flex-start; background:#fff; }
.wh-msg-body { white-space:pre-wrap; line-height:1.7; }
.wh-state { display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; margin-bottom:8px; border:1px solid #d6d9e0; background:#f5f6f8; color:#444; }
.wh-state-verified { background:#eaf7ee; border-color:#b7e0c2; color:#1f6b36; }
.wh-state-advisory { background:#fff5e0; border-color:#f2d18a; color:#7a5310; }
.wh-state-insufficient { background:#f3f4f6; border-color:#d6d9e0; color:#4b5563; }
.wh-state-scope { background:#f3f4f6; border-color:#d6d9e0; color:#4b5563; }
.wh-state-error { background:#fdecea; border-color:#f5c2c0; color:#8f2c26; }
.wh-citations { margin:10px 0 0; padding-left:18px; font-size:13px; }
.wh-citations li { margin-bottom:6px; }
.wh-citation-meta { display:block; color:#6b7280; font-size:12px; }
.wh-chat-status { margin:8px 0 0; color:#6b7280; font-size:14px; }
.wh-chat-form { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.wh-chat-form textarea { width:100%; padding:10px 12px; border:1px solid #ccd2dc; border-radius:8px; font:inherit; resize:vertical; }
.wh-chat-input-label { font-size:12px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.wh-history { list-style:none; padding:0; margin:0; }
.wh-history li { padding:8px 0; border-bottom:1px solid #eef0f3; }
.wh-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.wh-form-grid label { display:flex; flex-direction:column; gap:5px; font-size:14px; }
.wh-form-grid input, .wh-form-grid select, .wh-form-grid textarea { padding:8px 10px; border:1px solid #ccd2dc; border-radius:6px; font:inherit; width:100%; }
.wh-form-wide { grid-column:1 / -1; }
.wh-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.wh-actions form { display:inline; }
.wh-diff { background:#f7f8fa; border:1px solid #e2e5ea; border-radius:8px; padding:10px; max-height:240px; overflow:auto; white-space:pre-wrap; font-size:12px; }