:root {
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#1f2937;
  --line:#e5e7eb;
  --brand-blue:#1f3f5b;
  --brand-blue-dark:#142b40;
  --brand-blue-soft:#e8eef4;
  --accent:var(--brand-blue);
  --accentSoft:var(--brand-blue-soft);
}

*,
*::before,
*::after { box-sizing:border-box; }

html,
body { max-width:100%; overflow-x:hidden; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
.wrap { max-width:920px; margin:0 auto; padding:18px; }
.top { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:8px 0 4px; }
.brandBlock { display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 360px; }
.logoLink { display:flex; flex:0 0 auto; color:inherit; text-decoration:none; cursor:pointer; }
.logoLink:hover { opacity:0.94; }
.logoShell { width:min(100%, 180px); max-width:180px; max-height:80px; min-height:52px; display:flex; align-items:center; justify-content:flex-start; flex:0 0 auto; }
.brandLogo { display:block; width:100%; max-width:180px; max-height:80px; height:auto; object-fit:contain; }
.brandText { min-width:0; }
.brandText,
.brand,
.muted,
.small,
.soapVal,
.listText,
.statusNote,
.directoryCard,
.subCard,
.contactPanel,
.doctorPanel,
.accessHelpPanel { overflow-wrap:anywhere; word-break:break-word; }
.brandEyebrow { color:var(--brand-blue); font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:4px; }
.brand { font-weight:800; letter-spacing:0.2px; color:var(--brand-blue-dark); line-height:1.2; }
.pill { border:1px solid #d8e1eb; background:#fff; padding:8px 10px; border-radius:999px; color:var(--brand-blue); font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-top:14px; box-shadow:0 4px 16px rgba(20,43,64,0.05); min-width:0; overflow:hidden; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.btn, button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.btn { cursor:pointer; border:1px solid #d3dce6; background:#fff; color:var(--brand-blue-dark); padding:10px 12px; border-radius:12px; font-weight:600; max-width:100%; white-space:normal; }
.btn:hover { background:var(--brand-blue-soft); border-color:#c5d3e0; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--brand-blue-dark); border-color:var(--brand-blue-dark); }
.btn.danger { background:rgba(255,90,90,0.12); border-color:rgba(255,90,90,0.35); }
.muted { color:var(--muted); }
.h1 { font-size:20px; font-weight:800; margin:0 0 8px; color:var(--brand-blue-dark); }
.q { font-size:16px; font-weight:700; margin:0 0 10px; color:var(--brand-blue-dark); }
.opt { width:100%; text-align:left; }
.grid { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:720px) { .grid { grid-template-columns:1fr 1fr; } }
.progress { height:10px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#f1f5f9; }
.bar { height:100%; width:0%; background:var(--accent); }
.kvs { display:grid; grid-template-columns:180px minmax(0, 1fr); gap:8px 12px; margin-top:12px; }
.kvs div { padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
.k { color:var(--muted); font-size:12px; }
.v { font-weight:700; }
textarea { width:100%; max-width:100%; min-height:120px; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--text); padding:10px; font:inherit; }
.small { font-size:12px; color:var(--muted); line-height:1.35; }
.hr { height:1px; background:var(--line); margin:12px 0; }
.tag { display:inline-block; font-size:12px; padding:6px 10px; border:1px solid var(--accent); border-radius:999px; background:var(--accentSoft); margin-right:8px; color:var(--accent); margin-bottom:8px; }
.tag-warm { border-color:#f59e0b; background:#fffbeb; color:#92400e; }
.soapBox { border:1px solid var(--line); border-radius:12px; background:#fbfcfe; padding:12px; }
.soapGrid { display:grid; grid-template-columns:80px minmax(0, 1fr); gap:8px 12px; }
.soapKey { font-weight:900; color:var(--text); }
.soapVal { color:var(--muted); line-height:1.45; }
.subCard { border:1px solid var(--line); border-radius:14px; background:#fbfcfe; padding:14px; }
.listText { margin:0; padding-left:18px; color:var(--muted); line-height:1.5; }
.contactPanel { border:1px solid #d8e1eb; border-radius:16px; padding:16px; margin-top:14px; background:#f8fbfd; }
.statusNote { margin-top:10px; color:#24486f; font-weight:600; }
.consentRow { display:flex; gap:10px; align-items:flex-start; margin-top:12px; color:var(--text); font-size:13px; line-height:1.4; }
.selectInput { border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; color:var(--text); background:#fff; }
.hidden { display:none !important; }
.tabBar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.directoryCard { border:1px solid var(--line); border-radius:14px; background:#fbfcfe; padding:14px; }
.directoryGrid { display:grid; gap:12px; grid-template-columns:1fr; }
.badgeNeutral { display:inline-block; padding:4px 8px; font-size:12px; border-radius:999px; background:var(--brand-blue-soft); color:var(--brand-blue); border:1px solid #d8e1eb; }
.doctorPanel { border:1px solid #d8e1eb; border-radius:16px; padding:16px; margin-top:14px; background:#f8fbfd; }
.inlineList { margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.5; }
.inlineActions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.riskBadge { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; }
.riskDot { width:10px; height:10px; border-radius:999px; border:1px solid var(--line); background:#9ca3af; }
.risk-green { border-color:#16a34a; background:#f0fdf4; color:#166534; }
.risk-green .riskDot { background:#16a34a; border-color:#16a34a; }
.risk-amber { border-color:#f59e0b; background:#fffbeb; color:#92400e; }
.risk-amber .riskDot { background:#f59e0b; border-color:#f59e0b; }
.risk-red { border-color:#ef4444; background:#fef2f2; color:#991b1b; }
.risk-red .riskDot { background:#ef4444; border-color:#ef4444; }
.modalOverlay { position:fixed; inset:0; background:rgba(15,23,42,0.35); display:flex; align-items:center; justify-content:center; padding:18px; z-index:9999; opacity:0; pointer-events:none; transition:opacity 160ms ease; }
.modalOverlay.open { opacity:1; pointer-events:auto; }
.modal { width:min(680px, 100%); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 60px rgba(0,0,0,0.18); padding:16px; }
.modalTop { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fieldRow { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 180px; }
.field input, .field textarea { width:100%; max-width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; color:var(--text); background:#fff; }
a.directoryLink { color:var(--brand-blue); text-decoration:none; font-weight:600; }
a.directoryLink:hover { text-decoration:underline; }
.printOnly { display:none; }

#contentArea,
#resultSummaryPanel,
#resultDirectoryPanel,
#doctorAccessPanel,
#mainCard { min-width:0; }

@media (max-width:768px) {
  .card,
  .contactPanel,
  .doctorPanel,
  .subCard,
  .directoryCard,
  .accessHelpPanel { padding:14px; }
  .fieldRow { gap:10px; }
  .row { gap:10px; }
}

@media (max-width:640px) {
  .wrap { padding:16px; }
  .top { gap:14px; align-items:flex-start; }
  .brandBlock { gap:12px; flex-basis:100%; }
  .logoShell { max-width:140px; min-height:44px; }
  .brandLogo { max-width:140px; max-height:64px; }
  .top > .row { width:100%; }
  .tabBar { gap:8px; }
  .tabBar .btn,
  .row.noPrint .btn,
  .inlineActions .btn { flex:1 1 160px; }
  .kvs { grid-template-columns:1fr; }
  .soapGrid { grid-template-columns:1fr; gap:6px; }
  .soapKey { margin-top:4px; }
  .fieldRow { flex-direction:column; }
  .field { flex-basis:auto; }
  .riskBadge { align-self:flex-start; }
  .accessHelpItem { flex-direction:column; gap:2px; }
}

@media (max-width:480px) {
  .wrap { padding:12px; }
  .card { padding:12px; border-radius:14px; }
  .pill { width:100%; text-align:center; }
  .btn { width:100%; }
  .tabBar .btn,
  .row.noPrint .btn,
  .inlineActions .btn { flex:1 1 100%; }
  .modalOverlay { padding:12px; }
  .modal { padding:12px; border-radius:14px; }
  .modalTop { flex-direction:column; align-items:stretch; }
  .modalTop .btn { width:100%; }
  .directoryCard .row,
  #doctorAccessPanel .row,
  #resultSummaryPanel .row { align-items:stretch !important; }
  .directoryCard .badgeNeutral,
  .riskBadge { max-width:100%; }
}

@media print {
  body { background:#fff; color:#000; }
  .card { box-shadow:none; border:1px solid #ddd; }
  .noPrint { display:none !important; }
  .printOnly { display:block; }
}