* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --font-ui: "Segoe UI", Arial, sans-serif;
  --primary:      #a855c7;
  --primary-dark: #7e3fa0;
  --success:      #25b98c;
  --mint:         #62e6bd;
  --purple-soft:  #f7effb;
  --bg:           #f6f5f8;
  --card:         #ffffff;
  --text:         #1e293b;
  --muted:        #64748b;
  --border:       #e2e8f0;
  --radius:       12px;
  --shadow:       0 2px 10px rgba(0,0,0,0.07);
}

html, body, button, input, select, textarea {
  font-family: var(--font-ui);
}

body {
  background: var(--bg); color: var(--text); direction: rtl;
  min-height: 100dvh;
  /* iOS safe area (notch / home bar) */
  padding-bottom: env(safe-area-inset-bottom);
  /* prevent text selection while drawing */
  -webkit-user-select: none; user-select: none;
  /* prevent iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p, label, button, input, select, textarea {
  line-height: 1.5;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; }

/* Authentication - mobile first */
.auth-screen { justify-content:flex-start; padding:max(20px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom)); background:radial-gradient(circle at 15% 8%,rgba(98,230,189,.26),transparent 36%),radial-gradient(circle at 88% 26%,rgba(168,85,199,.18),transparent 34%),linear-gradient(180deg,#fff 0%,#fbf7fd 100%); }
.auth-hero { text-align: center; margin: auto 0 36px; }
.auth-hero p { color: var(--muted); font-size: 15px; }
.welcome-logo { display:block; width:min(310px,82vw); max-height:230px; object-fit:contain; margin:0 auto 12px; border-radius:20px; mix-blend-mode:multiply; }
.auth-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.legal-links { display: flex; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); }
.legal-links a { color: var(--muted); }
.mobile-form { display:flex; flex-direction:column; gap:14px; padding:20px; margin-top:8px; background:rgba(255,255,255,.92); border:1px solid rgba(168,85,199,.16); border-radius:20px; box-shadow:0 18px 45px rgba(94,54,110,.09); }
.mobile-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.mobile-form input:not([type="checkbox"]), .mobile-form select { width: 100%; min-height: 52px; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; color: var(--text); font: inherit; font-size: 16px; }
.mobile-form input:focus, .mobile-form select:focus { outline: 3px solid rgba(37,99,235,.14); border-color: var(--primary); }
.mobile-form small, .optional { color: var(--muted); font-size: 12px; font-weight: 400; }
.form-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.password-wrap { position: relative; }
.password-wrap input { padding-left: 64px !important; }
.show-password { position: absolute; left: 8px; top: 8px; height: 36px; padding: 0 10px; border: 0; background: #eff6ff; color: var(--primary); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.check-row { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; line-height: 1.45; }
.check-row input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--primary); }
.form-error { min-height: 20px; color: #b91c1c; font-size: 13px; font-weight: 600; }
.text-button { border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 14px; padding: 5px; cursor: pointer; }
.profile-name { background: #eff6ff; color: #1e40af; padding: 13px 15px; border-radius: 10px; font-weight: 700; }
.user-strip { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.user-strip button { border: 0; background: transparent; color: var(--primary); font: inherit; cursor: pointer; padding: 8px; }
@media (max-width: 360px) { .form-two-cols { grid-template-columns: 1fr; } }

/* Clinical staff workspace */
.staff-screen { padding-top: max(14px, env(safe-area-inset-top)); }
.staff-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #e2e8f0; padding: 4px; border-radius: 12px; }
.staff-tabs button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.staff-tabs button.active { background: #fff; color: var(--primary); box-shadow: var(--shadow); }
.search-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; font-weight: 600; }
.search-field input { min-height: 50px; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; }
.staff-list { display: flex; flex-direction: column; gap: 10px; }
.patient-list-card, .notification-card, .measurement-item, .summary-item { background: #fff; border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.patient-list-card { border: 0; width: 100%; text-align: right; font: inherit; cursor: pointer; }
.patient-list-card strong { display: block; font-size: 16px; margin-bottom: 5px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--muted); font-size: 12px; }
.new-patient-badge { display: inline-block; margin-right: 7px; padding: 3px 7px; border-radius: 20px; background: #dcfce7; color: #166534; font-size: 11px; }
.patient-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.overview-stat { background: #fff; border-radius: 11px; padding: 12px; box-shadow: var(--shadow); }
.overview-stat span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.overview-stat strong { font-size: 14px; }
.measurement-item { margin-top: 10px; }
.measurement-image { width: 100%; max-height: 280px; object-fit: contain; background: #111; border-radius: 9px; margin: 8px 0; }
.admin-photo-wrap { position:relative; min-width:0; }
.admin-photo-wrap .measurement-image { margin-bottom:0; }
.delete-photo-btn { width:100%; min-height:42px; border:1px solid #fecaca; border-radius:0 0 9px 9px; background:#fff1f2; color:#b91c1c; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.admin-additional-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
.admin-additional-photos img { display:block; width:100%; height:180px; object-fit:contain; background:#111; border-radius:9px 9px 0 0; }
.deleted-photo-note { margin:9px 0; padding:18px; border:1px dashed #cbd5e1; border-radius:9px; color:var(--muted); text-align:center; }
.measurement-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; text-align: center; }
.measurement-values div { background: #eff6ff; border-radius: 8px; padding: 8px 4px; font-size: 12px; }
.measurement-values strong { display: block; color: var(--primary); font-size: 16px; }
.questionnaire-review { margin-top: 10px; padding: 12px; border-radius: 9px; background: #f8fafc; border: 1px solid var(--border); font-size: 13px; line-height: 1.6; }
.questionnaire-review > strong { display: block; color: var(--primary); margin-bottom: 5px; }
.summary-input { width: 100%; resize: vertical; min-height: 130px; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px; font: inherit; font-size: 16px; line-height: 1.5; }
.summary-input:focus { outline: 3px solid rgba(37,99,235,.14); border-color: var(--primary); }
.summary-input:empty::before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; }
.editor-toolbar { display: flex; gap: 6px; padding: 7px; background: #f1f5f9; border: 1px solid var(--border); border-radius: 10px; }
.editor-toolbar button { width: 42px; height: 38px; border: 1px solid #cbd5e1; background: #fff; color: var(--text); border-radius: 7px; font-size: 17px; cursor: pointer; }
.editor-toolbar button:hover { border-color: var(--primary); color: var(--primary); }
.summary-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.summary-item { background: #f8fafc; box-shadow: none; border: 1px solid var(--border); font-size: 13px; line-height: 1.5; overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.summary-item > summary { display:flex; justify-content:space-between; gap:12px; align-items:center; cursor:pointer; color:#172554; }
.summary-item > summary span { color:var(--muted); font-size:12px; }
.summary-item-body { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.previous-summaries-title { padding:9px 11px; border-radius:9px; background:#fefce8; border:1px solid #fde68a; color:#854d0e; font-size:12px; }
.summary-item small, .notification-card small { display: block; color: var(--muted); margin-top: 6px; }
.hidden { display: none !important; }

@media (min-width: 850px) {
  body:has(#screen-staff.active) #app,
  body:has(#screen-staff-patient.active) #app { max-width: 1040px; }
  .staff-screen { padding: 16px 20px 28px; }
  .staff-screen .header { text-align: right; }
  .staff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .staff-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); gap: 18px; align-items: start; }
  .summary-panel { position: sticky; top: 18px; }
  .summary-input { min-height: 200px; }
  .measurement-image { max-height: 360px; }
  #staff-notification-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Clinical wound assessment report */
.clinical-report-title { color: #172554 !important; font-size: clamp(24px,2.5vw,32px) !important; border-bottom: 1px solid #94a3b8; padding-bottom: 10px; }
.report-top-actions { display:flex; justify-content:flex-start; align-items:center; gap:12px; margin-top:12px; }
.report-top-actions .btn { width:auto; min-width:190px; }
.report-top-actions small { color:var(--muted); }
.report-pdf-shortcut { position:fixed; left:24px; bottom:24px; z-index:40; width:auto; min-width:190px; margin:0; box-shadow:0 10px 28px rgba(37,99,235,.3); border:2px solid #fff; }
.clinical-report { background:linear-gradient(180deg,#fff,#fdfaff); border:1px solid #eadcf0; box-shadow:0 8px 28px rgba(94,54,110,.07); padding:14px; display:flex; flex-direction:column; gap:11px; min-width:0; }
.report-patient-header { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.report-patient-header > div { padding: 3px 10px; border-left: 1px solid var(--border); }
.report-patient-header > div:last-child { border-left: 0; }
.report-patient-header span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.report-patient-header strong { display: block; color: #172554; font-size: 14px; }
.report-patient-name { grid-column: span 2; }
.staff-wound-selector { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; padding:5px 0; }
.staff-wound-tab { position:relative; min-height:112px; padding:13px; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; color:var(--text); text-align:right; font:inherit; cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .15s; }
.staff-wound-tab:hover { border-color:#93c5fd; transform:translateY(-1px); }
.staff-wound-tab.active { border:2px solid var(--primary); background:var(--purple-soft); box-shadow:0 6px 18px rgba(168,85,199,.14); }
.staff-wound-tab .wound-tab-number { color:var(--primary-dark); font-size:11px; font-weight:800; }
.staff-wound-tab strong { display:block; color:#172554; font-size:16px; margin:4px 0; }
.staff-wound-tab small,.staff-wound-tab .wound-tab-date { display:block; color:var(--muted); font-size:11px; line-height:1.45; }
.staff-wound-tab em { display:inline-block; margin-top:8px; padding:4px 8px; border-radius:20px; font-size:10px; font-style:normal; font-weight:800; }
.staff-wound-tab em.tracking { background:#e7fbf4;color:#168967; }.staff-wound-tab em.pending { background:#fef3c7;color:#92400e; }.staff-wound-tab em.complete { background:#dcfce7;color:#166534; }
.staff-wound-tab em.payment { background:#f3e8ff;color:#7e22ce; }
.staff-wound-tab .wound-tab-date { margin-top:5px; }
.report-latest { display: grid; grid-template-columns: 1.2fr .82fr .82fr; gap: 10px; min-width:0; }
.latest-photo-card,.report-metric-card,.report-card { border: 1px solid var(--border); border-radius: 9px; background: #fff; padding: 12px; min-width:0; }
.report-section-note { color:var(--muted); font-size:12px; margin-top:5px; }
.assessment-report-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.assessment-report-card { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:16px; border:1px solid var(--border); border-right:5px solid #cbd5e1; border-radius:12px; background:#f8fafc; }
.assessment-report-card.report-ready { border-right-color:#16a34a; background:#f7fff9; }
.assessment-report-card strong,.assessment-report-card span { display:block; }.assessment-report-card > div > span { color:var(--muted); font-size:12px; margin-top:4px; }
.assessment-report-identity strong { font-size:17px; color:#172554; margin:4px 0; }
.assessment-report-card .assessment-report-date { color:#1d4ed8; font-weight:700; margin:0; }
.assessment-report-card > p { grid-column:2/4; color:var(--muted); font-size:12px; }
.assessment-report-status { padding:5px 9px; border-radius:20px; background:#fef3c7; color:#92400e; font-size:11px; font-weight:700; white-space:nowrap; }
.assessment-report-status.complete { background:#dcfce7; color:#166534; }
.latest-photo-card { padding:8px; min-height:265px; display:flex; flex-direction:column; gap:7px; }
.latest-primary-photo { flex:1; min-height:230px; display:grid; place-items:center; }
.latest-primary-photo > img { width:100%; height:100%; max-height:320px; object-fit:contain; border-radius:7px; background:#f8fafc; }
.latest-photo-thumbs { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.latest-photo-thumbs img { width:100%; height:82px; object-fit:cover; border-radius:7px; background:#111; }
.report-metric-card { text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.report-metric-card h3,.report-section-heading { font-size: 16px; color: #172554; }
.change-value { font-size: clamp(29px,3.3vw,43px); font-weight: 750; direction:ltr; }
.change-value.improved { color:#16a34a; }.change-value.worsened { color:#dc2626; }.change-neutral { color:var(--muted); font-size:24px; font-weight:700; }
.report-metric-card small,.metric-date,.muted-report { color:var(--muted); line-height:1.7; }
.dimension-pair { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dimension-pair > div { padding:13px 6px; }.dimension-pair > div:first-child { border-left:1px solid var(--border); }
.dimension-pair strong { display:block; font-size:31px; color:#172554; }.dimension-pair span { color:var(--muted); font-size:11px; }
.area-total { color:var(--muted); }.area-total strong { color:#172554; }
.report-chart-card { min-height:235px; }.staff-chart-wrap { height:185px; margin-top:10px; direction:ltr; }
.report-tissue-bar { height:20px; display:flex; overflow:hidden; border-radius:14px; background:#e2e8f0; margin:13px 0; direction:rtl; }
.report-tissue-bar span { display:block; }
.tissue-estimate-warning { margin:8px 0 4px; padding:9px 11px; border:1px solid #fde68a; border-radius:9px; background:#fefce8; color:#854d0e; font-size:12px; line-height:1.55; }
.tissue-status-badge { display:inline-block; margin-right:7px; padding:4px 8px; border-radius:20px; font-size:10px; vertical-align:middle; }.tissue-status-badge.estimate{background:#fef3c7;color:#92400e}.tissue-status-badge.verified{background:#dcfce7;color:#166534}
.tissue-review-actions { display:flex; justify-content:flex-start; margin:12px 0 8px; }
.tissue-verify-form { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:12px; border-top:1px solid var(--border); }
.tissue-verify-form label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:11px; }
.tissue-verify-form input { width:100%; min-height:44px; border:1px solid var(--border); border-radius:8px; padding:8px; font:inherit; font-size:16px; text-align:center; }
.tissue-total { grid-column:1/3; align-self:center; color:var(--muted); }.tissue-total strong{color:var(--success)}.tissue-total strong.invalid{color:#b91c1c}
.tissue-verify-form .btn { grid-column:3/5; width:100%; }
.tissue-review-canvas-wrap { background:#111; border-radius:14px; overflow:hidden; touch-action:none; display:grid; place-items:center; min-height:300px; }
#tissue-review-canvas { display:block; max-width:100%; height:auto; touch-action:none; cursor:crosshair; }
.report-tissue-legend { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.report-tissue-legend div { display:grid; grid-template-columns:auto 1fr; gap:4px 8px; align-items:center; border-left:1px solid var(--border); padding:4px 16px; }
.report-tissue-legend div:last-child { border-left:0; }.report-tissue-legend i { width:14px;height:14px;border-radius:50%; }.report-tissue-legend strong { grid-column:1/3;font-size:20px;color:#172554; }
.compact-report-details > summary { cursor:pointer; list-style-position:inside; }
.compact-report-details[open] > summary { margin-bottom:9px; }
.report-card .questionnaire-review { box-shadow:none; background:#f8fafc; }.questionnaire-review summary,.report-history summary { cursor:pointer;font-weight:700;color:#172554;padding:8px 0; }
.report-save { min-width:180px; align-self:flex-start; }.report-footer { display:flex;justify-content:space-between;border-top:1px solid #94a3b8;padding:18px 8px 0;color:#172554; }.report-footer span { color:var(--muted); }
.consultation-pill { display:inline-block; margin-right:8px; padding:4px 9px; border-radius:20px; background:#f1f5f9; color:#64748b; font-size:12px; font-weight:600; }
.consultation-pill.pending { background:#fef3c7; color:#92400e; }
.consultation-pill.private { background:#ede9fe; color:#6d28d9; }
.internal-note-panel { border-right:4px solid var(--mint); }
.clinical-field { width:100%; min-height:92px; resize:vertical; border:1.5px solid var(--border); border-radius:10px; padding:11px 12px; background:#fff; color:var(--text); font:inherit; font-size:15px; line-height:1.55; }
.clinical-field:focus { outline:3px solid rgba(168,85,199,.13); border-color:var(--primary); }
.clinical-field:disabled { background:#f8fafc; color:#94a3b8; cursor:not-allowed; }
.consultation-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.consultation-fields label { display:flex; flex-direction:column; gap:6px; color:#334155; font-size:13px; font-weight:700; }
.consultation-summary-label { display:block; margin:5px 0 7px; color:#334155; font-size:13px; font-weight:700; }
.internal-note-item { margin-top:8px; padding:12px; border:1px solid #d1fae5; border-radius:10px; background:#f0fdf9; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.internal-note-item small { display:block; margin-top:7px; color:var(--muted); }
.consultation-summary-sections { display:grid; gap:9px; }
.consultation-summary-sections > div { display:grid; grid-template-columns:minmax(90px,25%) 1fr; gap:10px; padding:9px; border-radius:8px; background:#fff; }
.consultation-summary-sections > div > strong { color:var(--primary-dark); }
.consultation-list-badge { display:inline-block; margin-right:7px; padding:3px 8px; border-radius:20px; background:#fef3c7; color:#92400e; font-size:11px; }
.summary-disabled { background:#f8fafc; color:#94a3b8; cursor:not-allowed; }
.summary-disabled::before { content:'לא ניתן לכתוב סיכום ללא בקשת ייעוץ פעילה.'; }
.consultation-card { border:1.5px solid #bfdbfe; background:#f8fbff; }
.consultation-card p { color:var(--muted); font-size:13px; line-height:1.6; }
.consultation-card > small { color:var(--muted); font-size:11px; line-height:1.5; }
.consultation-choice-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.paid-service-badge { display:inline-block; margin-right:6px; padding:4px 8px; border-radius:20px; background:#f3e8ff; color:#7e22ce; font-size:11px; }
.consultation-product { min-height:126px; padding:14px; border:1.5px solid #d8b4e8; border-radius:14px; background:linear-gradient(145deg,#fff,#faf5ff); color:var(--text); text-align:right; font:inherit; cursor:pointer; box-shadow:0 5px 15px rgba(168,85,199,.08); }
.consultation-product strong,.consultation-product span,.consultation-product em { display:block; }
.home-visit-product b { display:inline-block; margin-top:2px; padding:4px 8px; border-radius:16px; background:#ecfdf5; color:#047857; font-size:11px; }
.consultation-skip { display:block; margin:12px auto 0; text-decoration:underline; }
.consultation-status.questionnaire-saved { margin-top:12px; padding:10px; border-radius:9px; background:#ecfdf5; color:#047857; }
.history-consultation-button { margin-top:10px; }
#history-consultation-panel { margin-top:14px; scroll-margin-top:16px; }
.consultation-product strong { color:var(--primary-dark); font-size:16px; }.consultation-product span { color:var(--muted); font-size:12px; line-height:1.5; margin:7px 0; }.consultation-product em { color:#168967; font-size:11px; font-style:normal; font-weight:800; }
.consultation-product:active { transform:scale(.98); }
.btn-payment { background:linear-gradient(135deg,var(--mint),#35c89c); color:#124c3d; }
.consultation-status { text-align:center; font-weight:700; color:#1d4ed8; line-height:1.5; }
.consultation-status.completed { color:#15803d; }.consultation-status.cancelled { color:#b91c1c; }
.patient-nurse-summary { text-align:right; padding:14px; background:#fff; border:1px solid #bbf7d0; border-radius:10px; color:var(--text); font-weight:400; }
.patient-nurse-summary > strong { display:block; color:#166534; margin-bottom:8px; }.patient-nurse-summary small { display:block; color:var(--muted); margin-top:8px; }

@media (max-width: 849px) {
  .consultation-fields { grid-template-columns:1fr; }
  .consultation-summary-sections > div { grid-template-columns:1fr; }
  .clinical-report { padding:10px; margin:0; width:100%; max-width:100%; overflow:hidden; }
  .report-patient-header { grid-template-columns:1fr 1fr; }
  .report-patient-header > div,.report-patient-name { grid-column:auto; border:0; border-bottom:1px solid var(--border); padding:10px; }
  .report-patient-name { grid-column:1/3; }
  .report-latest { grid-template-columns:1fr; width:100%; }.latest-photo-card { min-height:210px; }.latest-photo-card img { max-width:100%; max-height:300px; }
  .report-tissue-legend { grid-template-columns:1fr 1fr; gap:14px; }.report-tissue-legend div { border:0; }
  .report-footer { flex-direction:column;gap:5px; }.report-save { width:100%; }
  .report-top-actions { flex-direction:column; align-items:stretch; }.report-top-actions .btn { width:100%; }.report-top-actions small { text-align:center; }
  .report-pdf-shortcut { left:14px; right:14px; bottom:max(14px,env(safe-area-inset-bottom)); width:auto; min-width:0; }
  .assessment-report-card { grid-template-columns:1fr auto; padding:13px; gap:10px; }.assessment-report-card .btn,.assessment-report-card > p { grid-column:1/3; width:100%; }.assessment-report-card > p { text-align:center; }
  .summary-item > summary { align-items:flex-start; flex-direction:column; gap:3px; }
  .staff-wound-selector { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 1px 9px; }
  .staff-wound-tab { flex:0 0 82%; scroll-snap-align:start; min-height:106px; }
  .consultation-choice-buttons { grid-template-columns:1fr; }
  .tissue-verify-form { grid-template-columns:1fr 1fr; }.tissue-total,.tissue-verify-form .btn{grid-column:1/3}
}

/* Patient questionnaire */
.questionnaire-form fieldset { border: 0; background: #fff; border-radius: 12px; padding: 15px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.questionnaire-form legend { width: 100%; font-weight: 700; font-size: 16px; padding: 0 0 8px; }
.questionnaire-form textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px; font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid label { flex-direction: row; align-items: center; min-height: 46px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 9px; font-weight: 400; }
.choice-grid input { width: 21px; height: 21px; accent-color: var(--primary); }
.pain-label { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; }
.pain-label output { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 20px; font-weight: 700; }
#q-pain { width: 100%; accent-color: var(--primary); }
@media (max-width: 360px) { .choice-grid { grid-template-columns: 1fr; } }

/* ── Screens ── */
.screen { display: none; flex-direction: column; min-height: 100dvh; padding: 16px 16px 32px; gap: 12px; }
.screen.active { display: flex; }

/* ── Header ── */
.header { text-align: center; padding-top: 8px; }
.header h1  { font-size: 26px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.header h2  { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.subtitle   { font-size: 13px; color: var(--muted); }
.btn-back   { background: none; border: none; color: var(--primary); font-size: 15px; cursor: pointer; display: block; text-align: right; margin-bottom: 4px; padding: 0; }
.status-text { text-align: center; font-size: 13px; color: var(--muted); }

/* ── Steps ── */
.steps-bar { display: flex; align-items: center; justify-content: center; }
.step      { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px; background: var(--border); color: var(--muted); white-space: nowrap; }
.step.active { background: var(--primary); color: #fff; }
.step.done   { background: #dcfce7; color: var(--success); }
.step-line   { flex: 1; height: 2px; background: var(--border); max-width: 20px; }
.step-line.active { background: var(--primary); }

/* ── Info boxes ── */
.info-box { display: flex; align-items: flex-start; gap: 9px; border-radius: var(--radius); padding: 11px 13px; font-size: 13px; line-height: 1.5; }
.info-green  { background: #dcfce7; border: 1px solid #86efac; color: #166534; }

/* ── Upload ── */
.upload-area { display: flex; flex-direction: column; gap: 10px; }
.upload-area input[type="file"] { display: none; }

/* ── Buttons ── */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 600; cursor: pointer; padding: 14px 20px; width: 100%; transition: opacity .15s, transform .1s; font-family: inherit; }
.btn:active   { transform: scale(0.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-secondary { background: var(--card); color: var(--primary); border: 2px solid var(--primary); }
.btn-outline   { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-large  { font-size: 17px; padding: 18px 24px; border-radius: 14px; }
.btn-sm     { width: auto; padding: 10px 18px; font-size: 14px; }
.btn-icon   { font-size: 20px; }

/* ── Canvas ── */
.canvas-wrapper {
  background: #111; border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;        /* prevent scroll while drawing */
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; flex: 1;
  /* iOS: allow touch events through overflow:hidden */
  -webkit-overflow-scrolling: touch;
}
.wound-selection-list { display:flex; flex-direction:column; gap:8px; }
.contour-help { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:10px; background:#eff6ff; border-radius:10px; color:#1e3a8a; font-size:11px; line-height:1.5; }
.contour-help span { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#2563eb; color:#fff; font-weight:700; }
.wound-selection-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:9px 10px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); }
.wound-selection-card strong { color:#1d4ed8; font-size:13px; white-space:nowrap; }
.wound-card-fields { min-width:0; display:grid; gap:6px; }
.wound-selection-card input,.wound-selection-card select { min-width:0; width:100%; border:1px solid var(--border); border-radius:8px; padding:9px; background:#fff; font:inherit; font-size:14px; }
.wound-selection-card button { border:0; background:#fee2e2; color:#b91c1c; border-radius:7px; padding:8px; font:inherit; font-size:12px; }
#screen-mark .action-buttons { flex-wrap:wrap; }
#screen-mark .action-buttons #btn-next-cal { flex:1 0 100%; }
.multi-wound-results { padding:12px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; }
.multi-wound-results > strong { display:block; color:#1e3a8a; margin-bottom:8px; }
.multi-wound-results > div { display:flex; gap:7px; overflow-x:auto; }
.multi-wound-results button { flex:0 0 auto; border:1px solid #93c5fd; background:#fff; color:#1d4ed8; border-radius:20px; padding:8px 12px; font:inherit; font-size:12px; }
.multi-wound-results button.active { background:#2563eb; color:#fff; }
.additional-photo-card { border:1px solid #bfdbfe; background:#f8fbff; }
.additional-photo-card > p { color:var(--muted); font-size:13px; line-height:1.6; }
.additional-photo-card input[type="file"] { display:none; }
.additional-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.additional-photo-grid img { width:100%; height:170px; object-fit:contain; border-radius:9px; background:#111; }
.history-extra-photos { display:flex; gap:6px; margin:8px 0; }
.history-extra-photos img { width:62px; height:62px; border-radius:7px; object-fit:cover; background:#111; }
.location-picker-button { background:#eff6ff !important; color:#1d4ed8 !important; text-align:right; font-weight:700; }

/* Simple patient-friendly body location picker */
.body-side-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; background:#e2e8f0; border-radius:12px; }
.body-side-tabs button { min-height:45px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-weight:700; }
.body-side-tabs button.active { background:#fff; color:var(--primary); box-shadow:var(--shadow); }
.simple-body-map { background:#fff; border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.body-figure { position:relative; width:130px; height:250px; margin:0 auto 16px; }
.body-figure i { position:absolute; display:block; background:#dbeafe; border:2px solid #2563eb; }
.body-head { width:42px;height:48px;border-radius:48%;left:44px;top:0; }
.body-torso { width:82px;height:105px;border-radius:30px 30px 18px 18px;left:24px;top:52px; }
.body-arm { width:23px;height:118px;border-radius:16px;top:58px;transform-origin:top center; }.body-arm.left { left:9px;transform:rotate(8deg); }.body-arm.right { right:9px;transform:rotate(-8deg); }
.body-leg { width:31px;height:100px;border-radius:12px;top:150px; }.body-leg.left { left:31px; }.body-leg.right { right:31px; }
.body-figure.back .body-torso { background:#e0e7ff; }
.body-region-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.body-region-grid button { min-height:46px; border:1px solid #bfdbfe; border-radius:10px; background:#f8fbff; color:#1e3a8a; font:inherit; font-size:13px; font-weight:650; }
.body-region-grid button:active { background:#2563eb; color:#fff; }
.body-location-choice { padding:13px; border-radius:10px; background:#eff6ff; color:#1e40af; text-align:center; font-weight:700; }
.body-location-other { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.body-location-other input { min-height:50px; border:1.5px solid var(--border); border-radius:10px; padding:12px; font:inherit; font-size:16px; }
#wound-canvas {
  width: 100%; height: auto; display: block;
  cursor: crosshair;
  touch-action: none;
  /* iOS: prevent callout on long press */
  -webkit-touch-callout: none;
}

/* ── Action buttons ── */
.action-buttons { display: flex; gap: 10px; }

/* ── Calibration options ── */
/* ── Results ── */
.result-image-wrapper { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
#result-canvas { width: 100%; height: auto; display: block; }

.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-card  { background: var(--card); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.result-label { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.result-value { font-size: 26px; font-weight: 700; color: var(--primary); line-height: 1; }
.result-unit  { font-size: 11px; color: var(--muted); margin-top: 3px; }

.cal-badge { text-align: center; font-size: 13px; padding: 7px 12px; border-radius: 8px; }
.cal-badge.auto   { background: #dcfce7; color: var(--success); }
.cal-badge.manual { background: #eff6ff; color: #1e40af; }
.cal-badge.none   { background: #fef9c3; color: #713f12; }

/* ── Section cards ── */
.section-card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.section-title { font-size: 15px; font-weight: 700; color: var(--text); }

/* ── Stacked tissue bar (international colors) ── */
.stacked-bar {
  display: flex; height: 18px; border-radius: 9px;
  overflow: hidden; background: #e2e8f0;
}
.stacked-seg { height: 100%; width: 0%; transition: width .7s ease; }
.seg-red    { background: #e53e3e; }   /* אדום   — Granulation      */
.seg-pink   { background: #f687b3; }   /* ורוד   — Epithelialization */
.seg-yellow { background: #d4a017; }   /* צהוב   — Slough            */
.seg-black  { background: #1a1a1a; }   /* שחור   — Necrosis          */

/* ── Tissue rows ── */
.tissue-row  { display: flex; align-items: center; gap: 8px; }
.tissue-dot  { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tissue-name { font-size: 13px; flex: 1; }
.tissue-pct  { font-size: 13px; font-weight: 700; min-width: 38px; text-align: left; }

/* ── Erythema ── */
.erythema-row   { display: flex; flex-direction: column; gap: 4px; }
.erythema-scale {
  position: relative; height: 14px; border-radius: 8px;
  background: linear-gradient(to left, #dc2626, #f97316, #facc15, #86efac);
}
.erythema-fill   { display: none; }
.erythema-marker {
  position: absolute; top: -4px; width: 22px; height: 22px;
  background: #fff; border: 3px solid #2563eb;
  border-radius: 50%; transform: translateX(-50%);
  transition: left .6s ease;
  left: 0%;
}
.erythema-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
}
.erythema-text {
  text-align: center; font-size: 13px; font-weight: 600;
  padding: 6px; border-radius: 8px;
}
.erythema-text.normal   { background: #dcfce7; color: #166534; }
.erythema-text.mild     { background: #fef9c3; color: #713f12; }
.erythema-text.moderate { background: #ffedd5; color: #9a3412; }
.erythema-text.severe   { background: #fee2e2; color: #991b1b; }

/* ── History ── */
.chart-wrapper { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-height:260px; }
.history-chart-title { font-size:15px; font-weight:700; margin-bottom:12px; }
#history-list  { display: flex; flex-direction: column; gap: 12px; }
.history-item  { background: var(--card); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: stretch; }
.history-thumb { width: 112px; height: 132px; border-radius: 12px; object-fit: cover; }
.history-item-content { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.history-date  { font-size: 12px; color: var(--muted); }
.history-status-badge { align-self:flex-start; padding:3px 8px; border-radius:20px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:700; }
.history-measurements { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; text-align:center; }
.history-measurements div { padding:7px 3px; background:#f8fafc; border-radius:8px; }
.history-measurements span,.history-measurements small { display:block; color:var(--muted); font-size:10px; font-weight:400; }
.history-measurements strong { color:#172554; font-size:17px; }
.first-measurement-note { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid #bfdbfe; border-radius:14px; background:#eff6ff; }
.first-measurement-note > span { font-size:26px; }.first-measurement-note strong { display:block; color:#1e3a8a; margin-bottom:3px; }.first-measurement-note p { color:#475569; font-size:12px; line-height:1.5; }
.history-empty { text-align:center; padding:28px 20px; background:#fff; border-radius:14px; box-shadow:var(--shadow); }
.history-empty > span { display:block; font-size:36px; margin-bottom:8px; }.history-empty strong { display:block; font-size:17px; }.history-empty p { color:var(--muted); font-size:13px; margin:6px 0 18px; }
@media (max-width:360px) { .history-item { grid-template-columns:90px 1fr; }.history-thumb { width:90px;height:120px; }.history-measurements strong { font-size:15px; } }
@media (max-width:360px) { .consultation-choice-buttons { grid-template-columns:1fr; } }
.empty-state   { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 15px; }

/* ── Loader ── */
.loader { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 999; }
.loader.hidden { display: none; }
.loader-box { background: #fff; border-radius: 16px; padding: 28px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.loader-box p { font-size: 15px; color: var(--muted); }
.spinner { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }