:root { --ink:#17324d; --muted:#617386; --line:#dce6ec; --paper:#fff; --wash:#f3f8fa; --accent:#0b6d83; --accent-dark:#075266; --good:#e9f7f2; --warn:#fff3df; --shadow:0 5px 18px rgba(20,55,77,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#eaf4f7 0,#f8fbfc 280px); font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-text-size-adjust:100%; }
.website-mode #save-exam-button,.website-mode [data-page="saved-page"],.website-mode .app-nav { display:none; }
readthedocs-flyout { display:none !important; }
.app-shell { width:min(100%,860px); margin:auto; padding:calc(22px + env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom)); }
.topbar,.note-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }.top-actions { display:flex; align-items:center; gap:10px; flex:none; }
h1,h2,p { margin:0; } h1 { font-size:1.8rem; letter-spacing:-.035em; } h2 { font-size:1.15rem; letter-spacing:-.015em; }.eyebrow { color:var(--accent); font-size:.7rem; font-weight:750; letter-spacing:.1em; }
button { font:inherit; cursor:pointer; } .text-button { border:0; background:transparent; color:var(--accent-dark); font-weight:700; padding:10px 4px; }.secondary-button { color:white; background:var(--accent); border:0; border-radius:9px; font-weight:700; padding:10px 13px; }.secondary-button:active { background:var(--accent-dark); }
.patient-card { display:grid; grid-template-columns:1fr 145px; gap:12px; margin:22px 0 16px; padding:14px; background:rgba(255,255,255,.72); border:1px solid rgba(205,220,228,.8); border-radius:14px; }
.history-card { margin:0 0 16px; padding:15px; background:rgba(255,255,255,.82); border:1px solid rgba(205,220,228,.9); border-radius:14px; box-shadow:var(--shadow); }.history-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.history-heading h2 { margin-top:2px; font-size:1.06rem; }.history-heading p:last-child { margin-top:3px; color:var(--muted); font-size:.77rem; }.dictate-button { flex:none; padding:9px 11px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:9px; font-size:.78rem; font-weight:800; }.dictate-button.recording { color:white; background:#b14242; border-color:#b14242; animation:dictation-pulse 1.2s ease-in-out infinite; }.dictation-status { min-height:18px; margin:10px 0 5px; color:var(--muted); font-size:.75rem; }.history-card textarea { margin-top:4px; min-height:112px; resize:vertical; }.history-actions { display:flex; align-items:center; gap:10px; margin-top:10px; }.history-actions span { color:var(--muted); font-size:.72rem; line-height:1.3; }.history-actions button:disabled { opacity:.65; cursor:wait; }.formatted-history { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }.formatted-history label { color:var(--accent-dark); }.formatted-history textarea { min-height:170px; }.note-source { display:flex; flex-wrap:wrap; gap:8px 14px; margin:14px 0 0; padding:10px 0 0; border:0; border-top:1px solid var(--line); }.note-source legend { width:100%; margin-bottom:2px; color:var(--accent-dark); font-size:.76rem; font-weight:800; }.note-source label { display:flex; align-items:center; gap:5px; color:var(--ink); font-size:.78rem; font-weight:700; }.note-source input { width:auto; margin:0; }.note-source p { width:100%; margin:0; color:var(--muted); font-size:.71rem; line-height:1.35; }@keyframes dictation-pulse { 50% { box-shadow:0 0 0 5px rgba(177,66,66,.16); } }
.exam-mode { display:flex; gap:6px; margin:0 0 14px; padding:5px; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:12px; }.exam-mode button { flex:1; padding:9px; color:var(--muted); background:transparent; border:0; border-radius:8px; font-size:.82rem; font-weight:800; }.exam-mode button.active { color:white; background:var(--accent); }.quick-screen { display:grid; gap:10px; }.quick-screen[hidden] { display:none; }.quick-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 4px; }.quick-heading h2 { font-size:1.05rem; }.quick-heading p { margin-top:2px; color:var(--muted); font-size:.76rem; }.quick-all-normal { flex:none; padding:9px 11px; color:white; background:var(--accent); border:0; border-radius:9px; font-size:.76rem; font-weight:800; }.quick-all-normal.selected { color:#146953; background:var(--good); box-shadow:inset 0 0 0 1px #8dccbb; }.quick-card { display:grid; grid-template-columns:minmax(140px,.85fr) minmax(0,1.4fr); gap:14px; align-items:center; padding:15px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.quick-card h2 { font-size:1rem; }.quick-card p { margin-top:2px; color:var(--muted); font-size:.75rem; }.quick-controls { display:grid; grid-template-columns:110px 1fr; gap:8px; align-items:start; }.quick-controls textarea { grid-column:1 / -1; margin:0; min-height:52px; resize:vertical; font-size:.86rem; }.quick-normal { padding:9px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:8px; font-size:.8rem; font-weight:800; }.quick-normal.selected { color:#146953; background:var(--good); border-color:#8dccbb; } body[data-exam-mode="quick"] #section-nav,body[data-exam-mode="quick"] #progress,body[data-exam-mode="quick"] #exam-sections { display:none; }
label { display:block; color:var(--muted); font-size:.76rem; font-weight:700; } input,textarea,select { width:100%; color:var(--ink); font:inherit; background:white; border:1px solid #c9d8df; border-radius:8px; margin-top:5px; padding:9px 10px; } input:focus,textarea:focus,select:focus { outline:3px solid #bce3e9; border-color:var(--accent); }
.section-nav { position:sticky; top:calc(env(safe-area-inset-top) + 6px); z-index:6; display:flex; overflow:auto; gap:8px; margin:0 -4px 8px; padding:8px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 14px rgba(20,55,77,.12); scrollbar-width:none; }.section-nav::-webkit-scrollbar {display:none}.section-nav button { white-space:nowrap; color:var(--accent-dark); background:white; border:1px solid var(--line); border-radius:20px; padding:7px 11px; font-size:.78rem; font-weight:700; }.section-nav button.active { color:white; background:var(--accent); border-color:var(--accent); }.progress { color:var(--muted); font-size:.8rem; margin:3px 0 13px; }
.exam-section,.note-panel { background:var(--paper); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); padding:18px; margin:14px 0; }.exam-section[hidden] { display:none; }.section-heading { display:flex; align-items:center; gap:9px; margin-bottom:14px; }.section-heading h2 { flex:1; }.section-icon { width:10px; height:10px; border-radius:50%; background:var(--accent); }.section-normal { padding:7px 9px; color:var(--accent-dark); background:white; border:1px solid #cbd8df; border-radius:8px; font-size:.72rem; font-weight:750; transition:background .16s,color .16s,border-color .16s,box-shadow .16s; }.section-normal.selected { color:#146953; background:var(--good); border-color:#78cdb8; box-shadow:0 0 0 4px rgba(79,185,157,.17),0 0 14px rgba(67,171,145,.34); }.sheet-group { border:0; padding:0; margin:0 0 20px; }.sheet-group legend { width:100%; border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:4px; color:var(--accent-dark); font-size:.92rem; font-weight:800; }.field-row { display:grid; grid-template-columns:minmax(135px, .85fr) minmax(0, 1.8fr); align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eef3f5; }.field-label { color:var(--ink); font-size:.87rem; font-weight:750; }.choices { display:flex; flex-wrap:wrap; gap:6px; }.choice-chip { position:relative; }.choice-chip input { position:absolute; opacity:0; pointer-events:none; }.choice-chip span { display:block; padding:6px 9px; color:#536a7a; background:#fff; border:1px solid #cbd8df; border-radius:7px; font-size:.78rem; font-weight:650; }.choice-chip input:checked + span { color:#146953; background:var(--good); border-color:#8dccbb; }.choice-chip input:checked + span[data-not-tested] { color:#7e5b20; background:var(--warn); border-color:#edb26a; }.inline-inputs { display:flex; gap:8px; align-items:center; }.inline-inputs input { min-width:0; margin:0; }.inline-inputs span { color:var(--muted); font-size:.8rem; }.table-wrap { overflow:auto; margin:8px 0 17px; }.exam-table { width:100%; border-collapse:collapse; font-size:.82rem; }.exam-table th,.exam-table td { min-width:75px; text-align:left; border-bottom:1px solid #e7eef1; padding:7px 6px; }.exam-table th { color:var(--muted); font-weight:750; }.exam-table td:first-child { color:var(--ink); font-weight:700; }.exam-table input,.exam-table select { margin:0; padding:6px; min-width:55px; }.free-text-label { margin-top:14px; }.free-text-label textarea { resize:vertical; font-size:.9rem; }
.other-wrap { margin-top:8px; }.autofill-button,.visual-normal,.visual-other,.quadrant { color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:8px; font-weight:700; }.autofill-button { width:100%; padding:9px; }.autofill-button.selected,.visual-normal.selected { color:#146953; background:var(--good); border-color:#8dccbb; }.visual-other.selected,.quadrant.selected { color:#934b07; background:var(--warn); border-color:#edb26a; }.visual-actions { display:flex; gap:7px; }.visual-actions button { padding:7px 10px; }.visual-grid { display:flex; gap:12px; margin-top:10px; }.eye-field { color:var(--muted); font-size:.73rem; }.eye-field strong { display:block; margin-bottom:4px; }.quadrants { display:grid; grid-template-columns:repeat(2,44px); gap:3px; }.quadrant { height:37px; font-size:.69rem; }.autofill-button + textarea { margin-top:8px; }
.power-tabs { display:flex; gap:6px; margin-bottom:10px; }.power-tabs button { flex:1; padding:8px 5px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:8px; font-size:.76rem; font-weight:750; }.power-tabs button.active { color:white; background:var(--accent); border-color:var(--accent); }.power-pane-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }.power-pane-heading p { color:var(--muted); font-size:.76rem; margin:0; }.power-all { flex:none; padding:6px 8px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:7px; font-size:.72rem; font-weight:750; }.power-row { display:grid; grid-template-columns:minmax(120px,1fr) 86px 68px 68px; align-items:center; gap:6px; padding:7px 0; border-bottom:1px solid #edf2f4; color:var(--ink); font-size:.8rem; font-weight:700; }.power-row label { display:flex; align-items:center; gap:3px; font-size:.7rem; }.power-row select { width:42px; margin:0; padding:5px 2px; font-size:.75rem; }.power-normal { padding:7px 4px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:7px; font-size:.72rem; font-weight:750; }.power-normal.selected { color:#146953; background:var(--good); border-color:#8dccbb; }
.saved-exams-panel { margin:14px 0; padding:16px; background:#fbfdfe; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); }.saved-exams-list { margin-top:12px; }.saved-exam { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line); }.saved-exam:first-child { border-top:0; }.saved-exam-title { color:var(--ink); font-size:.9rem; font-weight:800; }.saved-exam-meta { color:var(--muted); font-size:.73rem; }.saved-exam-actions { display:flex; gap:7px; }.saved-exam-actions button { padding:7px 9px; border-radius:7px; font-size:.75rem; font-weight:750; }.open-saved { color:white; background:var(--accent); border:0; }.delete-saved { color:#9c3d3d; background:white; border:1px solid #e5bbbb; }.empty-saves { color:var(--muted); font-size:.86rem; }.app-nav { position:fixed; z-index:10; bottom:calc(13px + env(safe-area-inset-bottom)); left:50%; display:flex; gap:4px; padding:5px; background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:18px; box-shadow:0 5px 20px rgba(20,55,77,.18); transform:translateX(-50%); }.app-nav button { padding:9px 13px; color:var(--muted); background:transparent; border:0; border-radius:13px; font-size:.78rem; font-weight:800; white-space:nowrap; }.app-nav button.active { color:white; background:var(--accent); }.note-actions { display:flex; gap:9px; margin-top:24px; }.note-actions .secondary-button,.note-actions .generate-button { flex:1; margin:0; }.generate-button { width:100%; padding:14px; color:white; background:var(--accent); border:0; border-radius:11px; font-weight:800; }.generate-button:active { background:var(--accent-dark); }.note-panel { margin-top:14px; background:#fbfdfe; }.note-panel textarea { min-height:230px; margin-top:16px; resize:vertical; font-size:.93rem; line-height:1.5; }.helper { color:var(--muted); font-size:.76rem; margin-top:9px; }
@media (max-width:520px) { .app-shell { padding-inline:13px; }.topbar { align-items:flex-start; }.top-actions { gap:4px; }.top-actions .text-button { padding:7px 3px; font-size:.75rem; }.patient-card { grid-template-columns:1fr; }.quick-heading { align-items:flex-start; flex-direction:column; }.quick-all-normal { width:100%; }.quick-card { grid-template-columns:1fr; gap:9px; }.quick-controls { grid-template-columns:92px 1fr; }.exam-actions { align-items:flex-start; flex-direction:column; gap:6px; }.exam-actions .secondary-button { width:100%; }.section-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:6px; margin:0 -2px 8px; padding:7px; }.section-nav button { min-width:0; padding:8px 4px; white-space:normal; line-height:1.15; font-size:.72rem; }.exam-section,.note-panel { padding:15px; }.field-row { grid-template-columns:1fr; gap:6px; }.note-heading { align-items:flex-start; }.secondary-button { padding:9px 10px; font-size:.86rem; } input,textarea,select { font-size:16px; }.power-row select { font-size:16px; }.power-row { grid-template-columns:minmax(105px,1fr) 82px 56px 56px; }.power-normal { font-size:.68rem; }.saved-exam { align-items:flex-start; flex-direction:column; }.saved-exam-actions { width:100%; }.saved-exam-actions button { flex:1; } }
.note-actions .note-style-button { flex:1; margin:0; }.note-style-button { color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:11px; font-weight:800; padding:12px 8px; font-size:.8rem; }.note-style-button.active { color:white; background:var(--accent-dark); border-color:var(--accent-dark); }.note-preview { margin-top:16px; padding:14px; color:var(--ink); background:#f3f8fa; border:1px solid #dbe8ed; border-radius:10px; font-size:.93rem; line-height:1.6; }.note-preview strong { color:#a33828; font-weight:800; }.visual-acuity-inputs { display:flex; gap:8px; }.visual-acuity-inputs label { flex:1; }.visual-acuity-inputs small { display:block; margin-top:7px; color:var(--muted); font-size:.68rem; font-weight:750; }.visual-acuity-inputs input { min-width:0; }.glasses-button { margin-top:10px; padding:7px 10px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:8px; font-size:.76rem; font-weight:750; }.glasses-button.selected { color:#146953; background:var(--good); border-color:#8dccbb; }
.quick-card { grid-template-columns:minmax(150px,1fr) auto; }.quick-card.confirmed { border-color:#91d3c2; background:linear-gradient(90deg,#f2fbf8,#fff); }.quick-status { font-weight:700; }.quick-card.confirmed .quick-status { color:#16715b; }.quick-controls { grid-template-columns:auto auto; justify-content:end; }.quick-add,.section-toggle { padding:9px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:8px; font-size:.8rem; font-weight:800; }.quick-controls textarea { grid-column:1 / -1; width:min(440px,100%); }.section-title { flex:1; min-width:0; }.section-title .section-summary { margin-top:2px; color:var(--muted); font-size:.72rem; font-weight:700; }.section-normal { white-space:nowrap; }.section-toggle { white-space:nowrap; }.section-content { margin-top:4px; }.section-content .sheet-group { margin:0 0 13px; padding:0 12px; border:1px solid #e2ebef; border-radius:10px; background:#fcfeff; }.group-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0 7px; border-bottom:1px solid var(--line); }.group-heading h3 { margin:0; color:var(--accent-dark); font-size:.9rem; letter-spacing:-.01em; }.group-normal { flex:none; padding:6px 8px; color:var(--accent-dark); background:#fff; border:1px solid #cbd8df; border-radius:7px; font-size:.69rem; font-weight:800; white-space:nowrap; }.group-normal.selected { color:#146953; background:var(--good); border-color:#78cdb8; box-shadow:0 0 0 3px rgba(79,185,157,.14); }.section-content .sheet-group .field-row,.section-content .sheet-group .table-wrap { margin-inline:0; }.exam-section.has-abnormal-detail { border-color:#e5bf8c; }.exam-section.has-abnormal-detail .section-summary { color:#98510d; } body[data-exam-mode="detailed"] #section-nav,body[data-exam-mode="detailed"] #progress { display:none; } body[data-exam-mode="detailed"] .exam-section { display:block; } @media (max-width:520px) { .quick-card { grid-template-columns:1fr; }.quick-controls { justify-content:start; }.section-heading { flex-wrap:wrap; }.section-title { width:calc(100% - 24px); }.section-normal,.section-toggle { flex:1; }.section-content { width:100%; }.group-heading { align-items:flex-start; flex-direction:column; }.group-normal { width:100%; } }
.visual-grid { align-items:flex-start; gap:18px; }.eye-field { text-align:center; }.eye-field strong { margin-bottom:6px; color:var(--accent-dark); font-size:.76rem; letter-spacing:.06em; }.visual-field-circle { display:grid; grid-template-columns:repeat(2,56px); grid-template-rows:repeat(2,56px); overflow:hidden; width:112px; height:112px; border:2px solid #8aa4b2; border-radius:50%; background:#fff; }.visual-field-circle .quadrant { width:56px; height:56px; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:#f9fcfd; box-shadow:inset 0 0 0 1px #cbd8df; }.visual-field-circle .quadrant.selected { background:#ffe2b9; box-shadow:inset 0 0 0 2px #d88822; }.visual-field-circle .quadrant:focus-visible { position:relative; z-index:1; outline:3px solid var(--accent); outline-offset:-3px; }.visual-field-circle .quadrant:nth-child(1) { border-radius:56px 0 0 0; }.visual-field-circle .quadrant:nth-child(2) { border-radius:0 56px 0 0; }.visual-field-circle .quadrant:nth-child(3) { border-radius:0 0 0 56px; }.visual-field-circle .quadrant:nth-child(4) { border-radius:0 0 56px 0; } @media (max-width:520px) { .visual-grid { gap:12px; }.visual-field-circle { grid-template-columns:repeat(2,48px); grid-template-rows:repeat(2,48px); width:96px; height:96px; }.visual-field-circle .quadrant { width:48px; height:48px; } }
.history-hint { margin-top:10px; color:var(--muted); font-size:.74rem; }.note-style-button:disabled,.dictate-button:disabled { color:#7b8d99; background:#f4f7f8; border-color:#d8e2e6; cursor:not-allowed; opacity:1; }.dictate-button { min-width:44px; padding-inline:10px; font-size:1.05rem; line-height:1; }
.documentation-workspace { display:grid; gap:18px; }.history-fields { display:grid; gap:12px; margin-top:14px; }.history-fields textarea { min-height:88px; resize:vertical; }.history-fields label:first-child textarea { min-height:150px; }
@media (min-width:1000px) { .app-shell { width:min(100%,1380px); padding-inline:28px; }.documentation-workspace { grid-template-columns:minmax(295px,.64fr) minmax(0,1.36fr); align-items:start; gap:24px; }.clinical-sidebar { position:sticky; top:24px; }.history-card { margin:0; }.exam-workspace { display:block; }.exam-sidebar { display:none; }.exam-content .field-row { grid-template-columns:minmax(210px,.7fr) minmax(0,1.8fr); }.exam-content .note-actions { max-width:none; } }