:root {
  --ink: #e8f1f2;
  --ink-soft: #b4c6c9;
  --ink-faint: #769096;
  --canvas: #07151c;
  --canvas-deep: #050e14;
  --surface: #0b2028;
  --surface-raised: #102b34;
  --line: rgba(156, 198, 197, 0.14);
  --line-strong: rgba(156, 198, 197, 0.24);
  --teal: #9fe5cf;
  --teal-dark: #368d86;
  --lime: #d6f56a;
  --coral: #ff8b72;
  --yellow: #f7c76b;
  --lavender: #b9afff;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas-deep); }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; overflow-x: hidden; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(6px); opacity: .55; }
.ambient-one { width: 460px; height: 460px; top: -220px; right: 10%; background: radial-gradient(circle, rgba(55, 143, 134, .22), transparent 68%); }
.ambient-two { width: 500px; height: 500px; bottom: -280px; left: 20%; background: radial-gradient(circle, rgba(183, 168, 255, .12), transparent 66%); }

.app-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; padding: 28px 16px 18px; border-right: 1px solid var(--line); background: rgba(5, 15, 21, .54); }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 11px 31px; }
.brand-mark { position: relative; display: grid; width: 35px; height: 35px; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(45deg); }
.brand-mark span { display: block; border-radius: 3px; background: var(--teal); }
.brand-mark span:nth-child(2) { background: var(--lime); border-radius: 50%; }
.brand-mark span:nth-child(3) { background: rgba(159, 229, 207, .48); }
.brand-mark span:nth-child(4) { background: var(--coral); border-radius: 50%; }
.brand-mark.small { width: 19px; height: 19px; gap: 2px; }
.brand-mark.small span { border-radius: 2px; }
.brand-name { margin: 1px 0 0; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.07em; line-height: 1; }
.brand-name span, .call-brand strong span { color: var(--lime); }
.eyebrow { margin: 0; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .11em; line-height: 1.35; }
.profile-chip { display: flex; align-items: center; gap: 9px; margin: 0 0 28px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(17, 42, 51, .54); }
.avatar { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 9px; font-size: 11px; font-weight: 800; }
.avatar-player { color: #123330; background: var(--lime); }
.profile-chip strong, .profile-chip span { display: block; }
.profile-chip strong { font-size: 11px; }
.profile-chip div:nth-child(2) span { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.online-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214, 245, 106, .08); }
.main-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { margin: 0 12px 7px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .16em; }
.nav-label-lower { margin-top: 28px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; font-size: 12px; text-align: left; cursor: pointer; transition: .2s ease; }
.nav-item:hover { color: var(--ink); background: rgba(159, 229, 207, .06); }
.nav-item.is-active { color: var(--canvas-deep); background: var(--teal); box-shadow: 0 6px 24px rgba(159, 229, 207, .11); }
.nav-icon { display: grid; width: 19px; height: 19px; place-items: center; font-size: 17px; line-height: 1; }
.nav-count { min-width: 21px; margin-left: auto; padding: 2px 5px; border-radius: 5px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; text-align: center; }
.nav-item.is-active .nav-count { color: #37524e; background: rgba(7, 21, 28, .1); }
.nav-count-alert { color: var(--coral); background: rgba(255, 139, 114, .11); }
.sidebar-bottom { margin-top: auto; }
.shift-progress { padding: 15px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shift-progress-head { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 10px; }
.shift-progress-head .mono { color: var(--teal); font-family: var(--mono); }
.progress-track { height: 5px; margin: 10px 0 9px; overflow: hidden; border-radius: 5px; background: rgba(159, 229, 207, .1); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-dark), var(--teal)); }
.shift-progress p { margin: 0; color: var(--ink-faint); font-size: 9px; line-height: 1.4; }
.help-button { margin-top: 15px; padding: 7px 10px; border: 0; color: var(--ink-faint); background: transparent; font-size: 10px; cursor: pointer; }
.help-button:hover { color: var(--ink); }
.help-button span { display: inline-grid; width: 16px; height: 16px; margin-right: 5px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }

.main-content { min-width: 0; flex: 1; padding: 0 40px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 94px; border-bottom: 1px solid var(--line); }
.topbar-title, .topbar-actions, .connection-status, .topbar-title > div:last-child { display: flex; align-items: center; }
.topbar-title { gap: 17px; }
.live-pulse { display: flex; align-items: center; gap: 7px; color: var(--coral); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.live-pulse span { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 139, 114, .1); animation: blink 2.2s infinite; }
@keyframes blink { 50% { opacity: .38; box-shadow: 0 0 0 8px rgba(255, 139, 114, .02); } }
.topbar h1 { margin: 3px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
.topbar h1 span { color: var(--ink-faint); font-weight: 400; }
.topbar-actions { gap: 17px; }
.connection-status { gap: 9px; padding-right: 17px; border-right: 1px solid var(--line); }
.signal-bars { display: flex; align-items: end; gap: 2px; width: 17px; height: 16px; }
.signal-bars i { display: block; width: 3px; border-radius: 3px; background: var(--teal); }
.signal-bars i:nth-child(1) { height: 5px; opacity: .48; }.signal-bars i:nth-child(2) { height: 8px; opacity: .7; }.signal-bars i:nth-child(3) { height: 12px; opacity: .85; }.signal-bars i:nth-child(4) { height: 16px; }
.connection-status div span, .connection-status div strong { display: block; }
.connection-status div span { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.connection-status div strong { margin-top: 1px; color: var(--teal); font-size: 10px; font-weight: 600; }
.connection-status.is-weak .signal-bars i:nth-child(n+3) { background: var(--coral); opacity: .18; }.connection-status.is-weak div strong { color: var(--coral); }
.icon-button, .round-avatar, .more-button, .close-button { position: relative; border: 0; cursor: pointer; }
.icon-button { display: grid; width: 30px; height: 30px; place-items: center; color: var(--ink-soft); background: transparent; font-size: 20px; }
.icon-button b { position: absolute; top: 1px; right: 1px; display: grid; width: 12px; height: 12px; place-items: center; border-radius: 50%; color: var(--canvas-deep); background: var(--coral); font-family: var(--mono); font-size: 7px; }
.round-avatar { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(159, 229, 207, .3); border-radius: 50%; color: #18302b; background: var(--teal); font-size: 10px; font-weight: 800; }
.view-container { max-width: 1240px; margin: 0 auto; }
.overview-view { padding-top: 34px; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.accent-eyebrow { color: var(--teal); }
h2, h3 { margin: 0; letter-spacing: -.045em; }
.welcome-row h2, .view-intro h2 { margin-top: 7px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; }
.subtitle { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; }
.date-chip { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(16, 43, 52, .45); }
.calendar-glyph { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; color: var(--lime); background: rgba(214, 245, 106, .1); font-size: 15px; }.date-chip strong, .date-chip span { display: block; }.date-chip strong { font-family: var(--mono); font-size: 10px; font-weight: 500; }.date-chip div span { margin-top: 1px; color: var(--ink-faint); font-size: 9px; }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 15px 15px 0; border-right: 1px solid var(--line); }.metric-item:not(:first-child) { padding-left: 18px; }.metric-item:last-child { border-right: 0; }
.metric-icon { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 9px; font-size: 18px; }.metric-icon.mint { color: var(--teal); background: rgba(159, 229, 207, .1); }.metric-icon.gold { color: var(--yellow); background: rgba(247, 199, 107, .1); }.metric-icon.coral { color: var(--coral); background: rgba(255, 139, 114, .1); }.metric-icon.lilac { color: var(--lavender); background: rgba(185, 175, 255, .1); }
.metric-item div span, .metric-item div strong, .metric-item div small { display: block; }.metric-item div span { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; white-space: nowrap; }.metric-item div strong { margin: 2px 0; font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -.08em; }.metric-item div strong em { color: var(--ink-faint); font-size: 11px; font-style: normal; letter-spacing: 0; }.metric-item div small { color: var(--teal-dark); font-size: 9px; }.metric-item:nth-child(3) div small { color: var(--ink-faint); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(310px, .82fr); gap: 20px; }
.panel-card { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(15, 42, 51, .82), rgba(9, 29, 37, .72)); box-shadow: 0 17px 60px rgba(0, 0, 0, .11); }
.map-card { min-height: 480px; padding: 20px 20px 0; }.queue-card { min-height: 480px; padding: 20px 20px 0; }.activity-card { min-height: 202px; padding: 20px; }.insight-card { display: flex; min-height: 202px; overflow: hidden; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.panel-heading h3 { margin-top: 5px; font-size: 16px; font-weight: 700; }.map-heading { align-items: center; }.tiny-action, .more-button { padding: 6px 0; border: 0; color: var(--ink-faint); background: transparent; font-size: 10px; cursor: pointer; }.tiny-action:hover, .more-button:hover, .text-button:hover { color: var(--teal); }.more-button { padding: 0; font-size: 14px; letter-spacing: 2px; }
.live-count { display: inline-block; min-width: 20px; margin-left: 5px; padding: 2px 5px; border-radius: 4px; color: var(--coral); background: rgba(255, 139, 114, .11); font-family: var(--mono); font-size: 9px; vertical-align: 2px; }.activity-live { padding-top: 3px; color: var(--teal); font-family: var(--mono); font-size: 9px; }

.open-map { position: relative; height: 365px; margin-top: 18px; overflow: hidden; border: 1px solid rgba(159, 229, 207, .12); border-radius: 8px; isolation: isolate; background: #0a272d; }
.open-map::before { position: absolute; inset: 0; z-index: -1; content: ""; opacity: .55; background: radial-gradient(circle at 76% 28%, rgba(214, 245, 106, .13), transparent 20%), radial-gradient(circle at 27% 72%, rgba(185, 175, 255, .13), transparent 24%), linear-gradient(135deg, rgba(13, 77, 73, .5), rgba(7, 31, 39, .4)); }
.map-grid-lines { position: absolute; inset: -30%; opacity: .18; transform: rotate(-9deg); background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(159, 229, 207, .22) 32px, transparent 33px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(159, 229, 207, .22) 32px, transparent 33px); }
.map-road { position: absolute; background: rgba(104, 169, 157, .16); box-shadow: inset 0 0 0 1px rgba(159, 229, 207, .05); }.road-a { width: 150%; height: 29px; top: 45%; left: -19%; transform: rotate(-27deg); }.road-b { width: 125%; height: 19px; top: 15%; left: 9%; transform: rotate(33deg); }.road-c { width: 125%; height: 15px; top: 77%; left: -6%; transform: rotate(12deg); }.road-d { width: 112%; height: 24px; top: 55%; left: -5%; transform: rotate(63deg); opacity: .56; }
.map-block { position: absolute; border: 1px solid rgba(159, 229, 207, .11); background: rgba(8, 44, 52, .78); transform: rotate(-9deg); }.block-a { width: 105px; height: 55px; top: 9%; left: 13%; }.block-b { width: 123px; height: 63px; top: 29%; left: 52%; transform: rotate(17deg); }.block-c { width: 90px; height: 90px; top: 63%; left: 35%; transform: rotate(4deg); }.block-d { width: 117px; height: 52px; top: 61%; left: 74%; transform: rotate(-24deg); }.block-e { width: 89px; height: 60px; top: 74%; left: 5%; transform: rotate(18deg); }
.map-water { position: absolute; right: -12%; bottom: -30%; width: 45%; height: 52%; border: 1px solid rgba(159, 229, 207, .1); border-radius: 50% 0 0 0; background: rgba(46, 112, 125, .22); transform: rotate(12deg); }.map-water::after { position: absolute; inset: 23% 9%; content: ""; border-top: 1px solid rgba(159, 229, 207, .18); border-radius: 50%; transform: rotate(-5deg); }
.map-label { position: absolute; color: rgba(159, 229, 207, .45); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }.label-park { top: 18%; left: 39%; color: rgba(214, 245, 106, .5); }.label-market { top: 72%; left: 70%; }.label-bridge { right: 7%; bottom: 15%; }
.map-pin { position: absolute; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(159, 229, 207, .52); border-radius: 50% 50% 50% 2px; color: var(--canvas-deep); background: var(--teal); box-shadow: 0 5px 17px rgba(0, 0, 0, .26); transform: rotate(-45deg); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }.map-pin:hover { transform: rotate(-45deg) scale(1.14); box-shadow: 0 8px 24px rgba(159, 229, 207, .26); }.map-pin .pin-symbol, .map-pin small { transform: rotate(45deg); }.map-pin .pin-symbol { font-family: var(--mono); font-size: 11px; font-weight: 500; }.map-pin small { position: absolute; top: 35px; left: 3px; width: 55px; color: var(--teal); font-family: var(--mono); font-size: 7px; font-weight: 500; letter-spacing: .08em; text-align: left; }.clinic-pin { top: 42%; left: 45%; width: 42px; height: 42px; border-radius: 50% 50% 50% 3px; background: var(--lime); }.clinic-pin small { color: var(--lime); top: 46px; left: -1px; }.pin-one { top: 25%; left: 26%; }.pin-two { top: 31%; left: 73%; border-color: rgba(255, 139, 114, .8); color: #331917; background: var(--coral); }.pin-three { top: 76%; left: 56%; color: #1c2034; background: var(--lavender); }.pin-four { top: 62%; left: 16%; width: 25px; height: 25px; color: var(--ink); background: var(--teal-dark); }.pin-pulse, .pin-glow { position: absolute; z-index: -1; width: 100%; height: 100%; border: 1px solid currentColor; border-radius: inherit; opacity: .34; animation: pinPulse 2.2s infinite; }.pin-pulse.urgent { border-color: var(--coral); animation-delay: .7s; }.pin-glow { width: 140%; height: 140%; color: var(--lime); }.pin-pulse + .pin-symbol, .pin-glow + .pin-symbol { position: relative; }
@keyframes pinPulse { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.65); opacity: 0; } }
.map-player { position: absolute; top: 53%; left: 36%; display: grid; width: 23px; height: 23px; place-items: center; border: 2px solid var(--canvas); border-radius: 50%; color: var(--canvas-deep); background: var(--teal); font-family: var(--mono); font-size: 7px; box-shadow: 0 0 0 4px rgba(159, 229, 207, .23); }.map-player i { position: absolute; bottom: -11px; width: 4px; height: 6px; border-radius: 0 0 3px 3px; background: var(--teal); }.map-compass { position: absolute; top: 15px; right: 17px; display: flex; flex-direction: column; align-items: center; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }.map-compass b { color: var(--coral); font-size: 16px; line-height: .9; }.map-legend { position: absolute; right: 13px; bottom: 12px; display: flex; gap: 9px; padding: 6px 8px; border: 1px solid rgba(159, 229, 207, .12); border-radius: 6px; color: var(--ink-faint); background: rgba(4, 18, 24, .7); font-family: var(--mono); font-size: 7px; }.map-legend span { display: flex; align-items: center; gap: 4px; }.map-legend i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }.map-legend .legend-urgent { background: var(--coral); }.map-footer { display: flex; align-items: center; justify-content: space-between; min-height: 49px; gap: 10px; color: var(--ink-faint); font-size: 9px; }.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--lime); }.text-button { padding: 0; border: 0; color: var(--teal); background: transparent; font-size: 10px; cursor: pointer; }.text-button span { margin-left: 5px; font-size: 14px; }

.queue-list { margin-top: 17px; }.queue-person { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }.queue-person:hover .patient-name { color: var(--teal); }.queue-person:last-child { border-bottom: 0; }.queue-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #0c2028; font-size: 11px; font-weight: 800; }.queue-avatar.a { background: var(--lavender); }.queue-avatar.m { background: var(--coral); }.queue-avatar.j { background: var(--yellow); }.queue-avatar.r { background: var(--teal); }.patient-name { color: var(--ink); font-size: 11px; font-weight: 700; transition: .15s ease; }.patient-meta { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }.queue-side { text-align: right; }.wait-time { display: block; color: var(--ink-soft); font-family: var(--mono); font-size: 9px; }.priority { display: inline-block; margin-top: 4px; color: var(--teal); font-family: var(--mono); font-size: 7px; letter-spacing: .07em; }.priority.high { color: var(--coral); }.priority.medium { color: var(--yellow); }.queue-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 41px; margin-top: 15px; padding: 10px 12px; border: 1px solid rgba(159, 229, 207, .3); border-radius: 7px; color: var(--canvas-deep); background: var(--teal); font-size: 10px; font-weight: 800; cursor: pointer; transition: .2s ease; }.queue-cta:hover { background: var(--lime); box-shadow: 0 8px 20px rgba(159, 229, 207, .12); }.queue-cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }.video-icon { font-size: 17px; line-height: .6; }.queue-cta kbd { margin-left: auto; padding: 3px 5px; border: 1px solid rgba(7, 21, 28, .2); border-radius: 3px; color: rgba(7, 21, 28, .68); background: rgba(7, 21, 28, .07); font-family: var(--mono); font-size: 8px; }
.empty-queue { display: grid; min-height: 210px; place-items: center; align-content: center; gap: 7px; color: var(--ink-faint); text-align: center; }.empty-queue span { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 2px; border-radius: 50%; color: var(--lime); background: rgba(214,245,106,.1); font-size: 17px; }.empty-queue strong { color: var(--ink); font-size: 11px; }.empty-queue small { font-size: 9px; }.full-empty { min-height: 260px; }
.activity-feed { margin-top: 14px; }.activity-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }.activity-row:last-child { border-bottom: 0; }.activity-icon { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; font-size: 11px; }.activity-icon.mint { color: var(--teal); background: rgba(159, 229, 207, .1); }.activity-icon.coral { color: var(--coral); background: rgba(255, 139, 114, .1); }.activity-icon.lilac { color: var(--lavender); background: rgba(185, 175, 255, .1); }.activity-text { font-size: 10px; }.activity-text strong { font-weight: 600; }.activity-text span { color: var(--ink-faint); }.activity-time { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.insight-art { position: relative; flex: 0 0 42%; overflow: hidden; background: radial-gradient(circle at center, rgba(159, 229, 207, .2), transparent 55%), linear-gradient(145deg, rgba(44, 115, 105, .8), rgba(7, 29, 35, .85)); }.insight-art::before, .insight-art::after { position: absolute; content: ""; border: 1px solid rgba(214, 245, 106, .18); transform: rotate(28deg); }.insight-art::before { inset: 19% -14%; }.insight-art::after { inset: -20% 21%; transform: rotate(-23deg); }.orbit { position: absolute; border: 1px solid rgba(159, 229, 207, .27); border-radius: 50%; transform: rotate(-24deg); }.orbit-one { width: 160px; height: 68px; top: 31%; left: 8%; }.orbit-two { width: 135px; height: 47px; top: 39%; left: 18%; transform: rotate(31deg); }.insight-spark { position: absolute; top: 29%; left: 47%; color: var(--lime); font-size: 25px; text-shadow: 0 0 22px var(--lime); }.mini-signal { position: absolute; right: 17%; bottom: 19%; color: var(--teal); font-size: 30px; transform: rotate(90deg); }.insight-copy { padding: 21px 20px; }.insight-copy h3 { margin-top: 6px; font-size: 16px; line-height: 1.25; }.insight-copy h3 em { color: var(--teal); font-style: normal; }.insight-copy p:not(.eyebrow) { max-width: 210px; margin: 13px 0 14px; color: var(--ink-soft); font-size: 9px; }

.view-intro { padding: 42px 0 25px; }.generic-view h2 { margin-top: 8px; font-size: 32px; }.full-queue { padding: 6px 22px; }.full-queue .queue-person { grid-template-columns: 42px 1fr 160px auto; gap: 14px; padding: 18px 0; }.full-queue .queue-avatar { width: 42px; height: 42px; }.queue-action { padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--teal); background: transparent; font-size: 10px; cursor: pointer; }.queue-action:hover { background: rgba(159, 229, 207, .08); }.schedule-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 20px; }.schedule-board, .availability { padding: 22px; }.schedule-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }.schedule-row:last-child { border-bottom: 0; }.schedule-time { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }.doctor-name { font-weight: 700; }.doctor-role { margin-top: 3px; color: var(--ink-faint); font-size: 9px; }.doctor-status { color: var(--teal); font-family: var(--mono); font-size: 8px; }.doctor-status.busy { color: var(--yellow); }.availability h3 { margin: 6px 0 24px; font-size: 16px; }.coverage-bars { display: grid; gap: 18px; }.coverage-bars > div { display: grid; grid-template-columns: 1fr 40px; gap: 4px 12px; align-items: center; font-size: 10px; }.coverage-bars b { display: block; height: 5px; overflow: hidden; border-radius: 4px; background: rgba(159, 229, 207, .1); }.coverage-bars i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-dark), var(--teal)); }.coverage-bars em { grid-column: 2; grid-row: 1; color: var(--teal); font-family: var(--mono); font-size: 8px; font-style: normal; text-align: right; }.availability-note { margin: 31px 0 0; padding: 12px; border-left: 2px solid var(--yellow); color: var(--ink-soft); background: rgba(247, 199, 107, .06); font-size: 10px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.upgrade-card { position: relative; display: flex; min-height: 235px; flex-direction: column; padding: 20px; overflow: hidden; }.upgrade-card::after { position: absolute; right: -20px; bottom: -35px; width: 150px; height: 150px; border: 1px solid rgba(159, 229, 207, .08); border-radius: 50%; content: ""; box-shadow: 0 0 0 14px rgba(159, 229, 207, .025), 0 0 0 29px rgba(159, 229, 207, .018); }.upgrade-visual { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 18px; border-radius: 12px; color: var(--lime); background: rgba(214, 245, 106, .1); font-size: 23px; }.upgrade-card:nth-child(2) .upgrade-visual { color: var(--lavender); background: rgba(185, 175, 255, .1); }.upgrade-card:nth-child(3) .upgrade-visual { color: var(--coral); background: rgba(255, 139, 114, .1); }.upgrade-card h3 { font-size: 15px; }.upgrade-card p { min-height: 36px; margin: 7px 0 18px; color: var(--ink-soft); font-size: 10px; }.upgrade-card button { position: relative; z-index: 1; margin-top: auto; padding: 9px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--teal); background: transparent; font-size: 10px; cursor: pointer; }.upgrade-card button:hover { border-color: var(--teal); background: rgba(159, 229, 207, .06); }.upgrade-card.is-owned button { color: var(--lime); border-color: rgba(214, 245, 106, .3); cursor: default; }.price { color: var(--yellow); font-family: var(--mono); font-size: 9px; }.upgrade-level { position: absolute; top: 22px; right: 19px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.protocol-layout { display: grid; grid-template-columns: 1.2fr .7fr; gap: 20px; align-items: start; }.protocol-card { padding: 12px 22px; }.protocol-step { display: grid; grid-template-columns: 42px 1fr; gap: 17px; padding: 22px 0; border-bottom: 1px solid var(--line); }.protocol-step:last-child { border-bottom: 0; }.protocol-step > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(159, 229, 207, .23); border-radius: 8px; color: var(--teal); font-family: var(--mono); font-size: 9px; }.protocol-step h3 { font-size: 14px; }.protocol-step p { max-width: 550px; margin: 6px 0 0; color: var(--ink-soft); font-size: 10px; }.protocol-note { display: flex; gap: 13px; padding: 18px; border: 1px solid rgba(214, 245, 106, .22); border-radius: 10px; background: rgba(214, 245, 106, .07); }.protocol-note > span { color: var(--lime); font-size: 22px; }.protocol-note p { margin: 1px 0; color: var(--ink-soft); font-size: 10px; }

.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; gap: 8px; width: min(310px, calc(100vw - 48px)); }.toast { display: flex; align-items: start; gap: 9px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: rgba(12, 35, 43, .96); box-shadow: 0 15px 40px rgba(0, 0, 0, .22); font-size: 10px; animation: toastIn .25s ease both; }.toast b { color: var(--lime); font-size: 15px; line-height: 1; }.toast.error b { color: var(--coral); }.toast.fade-out { animation: toastOut .28s ease both; }@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }@keyframes toastOut { to { transform: translateY(10px); opacity: 0; } }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 22px; background: rgba(1, 8, 12, .76); backdrop-filter: blur(8px); }.call-modal { width: min(1040px, 100%); overflow: hidden; border: 1px solid rgba(159, 229, 207, .26); border-radius: 15px; background: #081a22; box-shadow: 0 25px 90px rgba(0, 0, 0, .5); animation: modalIn .3s ease both; }@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.call-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px; border-bottom: 1px solid var(--line); }.call-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; }.call-brand .brand-mark { margin-left: 3px; }.call-brand strong { font-size: 12px; }.call-timer { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }.call-timer i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--coral); }.close-button { width: 28px; height: 28px; color: var(--ink-faint); background: transparent; font-size: 22px; line-height: 1; }.close-button:hover { color: var(--ink); }.call-body { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 580px; }.video-stage { position: relative; min-height: 580px; overflow: hidden; background: #0e3335; }.video-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 23%, rgba(214, 245, 106, .28), transparent 16%), linear-gradient(145deg, #173e3e 0%, #0e292e 51%, #192334 100%); }.video-backdrop::before { position: absolute; inset: 0; content: ""; opacity: .25; background: repeating-linear-gradient(133deg, transparent 0 33px, rgba(159, 229, 207, .13) 34px, transparent 35px); }.window-shape { position: absolute; top: 9%; left: 8%; width: 30%; height: 41%; border: 1px solid rgba(159, 229, 207, .26); box-shadow: inset 0 0 40px rgba(159, 229, 207, .08); }.window-shape::before, .window-shape::after { position: absolute; content: ""; background: rgba(159, 229, 207, .2); }.window-shape::before { top: 50%; left: 0; width: 100%; height: 1px; }.window-shape::after { top: 0; left: 50%; width: 1px; height: 100%; }.plant-shape { position: absolute; right: 5%; bottom: 5%; width: 22%; height: 40%; border-left: 2px solid rgba(214, 245, 106, .22); border-radius: 70% 0 0 0; transform: rotate(23deg); }.plant-shape::before, .plant-shape::after { position: absolute; content: ""; border: 1px solid rgba(214, 245, 106, .28); border-radius: 100% 0 100% 0; }.plant-shape::before { top: 15%; left: -33px; width: 48px; height: 28px; transform: rotate(-35deg); }.plant-shape::after { top: 37%; left: -6px; width: 55px; height: 30px; transform: rotate(29deg); }.video-light { position: absolute; top: -15%; right: 22%; width: 30%; height: 90%; background: rgba(255, 237, 191, .09); transform: rotate(13deg); filter: blur(20px); }
.patient-video { position: absolute; inset: 0; display: grid; place-items: center; }.patient-face { position: relative; width: 150px; height: 190px; border-radius: 48% 48% 44% 44% / 42% 42% 50% 50%; background: #b86d51; box-shadow: inset 18px -12px 0 rgba(100, 50, 48, .17), inset -18px 7px 0 rgba(245, 165, 119, .12); }.face-hair { position: absolute; top: -11px; left: 5%; width: 91%; height: 75px; border-radius: 56% 56% 39% 42%; background: #1b2731; transform: rotate(-3deg); }.face-hair::after { position: absolute; top: 39px; right: -8px; width: 42px; height: 56px; content: ""; border-radius: 0 40% 30% 50%; background: #1b2731; transform: rotate(11deg); }.face-eye { position: absolute; top: 91px; width: 15px; height: 7px; border-top: 2px solid #291b22; border-radius: 50%; }.eye-left { left: 38px; }.eye-right { right: 38px; }.face-nose { position: absolute; top: 92px; left: 69px; width: 12px; height: 29px; border-right: 2px solid rgba(76, 38, 37, .36); border-bottom: 2px solid rgba(76, 38, 37, .36); border-radius: 0 0 10px 0; }.face-mouth { position: absolute; left: 56px; bottom: 43px; width: 38px; height: 10px; border-bottom: 2px solid #6e3538; border-radius: 50%; }.face-neck { position: absolute; bottom: -37px; left: 55px; width: 43px; height: 50px; background: #9b5b47; }.face-shirt { position: absolute; bottom: -156px; left: -77px; width: 305px; height: 170px; border-radius: 50% 50% 0 0; background: #2b5e67; box-shadow: inset 0 15px 0 rgba(159, 229, 207, .1); }.video-name { position: absolute; left: 18px; bottom: 16px; padding: 6px 8px; border-radius: 5px; color: var(--ink); background: rgba(3, 14, 18, .58); font-family: var(--mono); font-size: 9px; }.video-quality { position: absolute; top: 16px; right: 17px; padding: 4px 6px; border-radius: 4px; color: var(--teal); background: rgba(3, 14, 18, .55); font-family: var(--mono); font-size: 8px; }.video-quality i { display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--teal); }.self-video { position: absolute; top: 18px; right: 18px; display: grid; width: 84px; height: 102px; place-items: center; border: 1px solid rgba(159, 229, 207, .28); border-radius: 7px; background: rgba(10, 35, 39, .78); }.self-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #1b302d; background: var(--teal); font-size: 9px; font-weight: 800; }.self-video span { position: absolute; bottom: 7px; left: 8px; color: var(--ink-soft); font-family: var(--mono); font-size: 7px; }.call-caption { position: absolute; right: 18px; bottom: 17px; left: 18px; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid rgba(159, 229, 207, .15); border-radius: 7px; color: var(--ink-soft); background: rgba(3, 14, 18, .54); font-size: 10px; }.speaking-bars { display: flex; align-items: center; gap: 2px; height: 14px; }.speaking-bars i { width: 2px; height: 7px; border-radius: 2px; background: var(--teal); animation: voice .8s ease-in-out infinite alternate; }.speaking-bars i:nth-child(2) { height: 12px; animation-delay: .2s; }.speaking-bars i:nth-child(3) { height: 5px; animation-delay: .4s; }@keyframes voice { to { transform: scaleY(.45); opacity: .5; } }
.case-panel { display: flex; flex-direction: column; padding: 27px 27px 21px; background: rgba(8, 24, 31, .72); }.case-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.case-heading h2 { margin-top: 7px; font-size: 24px; }.case-heading > div > p:last-child { margin: 4px 0 0; color: var(--ink-faint); font-size: 10px; }.urgency-tag { flex: 0 0 auto; margin-top: 1px; padding: 5px 7px; border: 1px solid rgba(159, 229, 207, .24); border-radius: 4px; color: var(--teal); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }.urgency-tag.high { border-color: rgba(255, 139, 114, .3); color: var(--coral); }.urgency-tag.medium { border-color: rgba(247, 199, 107, .3); color: var(--yellow); }.complaint-box { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(159, 229, 207, .04); }.complaint-icon { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--coral); background: rgba(255, 139, 114, .1); font-size: 20px; }.complaint-box .eyebrow { margin-bottom: 4px; }.complaint-box strong { display: block; font-size: 10px; font-weight: 600; line-height: 1.4; }.data-heading { display: flex; align-items: end; justify-content: space-between; margin-top: 23px; }.data-heading > div > span { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 9px; }.data-complete { color: var(--teal); font-family: var(--mono); font-size: 11px; }.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }.equipment { position: relative; min-height: 89px; padding: 11px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); background: rgba(16, 43, 52, .55); text-align: left; cursor: pointer; transition: .2s ease; }.equipment:hover { border-color: var(--teal-dark); background: rgba(159, 229, 207, .08); }.equipment.is-used { border-color: rgba(159, 229, 207, .45); color: var(--teal); background: rgba(159, 229, 207, .09); }.equipment:disabled { cursor: default; }.equipment-icon { display: block; margin-bottom: 8px; color: currentColor; font-size: 23px; line-height: .7; }.equipment strong { display: block; font-size: 9px; font-weight: 700; }.equipment small { display: block; margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 7px; }.equipment.is-used::after { position: absolute; top: 7px; right: 7px; content: "✓"; color: var(--lime); font-size: 11px; }.decision-area { margin-top: auto; padding-top: 22px; }.decision-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }.decision { display: flex; align-items: start; gap: 8px; min-height: 63px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); background: transparent; text-align: left; cursor: pointer; transition: .2s ease; }.decision > span { font-size: 17px; line-height: 1; }.decision strong, .decision small { display: block; }.decision strong { font-size: 9px; font-weight: 700; }.decision small { margin-top: 4px; color: var(--ink-faint); font-size: 7px; line-height: 1.3; }.decision.remote:hover, .decision.remote.is-selected { border-color: rgba(159, 229, 207, .58); color: var(--teal); background: rgba(159, 229, 207, .08); }.decision.refer:hover, .decision.refer.is-selected { border-color: rgba(255, 139, 114, .55); color: var(--coral); background: rgba(255, 139, 114, .08); }.decision-hint { min-height: 27px; margin: 8px 0 0; color: var(--ink-faint); font-size: 8px; line-height: 1.4; }.decision-hint.success { color: var(--teal); }.decision-hint.warning { color: var(--coral); }
.call-footer { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 18px; border-top: 1px solid var(--line); color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }.secure-icon { margin-right: 5px; color: var(--teal); font-size: 11px; font-style: normal; }.end-call { padding: 0; border: 0; color: var(--ink-faint); background: transparent; font-family: var(--mono); font-size: 8px; cursor: pointer; }.end-call:hover { color: var(--coral); }
.small-modal { position: relative; width: min(380px, 100%); padding: 31px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); box-shadow: 0 25px 90px rgba(0,0,0,.5); animation: modalIn .3s ease both; }.small-modal .close-button { position: absolute; top: 14px; right: 14px; }.help-symbol { display: grid; width: 39px; height: 39px; place-items: center; margin-bottom: 20px; border-radius: 12px; color: var(--canvas-deep); background: var(--lime); font-size: 21px; font-weight: 800; }.small-modal h2 { margin-top: 7px; font-size: 24px; }.small-modal > p:not(.eyebrow) { margin: 10px 0 20px; color: var(--ink-soft); font-size: 11px; }.help-rule { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: var(--ink-soft); font-size: 10px; }.help-rule span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 6px; color: var(--teal); background: rgba(159,229,207,.1); font-family: var(--mono); font-size: 8px; }.small-modal .queue-cta { margin-top: 22px; }

@media (max-width: 1050px) { .main-content { padding-right: 26px; padding-left: 26px; }.dashboard-grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }.metric-item { gap: 8px; }.metric-item:not(:first-child) { padding-left: 12px; }.metric-item div span { font-size: 7px; }.metric-item div strong { font-size: 16px; }.call-body { grid-template-columns: 1fr 1fr; }.case-panel { padding-right: 19px; padding-left: 19px; } }
@media (max-width: 820px) { .sidebar { width: 70px; flex-basis: 70px; padding: 22px 9px 15px; }.brand-lockup { justify-content: center; padding: 0 0 25px; }.brand-lockup > div:last-child, .profile-chip > div:nth-child(2), .online-dot, .nav-label, .nav-item > span:not(.nav-icon):not(.nav-count), .shift-progress, .help-button { display: none; }.profile-chip { justify-content: center; margin-bottom: 24px; padding: 7px 0; border: 0; background: transparent; }.nav-item { justify-content: center; padding: 11px 0; }.nav-count { position: absolute; margin: -20px 0 0 25px; padding: 1px 4px; background: rgba(255,139,114,.15); }.nav-item.is-active .nav-count { color: var(--coral); background: rgba(255,139,114,.15); }.nav-icon { font-size: 20px; }.main-content { padding-right: 20px; padding-left: 20px; }.metric-strip { grid-template-columns: repeat(2, 1fr); }.metric-item:nth-child(2) { border-right: 0; }.metric-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.metric-item:nth-child(3) { padding-left: 0; }.metric-item:nth-child(4) { padding-left: 12px; }.dashboard-grid { grid-template-columns: 1fr; }.map-card, .queue-card { min-height: auto; }.queue-card { padding-bottom: 18px; }.open-map { height: 330px; }.activity-card, .insight-card { min-height: 190px; }.schedule-layout, .protocol-layout { grid-template-columns: 1fr; }.upgrade-grid { grid-template-columns: repeat(2, 1fr); }.call-body { grid-template-columns: 1fr; }.video-stage { min-height: 390px; }.call-modal { max-height: calc(100vh - 30px); overflow: auto; }.case-panel { min-height: 520px; } }
@media (max-width: 560px) { .main-content { padding-right: 14px; padding-left: 14px; }.topbar { min-height: 80px; }.topbar-title { gap: 9px; }.live-pulse { writing-mode: vertical-rl; font-size: 7px; }.topbar h1 { font-size: 14px; }.connection-status { padding-right: 9px; }.connection-status div { display: none; }.topbar-actions { gap: 7px; }.welcome-row { align-items: start; flex-direction: column; margin-bottom: 21px; }.date-chip { align-self: stretch; }.metric-item { padding: 12px 7px 12px 0; }.metric-item:not(:first-child) { padding-left: 8px; }.metric-icon { flex-basis: 27px; width: 27px; height: 27px; font-size: 15px; }.metric-item div strong { font-size: 14px; }.metric-item div span { font-size: 6px; }.metric-item div small { font-size: 8px; }.panel-card { border-radius: 9px; }.map-card, .queue-card { padding: 15px 14px 0; }.open-map { height: 290px; margin-top: 14px; }.map-legend { right: 8px; bottom: 8px; gap: 6px; }.map-label { font-size: 6px; }.map-pin small { display: none; }.map-player { top: 55%; left: 35%; }.insight-card { min-height: 175px; }.insight-art { flex-basis: 38%; }.insight-copy { padding: 17px 14px; }.insight-copy h3 { font-size: 14px; }.activity-card { padding: 15px 14px; }.full-queue { padding: 6px 14px; }.full-queue .queue-person { grid-template-columns: 38px 1fr auto; gap: 9px; }.full-queue .queue-person > .queue-side { display: none; }.full-queue .queue-avatar { width: 38px; height: 38px; }.upgrade-grid { grid-template-columns: 1fr; }.schedule-board, .availability { padding: 16px; }.schedule-row { grid-template-columns: 75px 1fr; gap: 10px; }.doctor-status { grid-column: 2; }.call-modal { width: 100%; }.modal-backdrop { padding: 8px; }.call-topbar { padding: 0 12px; }.call-body { min-height: 0; }.video-stage { min-height: 320px; }.patient-face { transform: scale(.8); }.case-panel { padding: 21px 15px 13px; }.case-heading h2 { font-size: 21px; }.equipment { min-height: 80px; }.decision-buttons { grid-template-columns: 1fr; }.decision { min-height: 55px; }.call-footer { padding: 0 12px; }.call-footer > span { max-width: 190px; }.view-intro { padding-top: 29px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Camada de simulação viva: conversa, identidade e integrações locais. */
.admin-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 20px; align-items: start; }.admin-card { padding: 22px; }.local-badge { padding: 4px 6px; border: 1px solid rgba(159,229,207,.18); border-radius: 4px; color: var(--ink-faint); font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }.local-badge.secure { color: var(--teal); border-color: rgba(159,229,207,.25); }.profile-form { margin-top: 25px; }.admin-label { display: block; margin: 13px 0 6px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }.profile-form > .admin-label:first-child { margin-top: 0; }.admin-input { width: 100%; min-height: 37px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; color: var(--ink); background: rgba(4,18,24,.54); font-family: var(--sans); font-size: 11px; transition: .2s ease; }.admin-input::placeholder { color: var(--ink-faint); }.admin-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(159,229,207,.08); }.admin-select { appearance: auto; }.admin-help { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 9px; }.avatar-label { margin-top: 25px; }.avatar-options { display: grid; gap: 7px; }.avatar-option { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); background: rgba(16,43,52,.38); text-align: left; cursor: pointer; transition: .2s ease; }.avatar-option:hover { border-color: var(--teal-dark); }.avatar-option.is-selected { border-color: rgba(159,229,207,.55); background: rgba(159,229,207,.09); }.avatar-option strong, .avatar-option small { display: block; }.avatar-option strong { color: var(--ink); font-size: 10px; }.avatar-option small { margin-top: 2px; color: var(--ink-faint); font-size: 8px; }.avatar-option > b { display: none; margin-left: auto; color: var(--lime); font-size: 12px; }.avatar-option.is-selected > b { display: block; }.player-avatar-preview { position: relative; display: block; flex: 0 0 37px; width: 37px; height: 37px; overflow: hidden; border-radius: 11px; background: linear-gradient(145deg, #397a7e, #173941); }.player-avatar-preview::before { position: absolute; top: 8px; left: 10px; width: 18px; height: 20px; content: ""; border-radius: 48% 48% 44% 44%; background: #c88768; }.player-avatar-preview::after { position: absolute; top: 3px; left: 8px; width: 22px; height: 12px; content: ""; border-radius: 55% 58% 35% 35%; background: #20303a; }.player-avatar-preview i { position: absolute; bottom: -4px; left: 3px; width: 32px; height: 18px; border-radius: 48% 48% 0 0; background: #9fe5cf; }.player-avatar-preview.woman::after { height: 19px; border-radius: 54% 58% 48% 40%; }.player-avatar-preview.woman i { background: #b9afff; }.player-avatar-preview.man::before { background: #a76d55; }.player-avatar-preview.man::after { left: 9px; width: 20px; height: 10px; border-radius: 54% 54% 25% 25%; }.player-avatar-preview.man i { background: #9fe5cf; }.admin-primary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 39px; margin-top: 22px; border: 1px solid rgba(159,229,207,.3); border-radius: 6px; color: var(--canvas-deep); background: var(--teal); font-size: 10px; font-weight: 800; cursor: pointer; }.admin-primary:hover { background: var(--lime); }.admin-primary span { font-size: 15px; }.admin-description { margin: 12px 0 18px; color: var(--ink-soft); font-size: 10px; }.integration-block { margin-top: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(4,18,24,.34); }.integration-heading { display: flex; align-items: center; gap: 9px; }.integration-heading > div { min-width: 0; flex: 1; }.integration-heading strong, .integration-heading small { display: block; }.integration-heading strong { font-size: 10px; }.integration-heading small { margin-top: 2px; color: var(--ink-faint); font-size: 8px; }.integration-logo { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 8px; font-size: 16px; }.gemini-logo { color: var(--lime); background: rgba(214,245,106,.1); }.eleven-logo { color: var(--lavender); background: rgba(185,175,255,.1); }.integration-status { padding: 4px 5px; border: 1px solid rgba(255,139,114,.23); border-radius: 4px; color: var(--coral); font-family: var(--mono); font-size: 7px; white-space: nowrap; }.integration-status.connected { border-color: rgba(159,229,207,.3); color: var(--teal); }.integration-test { margin-top: 12px; padding: 0; border: 0; color: var(--teal); background: transparent; font-size: 9px; cursor: pointer; }.integration-test:hover { color: var(--lime); }.integration-test span { margin-left: 5px; font-size: 13px; }.security-note { display: flex; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }.security-note > span { color: var(--yellow); font-size: 15px; }.security-note p { margin: 1px 0; color: var(--ink-faint); font-size: 8px; line-height: 1.5; }

.conversation-section { margin-top: 17px; }.conversation-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }.conversation-heading > div > span { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 8px; }.conversation-heading > div > span.is-thinking { color: var(--yellow); }.listen-button { padding: 0; border: 0; color: var(--teal); background: transparent; font-family: var(--mono); font-size: 7px; text-transform: lowercase; cursor: pointer; }.listen-button:hover { color: var(--lime); }.listen-button:disabled { color: var(--ink-faint); cursor: not-allowed; }.dialogue-log { display: grid; gap: 6px; height: 83px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(4,18,24,.35); scrollbar-color: var(--teal-dark) transparent; }.dialogue-bubble { max-width: 89%; padding: 6px 8px; border-radius: 6px; color: var(--ink-soft); background: rgba(159,229,207,.06); }.dialogue-bubble.doctor { justify-self: end; color: var(--canvas-deep); background: rgba(159,229,207,.88); }.dialogue-bubble.pending { opacity: .62; }.dialogue-speaker { display: block; color: var(--ink-faint); font-family: var(--mono); font-size: 7px; }.dialogue-bubble.doctor .dialogue-speaker { color: rgba(7,21,28,.62); }.dialogue-bubble p { margin: 2px 0 0; font-size: 8px; line-height: 1.35; }.question-form { display: grid; grid-template-columns: minmax(0, 1fr) 28px 31px; gap: 5px; margin-top: 6px; }.question-form input { min-width: 0; min-height: 31px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--ink); background: rgba(4,18,24,.52); font-size: 9px; }.question-form input::placeholder { color: var(--ink-faint); }.question-form input:focus { border-color: var(--teal-dark); }.mic-button, .send-question { display: grid; min-width: 0; min-height: 31px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: var(--teal); background: rgba(159,229,207,.05); font-size: 10px; cursor: pointer; }.mic-button:hover, .send-question:hover, .mic-button.is-listening { border-color: var(--coral); color: var(--coral); background: rgba(255,139,114,.09); }.send-question { color: var(--canvas-deep); background: var(--teal); font-size: 16px; }.send-question:disabled, .mic-button:disabled { opacity: .4; cursor: not-allowed; }.ai-live-chip { position: absolute; top: 15px; left: 17px; display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(159,229,207,.16); border-radius: 4px; color: var(--teal); background: rgba(3,14,18,.45); font-family: var(--mono); font-size: 7px; }.ai-live-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214,245,106,.1); animation: blink 2s infinite; }

.patient-face { background: radial-gradient(circle at 67% 33%, rgba(255,229,195,.22), transparent 17%), linear-gradient(115deg, var(--patient-skin, #b86d51) 10%, #9a5b49 100%); box-shadow: inset 18px -13px 0 rgba(74,38,36,.15), inset -16px 8px 0 rgba(255,201,160,.11), 0 15px 26px rgba(0,0,0,.2); }.patient-face::before, .patient-face::after { position: absolute; top: 79px; width: 19px; height: 38px; content: ""; border-radius: 50%; background: var(--patient-skin, #b86d51); }.patient-face::before { left: -10px; }.patient-face::after { right: -10px; }.face-hair { background: var(--patient-hair, #1b2731); box-shadow: inset 0 -9px 0 rgba(0,0,0,.12); }.face-brow { position: absolute; top: 80px; width: 22px; height: 8px; border-top: 2px solid rgba(45,26,29,.58); border-radius: 50%; }.brow-left { left: 31px; transform: rotate(5deg); }.brow-right { right: 31px; transform: rotate(-5deg); }.face-eye { z-index: 1; height: 7px; border-top-color: #291b22; animation: faceBlink 5.8s ease-in-out infinite; }.eye-right { animation-delay: .08s; }.face-cheek { position: absolute; top: 119px; width: 23px; height: 10px; border-radius: 50%; background: rgba(241,139,113,.12); }.cheek-left { left: 22px; }.cheek-right { right: 22px; }.face-mouth { height: 8px; border-bottom: 2px solid #6e3538; }.patient-video.is-speaking .face-mouth { height: 13px; border: 2px solid rgba(93,42,44,.75); border-top: 0; animation: mouthTalk .16s ease-in-out infinite alternate; }.patient-video.is-speaking .patient-face { animation: subtleTalk .45s ease-in-out infinite alternate; }.face-shirt { background: linear-gradient(145deg, #3c7880, #224a58); box-shadow: inset 0 15px 0 rgba(159,229,207,.1); }.outcome-improving { filter: saturate(.72); }.outcome-improving::after { position: absolute; inset: -5px; content: "✓"; border: 2px solid var(--lime); border-radius: 50%; color: var(--lime); background: var(--canvas-deep); font-family: var(--mono); font-size: 10px; text-align: center; line-height: 26px; transform: rotate(45deg); }.outcome-worsening { animation: urgentPulse 1.35s infinite; }.outcome-worsening::after { position: absolute; inset: -5px; content: "!"; border: 2px solid var(--coral); border-radius: 50%; color: var(--coral); background: var(--canvas-deep); font-family: var(--mono); font-size: 10px; text-align: center; line-height: 26px; transform: rotate(45deg); }@keyframes faceBlink { 0%, 46%, 49%, 100% { transform: scaleY(1); } 47%, 48% { transform: scaleY(.1); } }@keyframes mouthTalk { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }@keyframes subtleTalk { from { transform: translateY(0); } to { transform: translateY(2px); } }@keyframes urgentPulse { 50% { box-shadow: 0 0 0 7px rgba(255,139,114,.1); } }

@media (max-width: 820px) { .admin-layout { grid-template-columns: 1fr; }.integration-card { order: -1; } }
@media (max-width: 560px) { .admin-card { padding: 16px 14px; }.integration-heading { align-items: start; }.integration-status { margin-left: auto; }.conversation-heading { align-items: start; flex-direction: column; }.dialogue-log { height: 95px; }.question-form { grid-template-columns: minmax(0,1fr) 30px 32px; }.ai-live-chip { top: 12px; left: 12px; }.self-video { top: 15px; right: 12px; } }

/* Atendimento premium: o modal permanece inteiro na janela e rola apenas o prontuário. */
.modal-backdrop { place-items: start center; align-items: start; overflow-y: auto; padding: 14px; }.call-modal { display: flex; max-height: calc(100vh - 28px); flex-direction: column; border-color: rgba(159,229,207,.3); border-radius: 16px; background: linear-gradient(145deg, #0a222b, #07161d 72%); }.call-topbar { min-height: 64px; flex: 0 0 64px; padding: 0 22px; background: rgba(3,15,21,.48); }.call-brand { gap: 10px; }.call-brand strong { font-size: 13px; letter-spacing: -.02em; }.call-timer { padding: 6px 9px; border: 1px solid rgba(255,139,114,.18); border-radius: 5px; background: rgba(255,139,114,.05); }.call-context-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 53px; flex: 0 0 53px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(12,36,44,.66); }.call-context-strip strong { display: block; margin-top: 3px; color: var(--ink); font-size: 10px; font-weight: 600; }.signal-readout { display: flex; align-items: center; gap: 9px; padding-left: 17px; border-left: 1px solid var(--line); }.signal-readout .signal-bars { height: 12px; }.signal-readout .signal-bars i { height: 4px; }.signal-readout .signal-bars i:nth-child(2) { height: 7px; }.signal-readout .signal-bars i:nth-child(3) { height: 9px; }.signal-readout .signal-bars i:nth-child(4) { height: 12px; }.signal-readout div span, .signal-readout div strong { display: block; }.signal-readout div span { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }.signal-readout div strong { margin-top: 2px; color: var(--teal); font-family: var(--mono); font-size: 8px; font-weight: 400; text-transform: uppercase; }.call-body { min-height: 0; flex: 1 1 auto; overflow: hidden; }.video-stage { min-height: 0; height: auto; background: radial-gradient(circle at 48% 46%, rgba(159,229,207,.09), transparent 35%), #0e2a32; }.case-panel { min-height: 0; overflow-y: auto; padding-top: 24px; padding-bottom: 19px; scrollbar-color: var(--teal-dark) transparent; }.case-heading h2 { font-size: 26px; }.complaint-box { margin-top: 19px; }.conversation-section { margin-top: 18px; }.case-scoreboard { margin-top: 14px; }.case-timeline { margin-top: 13px; }.data-heading { margin-top: 18px; }.treatment-area { margin-top: 14px; }.decision-area { padding-top: 17px; }.call-footer { min-height: 43px; flex: 0 0 43px; background: rgba(3,15,21,.42); }.call-footer .end-call { padding: 5px 0; color: var(--ink-soft); text-transform: uppercase; }.call-footer .end-call:hover { color: var(--coral); }

.team-resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }.team-card, .resource-card { padding: 22px; }.team-list, .resource-list { margin-top: 13px; }.team-row, .resource-row { display: grid; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.team-row { grid-template-columns: 33px minmax(0,1fr) auto; }.resource-row { grid-template-columns: 29px minmax(0,1fr) auto; }.team-row:last-child, .resource-row:last-child { border-bottom: 0; }.team-avatar { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: var(--canvas-deep); font-family: var(--mono); font-size: 8px; }.team-avatar.mint { background: var(--teal); }.team-avatar.gold { background: var(--yellow); }.team-avatar.lilac { background: var(--lavender); }.team-copy strong, .team-copy small, .resource-copy strong, .resource-copy small { display: block; }.team-copy strong, .resource-copy strong { color: var(--ink); font-size: 9px; }.team-copy small, .resource-copy small { margin-top: 3px; color: var(--ink-faint); font-size: 8px; line-height: 1.25; }.team-action, .resource-buy { min-width: 93px; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--teal); background: transparent; font-size: 8px; cursor: pointer; }.team-action:hover, .resource-buy:hover { border-color: var(--teal); background: rgba(159,229,207,.06); }.team-action:disabled { color: var(--lime); border-color: rgba(214,245,106,.26); cursor: default; }.team-action small, .resource-buy small { display: block; margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 6px; }.resource-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--yellow); background: rgba(247,199,107,.1); font-size: 16px; }.resource-stock { min-width: 36px; text-align: right; }.resource-stock b, .resource-stock span { display: block; }.resource-stock b { color: var(--teal); font-family: var(--mono); font-size: 13px; font-weight: 400; }.resource-stock span { margin-top: 2px; color: var(--ink-faint); font-size: 7px; }.resource-buy { min-width: 82px; }.resource-buy small { color: var(--yellow); }.territory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.territory-card { min-height: 295px; padding: 20px; overflow: hidden; }.territory-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }.territory-kicker { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }.territory-card h3 { margin-top: 5px; font-size: 16px; }.territory-state { padding: 4px 6px; border: 1px solid rgba(255,139,114,.26); border-radius: 4px; color: var(--coral); font-family: var(--mono); font-size: 7px; text-align: right; }.territory-card.is-stable .territory-state { border-color: rgba(159,229,207,.25); color: var(--teal); }.territory-demand { margin: 16px 0; color: var(--ink-soft); font-size: 9px; }.territory-signal > div { display: flex; justify-content: space-between; }.territory-signal > div span { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; }.territory-signal > div strong { color: var(--teal); font-family: var(--mono); font-size: 11px; font-weight: 400; }.territory-signal > b { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: rgba(159,229,207,.1); }.territory-signal > b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--teal)); }.territory-issue { min-height: 31px; margin: 14px 0; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }.territory-actions { display: grid; gap: 5px; }.territory-actions button { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 4px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--teal); background: transparent; font-size: 8px; text-align: left; cursor: pointer; }.territory-actions button:hover { border-color: var(--teal); background: rgba(159,229,207,.06); }.territory-actions button:disabled { color: var(--lime); border-color: rgba(214,245,106,.24); cursor: default; }.territory-actions button small { color: var(--ink-faint); font-family: var(--mono); font-size: 6px; text-align: right; }.territory-result { margin-top: 10px; color: var(--teal); font-family: var(--mono); font-size: 7px; }.territory-result.neutral { color: var(--yellow); }.remote-brief { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 18px; margin-top: 20px; padding: 16px 20px; }.remote-brief-art { position: relative; display: grid; width: 74px; height: 55px; place-items: center; overflow: hidden; border: 1px solid rgba(159,229,207,.2); border-radius: 8px; background: linear-gradient(145deg, rgba(44,115,105,.72), rgba(7,29,35,.82)); }.remote-brief-art span { position: relative; z-index: 1; color: var(--lime); font-size: 25px; transform: rotate(90deg); }.remote-brief-art i, .remote-brief-art b { position: absolute; width: 32px; height: 15px; border: 1px solid rgba(159,229,207,.32); border-radius: 50%; }.remote-brief-art i { transform: rotate(27deg); }.remote-brief-art b { transform: rotate(-27deg); }.remote-brief h3 { margin-top: 5px; font-size: 14px; }.remote-brief p:not(.eyebrow) { margin: 5px 0 0; color: var(--ink-soft); font-size: 9px; }.remote-brief > .text-button { white-space: nowrap; }

@media (max-width: 820px) { .call-body { overflow: auto; }.video-stage { min-height: 365px; height: 365px; flex: 0 0 365px; }.case-panel { overflow: visible; }.team-resource-grid { grid-template-columns: 1fr; }.territory-grid { grid-template-columns: repeat(2, 1fr); }.remote-brief { grid-template-columns: 70px 1fr; }.remote-brief > .text-button { grid-column: 2; } }
@media (max-width: 560px) { .modal-backdrop { padding: 7px; }.call-modal { max-height: calc(100vh - 14px); border-radius: 12px; }.call-topbar { min-height: 55px; flex-basis: 55px; padding: 0 12px; }.call-context-strip { min-height: 46px; flex-basis: 46px; padding: 0 12px; }.call-context-strip strong { font-size: 8px; }.signal-readout { padding-left: 8px; }.call-body { display: block; overflow-y: auto; }.video-stage { height: 300px; min-height: 300px; }.case-panel { padding: 19px 13px 16px; }.case-scoreboard > div { display: block; }.case-scoreboard .eyebrow { font-size: 7px; }.case-scoreboard strong { display: block; margin-top: 4px; }.case-scoreboard > div + div { padding-left: 9px; }.treatment-grid { grid-template-columns: 1fr; }.decision-buttons { grid-template-columns: 1fr; }.call-footer { min-height: 38px; flex-basis: 38px; padding: 0 12px; }.team-card, .resource-card { padding: 16px 14px; }.team-row { grid-template-columns: 29px minmax(0,1fr); }.team-action { grid-column: 2; justify-self: start; }.territory-grid { grid-template-columns: 1fr; }.remote-brief { grid-template-columns: 60px 1fr; gap: 11px; padding: 14px; }.remote-brief-art { width: 56px; height: 48px; }.remote-brief > .text-button { grid-column: 2; } }

.case-scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.case-scoreboard > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }.case-scoreboard > div + div { padding-left: 13px; border-left: 1px solid var(--line); }.case-scoreboard strong { color: var(--lime); font-family: var(--mono); font-size: 15px; font-weight: 500; }.case-scoreboard strong small { color: var(--ink-faint); font-size: 8px; font-weight: 400; }.case-scoreboard strong.is-warning { color: var(--yellow); }.case-scoreboard strong.is-danger { color: var(--coral); }.case-timeline { margin-top: 14px; }.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-faint); font-family: var(--mono); font-size: 7px; }.timeline-head strong { color: var(--coral); font-size: 7px; font-weight: 400; }.timeline-head strong.is-forward { color: var(--teal); }.timeline-track { position: relative; height: 4px; margin: 10px 3px 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,139,114,.3), rgba(247,199,107,.25) 42%, rgba(159,229,207,.25)); }.timeline-track i { position: absolute; top: 0; left: 0; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--teal)); transition: width .35s ease; }.timeline-track i.is-away { background: var(--coral); }.timeline-track i.is-close { background: var(--lime); }.timeline-track b { position: absolute; top: 50%; display: block; width: 10px; height: 10px; border: 2px solid var(--canvas); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 0 12px rgba(159,229,207,.42); transform: translate(-50%,-50%); transition: left .35s ease, background .35s ease, box-shadow .35s ease; }.timeline-track i.is-away + b { background: var(--coral); box-shadow: 0 0 0 1px var(--coral), 0 0 12px rgba(255,139,114,.35); }.timeline-labels { display: flex; justify-content: space-between; color: var(--ink-faint); font-family: var(--mono); font-size: 6px; text-transform: uppercase; }.treatment-area { margin-top: 15px; }.treatment-status { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }.treatment-status.available { color: var(--yellow); }.treatment-status.selected { color: var(--teal); }.treatment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }.treatment-option { display: flex; align-items: start; gap: 7px; min-height: 49px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); background: rgba(16,43,52,.42); text-align: left; cursor: pointer; transition: .2s ease; }.treatment-option:not(:disabled):hover { border-color: var(--teal-dark); background: rgba(159,229,207,.07); }.treatment-option:disabled { opacity: .38; cursor: not-allowed; }.treatment-option.is-selected { border-color: rgba(159,229,207,.58); color: var(--teal); background: rgba(159,229,207,.09); }.treatment-option > span { display: grid; flex: 0 0 16px; width: 16px; height: 16px; place-items: center; color: currentColor; font-size: 13px; line-height: 1; }.treatment-option strong, .treatment-option small { display: block; }.treatment-option strong { color: currentColor; font-size: 8px; font-weight: 700; }.treatment-option small { margin-top: 3px; color: var(--ink-faint); font-size: 7px; line-height: 1.25; }

/* Chamada Meet: vídeo, controles e prontuário são áreas distintas. */
.call-modal { height: min(900px, calc(100vh - 28px)); max-height: calc(100vh - 28px); }
.call-topbar { position: relative; z-index: 5; border-bottom-color: rgba(159,229,207,.16); }
.close-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(159,229,207,.22); border-radius: 9px; color: var(--ink-soft); background: rgba(159,229,207,.06); cursor: pointer; }
.close-button:hover, .close-button:focus-visible { border-color: var(--teal); color: var(--canvas-deep); background: var(--teal); }
.call-body { grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr); }
.video-stage { height: 100%; min-height: 0; border-right: 1px solid rgba(159,229,207,.15); background: radial-gradient(circle at 48% 43%, rgba(159,229,207,.13), transparent 33%), #0e2a32; }
.video-stage::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: 1px solid rgba(159,229,207,.08); }
.patient-video { padding-bottom: 22px; }
.patient-face { transform: scale(1.12); }
.video-name { bottom: 86px; }
.call-caption { right: 22px; bottom: 82px; left: 22px; min-height: 42px; background: rgba(2,12,17,.72); }
.video-controls { position: absolute; right: 50%; bottom: 17px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(159,229,207,.17); border-radius: 12px; background: rgba(3,14,18,.78); box-shadow: 0 12px 30px rgba(0,0,0,.24); transform: translateX(50%); }
.call-control { display: grid; min-width: 46px; min-height: 42px; place-items: center; gap: 3px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; color: var(--teal); background: rgba(159,229,207,.06); font-size: 14px; cursor: pointer; }
.call-control span { color: var(--ink-faint); font-family: var(--mono); font-size: 6px; text-transform: uppercase; }
.call-control .control-icon { display: grid; width: 23px; height: 21px; place-items: center; color: currentColor; }
.call-control .control-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.call-control .control-label { color: var(--ink-faint); font-family: var(--mono); font-size: 6px; letter-spacing: .04em; text-transform: uppercase; }
.call-control:hover, .call-control:focus-visible { border-color: rgba(159,229,207,.38); background: rgba(159,229,207,.13); }
.call-control.is-muted { border-color: rgba(255,139,114,.35); color: var(--coral); background: rgba(255,139,114,.12); }
.call-control-end { color: var(--coral); background: rgba(255,139,114,.1); }
.call-control-end:hover, .call-control-end:focus-visible { border-color: var(--coral); color: #fff; background: var(--coral); }
.self-video video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; opacity: 0; transform: scaleX(-1); transition: opacity .2s ease; }
.self-video.has-camera video { opacity: 1; }
.self-video.has-camera .self-avatar { opacity: 0; }
.self-video > span { z-index: 2; }
.self-mic-state { position: absolute; top: 7px; right: 7px; z-index: 3; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: var(--coral); background: rgba(3,14,18,.76); font-style: normal; }
.self-mic-state::before { width: 5px; height: 8px; content: ""; border: 1px solid currentColor; border-radius: 4px; }
.self-video.has-mic .self-mic-state { color: var(--lime); }
.self-video.camera-paused { border-color: rgba(255,139,114,.48); background: rgba(38,22,27,.88); }
.self-video.camera-paused .self-avatar { opacity: .2; }
.self-video.camera-paused::after { position: absolute; inset: 0; display: grid; place-items: center; content: "câmera desligada"; color: var(--coral); font-family: var(--mono); font-size: 7px; text-align: center; text-transform: uppercase; }
.media-status { position: absolute; top: 57px; left: 17px; z-index: 3; display: flex; align-items: center; gap: 6px; max-width: 245px; padding: 6px 8px; border: 1px solid rgba(159,229,207,.13); border-radius: 6px; color: var(--ink-faint); background: rgba(3,14,18,.54); font-family: var(--mono); font-size: 7px; line-height: 1.3; }
.media-status i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(247,199,107,.1); }
.media-status.pending i { animation: blink 1s infinite; }
.media-status.ready { border-color: rgba(159,229,207,.24); color: var(--teal); }
.media-status.ready i { background: var(--lime); box-shadow: 0 0 0 3px rgba(214,245,106,.1); }
.media-status.error { border-color: rgba(255,139,114,.25); color: #ffc0b1; }
.media-status.error i { background: var(--coral); box-shadow: 0 0 0 3px rgba(255,139,114,.1); }
.case-panel { padding: 0 0 22px; background: #091b23; }
.doctor-panel-header { position: sticky; top: 0; z-index: 2; padding: 19px 24px 17px; border-bottom: 1px solid rgba(159,229,207,.13); background: linear-gradient(180deg, #0b2029 84%, rgba(11,32,41,.92)); box-shadow: 0 10px 18px rgba(3,14,18,.18); }
.doctor-panel-kicker { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--teal); font-family: var(--mono); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
.panel-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214,245,106,.1); }
.doctor-panel-header .case-heading { margin: 0; }
.doctor-panel-header .complaint-box { margin-top: 15px; }
.panel-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-section-heading > div > span { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 8px; }
.panel-section-heading .eyebrow { margin: 0; }
.section-index, .monitor-live { color: var(--teal); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.monitor-live { padding: 4px 6px; border: 1px solid rgba(214,245,106,.25); border-radius: 4px; color: var(--lime); background: rgba(214,245,106,.06); }
.game-monitor, .interaction-section, .clinical-section { margin: 14px 20px 0; padding: 15px; border: 1px solid rgba(159,229,207,.15); border-radius: 11px; background: rgba(5,22,29,.62); }
.game-monitor { border-color: rgba(214,245,106,.2); background: linear-gradient(145deg, rgba(55,73,38,.18), rgba(6,25,31,.82)); }
.global-monitor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.global-monitor > div { min-width: 0; padding: 8px; border: 1px solid rgba(159,229,207,.1); border-radius: 7px; background: rgba(3,15,21,.32); }
.global-monitor span, .global-monitor strong { display: block; }
.global-monitor span { color: var(--ink-faint); font-family: var(--mono); font-size: 6px; letter-spacing: .05em; }
.global-monitor strong { margin-top: 5px; overflow: hidden; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.global-monitor > div:first-child strong { color: var(--teal); }
.global-monitor > div:nth-child(2) strong { color: var(--yellow); }
.global-monitor > div:nth-child(3) strong { color: var(--lavender); }
.game-monitor .case-scoreboard { margin-top: 0; padding: 10px 0; }
.game-monitor .case-timeline { margin-top: 11px; }
.interaction-section { background: rgba(8,29,37,.72); }
.clinical-section { background: rgba(5,21,28,.76); }
.interaction-section .conversation-section { margin-top: 0; }
.clinical-section .data-heading:first-of-type { margin-top: 0; }
.clinical-section .decision-area { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.clinical-section .data-heading { margin-top: 18px; }
.clinical-section .treatment-area { margin-top: 16px; }
.clinical-section .decision-buttons { grid-template-columns: 1fr; }
.case-panel::-webkit-scrollbar { width: 8px; }
.case-panel::-webkit-scrollbar-thumb { border: 2px solid #091b23; border-radius: 8px; background: rgba(159,229,207,.28); }
.case-panel::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 820px) {
  .call-modal { height: auto; min-height: calc(100vh - 30px); }
  .call-body { overflow: auto; }
  .video-stage { height: 390px; min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(159,229,207,.15); }
  .case-panel { overflow: visible; }
}

@media (max-width: 560px) {
  .call-modal { height: auto; max-height: calc(100vh - 14px); }
  .call-body { display: block; overflow-y: auto; }
  .video-stage { height: 310px; min-height: 310px; }
  .patient-face { transform: scale(.86); }
  .call-caption { right: 12px; bottom: 70px; left: 12px; padding: 8px 9px; font-size: 8px; }
  .video-name { bottom: 74px; left: 12px; }
  .media-status { top: 49px; left: 12px; max-width: 220px; font-size: 6px; }
  .video-controls { right: 12px; bottom: 12px; left: 12px; justify-content: center; transform: none; }
  .call-control { flex: 1; min-width: 0; padding-right: 5px; padding-left: 5px; }
  .doctor-panel-header { padding: 16px 14px 14px; }
  .game-monitor, .interaction-section, .clinical-section { margin-right: 12px; margin-left: 12px; padding: 13px; }
  .global-monitor { gap: 5px; }
  .global-monitor > div { padding: 7px 6px; }
  .panel-section-heading > div > span { font-size: 7px; }
}

/* Controles inspirados na barra do Meet: circulares, grandes e fáceis de tocar. */
.video-stage { background: radial-gradient(circle at 50% 38%, rgba(72,98,99,.25), transparent 30%), linear-gradient(145deg, #202729, #101517 62%, #080b0d); }
.video-controls { right: 50%; bottom: 16px; gap: 8px; padding: 8px 10px; border: 0; border-radius: 28px; background: rgba(30,31,33,.94); box-shadow: 0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04); }
.call-control { width: 56px; min-width: 56px; height: 56px; min-height: 56px; padding: 0; border: 0; border-radius: 50%; background: #303234; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .18s ease, background .18s ease, color .18s ease; }
.call-control .control-icon { width: 25px; height: 25px; }
.call-control .control-icon svg { width: 23px; height: 23px; stroke-width: 2; }
.call-control .control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.call-control:hover, .call-control:focus-visible { border: 0; color: #fff; background: #414346; transform: translateY(-2px); }
.call-control.is-muted { border: 0; color: #fff; background: #55575a; }
.call-control-end { width: 62px; min-width: 62px; height: 56px; border-radius: 30px; color: #fff; background: #e6362d; }
.call-control-end:hover, .call-control-end:focus-visible { border: 0; color: #fff; background: #f24940; }
.call-control-end .control-icon svg { transform: rotate(180deg); }

@media (max-width: 560px) {
  .video-controls { right: auto; bottom: 10px; left: 50%; width: max-content; max-width: calc(100% - 20px); transform: translateX(-50%); }
  .call-control { width: 50px; min-width: 50px; height: 50px; min-height: 50px; }
  .call-control-end { width: 56px; min-width: 56px; height: 50px; }
}

/* Avatar em blocos: uma leitura cúbica, colorida e consistente com um mundo aberto. */
.patient-face { width: 182px; height: 182px; border-radius: 12px; background: linear-gradient(135deg, var(--patient-skin, #b86d51) 0 62%, #9a5b49 62% 100%); box-shadow: 9px 9px 0 rgba(5,13,16,.28), inset -12px -13px 0 rgba(74,38,36,.16), inset 10px 9px 0 rgba(255,201,160,.1); image-rendering: pixelated; }
.patient-face::before, .patient-face::after { top: 75px; width: 17px; height: 35px; border-radius: 3px; box-shadow: inset -4px -3px 0 rgba(74,38,36,.12); }
.patient-face::before { left: -14px; }
.patient-face::after { right: -14px; }
.face-hair { top: -10px; left: -2%; width: 104%; height: 60px; border-radius: 10px 10px 3px 3px; background: var(--patient-hair, #1b2731); box-shadow: inset 0 -10px 0 rgba(0,0,0,.13), 10px 15px 0 var(--patient-hair, #1b2731); transform: none; }
.face-hair::after { top: 36px; right: -8px; width: 35px; height: 42px; border-radius: 3px; background: var(--patient-hair, #1b2731); transform: none; }
.face-brow { top: 76px; width: 26px; height: 7px; border: 0; border-radius: 2px; background: rgba(45,26,29,.58); transform: none; }
.brow-left { left: 28px; }
.brow-right { right: 28px; }
.face-eye { top: 91px; width: 17px; height: 13px; border: 0; border-radius: 2px; background: #162226; box-shadow: inset 4px 0 0 rgba(255,255,255,.16); }
.eye-left { left: 31px; }
.eye-right { right: 31px; }
.face-cheek { top: 120px; width: 24px; height: 12px; border-radius: 2px; background: rgba(241,139,113,.2); }
.cheek-left { left: 20px; }
.cheek-right { right: 20px; }
.face-nose { top: 95px; left: 84px; width: 12px; height: 25px; border: 0; border-radius: 2px; background: rgba(129,73,61,.28); box-shadow: 5px 18px 0 rgba(103,52,48,.15); }
.face-mouth { left: 67px; bottom: 38px; width: 48px; height: 10px; border: 0; border-bottom: 4px solid #6e3538; border-radius: 2px; }
.patient-video.is-speaking .face-mouth { height: 17px; border: 0; border-bottom: 5px solid rgba(93,42,44,.75); border-radius: 2px; }
.face-neck { bottom: -34px; left: 66px; width: 51px; height: 45px; border-radius: 3px; }
.face-shirt { bottom: -151px; left: -73px; width: 328px; height: 170px; border-radius: 18px 18px 0 0; }

/* Tipografia de leitura confortável para a tela do tablet. */
.call-modal .eyebrow { font-size: 9px; letter-spacing: .13em; }
.call-modal .call-context-strip strong { font-size: 12px; }
.call-modal .case-heading h2 { font-size: 29px; }
.call-modal .case-heading > div > p:last-child { font-size: 11px; }
.call-modal .complaint-box strong { font-size: 12px; line-height: 1.35; }
.call-modal .panel-section-heading > div > span { font-size: 10px; }
.call-modal .conversation-heading > div > span { font-size: 10px; }
.call-modal .dialogue-speaker { font-size: 8px; }
.call-modal .dialogue-bubble p { font-size: 11px; line-height: 1.45; }
.call-modal .question-form { grid-template-columns: minmax(0,1fr) 42px 46px; gap: 7px; }
.call-modal .question-form input { min-height: 44px; padding: 10px 12px; font-size: 12px; }
.call-modal .mic-button, .call-modal .send-question { min-height: 44px; border-radius: 8px; font-size: 16px; }
.call-modal .data-heading > div > span { font-size: 10px; }
.call-modal .data-complete, .call-modal .treatment-status { font-size: 10px; }
.call-modal .equipment strong { font-size: 11px; }
.call-modal .equipment small { font-size: 9px; }
.call-modal .treatment-option strong { font-size: 10px; }
.call-modal .treatment-option small { font-size: 8px; }
.call-modal .decision strong { font-size: 11px; }
.call-modal .decision small { font-size: 9px; }
.call-modal .decision-hint { font-size: 10px; }
.treatment-option > b { margin-left: auto; color: var(--teal); font-size: 14px; font-weight: 400; }
.voice-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voice-id-grid > div { min-width: 0; }
.voice-id-grid .admin-input { width: 100%; }
.voice-test-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.main-content .subtitle { font-size: 13px; line-height: 1.5; }
.main-content .panel-heading h3, .main-content .view-intro h2 { letter-spacing: -.025em; }
.main-content .nav-item { font-size: 12px; }

/* Modal de escolha: cada cartão abre uma decisão explícita antes de aplicar o plano. */
.treatment-modal-backdrop { place-items: center; overflow-y: auto; padding: 18px; }
.treatment-modal { width: min(560px, 100%); max-height: min(700px, calc(100vh - 36px)); overflow: auto; border: 1px solid rgba(159,229,207,.28); border-radius: 18px; background: linear-gradient(145deg, #102d37, #08171e 72%); box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.treatment-modal-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.treatment-modal-header h2 { margin-top: 7px; color: var(--ink); font-size: 23px; letter-spacing: -.04em; }
.treatment-modal-header > div > span { display: block; margin-top: 7px; color: var(--teal); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.treatment-modal-body { padding: 20px 24px 22px; }
.treatment-modal-body > p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.treatment-choice-grid { display: grid; gap: 10px; margin-top: 17px; }
.treatment-choice { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 10px; width: 100%; padding: 14px; border: 1px solid rgba(159,229,207,.15); border-radius: 11px; color: var(--ink-soft); background: rgba(3,15,21,.38); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.treatment-choice:hover, .treatment-choice:focus-visible { border-color: rgba(159,229,207,.48); background: rgba(159,229,207,.09); transform: translateY(-1px); }
.treatment-choice.is-selected { border-color: rgba(214,245,106,.5); background: rgba(214,245,106,.08); }
.treatment-choice.is-unavailable { opacity: .55; cursor: not-allowed; }
.choice-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(159,229,207,.2); border-radius: 9px; color: var(--teal); background: rgba(159,229,207,.07); font-size: 18px; }
.treatment-choice.is-selected .choice-mark { color: var(--canvas-deep); background: var(--lime); }
.treatment-choice strong, .treatment-choice small, .treatment-choice em { display: block; }
.treatment-choice strong { color: var(--ink); font-size: 13px; line-height: 1.35; }
.treatment-choice small { margin-top: 4px; color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.treatment-choice em { margin-top: 9px; color: var(--teal); font-family: var(--mono); font-size: 9px; font-style: normal; }
.treatment-choice.is-unavailable em { color: var(--coral); }
.treatment-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 24px; border-top: 1px solid var(--line); color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.treatment-modal-footer i { margin-right: 5px; color: var(--lime); font-style: normal; }
.modal-secondary-button { padding: 10px 12px; border: 1px solid rgba(159,229,207,.2); border-radius: 7px; color: var(--teal); background: rgba(159,229,207,.05); font-family: var(--mono); font-size: 8px; cursor: pointer; }
.modal-secondary-button:hover { border-color: var(--teal); background: rgba(159,229,207,.11); }

@media (max-width: 560px) {
  .call-modal .case-heading h2 { font-size: 23px; }
  .call-modal .dialogue-bubble p { font-size: 10px; }
  .call-modal .question-form { grid-template-columns: minmax(0,1fr) 40px 44px; }
  .treatment-modal-backdrop { padding: 9px; }
  .treatment-modal { max-height: calc(100vh - 18px); border-radius: 13px; }
  .treatment-modal-header, .treatment-modal-body { padding-right: 16px; padding-left: 16px; }
  .treatment-modal-footer { align-items: start; flex-direction: column; padding-right: 16px; padding-left: 16px; }
  .modal-secondary-button { width: 100%; }
  .voice-id-grid { grid-template-columns: 1fr; gap: 0; }
  .voice-test-row { grid-template-columns: 1fr; gap: 2px; }
}

@media (pointer: coarse), (max-width: 820px) {
  .eyebrow { font-size: 9px; }
  .panel-heading h3 { font-size: 18px; }
  .main-content .subtitle { font-size: 14px; }
  .text-button, .tiny-action, .queue-action { font-size: 11px; }
  .queue-person { min-height: 58px; }
  .patient-name, .doctor-name { font-size: 13px; }
  .patient-meta, .doctor-role { font-size: 10px; }
  .metric-item div span { font-size: 8px; }
  .metric-item div strong { font-size: 18px; }
}

/* O vídeo e a conversa pertencem à mesma sala; o prontuário fica isolado ao lado. */
.video-column { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: #101719; }
.video-column .video-stage { flex: 1 1 auto; height: auto; min-height: 360px; }
.conversation-dock { flex: 0 0 252px; min-width: 0; overflow-y: auto; padding: 14px 20px 16px; border-top: 1px solid rgba(159,229,207,.16); background: linear-gradient(180deg, #0b171b, #091318); scrollbar-color: var(--teal-dark) transparent; }
.conversation-dock .panel-section-heading { margin: 0; }
.conversation-dock .conversation-section { margin-top: 12px; }
.conversation-dock .dialogue-log { height: 112px; }
.ai-live-chip { flex-wrap: wrap; }
.ai-live-chip b { color: var(--lime); font-size: 7px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }

@media (max-width: 820px) {
  .video-column { overflow: visible; }
  .video-column .video-stage { flex: 0 0 auto; height: 390px; min-height: 390px; }
  .conversation-dock { max-height: none; padding: 16px 20px 19px; }
  .conversation-dock .dialogue-log { height: 120px; }
}

@media (max-width: 560px) {
  .video-column .video-stage { height: 310px; min-height: 310px; }
  .conversation-dock { padding: 14px 12px 16px; }
  .conversation-dock .dialogue-log { height: 110px; }
  .ai-live-chip { max-width: calc(100% - 24px); }
}

/* Tema claro padrão: leve, acessível e preparado para telas de tablet. */
body.light-mode {
  --ink: #17343b;
  --ink-soft: #4d686d;
  --ink-faint: #70868a;
  --canvas: #f4f8f6;
  --canvas-deep: #ffffff;
  --surface: #ffffff;
  --surface-raised: #edf5f2;
  --line: rgba(25, 70, 76, .14);
  --line-strong: rgba(25, 70, 76, .25);
  --teal: #167e75;
  --teal-dark: #277f79;
  --lime: #668317;
  --coral: #c85841;
  --yellow: #9a6a0b;
  --lavender: #695bc6;
  background: linear-gradient(145deg, #f8fbfa, #edf5f2 68%, #e4efec);
  color: var(--ink);
}
html { background: #e8f1ef; }
body.light-mode .ambient-one { background: radial-gradient(circle, rgba(55, 143, 134, .12), transparent 68%); }
body.light-mode .ambient-two { background: radial-gradient(circle, rgba(183, 168, 255, .1), transparent 66%); }
body.light-mode .sidebar { background: rgba(255, 255, 255, .88); box-shadow: 8px 0 30px rgba(41, 86, 83, .05); }
body.light-mode .profile-chip, body.light-mode .date-chip { background: rgba(255, 255, 255, .8); }
body.light-mode .nav-item:hover { color: var(--ink); background: rgba(22, 126, 117, .07); }
body.light-mode .panel-card { background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 245, 242, .96)); box-shadow: 0 17px 50px rgba(40, 84, 83, .09); }
body.light-mode .open-map { border-color: rgba(22, 126, 117, .2); background: #dcebe7; }
body.light-mode .open-map::before { background: radial-gradient(circle at 76% 28%, rgba(164, 190, 44, .16), transparent 20%), radial-gradient(circle at 27% 72%, rgba(105, 91, 198, .1), transparent 24%), linear-gradient(135deg, rgba(79, 161, 145, .24), rgba(214, 232, 226, .6)); }
body.light-mode .map-grid-lines { background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(22, 126, 117, .16) 32px, transparent 33px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(22, 126, 117, .16) 32px, transparent 33px); }
body.light-mode .map-road { background: rgba(67, 135, 126, .14); box-shadow: inset 0 0 0 1px rgba(22, 126, 117, .08); }
body.light-mode .map-block { border-color: rgba(22, 126, 117, .15); background: rgba(184, 216, 207, .64); }
body.light-mode .map-water { border-color: rgba(22, 126, 117, .14); background: rgba(82, 160, 175, .18); }
body.light-mode .map-label { color: rgba(22, 126, 117, .6); }
body.light-mode .map-legend { color: var(--ink-soft); background: rgba(255, 255, 255, .86); border-color: rgba(22, 126, 117, .17); }
body.light-mode .admin-input { color: var(--ink); background: #fff; }
body.light-mode .avatar-option { color: var(--ink-soft); background: rgba(237, 245, 242, .78); }
body.light-mode .avatar-option.is-selected { background: rgba(22, 126, 117, .08); }
body.light-mode .integration-block { background: rgba(237, 245, 242, .68); }
body.light-mode .team-action, body.light-mode .resource-buy, body.light-mode .territory-actions button, body.light-mode .upgrade-card button { background: rgba(255, 255, 255, .72); }
body.light-mode .remote-brief-art { background: linear-gradient(145deg, rgba(119, 187, 169, .72), rgba(223, 240, 234, .92)); }
body.light-mode .toast { color: var(--ink); background: rgba(255, 255, 255, .96); box-shadow: 0 15px 40px rgba(40, 84, 83, .16); }
body.light-mode .modal-backdrop { background: rgba(220, 233, 229, .76); }
body.light-mode .call-modal, body.light-mode .treatment-modal { border-color: rgba(22, 126, 117, .24); background: #fff; box-shadow: 0 25px 90px rgba(33, 74, 75, .2); }
body.light-mode .call-topbar { background: rgba(255, 255, 255, .96); }
body.light-mode .call-context-strip { background: #f0f7f4; }
body.light-mode .video-stage { border-color: rgba(22, 126, 117, .14); background: linear-gradient(145deg, #dceae6, #cfe1dc 62%, #dfe8e7); }
body.light-mode .video-backdrop { background: radial-gradient(circle at 50% 23%, rgba(214, 245, 106, .3), transparent 16%), linear-gradient(145deg, #d3e8df 0%, #bfd9d5 51%, #dfe5ec 100%); }
body.light-mode .video-backdrop::before { background: repeating-linear-gradient(133deg, transparent 0 33px, rgba(22, 126, 117, .1) 34px, transparent 35px); }
body.light-mode .window-shape { border-color: rgba(22, 126, 117, .26); box-shadow: inset 0 0 40px rgba(22, 126, 117, .08); }
body.light-mode .video-name, body.light-mode .video-quality, body.light-mode .call-caption, body.light-mode .media-status { color: var(--ink); background: rgba(255, 255, 255, .86); border-color: rgba(22, 126, 117, .18); }
body.light-mode .video-quality { color: var(--teal); }
body.light-mode .self-video { border-color: rgba(22, 126, 117, .26); color: var(--ink); background: rgba(255, 255, 255, .88); }
body.light-mode .self-video span { color: var(--ink-soft); }
body.light-mode .video-controls { border: 1px solid rgba(25, 70, 76, .12); background: rgba(255, 255, 255, .94); box-shadow: 0 16px 34px rgba(33, 74, 75, .18), inset 0 1px 0 rgba(255, 255, 255, .9); }
body.light-mode .call-control { border: 1px solid rgba(22, 126, 117, .1); color: var(--teal); background: rgba(22, 126, 117, .08); box-shadow: none; }
body.light-mode .call-control .control-label { color: var(--ink-soft); }
body.light-mode .call-control:hover, body.light-mode .call-control:focus-visible { border-color: rgba(22, 126, 117, .28); color: var(--teal); background: rgba(22, 126, 117, .14); }
body.light-mode .call-control.is-muted { color: #fff; background: var(--coral); }
body.light-mode .call-control-end, body.light-mode .call-control-end:hover, body.light-mode .call-control-end:focus-visible { color: #fff; background: var(--coral); }
body.light-mode .case-panel { background: #f8fbfa; }
body.light-mode .doctor-panel-header { border-color: rgba(22, 126, 117, .13); background: linear-gradient(180deg, #fff 84%, rgba(255, 255, 255, .94)); box-shadow: 0 10px 18px rgba(33, 74, 75, .08); }
body.light-mode .game-monitor, body.light-mode .clinical-section { border-color: rgba(22, 126, 117, .16); background: rgba(255, 255, 255, .88); }
body.light-mode .game-monitor { border-color: rgba(102, 131, 23, .24); background: linear-gradient(145deg, rgba(244, 249, 226, .94), rgba(255, 255, 255, .96)); }
body.light-mode .global-monitor > div { border-color: rgba(22, 126, 117, .12); background: rgba(237, 245, 242, .72); }
body.light-mode .equipment, body.light-mode .treatment-option, body.light-mode .decision { background: rgba(237, 245, 242, .72); }
body.light-mode .equipment:hover, body.light-mode .treatment-option:not(:disabled):hover, body.light-mode .decision.remote:hover { background: rgba(22, 126, 117, .08); }
body.light-mode .conversation-dock { border-color: rgba(22, 126, 117, .16); background: linear-gradient(180deg, #f5faf8, #fff); }
body.light-mode .dialogue-log { border-color: rgba(22, 126, 117, .14); background: rgba(237, 245, 242, .7); }
body.light-mode .dialogue-bubble { color: var(--ink-soft); background: rgba(22, 126, 117, .08); }
body.light-mode .dialogue-bubble.doctor { color: #fff; background: var(--teal); }
body.light-mode .question-form input { color: var(--ink); border-color: rgba(22, 126, 117, .18); background: #fff; }
body.light-mode .mic-button, body.light-mode .send-question { background: rgba(22, 126, 117, .08); }
body.light-mode .send-question { color: #fff; background: var(--teal); }
body.light-mode .treatment-modal-header, body.light-mode .treatment-modal-footer { border-color: var(--line); }
body.light-mode .treatment-choice { color: var(--ink-soft); border-color: rgba(22, 126, 117, .14); background: rgba(237, 245, 242, .72); }
body.light-mode .treatment-choice:hover, body.light-mode .treatment-choice:focus-visible { border-color: rgba(22, 126, 117, .42); background: rgba(22, 126, 117, .08); }
body.light-mode .treatment-choice.is-selected { background: rgba(102, 131, 23, .1); }
body.light-mode .choice-mark { border-color: rgba(22, 126, 117, .18); background: rgba(22, 126, 117, .08); }
body.light-mode .modal-secondary-button { background: rgba(22, 126, 117, .06); }
body.light-mode .small-modal { background: #fff; box-shadow: 0 25px 90px rgba(33, 74, 75, .2); }

/* Fase 1: objetivo central do hub, visível antes de qualquer tela clínica. */
.mission-board { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(190px, .65fr) auto; align-items: center; gap: 15px; margin-bottom: 20px; padding: 15px 17px; }
.mission-orb { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(102, 131, 23, .25); border-radius: 13px; color: var(--lime); background: rgba(102, 131, 23, .1); font-size: 22px; box-shadow: 0 7px 18px rgba(102, 131, 23, .08); }
.mission-copy { min-width: 0; }
.mission-copy h3 { margin-top: 4px; color: var(--ink); font-size: 15px; }
.mission-copy p:last-child { margin: 4px 0 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mission-progress { min-width: 0; }
.mission-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mission-progress span, .mission-progress strong, .mission-progress small { font-family: var(--mono); font-size: 8px; }
.mission-progress span { color: var(--ink-faint); }
.mission-progress strong { color: var(--teal); font-weight: 500; text-align: right; }
.mission-progress > b { display: block; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 5px; background: rgba(22, 126, 117, .1); }
.mission-progress > b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--lime)); transition: width .3s ease; }
.mission-progress small { display: block; margin-top: 6px; color: var(--lime); }
.mission-action { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 39px; padding: 9px 13px; border: 1px solid rgba(22, 126, 117, .28); border-radius: 8px; color: #fff; background: var(--teal); font-size: 10px; font-weight: 800; cursor: pointer; transition: .2s ease; white-space: nowrap; }
.mission-action:hover { background: var(--teal-dark); box-shadow: 0 8px 20px rgba(22, 126, 117, .16); }
.mission-action:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.mission-action span { font-size: 15px; }
.map-pin.patient-pin { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.map-pin.patient-pin:hover { filter: saturate(1.15); }

@media (max-width: 820px) {
  .mission-board { grid-template-columns: 43px minmax(0, 1fr) auto; }
  .mission-progress { grid-column: 2; }
  .mission-action { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 560px) {
  .mission-board { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .mission-orb { width: 38px; height: 38px; }
  .mission-copy h3 { font-size: 14px; }
  .mission-copy p:last-child { font-size: 9px; }
  .mission-progress { grid-column: 1 / -1; }
  .mission-action { grid-column: 1 / -1; grid-row: auto; width: 100%; }
}

/* Progressão persistente: nível, badges e recursos aparecem no próprio hub. */
.progression-strip { display: grid; grid-template-columns: minmax(170px, .95fr) minmax(170px, .9fr) minmax(180px, 1fr) auto; align-items: center; gap: 15px; margin-bottom: 20px; padding: 13px 17px; }
.progression-level { min-width: 0; }
.progression-level > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.progression-level strong { margin-top: 4px; color: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 500; }
.progression-level > div > span { color: var(--teal); font-family: var(--mono); font-size: 8px; }
.progression-level > b { display: block; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: rgba(22, 126, 117, .1); }
.progression-level > b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--lime)); transition: width .3s ease; }
.badge-summary { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 15px; border-left: 1px solid var(--line); }
.progression-symbol { display: grid; flex: 0 0 33px; width: 33px; height: 33px; place-items: center; border: 1px solid rgba(105, 91, 198, .2); border-radius: 10px; color: var(--lavender); background: rgba(105, 91, 198, .1); font-size: 14px; }
.badge-summary strong, .badge-summary small { display: block; }
.badge-summary strong { margin-top: 4px; color: var(--ink); font-size: 11px; }
.badge-summary small { margin-top: 2px; overflow: hidden; color: var(--ink-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-summary { min-width: 0; padding-left: 15px; border-left: 1px solid var(--line); }
.inventory-summary > div { display: flex; gap: 8px; margin-top: 8px; }
.inventory-summary > div > span { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.inventory-summary i { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; font-style: normal; text-transform: uppercase; }
.inventory-summary strong { color: var(--teal); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.progression-action { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 11px; border: 1px solid rgba(22, 126, 117, .22); border-radius: 7px; color: var(--teal); background: rgba(22, 126, 117, .06); font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.progression-action:hover { border-color: var(--teal); background: rgba(22, 126, 117, .11); }
.progression-action span { font-size: 14px; }

@media (max-width: 820px) {
  .progression-strip { grid-template-columns: 1fr 1fr; }
  .progression-level { grid-column: 1 / -1; }
  .badge-summary { padding-left: 0; border-left: 0; }
  .progression-action { justify-self: end; }
}

@media (max-width: 560px) {
  .progression-strip { grid-template-columns: 1fr 1fr; gap: 13px; padding: 14px; }
  .inventory-summary { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 11px; border-top: 1px solid var(--line); }
  .progression-action { width: 100%; }
}

/* Fase 3 · mundo vivo: eventos, NPCs e agenda que reagem ao estado da rede. */
.world-event-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 15px; margin-bottom: 20px; padding: 15px 17px; border-color: rgba(219, 169, 61, .22); background: linear-gradient(110deg, rgba(219,169,61,.08), rgba(255,255,255,.68) 48%, rgba(22,126,117,.06)); }
.event-signal-art { position: relative; display: grid; width: 43px; height: 43px; place-items: center; overflow: hidden; border: 1px solid rgba(219,169,61,.3); border-radius: 13px; color: #956d16; background: rgba(219,169,61,.12); }
.event-signal-art i { position: absolute; bottom: 8px; width: 4px; border-radius: 4px 4px 0 0; background: currentColor; opacity: .38; }
.event-signal-art i:nth-child(1) { left: 11px; height: 8px; }
.event-signal-art i:nth-child(2) { left: 19px; height: 17px; }
.event-signal-art i:nth-child(3) { left: 27px; height: 25px; }
.event-signal-art span { position: relative; z-index: 1; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #fff; background: #b98118; font-family: var(--mono); font-size: 11px; font-weight: 800; }
.world-event-copy { min-width: 0; }
.world-event-copy h3 { margin-top: 4px; color: var(--ink); font-size: 15px; }
.world-event-copy > p { margin: 4px 0 8px; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.world-event-meta { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.world-event-meta strong { color: #a37412; font-weight: 600; }
.event-action { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 39px; padding: 9px 13px; border: 1px solid rgba(177,126,24,.32); border-radius: 8px; color: #fff; background: #b47e17; font-size: 10px; font-weight: 800; cursor: pointer; transition: .2s ease; white-space: nowrap; }
.event-action:hover, .event-action:focus-visible { background: #956713; box-shadow: 0 8px 20px rgba(149,103,19,.18); transform: translateY(-1px); }
.event-action:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.event-action span { font-size: 15px; }
.schedule-live-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 11px; border: 1px solid rgba(22,126,117,.2); border-radius: 9px; background: rgba(22,126,117,.06); }
.schedule-live-alert.is-alert { border-color: rgba(177,126,24,.3); background: rgba(219,169,61,.1); }
.schedule-live-alert > span { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--teal); background: rgba(22,126,117,.12); font-size: 16px; }
.schedule-live-alert.is-alert > span { color: #a37412; background: rgba(219,169,61,.15); }
.schedule-live-alert strong, .schedule-live-alert small { display: block; }
.schedule-live-alert strong { margin-top: 3px; color: var(--ink); font-size: 11px; }
.schedule-live-alert small { margin-top: 2px; color: var(--ink-faint); font-size: 9px; }
.territory-event { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 10px 0; padding: 9px; border: 1px solid rgba(177,126,24,.25); border-radius: 9px; background: rgba(219,169,61,.08); }
.territory-event > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #fff; background: #b47e17; font-family: var(--mono); font-size: 10px; font-weight: 800; }
.territory-event strong, .territory-event small { display: block; }
.territory-event strong { color: var(--ink); font-size: 9px; }
.territory-event small { margin-top: 3px; color: var(--ink-faint); font-size: 8px; }
.territory-event button { padding: 6px 8px; border: 1px solid rgba(177,126,24,.28); border-radius: 6px; color: #956d16; background: transparent; font-family: var(--mono); font-size: 8px; cursor: pointer; }
.territory-event button:hover, .territory-event button:focus-visible { color: #fff; background: #b47e17; }
.territory-event button span { margin-left: 3px; font-size: 11px; }
.modal-inline-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.modal-inline-header h2 { margin-top: 5px; color: var(--ink); font-size: 21px; letter-spacing: -.035em; }
.team-task-modal, .world-event-modal { width: min(560px, 100%); max-height: min(680px, calc(100vh - 36px)); overflow: auto; padding: 0; }
.team-task-content { padding: 18px 20px 5px; }
.npc-dialogue { display: flex; align-items: flex-start; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(22,126,117,.045); }
.npc-dialogue .team-avatar { flex: 0 0 37px; width: 37px; height: 37px; }
.npc-role { color: var(--teal); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.npc-dialogue p { margin: 5px 0 0; color: var(--ink); font-size: 12px; line-height: 1.5; }
.task-brief { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 13px; border: 1px solid rgba(105,91,198,.18); border-radius: 12px; background: rgba(105,91,198,.06); }
.task-brief-icon { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: var(--lavender); background: rgba(105,91,198,.12); }
.task-brief strong, .task-brief small { display: block; }
.task-brief strong { margin-top: 4px; color: var(--ink); font-size: 11px; }
.task-brief small { margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.task-complete-note { margin: 12px 0 0; padding: 10px; border-radius: 8px; color: var(--ink-soft); background: rgba(177,126,24,.08); font-size: 10px; line-height: 1.45; }
.team-task-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 15px 20px 19px; border-top: 1px solid var(--line); }
.team-task-footer > span { margin-right: auto; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.team-task-footer > span i { margin-right: 4px; color: var(--lime); font-style: normal; }
.world-event-intro { display: flex; align-items: flex-start; gap: 12px; margin: 18px 20px 13px; padding: 13px; border: 1px solid rgba(177,126,24,.24); border-radius: 12px; background: rgba(219,169,61,.08); }
.event-modal-icon { display: grid; flex: 0 0 33px; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: #fff; background: #b47e17; font-family: var(--mono); font-size: 13px; font-weight: 800; }
.world-event-intro p { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.45; }
.world-event-intro span:last-child { display: block; margin-top: 6px; color: #a37412; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.world-event-choice-grid { display: grid; gap: 8px; padding: 0 20px 18px; }
.world-event-choice { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--canvas); text-align: left; cursor: pointer; transition: .18s ease; }
.world-event-choice:hover, .world-event-choice:focus-visible { border-color: rgba(177,126,24,.48); background: rgba(219,169,61,.08); transform: translateX(2px); }
.world-event-choice.is-unavailable { opacity: .55; cursor: not-allowed; transform: none; }
.world-event-choice .choice-mark { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(177,126,24,.32); border-radius: 7px; color: #a37412; font-size: 15px; }
.world-event-choice strong, .world-event-choice small, .world-event-choice em { display: block; }
.world-event-choice strong { font-size: 11px; }
.world-event-choice small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; line-height: 1.35; }
.world-event-choice em { margin-top: 5px; color: var(--teal); font-family: var(--mono); font-size: 8px; font-style: normal; }
.world-event-choice.is-unavailable em { color: #a37412; }

@media (max-width: 820px) {
  .world-event-card { grid-template-columns: 42px minmax(0, 1fr); }
  .event-signal-art { width: 39px; height: 39px; }
  .event-action { grid-column: 2; justify-self: start; }
}

@media (max-width: 560px) {
  .world-event-card { grid-template-columns: 1fr; gap: 10px; }
  .event-signal-art { display: none; }
  .world-event-copy > p { white-space: normal; }
  .event-action { grid-column: auto; width: 100%; }
  .world-event-meta { flex-wrap: wrap; gap: 5px 10px; }
  .modal-inline-header, .team-task-content { padding-right: 15px; padding-left: 15px; }
  .team-task-footer { align-items: stretch; flex-wrap: wrap; padding-right: 15px; padding-left: 15px; }
  .team-task-footer > span { flex: 1 0 100%; margin: 0 0 3px; }
  .team-task-footer button { flex: 1; }
  .world-event-intro, .world-event-choice-grid { margin-right: 15px; margin-left: 15px; padding-right: 0; padding-left: 0; }
  .world-event-choice-grid { padding-bottom: 15px; }
}

/* Fase 4 · sala cooperativa: comunicação segura e leitura rápida do estado compartilhado. */
.coop-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); align-items: start; gap: 20px; }
.coop-setup, .coop-room { padding: 20px; }
.coop-description { margin: 13px 0 19px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.coop-role-heading, .coop-section-heading, .coop-feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.coop-role-heading { margin-bottom: 9px; }
.coop-role-heading > span, .coop-section-heading > div > span, .coop-feed-heading > span { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.coop-role-grid { display: grid; gap: 7px; }
.coop-role-card { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: rgba(237,245,242,.55); text-align: left; cursor: pointer; transition: .18s ease; }
.coop-role-card:hover, .coop-role-card:focus-visible { border-color: rgba(22,126,117,.35); transform: translateX(2px); }
.coop-role-card.is-selected { border-color: rgba(22,126,117,.42); background: rgba(22,126,117,.1); box-shadow: inset 3px 0 0 var(--teal); }
.coop-role-card::after { content: "○"; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }
.coop-role-card.is-selected::after { content: "●"; color: var(--teal); }
.coop-role-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; font-size: 13px; }
.coop-role-icon.mint { color: var(--teal); background: rgba(22,126,117,.11); }
.coop-role-icon.gold { color: #9b7116; background: rgba(219,169,61,.15); }
.coop-role-icon.lilac { color: var(--lavender); background: rgba(105,91,198,.11); }
.coop-role-card strong, .coop-role-card small { display: block; }
.coop-role-card strong { font-size: 10px; }
.coop-role-card small { margin-top: 2px; color: var(--ink-faint); font-size: 8px; }
.coop-primary { width: 100%; margin-top: 15px; }
.coop-divider { display: flex; align-items: center; gap: 9px; margin: 17px 0 11px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.coop-divider::before, .coop-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.coop-join-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.coop-join-form .admin-input { min-height: 42px; font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.coop-join-form .integration-test { min-width: 88px; margin: 0; }
.coop-note { margin: 13px 0 0; color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.coop-room { min-width: 0; }
.coop-room-tools { display: flex; align-items: center; gap: 8px; }
.coop-code-button { min-height: 29px; padding: 6px 8px; }
.coop-code-button strong { margin-left: 5px; color: var(--teal); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.coop-leave-button { position: static; width: 29px; height: 29px; }
.coop-mission-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin: 19px 0 8px; padding: 13px; border: 1px solid rgba(22,126,117,.17); border-radius: 11px; background: rgba(22,126,117,.055); }
.coop-mission-head strong, .coop-mission-head small { display: block; }
.coop-mission-head strong { margin-top: 4px; color: var(--ink); font-size: 13px; }
.coop-mission-head small { margin-top: 4px; color: var(--ink-soft); font-size: 9px; }
.coop-mission-percent { color: var(--teal); font-family: var(--mono); font-size: 17px; }
.coop-progress-track { height: 7px; overflow: hidden; border-radius: 7px; background: rgba(22,126,117,.1); }
.coop-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--lime)); transition: width .35s ease; }
.coop-metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 12px 0 20px; }
.coop-metric-grid > div { min-width: 0; padding: 9px 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(237,245,242,.52); }
.coop-metric-grid span, .coop-metric-grid strong { display: block; }
.coop-metric-grid span { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.coop-metric-grid strong { margin-top: 5px; overflow: hidden; color: var(--ink); font-family: var(--mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.coop-section-heading { margin: 0 0 9px; }
.coop-section-heading > div > span { display: block; margin-top: 3px; }
.coop-member-list { display: grid; gap: 7px; }
.coop-member { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.52); }
.coop-member.is-self { border-color: rgba(22,126,117,.34); background: rgba(22,126,117,.06); }
.coop-avatar { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; font-family: var(--mono); font-size: 9px; font-weight: 600; }
.coop-avatar.woman { background: #d9b7a4; color: #64453d; }
.coop-avatar.man { background: #9fbfc1; color: #224447; }
.coop-avatar.mint { box-shadow: inset 0 0 0 2px rgba(22,126,117,.25); }
.coop-avatar.gold { box-shadow: inset 0 0 0 2px rgba(177,126,24,.3); }
.coop-avatar.lilac { box-shadow: inset 0 0 0 2px rgba(105,91,198,.28); }
.coop-member strong, .coop-member small, .coop-member em { display: block; }
.coop-member strong { color: var(--ink); font-size: 10px; }
.coop-member small { margin-top: 2px; color: var(--teal); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.coop-member em { margin-top: 2px; overflow: hidden; color: var(--ink-faint); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.coop-online { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.coop-online.is-online { color: var(--teal); }
.coop-action-heading { margin-top: 20px; }
.coop-action-grid { display: grid; gap: 7px; }
.coop-action-card { display: grid; grid-template-columns: 31px minmax(0, 1fr) 16px; align-items: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid rgba(22,126,117,.25); border-radius: 9px; color: var(--ink); background: rgba(22,126,117,.07); text-align: left; cursor: pointer; transition: .18s ease; }
.coop-action-card:hover, .coop-action-card:focus-visible { border-color: var(--teal); background: rgba(22,126,117,.12); transform: translateX(2px); }
.coop-action-card.is-disabled { border-color: var(--line); color: var(--ink-faint); background: rgba(237,245,242,.4); cursor: not-allowed; transform: none; }
.coop-action-card > span, .coop-complete-state > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--teal); background: rgba(22,126,117,.12); font-size: 15px; }
.coop-action-card strong, .coop-action-card small { display: block; }
.coop-action-card strong { font-size: 10px; }
.coop-action-card small { margin-top: 3px; color: var(--ink-faint); font-size: 8px; }
.coop-action-card b { color: var(--teal); font-size: 14px; }
.coop-complete-state { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(102,131,23,.28); border-radius: 9px; background: rgba(102,131,23,.08); }
.coop-complete-state strong, .coop-complete-state small { display: block; }
.coop-complete-state strong { color: var(--ink); font-size: 10px; }
.coop-complete-state small { margin-top: 3px; color: var(--ink-faint); font-size: 8px; }
.coop-feed-heading { margin: 20px 0 8px; }
.coop-feed { display: grid; gap: 5px; max-height: 156px; overflow: auto; padding-right: 3px; }
.coop-feed-item { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.feed-tone { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.feed-tone.gold { background: #b47e17; }
.feed-tone.lilac { background: var(--lavender); }
.feed-tone.coral { background: var(--coral); }
.coop-feed-item p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.coop-feed-item small { color: var(--ink-faint); font-family: var(--mono); font-size: 7px; white-space: nowrap; }
.coop-empty { margin: 0; padding: 12px; color: var(--ink-faint); font-size: 9px; text-align: center; }
.coop-room-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.coop-room-footer > span { display: flex; align-items: center; }
.coop-room-footer .status-dot { margin-right: 6px; }

@media (max-width: 900px) {
  .coop-layout { grid-template-columns: 1fr; }
  .coop-setup { max-width: none; }
}

@media (max-width: 560px) {
  .coop-setup, .coop-room { padding: 14px; }
  .coop-metric-grid { grid-template-columns: repeat(3, 1fr); }
  .coop-metric-grid > div:nth-child(4), .coop-metric-grid > div:nth-child(5) { grid-column: span 1; }
  .coop-room-tools { gap: 5px; }
  .coop-code-button { max-width: 125px; overflow: hidden; }
  .coop-code-button strong { font-size: 8px; }
  .coop-member { grid-template-columns: 33px minmax(0,1fr); }
  .coop-online { grid-column: 2; }
  .coop-room-footer { align-items: flex-start; flex-direction: column; }
}

/* Repaginação sandbox: visual colorido, blocado e explorável, inspirado em jogos de criação. */
body.light-mode { background: linear-gradient(145deg, #f7fbff 0%, #eef8f5 54%, #edf2ff 100%); }
body.light-mode .ambient-one { opacity: .8; background: radial-gradient(circle, rgba(77,167,203,.16), transparent 68%); }
body.light-mode .ambient-two { opacity: .75; background: radial-gradient(circle, rgba(123,105,210,.13), transparent 66%); }
body.light-mode .app-shell { background: linear-gradient(90deg, rgba(255,255,255,.46), transparent 22%); }
body.light-mode .sidebar { border-right: 2px solid #dbe8f2; background: linear-gradient(180deg, #ffffff 0%, #eff8f6 100%); box-shadow: 7px 0 0 rgba(75,130,150,.04), 16px 0 30px rgba(65,120,135,.06); }
body.light-mode .profile-chip { border: 2px solid #dbe8f2; border-radius: 14px; box-shadow: 0 4px 0 rgba(65,120,135,.06); }
body.light-mode .nav-item { border: 2px solid transparent; border-radius: 13px; }
body.light-mode .nav-item:hover { border-color: #d7e8ee; background: #f7fcff; }
body.light-mode .nav-item.is-active { border-color: #117c76; color: #fff; background: linear-gradient(135deg, #1b9687, #167e75); box-shadow: 0 4px 0 #0b605e, 0 11px 19px rgba(22,126,117,.16); }
body.light-mode .main-content { background-image: radial-gradient(rgba(54,123,147,.08) 1px, transparent 1px); background-size: 23px 23px; }
body.light-mode .topbar { border-bottom: 2px solid #dce9f1; }
body.light-mode .date-chip, body.light-mode .icon-button, body.light-mode .round-avatar { border: 2px solid #dce9f1; box-shadow: 0 3px 0 rgba(65,120,135,.06); }
body.light-mode .panel-card { border: 2px solid #d9e8ed; border-radius: 18px; box-shadow: 0 7px 0 rgba(65,120,135,.08), 0 18px 38px rgba(65,120,135,.09); }
body.light-mode .metric-strip { gap: 10px; border: 0; background: transparent; box-shadow: none; }
body.light-mode .metric-item { border: 2px solid #d9e8ed; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 5px 0 rgba(65,120,135,.07), 0 12px 25px rgba(65,120,135,.06); }
body.light-mode .metric-item:not(:first-child) { border-left: 2px solid #d9e8ed; }
body.light-mode .metric-icon { border: 2px solid rgba(255,255,255,.75); border-radius: 10px; }
body.light-mode .mission-board { border-color: #b9d9dd; background: linear-gradient(115deg, #dff7ef 0%, #f6fbff 51%, #e8e5ff 100%); box-shadow: 0 7px 0 rgba(42,119,121,.1), 0 18px 35px rgba(65,120,135,.09); }
body.light-mode .mission-orb { border: 2px solid #b3cb54; background: #eff8bd; box-shadow: 0 4px 0 rgba(102,131,23,.18); }
body.light-mode .mission-action, body.light-mode .event-action, body.light-mode .admin-primary, body.light-mode .queue-cta { border: 0; border-radius: 12px; box-shadow: 0 4px 0 #0b605e, 0 10px 20px rgba(22,126,117,.16); }
body.light-mode .mission-action:hover, body.light-mode .event-action:hover, body.light-mode .admin-primary:hover, body.light-mode .queue-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #0b605e, 0 13px 23px rgba(22,126,117,.18); }
body.light-mode .world-event-card { border-color: #e1c77e; background: linear-gradient(115deg, #fff2c9, #fffdf4 52%, #e2f5f0); box-shadow: 0 7px 0 rgba(177,126,24,.1), 0 18px 35px rgba(65,120,135,.07); }
body.light-mode .event-signal-art { border: 2px solid #eccd74; box-shadow: 0 4px 0 rgba(177,126,24,.13); }
body.light-mode .open-map { border: 2px solid #9bcbd0; border-radius: 18px; background: #9dd9df; box-shadow: inset 0 -10px 0 rgba(39,111,146,.12), 0 6px 0 rgba(65,120,135,.08); }
body.light-mode .open-map::before { opacity: 1; background: radial-gradient(circle at 72% 21%, rgba(255,249,177,.9), transparent 17%), linear-gradient(145deg, #bdebdc 0%, #91d4db 55%, #a6b9df 100%); }
body.light-mode .map-grid-lines { opacity: .22; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.78) 32px, transparent 34px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.78) 32px, transparent 34px); }
body.light-mode .map-road { background: rgba(255,255,255,.58); box-shadow: inset 0 0 0 2px rgba(93,159,166,.13), 0 4px 0 rgba(64,130,145,.07); }
body.light-mode .map-block { border: 2px solid rgba(75,142,150,.27); border-radius: 7px; background: rgba(255,255,255,.55); box-shadow: 0 7px 0 rgba(64,130,145,.12); }
body.light-mode .map-water { border: 2px solid rgba(60,142,174,.25); background: rgba(79,177,202,.32); box-shadow: inset 0 8px 0 rgba(255,255,255,.15); }
body.light-mode .map-label { color: rgba(24,103,116,.75); font-weight: 600; }
body.light-mode .map-legend { border: 2px solid rgba(255,255,255,.65); border-radius: 10px; color: #245d69; background: rgba(255,255,255,.82); box-shadow: 0 4px 0 rgba(65,120,135,.08); }
body.light-mode .map-pin { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.9); border-radius: 11px; box-shadow: 0 5px 0 rgba(38,93,106,.18), 0 10px 19px rgba(45,110,126,.2); }
body.light-mode .map-pin:hover { box-shadow: 0 7px 0 rgba(38,93,106,.18), 0 13px 24px rgba(45,110,126,.23); }
body.light-mode .clinic-pin { width: 50px; height: 50px; border-radius: 15px; box-shadow: 0 6px 0 rgba(102,131,23,.22), 0 13px 22px rgba(102,131,23,.2); }
body.light-mode .pin-two { border-color: #fff; box-shadow: 0 5px 0 rgba(160,59,47,.2), 0 10px 19px rgba(200,88,65,.24); }
body.light-mode .map-player { width: 30px; height: 30px; border: 3px solid #fff; border-radius: 9px; box-shadow: 0 5px 0 rgba(38,93,106,.2), 0 0 0 5px rgba(22,126,117,.15); animation: playerBob 1.7s ease-in-out infinite; }
body.light-mode .map-player i { bottom: -12px; width: 8px; height: 8px; border-radius: 2px; }
body.light-mode .queue-card, body.light-mode .activity-card, body.light-mode .insight-card { background: rgba(255,255,255,.9); }
body.light-mode .queue-person { margin: 0 -7px; padding-right: 7px; padding-left: 7px; border-radius: 11px; border-bottom: 0; }
body.light-mode .queue-person:hover { background: #f0faf8; box-shadow: inset 3px 0 0 var(--teal); }
body.light-mode .queue-avatar { border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 0 rgba(50,100,110,.13); }
body.light-mode .queue-avatar.a { border-radius: 12px 15px 8px 10px; background: #c8b9f0; }
body.light-mode .queue-avatar.m { border-radius: 50%; background: #f0937e; }
body.light-mode .queue-avatar.j { border-radius: 8px 15px 8px 15px; background: #f5cb70; }
body.light-mode .queue-avatar.r { border-radius: 15px 7px 11px 7px; background: #8bd9c1; }
body.light-mode .schedule-board, body.light-mode .availability, body.light-mode .coop-setup, body.light-mode .coop-room { background: rgba(255,255,255,.91); }
body.light-mode .schedule-row, body.light-mode .coop-member, body.light-mode .coop-metric-grid > div { border-color: #dce9ef; background: #f8fcff; }
body.light-mode .coop-role-card, body.light-mode .coop-action-card { border: 2px solid #d8e8ee; background: #f7fcff; box-shadow: 0 3px 0 rgba(65,120,135,.06); }
body.light-mode .coop-role-card.is-selected, body.light-mode .coop-action-card:hover { border-color: #167e75; background: #e8faf5; box-shadow: 0 3px 0 rgba(22,126,117,.12); }
body.light-mode .coop-role-card.is-selected { box-shadow: inset 4px 0 0 var(--teal), 0 3px 0 rgba(22,126,117,.12); }
body.light-mode .territory-card, body.light-mode .upgrade-card, body.light-mode .protocol-card { background: rgba(255,255,255,.91); }
body.light-mode .territory-actions button, body.light-mode .upgrade-card button, body.light-mode .team-action, body.light-mode .resource-buy { border: 2px solid #d8e8ee; border-radius: 10px; box-shadow: 0 3px 0 rgba(65,120,135,.06); }
body.light-mode .territory-actions button:hover, body.light-mode .upgrade-card button:hover, body.light-mode .team-action:hover, body.light-mode .resource-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(65,120,135,.08); }
body.light-mode .world-event-modal, body.light-mode .team-task-modal { border: 2px solid #d9e8ed; border-radius: 18px; background: #fff; box-shadow: 0 10px 0 rgba(65,120,135,.08), 0 25px 70px rgba(33,74,75,.18); }
body.light-mode .world-event-choice, body.light-mode .npc-dialogue, body.light-mode .task-brief { border: 2px solid #d9e8ed; border-radius: 12px; background: #f8fcff; }
body.light-mode .world-event-choice:hover { border-color: #b47e17; box-shadow: 0 3px 0 rgba(177,126,24,.1); }
body.light-mode .coop-nav-count { color: #167e75; background: #dff7ef; }
body.light-mode .nav-item.is-active .coop-nav-count { color: #fff; background: rgba(255,255,255,.18); }
@keyframes playerBob { 50% { transform: translateY(-3px) rotate(-2deg); } }

@media (max-width: 820px) {
  body.light-mode .panel-card { border-radius: 15px; }
  body.light-mode .map-card, body.light-mode .queue-card { box-shadow: 0 6px 0 rgba(65,120,135,.08), 0 14px 28px rgba(65,120,135,.08); }
}

@media (max-width: 560px) {
  body.light-mode .mission-board, body.light-mode .world-event-card { border-radius: 15px; }
  body.light-mode .metric-item { border: 2px solid #d9e8ed; }
  body.light-mode .map-pin { width: 34px; height: 34px; }
  body.light-mode .clinic-pin { width: 44px; height: 44px; }
}

/* Identidade visual por paciente: cada avatar tem silhueta, expressão, roupa e cenário próprios. */
.face-accessory { display: none; position: absolute; z-index: 6; pointer-events: none; }
.patient-face.patient-ana { --patient-skin: #c77b5a; --patient-hair: #3a2728; border-radius: 18px 18px 24px 24px; }
.patient-ana .face-hair { top: -12px; left: 4%; width: 95%; height: 57px; border-radius: 17px 20px 7px 7px; box-shadow: inset 0 -9px 0 rgba(0,0,0,.16), 14px 18px 0 var(--patient-hair); }
.patient-ana .face-hair::after { right: -14px; width: 28px; height: 67px; border-radius: 4px 8px 10px 4px; }
.patient-ana .face-brow { border-top-width: 3px; }
.patient-ana .face-accessory { display: block; top: 13px; right: 16px; width: 27px; height: 12px; border: 3px solid #f5c55c; border-radius: 3px; background: #e56e64; transform: rotate(24deg); box-shadow: 3px 3px 0 rgba(73,40,39,.22); }
.patient-ana .face-shirt { background: linear-gradient(145deg, #46a59d 0 47%, #287b7e 48% 100%); }
.patient-ana .face-shirt::before { position: absolute; top: 29px; left: 84px; width: 120px; height: 7px; content: ""; background: rgba(214,245,106,.58); transform: rotate(-16deg); }
.patient-face.patient-marcos { --patient-skin: #96614f; --patient-hair: #29262c; border-radius: 9px 9px 18px 18px; }
.patient-marcos .face-hair { top: -9px; left: -2%; width: 103%; height: 53px; border-radius: 9px 9px 4px 4px; box-shadow: inset 0 -11px 0 rgba(0,0,0,.2), 9px 15px 0 var(--patient-hair); }
.patient-marcos .face-hair::after { right: -5px; width: 24px; height: 50px; border-radius: 3px; }
.patient-marcos .face-brow { top: 78px; width: 29px; height: 5px; border-top: 4px solid rgba(42,26,28,.7); }
.patient-marcos .face-eye { top: 94px; height: 5px; background: #1d272c; border: 0; border-radius: 2px; }
.patient-marcos .face-mouth { bottom: 38px; width: 53px; left: 64px; border-bottom: 3px solid #572c30; }
.patient-marcos .face-mouth::before { position: absolute; top: -5px; left: 5px; width: 43px; height: 7px; content: ""; border-radius: 2px; background: #513033; }
.patient-marcos .face-accessory { display: block; top: 84px; left: 28px; width: 51px; height: 27px; border: 3px solid #293c43; border-radius: 7px; background: rgba(223,246,241,.14); }
.patient-marcos .face-accessory::before { position: absolute; top: -3px; left: 61px; width: 51px; height: 27px; content: ""; border: 3px solid #293c43; border-radius: 7px; background: rgba(223,246,241,.14); }
.patient-marcos .face-accessory::after { position: absolute; top: 8px; left: 48px; width: 17px; height: 4px; content: ""; border-radius: 4px; background: #293c43; }
.patient-marcos .face-shirt { background: linear-gradient(145deg, #38526d 0 55%, #24364e 56% 100%); box-shadow: inset 0 15px 0 rgba(151,188,220,.16); }
.patient-marcos .face-shirt::before { position: absolute; top: 24px; left: 104px; width: 8px; height: 115px; content: ""; background: #d2a94f; transform: rotate(12deg); }
.patient-face.patient-julia { --patient-skin: #d39472; --patient-hair: #6c3b31; border-radius: 25px 25px 32px 32px; transform: scale(1.03); }
.patient-julia .face-hair { top: -15px; left: -5%; width: 110%; height: 57px; border-radius: 20px 20px 11px 11px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.13), -12px 18px 0 var(--patient-hair), 12px 18px 0 var(--patient-hair); }
.patient-julia .face-hair::after { right: 4px; width: 21px; height: 49px; border-radius: 5px; }
.patient-julia .face-eye { top: 91px; width: 19px; height: 16px; border: 0; border-radius: 50%; background: #263740; box-shadow: inset 4px 3px 0 rgba(255,255,255,.55); }
.patient-julia .eye-left { left: 28px; }
.patient-julia .eye-right { right: 28px; }
.patient-julia .face-cheek { top: 121px; width: 29px; height: 14px; background: rgba(242,119,114,.34); }
.patient-julia .face-mouth { left: 67px; bottom: 35px; width: 45px; border-bottom: 4px solid #813d43; }
.patient-julia .face-accessory { display: block; top: 3px; left: 82px; width: 17px; height: 18px; border-radius: 7px 2px 7px 2px; background: #f2bd4c; transform: rotate(23deg); box-shadow: 19px 1px 0 #e96962; }
.patient-julia .face-accessory::after { position: absolute; top: 7px; left: 14px; width: 9px; height: 9px; content: ""; border-radius: 3px; background: #f6df87; }
.patient-julia .face-shirt { background: linear-gradient(145deg, #8e6bc0, #624a9d); box-shadow: inset 0 15px 0 rgba(255,225,132,.25); }
.patient-julia .face-shirt::before { position: absolute; top: 33px; left: 68px; width: 190px; height: 12px; content: ""; border-radius: 3px; background: #f2bd4c; transform: rotate(-7deg); }
.patient-face.patient-rita { --patient-skin: #a96d53; --patient-hair: #202d3b; border-radius: 14px 14px 28px 28px; }
.patient-rita .face-hair { top: -18px; left: -4%; width: 108%; height: 66px; border-radius: 20px 24px 9px 9px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.16), 13px 24px 0 var(--patient-hair); }
.patient-rita .face-hair::after { top: 34px; right: -17px; width: 34px; height: 70px; border-radius: 5px; }
.patient-rita .face-brow { top: 79px; border-top-color: rgba(35,23,28,.72); }
.patient-rita .face-eye { top: 93px; border-top-width: 3px; }
.patient-rita .face-mouth { bottom: 36px; width: 55px; left: 63px; border-bottom: 3px solid #7e3f45; }
.patient-rita .face-accessory { display: block; top: 101px; left: -18px; width: 9px; height: 14px; border-radius: 2px 2px 5px 5px; background: #efbf55; box-shadow: 209px 0 0 #efbf55; }
.patient-rita .face-accessory::after { position: absolute; top: 17px; left: 7px; width: 192px; height: 31px; content: ""; border-bottom: 8px solid #e17865; border-radius: 0 0 24px 24px; }
.patient-rita .face-shirt { background: linear-gradient(145deg, #d26a62, #a94859); box-shadow: inset 0 15px 0 rgba(255,220,164,.18); }
.patient-rita .face-shirt::before { position: absolute; top: 25px; left: 86px; width: 120px; height: 8px; content: ""; background: rgba(255,220,164,.6); transform: rotate(13deg); }

/* Cenários de chamada: o ambiente reforça que são pessoas e regiões diferentes. */
.video-stage.patient-scene-ana .video-backdrop { background: radial-gradient(circle at 47% 28%, rgba(255,225,144,.38), transparent 18%), linear-gradient(145deg, #b4ddd1 0%, #77b6aa 54%, #6a8297 100%); }
.video-stage.patient-scene-ana .window-shape { border-color: rgba(255,255,255,.45); }
.video-stage.patient-scene-ana .plant-shape { border-color: rgba(71,126,87,.6); }
.video-stage.patient-scene-marcos .video-backdrop { background: radial-gradient(circle at 70% 25%, rgba(112,180,226,.38), transparent 20%), linear-gradient(145deg, #6c8297 0%, #40576f 56%, #283746 100%); }
.video-stage.patient-scene-marcos .window-shape { border-color: rgba(214,231,246,.35); }
.video-stage.patient-scene-marcos .video-light { background: rgba(193,218,244,.17); }
.video-stage.patient-scene-julia .video-backdrop { background: radial-gradient(circle at 35% 30%, rgba(255,222,128,.42), transparent 20%), linear-gradient(145deg, #d6c4df 0%, #a79aca 53%, #718bab 100%); }
.video-stage.patient-scene-julia .window-shape { border-color: rgba(255,247,211,.48); }
.video-stage.patient-scene-julia .plant-shape { border-color: rgba(105,91,198,.48); }
.video-stage.patient-scene-rita .video-backdrop { background: radial-gradient(circle at 66% 23%, rgba(255,176,111,.38), transparent 19%), linear-gradient(145deg, #e0bda9 0%, #bd8b88 53%, #637d8c 100%); }
.video-stage.patient-scene-rita .window-shape { border-color: rgba(255,243,222,.4); }
.video-stage.patient-scene-rita .video-light { background: rgba(255,211,164,.2); }

/* Camada premium do hub: fila e mapa com hierarquia visual mais clara. */
.queue-card {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 22px;
  border-radius: 22px;
  border-color: rgba(150, 196, 204, .34);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,248,246,.98));
  box-shadow: 0 8px 0 rgba(61, 119, 132, .08), 0 22px 48px rgba(61, 119, 132, .1);
}
.queue-card::before {
  position: absolute;
  top: -80px;
  right: -55px;
  width: 190px;
  height: 190px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 217, 195, .25), transparent 66%);
  pointer-events: none;
}
.queue-card > * { position: relative; z-index: 1; }
.queue-card .panel-heading { align-items: center; }
.queue-card .panel-heading h3 { color: #173842; font-size: 21px; }
.queue-card .eyebrow { color: #6b8c94; }
.queue-list { display: grid; gap: 9px; margin-top: 21px; }
.queue-person {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 70px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 3px 0 rgba(61, 119, 132, .05);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.queue-person:hover {
  border-color: rgba(22,126,117,.34);
  background: #f2fcf9;
  box-shadow: 0 5px 0 rgba(22,126,117,.08), 0 10px 20px rgba(61,119,132,.08);
  transform: translateY(-1px);
}
.queue-person:last-child { border-bottom: 0; }
.queue-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 13px; box-shadow: 0 4px 0 rgba(50,100,110,.1); }
.patient-name { color: #173842; font-size: 15px; }
.patient-meta { margin-top: 4px; color: #6e8990; font-size: 12px; line-height: 1.35; }
.wait-time { color: #496b74; font-size: 11px; }
.priority { font-size: 9px; }
.queue-side { min-width: 92px; }
.queue-cta { min-height: 54px; margin-top: 19px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1b9687, #167e75); box-shadow: 0 5px 0 #0b605e, 0 14px 24px rgba(22,126,117,.2); font-size: 14px; }
.queue-cta:hover { background: linear-gradient(135deg, #239f91, #14746e); box-shadow: 0 6px 0 #0b605e, 0 17px 28px rgba(22,126,117,.24); transform: translateY(-1px); }
.queue-cta kbd { padding: 5px 7px; border-radius: 6px; font-size: 9px; }

/* Fila completa: a acao ocupa uma linha propria em telas estreitas. */
.full-queue .queue-person { grid-template-columns: 46px minmax(0,1fr) auto; min-height: 82px; padding: 14px; }
.full-queue .queue-avatar { width: 46px; height: 46px; }
.full-queue .queue-action { min-width: 128px; min-height: 44px; padding: 9px 12px; border: 2px solid #b9d9dd; border-radius: 11px; color: #167e75; background: #f7fcff; font-size: 11px; }
.full-queue .queue-action:hover { border-color: #167e75; background: #e8faf5; box-shadow: 0 3px 0 rgba(22,126,117,.1); }

/* Mapa com mais profundidade: terreno, rotas e pontos de interesse. */
.map-card {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 0;
  border-radius: 22px;
  border-color: rgba(150, 196, 204, .34);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,248,246,.98));
  box-shadow: 0 8px 0 rgba(61,119,132,.08), 0 22px 48px rgba(61,119,132,.1);
}
.map-card .panel-heading h3 { color: #173842; font-size: 21px; }
.map-card .eyebrow { color: #6b8c94; }
.open-map {
  height: clamp(330px, 31vw, 430px);
  min-height: 330px;
  margin-top: 22px;
  border: 2px solid #8fcbd0;
  border-radius: 22px;
  background: linear-gradient(145deg, #bcecdf 0%, #8ad2dc 56%, #9eb7dc 100%);
  box-shadow: inset 0 -14px 0 rgba(39,111,146,.12), inset 0 0 0 1px rgba(255,255,255,.45), 0 7px 0 rgba(65,120,135,.1), 0 15px 26px rgba(65,120,135,.13);
}
.open-map::before {
  opacity: 1;
  background: radial-gradient(circle at 72% 20%, rgba(255,249,177,.95), transparent 18%), radial-gradient(circle at 18% 82%, rgba(255,255,255,.4), transparent 24%), repeating-radial-gradient(ellipse at 34% 65%, rgba(52,139,151,.1) 0 2px, transparent 3px 28px), linear-gradient(145deg, #bcecdf 0%, #8ad2dc 56%, #9eb7dc 100%);
}
.open-map::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(255,255,255,.6);
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(33,107,126,.12);
  pointer-events: none;
}
.map-grid-lines { opacity: .3; transform: rotate(-9deg) scale(1.08); }
.map-road { border-radius: 999px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 2px rgba(93,159,166,.14), 0 5px 0 rgba(64,130,145,.08); }
.map-block { border: 2px solid rgba(75,142,150,.28); border-radius: 12px; background: rgba(255,255,255,.58); box-shadow: 0 8px 0 rgba(64,130,145,.12), inset 0 1px 0 rgba(255,255,255,.8); transform: rotate(-9deg) skew(-3deg); }
.block-b { transform: rotate(17deg) skew(-3deg); }
.block-c { transform: rotate(4deg) skew(-3deg); }
.block-d { transform: rotate(-24deg) skew(-3deg); }
.block-e { transform: rotate(18deg) skew(-3deg); }
.map-label { color: rgba(24,103,116,.78); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.map-pin { width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.95); border-radius: 13px; box-shadow: 0 6px 0 rgba(38,93,106,.18), 0 13px 22px rgba(45,110,126,.22); }
.map-pin:hover { box-shadow: 0 8px 0 rgba(38,93,106,.18), 0 16px 27px rgba(45,110,126,.28); }
.map-pin .pin-symbol { font-size: 14px; font-weight: 700; }
.clinic-pin { width: 58px; height: 58px; border-radius: 17px; box-shadow: 0 7px 0 rgba(102,131,23,.22), 0 15px 25px rgba(102,131,23,.22); }
.pin-four { width: 36px; height: 36px; }
.map-player { width: 34px; height: 34px; border: 3px solid #fff; border-radius: 10px; font-size: 9px; box-shadow: 0 6px 0 rgba(38,93,106,.2), 0 0 0 6px rgba(22,126,117,.15); }
.map-player i { bottom: -13px; width: 9px; height: 9px; }
.map-compass { top: 16px; right: 18px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; color: #477680; background: rgba(255,255,255,.5); font-size: 10px; }
.map-compass b { font-size: 18px; }
.map-legend { right: 14px; bottom: 14px; gap: 12px; padding: 8px 11px; border: 2px solid rgba(255,255,255,.72); border-radius: 12px; color: #245d69; background: rgba(255,255,255,.88); box-shadow: 0 5px 0 rgba(65,120,135,.08); font-size: 9px; }
.map-legend i { width: 7px; height: 7px; }
.map-footer { min-height: 58px; font-size: 12px; }
.map-footer .text-button { font-size: 12px; }

/* Evita que a pagina principal se mova ou apareca por tras de um modal aberto. */
html:has(.modal-backdrop:not([hidden])), body:has(.modal-backdrop:not([hidden])) { overflow: hidden; overscroll-behavior: none; }
.modal-backdrop { z-index: 100; overflow: hidden; isolation: isolate; overscroll-behavior: contain; background: rgba(4, 14, 20, .98); }
.call-modal, .treatment-modal, .small-modal, .team-task-modal, .world-event-modal { isolation: isolate; }
body.light-mode .modal-backdrop { background: rgba(237, 246, 243, .98); }

@media (max-width: 820px) {
  .queue-card, .map-card { padding-right: 18px; padding-left: 18px; border-radius: 18px; }
  .open-map { height: 350px; min-height: 300px; }
}

@media (max-width: 560px) {
  .queue-card, .map-card { padding-top: 18px; padding-right: 14px; padding-left: 14px; border-radius: 16px; }
  .queue-card .panel-heading h3, .map-card .panel-heading h3 { font-size: 19px; }
  .queue-list { gap: 8px; margin-top: 17px; }
  .queue-person, .full-queue .queue-person { grid-template-columns: 42px minmax(0,1fr); gap: 10px; min-height: 78px; padding: 11px 10px; }
  .queue-avatar, .full-queue .queue-avatar { width: 42px; height: 42px; }
  .patient-name { font-size: 14px; }
  .patient-meta { font-size: 11px; }
  .queue-side { grid-column: 2; min-width: 0; text-align: left; }
  .wait-time, .priority { display: inline-block; margin-right: 8px; font-size: 10px; }
  .full-queue .queue-action { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .queue-cta { min-height: 52px; padding-right: 10px; padding-left: 10px; font-size: 13px; }
  .queue-cta kbd { display: none; }
  .open-map { height: min(350px, 88vw); min-height: 270px; margin-top: 16px; border-radius: 17px; }
  .map-label { font-size: 7px; }
  .map-legend { right: 8px; bottom: 8px; gap: 7px; padding: 7px 8px; font-size: 8px; }
  .map-legend i { width: 6px; height: 6px; }
  .map-compass { top: 10px; right: 10px; padding: 5px 6px; }
  .map-pin { width: 38px; height: 38px; }
  .clinic-pin { width: 48px; height: 48px; }
  .pin-four { width: 32px; height: 32px; }
  .map-player { width: 30px; height: 30px; }
  .map-footer { min-height: 54px; gap: 8px; font-size: 10px; }
  .map-footer .text-button { font-size: 10px; white-space: nowrap; }
}

/* Mapa vivo: o terreno vira um pequeno mundo com regioes e rotas legiveis. */
.map-terrain {
  position: absolute;
  z-index: 0;
  inset: 7% 9% 8% 8%;
  overflow: hidden;
  border: 2px solid rgba(52,139,125,.28);
  border-radius: 42% 48% 39% 46% / 28% 36% 42% 38%;
  background: linear-gradient(145deg, #9cdcae 0%, #6fc493 50%, #77b9a2 100%);
  box-shadow: 0 13px 0 rgba(41,115,95,.14), inset 0 0 0 5px rgba(255,255,255,.16), inset 0 -22px 35px rgba(35,106,93,.15);
  clip-path: polygon(11% 16%, 27% 5%, 47% 10%, 66% 4%, 85% 17%, 95% 38%, 88% 61%, 94% 79%, 74% 94%, 51% 89%, 32% 97%, 12% 84%, 5% 61%, 9% 39%);
}
.map-terrain::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .45;
  background: repeating-radial-gradient(ellipse at 42% 47%, transparent 0 12px, rgba(255,255,255,.2) 13px 14px, transparent 15px 27px), linear-gradient(135deg, transparent 0 40%, rgba(247,223,137,.2) 41% 49%, transparent 50%);
}
.map-terrain::after {
  position: absolute;
  inset: 5%;
  content: "";
  border: 1px dashed rgba(255,255,255,.42);
  border-radius: 40% 48% 38% 44%;
  opacity: .6;
}
.terrain-zone { position: absolute; display: block; border-radius: 50%; opacity: .7; filter: blur(1px); }
.zone-north { top: 2%; left: 29%; width: 31%; height: 29%; background: #8ad0b3; }
.zone-west { top: 29%; left: 4%; width: 35%; height: 38%; background: #68b788; }
.zone-east { top: 20%; right: 4%; width: 36%; height: 38%; background: #7ebd9a; }
.zone-south { right: 20%; bottom: 0; width: 45%; height: 35%; background: #75ad91; }
.map-grove { position: absolute; z-index: 1; width: 67px; height: 45px; }
.map-grove i { position: absolute; display: block; width: 16px; height: 16px; border-radius: 50% 50% 50% 4px; background: #398a68; box-shadow: inset 3px 3px 0 rgba(197,241,160,.28), 2px 3px 0 rgba(35,101,76,.15); transform: rotate(18deg); }
.map-grove i:nth-child(1) { top: 12px; left: 4px; }.map-grove i:nth-child(2) { top: 0; left: 24px; }.map-grove i:nth-child(3) { top: 19px; left: 32px; }.map-grove i:nth-child(4) { top: 5px; left: 49px; }
.grove-one { top: 24%; left: 13%; transform: rotate(-14deg); }.grove-two { right: 14%; top: 58%; transform: rotate(12deg); }.grove-three { left: 34%; bottom: 8%; transform: rotate(-6deg); }
.map-river { position: absolute; z-index: 1; pointer-events: none; border: 4px solid rgba(220,250,255,.62); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; filter: drop-shadow(0 3px 0 rgba(59,137,163,.14)); }
.river-main { top: -10%; left: 48%; width: 20%; height: 125%; transform: rotate(22deg); }
.river-branch { top: 42%; left: 35%; width: 35%; height: 42%; border-right-color: transparent; transform: rotate(-29deg); }
.map-route { position: absolute; z-index: 2; pointer-events: none; border-top: 3px dashed rgba(255,255,255,.72); filter: drop-shadow(0 2px 0 rgba(46,119,117,.12)); }
.route-main { top: 51%; left: 17%; width: 66%; transform: rotate(-9deg); }
.route-branch { top: 36%; left: 48%; width: 37%; transform: rotate(36deg); }
.route-west { top: 61%; left: 10%; width: 36%; transform: rotate(34deg); }
.map-grid-lines { z-index: 1; }
.map-water { z-index: 1; }
.map-road, .map-block { z-index: 2; }
.map-label { z-index: 3; }
.label-village { top: 43%; left: 28%; color: rgba(19,91,74,.82); }
.label-grove { right: 28%; bottom: 23%; color: rgba(19,91,74,.72); }
.map-pin, .map-player, .map-compass, .map-legend { z-index: 4; }

@media (max-width: 560px) {
  .full-queue .queue-person > .queue-side { display: block; grid-column: 2; }
  .full-queue .queue-action { grid-column: 1 / -1 !important; grid-row: auto; justify-self: stretch; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; white-space: nowrap; overflow: visible; }
  .map-terrain { inset: 8% 7% 9% 6%; }
  .map-grove { transform: scale(.8); transform-origin: center; }
  .label-village, .label-grove { display: none; }
  .map-route { border-top-width: 2px; }
}

/* Leitura confortavel e layout touch-first para tablet, celular e desktop. */
:root {
  --touch-target: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html { min-width: 320px; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
button, input { touch-action: manipulation; }

/* O painel principal deixa de depender de textos de 6-9px. */
.eyebrow, .nav-label { font-size: 11px; }
.nav-item { min-height: 46px; font-size: 14px; }
.help-button, .text-button, .tiny-action, .more-button { font-size: 12px; }
.profile-chip strong { font-size: 13px; }
.profile-chip div:nth-child(2) span, .shift-progress-head, .shift-progress p { font-size: 11px; }
.topbar h1 { font-size: clamp(19px, 2vw, 25px); }
.topbar-title .eyebrow { font-size: 11px; }
.connection-status div span { font-size: 10px; }
.connection-status div strong { font-size: 12px; }
.welcome-row h2, .view-intro h2 { font-size: clamp(30px, 3.2vw, 40px); }
.subtitle, .main-content .subtitle { font-size: 15px; }
.metric-item div span { font-size: 10px; }
.metric-item div strong { font-size: 22px; }
.metric-item div strong em { font-size: 13px; }
.metric-item div small { font-size: 11px; }
.panel-heading h3 { font-size: 20px; }
.map-footer, .activity-text, .insight-copy p:not(.eyebrow) { font-size: 12px; }
.patient-name { font-size: 14px; }
.patient-meta, .wait-time { font-size: 11px; }
.priority, .activity-time { font-size: 9px; }
.queue-cta, .mission-action, .event-action { min-height: 48px; font-size: 13px; }
.generic-view h2 { font-size: clamp(30px, 3vw, 40px); }
.schedule-time, .doctor-role, .doctor-status, .availability-note, .upgrade-card p, .protocol-step p, .protocol-note p { font-size: 12px; }
.doctor-name, .upgrade-card h3, .protocol-step h3, .availability h3 { font-size: 17px; }
.queue-action, .upgrade-card button, .territory-actions button, .team-action, .resource-buy { min-height: 44px; font-size: 11px; }

/* Atendimento: dimensao maior e leitura clara sem perder densidade. */
.modal-backdrop { padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) max(14px, var(--safe-bottom)) max(14px, var(--safe-left)); }
.call-modal { width: min(1320px, 100%); }
.call-topbar { min-height: 68px; flex-basis: 68px; padding-right: 24px; padding-left: 24px; }
.call-brand, .call-brand strong { font-size: 15px; }
.call-timer { font-size: 12px; }
.call-topbar > .close-button { width: 44px; height: 44px; font-size: 25px; }
.call-context-strip { min-height: 58px; flex-basis: 58px; padding-right: 24px; padding-left: 24px; }
.call-context-strip strong { font-size: 14px; }
.signal-readout div span { font-size: 9px; }
.signal-readout div strong { font-size: 10px; }
.call-body { grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr); }
.case-panel { padding-top: 27px; }
.doctor-panel-kicker { font-size: 9px; }
.case-heading h2, .call-modal .case-heading h2 { font-size: clamp(28px, 2.6vw, 36px); }
.call-modal .case-heading > div > p:last-child { font-size: 13px; }
.call-modal .complaint-box strong { font-size: 14px; }
.call-modal .panel-section-heading > div > span, .call-modal .conversation-heading > div > span { font-size: 12px; }
.call-modal .global-monitor span { font-size: 9px; }
.call-modal .global-monitor strong { font-size: 15px; }
.call-modal .case-scoreboard strong { font-size: 21px; }
.call-modal .case-scoreboard strong small { font-size: 11px; }
.timeline-head { font-size: 10px; }
.timeline-head strong, .timeline-labels { font-size: 9px; }
.call-modal .dialogue-speaker { font-size: 10px; }
.call-modal .dialogue-bubble p { font-size: 14px; line-height: 1.5; }
.call-modal .question-form { grid-template-columns: minmax(0, 1fr) 48px 52px; gap: 8px; }
.call-modal .question-form input { min-height: 50px; padding: 12px 14px; font-size: 15px; }
.call-modal .mic-button, .call-modal .send-question { min-height: 50px; border-radius: 10px; font-size: 19px; }
.call-modal .data-heading > div > span { font-size: 12px; }
.call-modal .data-complete, .call-modal .treatment-status { font-size: 12px; }
.call-modal .equipment { min-height: 104px; padding: 13px 10px; }
.call-modal .equipment strong { font-size: 14px; line-height: 1.25; }
.call-modal .equipment small { font-size: 11px; line-height: 1.3; }
.call-modal .treatment-option { min-height: 62px; padding: 11px; }
.call-modal .treatment-option strong { font-size: 13px; line-height: 1.3; }
.call-modal .treatment-option small { font-size: 11px; line-height: 1.35; }
.call-modal .decision { min-height: 73px; padding: 13px; }
.call-modal .decision strong { font-size: 14px; }
.call-modal .decision small, .call-modal .decision-hint { font-size: 11px; }
.call-footer { min-height: 50px; flex-basis: 50px; padding-right: 24px; padding-left: 24px; }
.call-footer, .call-footer .end-call { font-size: 11px; }

/* Areas de toque maiores para dedos e Apple Pencil. */
.map-pin { width: 40px; height: 40px; }
.clinic-pin { width: 52px; height: 52px; }
.icon-button, .round-avatar, .close-button { min-width: var(--touch-target); min-height: var(--touch-target); }

@media (max-width: 1100px) {
  .main-content { padding-right: 24px; padding-left: 24px; }
  .call-body { grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); }
  .case-panel { padding-right: 20px; padding-left: 20px; }
}

@media (max-width: 900px) {
  .sidebar { width: 76px; flex-basis: 76px; }
  .main-content { padding-right: 18px; padding-left: 18px; }
  .call-modal { height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); }
  .call-body { display: block; overflow-y: auto; }
  .video-column { overflow: visible; }
  .video-column .video-stage { height: clamp(360px, 56svh, 520px); min-height: 360px; }
  .conversation-dock { max-height: none; padding: 20px 22px 22px; }
  .conversation-dock .dialogue-log { height: clamp(140px, 20svh, 220px); }
  .case-panel { overflow: visible; padding: 24px 22px 24px; }
  .clinical-section .decision-buttons { grid-template-columns: 1fr 1fr; }
  .team-resource-grid, .schedule-layout, .protocol-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* No celular, a navegacao vira uma faixa horizontal rolavel para liberar largura. */
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 8; display: block; width: 100%; height: auto; padding: calc(8px + var(--safe-top)) 10px 8px; border-right: 0; border-bottom: 2px solid #dbe8f2; }
  .brand-lockup { display: flex; justify-content: start; width: max-content; padding: 0 4px 8px; }
  .brand-lockup > div:last-child { display: block; }
  .brand-name { font-size: 18px; }
  .profile-chip, .sidebar-bottom, .nav-label { display: none; }
  .main-nav { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 2px 2px; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-item, .nav-item.is-active { display: flex; flex: 0 0 auto; width: auto; min-height: 48px; padding: 10px 13px; border: 2px solid #dbe8f2; border-radius: 14px; box-shadow: 0 3px 0 rgba(65,120,135,.06); }
  .nav-item > span:not(.nav-icon):not(.nav-count) { display: inline; }
  .nav-item .nav-icon { font-size: 19px; }
  .nav-count { position: static; margin: 0 0 0 3px; padding: 2px 5px; }
  .main-content { padding: 0 12px calc(30px + var(--safe-bottom)); }
  .topbar { min-height: 76px; gap: 12px; }
  .topbar-title { min-width: 0; }
  .topbar-title > div:last-child { min-width: 0; }
  .topbar-title .eyebrow { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar h1 { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
  .live-pulse { font-size: 8px; }
  .connection-status { display: none; }
  .topbar-actions { gap: 4px; }
  .welcome-row { gap: 14px; margin-bottom: 22px; }
  .welcome-row h2, .view-intro h2 { font-size: clamp(28px, 8vw, 36px); }
  .metric-item { min-height: 76px; padding-top: 14px; padding-bottom: 14px; }
  .metric-item div span { font-size: 9px; }
  .metric-item div strong { font-size: 20px; }
  .metric-item div small { font-size: 10px; }
  .panel-heading h3 { font-size: 19px; }
  .open-map { height: min(360px, 72vw); min-height: 270px; }
  .dashboard-grid { gap: 14px; }
  .schedule-row { grid-template-columns: 88px 1fr; }
  .upgrade-grid, .territory-grid { grid-template-columns: 1fr; }
  .modal-backdrop { align-items: start; padding: var(--safe-top) 8px var(--safe-bottom); }
  .call-modal { width: 100%; height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); max-height: none; border-radius: 14px; }
  .call-topbar { min-height: 62px; flex-basis: 62px; padding: 0 13px; }
  .call-brand, .call-brand strong { font-size: 14px; }
  .call-topbar > .close-button { width: 46px; height: 46px; }
  .call-context-strip { min-height: 60px; flex-basis: 60px; gap: 10px; padding: 0 13px; }
  .call-context-strip strong { font-size: 12px; }
  .signal-readout { gap: 6px; padding-left: 8px; }
  .signal-readout div span { font-size: 8px; }
  .signal-readout div strong { font-size: 9px; }
  .video-column .video-stage { height: clamp(310px, 58svh, 450px); min-height: 310px; }
  .patient-face { transform: scale(.95); }
  .conversation-dock { padding: 18px 15px 20px; }
  .conversation-dock .panel-section-heading { margin-bottom: 14px; }
  .conversation-dock .dialogue-log { height: 170px; }
  .conversation-heading { align-items: start; gap: 10px; }
  .listen-button { min-height: 42px; padding: 9px 11px; font-size: 10px; }
  .case-panel { padding: 22px 14px 20px; }
  .case-heading h2, .call-modal .case-heading h2 { font-size: 29px; }
  .case-heading { gap: 8px; }
  .urgency-tag { max-width: 130px; font-size: 9px; line-height: 1.25; text-align: right; }
  .game-monitor, .interaction-section, .clinical-section { margin-right: 0; margin-left: 0; padding: 16px; }
  .clinical-section .decision-buttons { grid-template-columns: 1fr; }
  .call-footer { min-height: 46px; flex-basis: 46px; padding-right: 14px; padding-left: 14px; }
  .call-footer > span { max-width: 65%; font-size: 10px; }
}

@media (max-width: 480px) {
  .brand-lockup { padding-bottom: 7px; }
  .nav-item { padding-right: 11px; padding-left: 11px; }
  .nav-item > span:not(.nav-icon):not(.nav-count) { font-size: 12px; }
  .topbar-title .eyebrow { font-size: 8px; }
  .topbar h1 { font-size: 16px; }
  .metric-strip { gap: 6px; border: 0; }
  .metric-item, .metric-item:nth-child(2), .metric-item:nth-child(3), .metric-item:nth-child(4) { border: 2px solid #d9e8ed; border-radius: 12px; padding: 11px 9px; }
  .metric-item div span { font-size: 8px; }
  .metric-item div strong { font-size: 18px; }
  .metric-item div small { font-size: 9px; }
  .call-context-strip { align-items: start; padding-top: 11px; padding-bottom: 11px; }
  .signal-readout div span { display: none; }
  .signal-readout div strong { font-size: 8px; }
  .video-column .video-stage { height: clamp(290px, 62svh, 390px); min-height: 290px; }
  .patient-face { transform: scale(.83); }
  .conversation-dock .dialogue-log { height: 155px; }
  .conversation-dock .panel-section-heading > div > span { font-size: 10px; }
  .call-modal .dialogue-bubble p { font-size: 13px; }
  .call-modal .question-form { grid-template-columns: minmax(0, 1fr) 46px 50px; }
  .call-modal .question-form input { min-height: 50px; font-size: 14px; }
  .call-modal .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .call-modal .equipment { min-height: 100px; padding: 12px 7px; }
  .call-modal .equipment strong { font-size: 12px; }
  .call-modal .equipment small { font-size: 10px; }
  .call-modal .treatment-grid { grid-template-columns: 1fr; }
  .call-modal .treatment-option strong { font-size: 13px; }
  .call-modal .decision strong { font-size: 14px; }
  .call-modal .decision small { font-size: 11px; }
  .game-monitor, .interaction-section, .clinical-section { padding: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Correcao final da fila: a acao nunca deve encolher ou quebrar palavra. */
.full-queue .queue-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 128px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .full-queue .queue-action {
    grid-column: 1 / -1 !important;
    min-width: 0;
    min-height: 48px;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Ativo final do mapa: a arte gerada substitui o fundo geometrico e preserva os pins clicaveis. */
.open-map {
  background-image: url("./assets/maps/aurora-map-premium.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.open-map::before {
  opacity: .12;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(9,81,100,.2)), radial-gradient(circle at 50% 40%, transparent 44%, rgba(14,80,100,.16) 100%);
}
.map-terrain, .map-river, .map-route, .map-grid-lines, .map-road, .map-block, .map-water, .map-grove { display: none; }
.map-label {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #1b5962;
  background: rgba(255,255,255,.78);
  box-shadow: 0 3px 0 rgba(22,91,106,.1);
  backdrop-filter: blur(3px);
  font-size: 8px;
  letter-spacing: .08em;
  text-shadow: none;
}
.map-pin, .map-player, .map-compass, .map-legend { z-index: 4; }

@media (max-width: 560px) {
  .map-label { padding: 3px 5px; font-size: 7px; }
  .open-map { background-position: center; }
}

/* Fallback visual robusto: a arte tambem e carregada como imagem real no mapa. */
.open-map { background-color: #8ad2dc; }
.map-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.open-map::before { z-index: 1; }
.map-label { z-index: 3; }
.map-pin, .map-player, .map-compass, .map-legend { z-index: 4; }
body.light-mode .open-map::before {
  opacity: .08;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(9,81,100,.16)), radial-gradient(circle at 50% 40%, transparent 44%, rgba(14,80,100,.12) 100%);
}

/* Ultima camada de compatibilidade com o tema claro e a fila completa. */
body.light-mode .open-map::before {
  opacity: .12;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(9,81,100,.2)), radial-gradient(circle at 50% 40%, transparent 44%, rgba(14,80,100,.16) 100%);
}
.full-queue .queue-person { grid-template-columns: 46px minmax(0,1fr) 110px 128px; }
.full-queue .queue-action { min-width: 128px; }

@media (max-width: 900px) and (min-width: 561px) {
  .full-queue .queue-person { grid-template-columns: 46px minmax(0,1fr) 100px 120px; }
  .full-queue .queue-action { min-width: 120px; }
}

@media (max-width: 560px) {
  .full-queue .queue-person { grid-template-columns: 42px minmax(0,1fr); }
  .full-queue .queue-action { grid-column: 1 / -1 !important; min-width: 0; }
}

/* Estrutura da fila: dados do paciente e acao ficam em areas independentes. */
.queue-person {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.queue-person-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.queue-person-main > div:nth-child(2) { min-width: 0; }
.queue-person-main .queue-side { min-width: 0; }
.queue-action {
  grid-column: auto;
  align-self: center;
  justify-self: stretch;
  width: 128px;
  min-width: 128px;
  white-space: nowrap;
}

@media (max-width: 900px) and (min-width: 561px) {
  .queue-person-main { grid-template-columns: 46px minmax(0,1fr) 100px; gap: 10px; }
  .queue-action { width: 120px; min-width: 120px; }
}

@media (max-width: 560px) {
  .queue-person, .full-queue .queue-person { grid-template-columns: 1fr; gap: 10px; }
  .queue-person-main, .full-queue .queue-person-main { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
  .queue-person-main .queue-side, .full-queue .queue-person-main .queue-side { grid-column: 2; display: block; min-width: 0; text-align: left; }
  .queue-action, .full-queue .queue-action { grid-column: 1; width: 100%; min-width: 0; min-height: 48px; }
}

/* Os pins acompanham os pontos de terra da arte panoramica do mapa. */
.open-map .pin-one { top: 26%; left: 28%; }
.open-map .pin-two { top: 33%; left: 75%; }
.open-map .pin-three { top: 63%; left: 82%; }
.open-map .pin-four { top: 62%; left: 16%; }
.open-map .map-player { top: 53%; left: 36%; }
.open-map .label-market { top: 57%; left: 72%; }
.open-map .label-grove { right: 29%; bottom: 20%; }

/* Hub imersivo: o mapa vira o mundo principal e os paineis passam a ser HUDs. */
:root { --hub-nav-h: 78px; }
html, body { min-height: 100%; }
body.hub-overview { overflow: hidden; }
.app-shell { display: block; min-height: 100svh; }
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: var(--hub-nav-h);
  padding: 10px 24px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(6, 27, 34, .86);
  box-shadow: 0 10px 30px rgba(9,44,53,.2);
  backdrop-filter: blur(18px) saturate(1.15);
}
body.light-mode .sidebar { border: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: rgba(6, 27, 34, .86); box-shadow: 0 10px 30px rgba(9,44,53,.2); }
.brand-lockup { flex: 0 0 auto; margin-right: 20px; padding: 0; }
.brand-lockup .eyebrow { color: rgba(213,244,239,.62); }
.brand-name { color: #f4fbfa; }
.main-nav {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-label, .sidebar-bottom { display: none; }
.nav-item, body.light-mode .nav-item {
  flex: 0 0 auto;
  width: auto;
  min-height: 46px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(231,246,244,.78);
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}
.nav-item:hover, body.light-mode .nav-item:hover { color: #fff; border-color: rgba(159,229,207,.2); background: rgba(159,229,207,.1); }
.nav-item.is-active, body.light-mode .nav-item.is-active {
  border-color: rgba(159,229,207,.45);
  color: #08241f;
  background: linear-gradient(135deg, #b3f0d9, #8ddac1);
  box-shadow: 0 4px 0 rgba(3,57,52,.45), 0 10px 22px rgba(94,220,182,.18);
}
.nav-icon { width: 20px; height: 20px; color: inherit; }
.nav-count { color: #bff1dd; background: rgba(159,229,207,.13); }
.nav-item.is-active .nav-count { color: #17473e; background: rgba(6,50,44,.13); }
.profile-chip, body.light-mode .profile-chip {
  flex: 0 0 auto;
  order: 3;
  min-width: 155px;
  margin: 0 0 0 12px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 12px;
  color: #eaf8f5;
  background: rgba(255,255,255,.1);
  box-shadow: none;
}
.profile-chip strong { color: #f5fffd; }
.profile-chip div:nth-child(2) span { color: rgba(220,245,240,.64); }
.avatar-player { color: #11352e; background: #c5f06b; }
.topbar {
  position: fixed;
  z-index: 27;
  top: calc(var(--hub-nav-h) + 4px);
  right: 24px;
  left: 24px;
  min-height: 48px;
  border: 0;
  pointer-events: none;
}
body.light-mode .topbar { border: 0; }
.topbar-title, .topbar-actions { pointer-events: auto; }
.topbar-title { color: #f5fffd; }
.topbar-title .eyebrow { color: rgba(224,248,242,.65); }
.topbar h1 { color: #fff; }
.topbar h1 span { color: rgba(224,248,242,.56); }
.topbar-actions { gap: 9px; }
.connection-status { padding-right: 12px; border-right-color: rgba(255,255,255,.2); }
.connection-status div span { color: rgba(224,248,242,.6); }
.connection-status div strong { color: #b9f2da; }
.icon-button { color: #e2f5f1; }
.round-avatar { color: #10352e; background: #a9ead1; }
.main-content { position: relative; width: 100%; padding: 0; }
.view-container { max-width: none; margin: 0; }
.overview-view { min-height: 100svh; padding: 0; }
.overview-view .welcome-row { display: none; }
.overview-view .dashboard-grid { display: block; min-height: 100svh; }
.overview-view .dashboard-grid > :not(.map-card) { display: none; }
.overview-view .map-card {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  min-height: 100svh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.overview-view .map-card .map-heading, .overview-view .map-card .map-footer { display: none; }
.overview-view .open-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.overview-view .open-map::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(5,24,32,.54) 0%, rgba(5,24,32,.04) 28%, rgba(5,24,32,.02) 60%, rgba(5,24,32,.46) 100%);
}
.overview-view .map-image { object-position: center; }
.overview-view .metric-strip {
  position: fixed;
  z-index: 28;
  top: calc(var(--hub-nav-h) + 61px);
  right: 24px;
  width: min(690px, calc(100vw - 48px));
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  background: transparent;
}
.overview-view .metric-item, body.light-mode .overview-view .metric-item {
  min-height: 70px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  color: #f5fffd;
  background: rgba(6, 30, 38, .72);
  box-shadow: 0 10px 28px rgba(4,30,38,.2), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(1.15);
}
.overview-view .metric-item:not(:first-child), body.light-mode .overview-view .metric-item:not(:first-child) { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.34); }
.overview-view .metric-icon { border: 1px solid rgba(255,255,255,.18); }
.overview-view .metric-item div span { color: rgba(220,248,240,.66); }
.overview-view .metric-item div strong { color: #f5fffd; }
.overview-view .metric-item div small { color: #b7efd8; }
.overview-view .mission-board {
  position: fixed;
  z-index: 24;
  left: 28px;
  bottom: 28px;
  width: min(520px, calc(100vw - 56px));
  min-height: 0;
  margin: 0;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 17px;
  background: rgba(8, 38, 43, .78);
  box-shadow: 0 18px 45px rgba(5,35,41,.27), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.2);
}
.overview-view .mission-board .mission-copy p:last-child { color: rgba(239,255,250,.78); }
.overview-view .mission-board .mission-copy h3 { color: #fff; }
.overview-view .mission-board .mission-progress span { color: rgba(225,249,242,.68); }
.overview-view .mission-board .mission-progress strong { color: #d6f56a; }
.overview-view .mission-board .mission-progress small { color: rgba(225,249,242,.6); }
.overview-view .progression-strip {
  position: fixed;
  z-index: 24;
  right: 28px;
  bottom: 28px;
  width: min(465px, 39vw);
  min-height: 0;
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 17px;
  background: rgba(8, 38, 43, .76);
  box-shadow: 0 18px 45px rgba(5,35,41,.24), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(16px) saturate(1.2);
}
.overview-view .progression-strip .eyebrow, .overview-view .progression-strip span, .overview-view .progression-strip small { color: rgba(225,249,242,.68); }
.overview-view .progression-strip strong { color: #fff; }
.overview-view .progression-strip .progression-action { color: #08241f; background: #a9ead1; }
.overview-view .world-event-card {
  position: fixed;
  z-index: 23;
  top: calc(var(--hub-nav-h) + 62px);
  left: 28px;
  width: min(420px, calc(100vw - 56px));
  min-height: 0;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255,224,139,.62);
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(54,44,14,.18);
  backdrop-filter: blur(14px) saturate(1.1);
}
.overview-view .world-event-card .world-event-copy h3 { font-size: 16px; }
.overview-view .world-event-card .world-event-copy p:not(.eyebrow) { font-size: 11px; }
.view-container.overlay-view-active {
  position: fixed;
  z-index: 18;
  inset: var(--hub-nav-h) 0 0;
  overflow-y: auto;
  padding: 154px 28px 40px;
  background: rgba(5, 25, 32, .58);
  backdrop-filter: blur(12px) saturate(.82);
}
.view-container.overlay-view-active .overview-view .welcome-row,
.view-container.overlay-view-active .overview-view .mission-board,
.view-container.overlay-view-active .overview-view .progression-strip,
.view-container.overlay-view-active .overview-view .world-event-card { display: none !important; }
.view-container.overlay-view-active .generic-view {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 18px;
}
.view-container.overlay-view-active .generic-view .view-intro {
  margin-bottom: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  color: #fff;
  background: rgba(7, 32, 40, .76);
  box-shadow: 0 14px 35px rgba(5,25,32,.22), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
}
.view-container.overlay-view-active .generic-view .view-intro h2 { color: #fff; }
.view-container.overlay-view-active .generic-view .view-intro .subtitle { color: rgba(232,250,245,.74); }
.hub-overlay-toolbar { display: none; }
.view-container.overlay-view-active .hub-overlay-toolbar { display: block; }
.view-container.overlay-view-active .hub-overlay-backdrop {
  position: fixed;
  z-index: 0;
  inset: var(--hub-nav-h) 0 0;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
}
.view-container.overlay-view-active .generic-view:not([hidden]) {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 56px));
  margin: 0 auto;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(252,255,254,.98), rgba(238,247,255,.97));
  box-shadow: 0 24px 70px rgba(3,24,31,.32), 0 3px 0 rgba(255,255,255,.6) inset;
  backdrop-filter: blur(18px) saturate(1.08);
}
.view-container.overlay-view-active .generic-view:not([hidden])::before {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--teal), var(--mint), var(--lilac));
  content: "";
}
.view-container.overlay-view-active .generic-view .view-intro {
  margin-bottom: 24px;
  padding: 0 0 19px;
  border: 0;
  border-bottom: 1px solid rgba(22,126,117,.17);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.view-container.overlay-view-active .generic-view .view-intro h2 { color: var(--ink); }
.view-container.overlay-view-active .generic-view .view-intro .subtitle { color: var(--ink-soft); }
.view-container.overlay-view-active .generic-view .panel-card {
  border-color: rgba(22,126,117,.18);
  box-shadow: 0 8px 24px rgba(38,96,106,.08), 0 2px 0 rgba(255,255,255,.8) inset;
}
.hub-close {
  position: fixed;
  z-index: 29;
  top: calc(var(--hub-nav-h) + 13px);
  right: 28px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 11px;
  color: #eafbf6;
  background: rgba(6, 30, 38, .78);
  box-shadow: 0 7px 18px rgba(4,28,35,.18);
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.hub-close:hover { border-color: rgba(159,229,207,.6); color: #fff; background: rgba(13,63,70,.92); }

@media (max-width: 1100px) {
  .sidebar { padding-right: 16px; padding-left: 16px; }
  .brand-lockup { margin-right: 10px; }
  .profile-chip { min-width: 142px; }
  .nav-item { padding-right: 8px; padding-left: 8px; }
  .overview-view .metric-strip { right: 18px; width: min(650px, calc(100vw - 36px)); }
  .overview-view .progression-strip { right: 18px; width: min(440px, 43vw); }
  .overview-view .mission-board, .overview-view .world-event-card { left: 18px; width: min(500px, calc(100vw - 36px)); }
}

@media (max-width: 900px) {
  .brand-lockup .eyebrow { display: none; }
  .brand-name { font-size: 18px; }
  .profile-chip { min-width: 135px; }
  .nav-item { font-size: 11px; }
  .nav-item > span:not(.nav-icon):not(.nav-count) { max-width: 82px; overflow: hidden; text-overflow: ellipsis; }
  .overview-view .progression-strip { width: min(420px, 44vw); }
  .view-container.overlay-view-active { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 700px) {
  :root { --hub-nav-h: 124px; }
  body.hub-overview { overflow: hidden; }
  .sidebar {
    height: auto;
    min-height: var(--hub-nav-h);
    flex-wrap: wrap;
    align-content: center;
    padding: calc(8px + var(--safe-top)) 12px 8px;
  }
  .brand-lockup { margin: 0; padding: 0 3px; }
  .profile-chip { margin-left: auto; padding: 6px 8px; }
  .main-nav { flex: 1 0 100%; order: 4; justify-content: flex-start; width: 100%; padding-top: 6px; }
  .nav-item, body.light-mode .nav-item { min-height: 44px; padding: 7px 11px; border-radius: 11px; font-size: 11px; }
  .topbar { top: calc(var(--hub-nav-h) + 2px); right: 12px; left: 12px; min-height: 36px; }
  .topbar-title { display: none; }
  .topbar-actions { justify-content: flex-end; }
  .topbar-actions .icon-button, .topbar-actions .round-avatar { display: none; }
  .overview-view .metric-strip {
    top: calc(var(--hub-nav-h) + 45px);
    right: 12px;
    left: 12px;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .overview-view .metric-item, body.light-mode .overview-view .metric-item { min-height: 64px; padding: 9px 10px; border-radius: 12px; }
  .overview-view .metric-item:not(:first-child), body.light-mode .overview-view .metric-item:not(:first-child) { padding-left: 10px; }
  .overview-view .metric-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: 15px; }
  .overview-view .metric-item div span { font-size: 9px; }
  .overview-view .metric-item div strong { font-size: 18px; }
  .overview-view .metric-item div small { font-size: 9px; }
  .overview-view .world-event-card { display: none; }
  .overview-view .progression-strip { display: none; }
  .overview-view .mission-board { right: 12px; bottom: 12px; left: 12px; width: auto; padding: 13px; border-radius: 14px; }
  .overview-view .mission-board .mission-orb { width: 31px; height: 31px; }
  .overview-view .mission-board .mission-copy p:last-child { display: none; }
  .overview-view .mission-board .mission-progress { display: none; }
  .overview-view .mission-board .mission-action { min-height: 44px; }
  .view-container.overlay-view-active { inset: var(--hub-nav-h) 0 0; padding: 166px 12px 28px; }
  .view-container.overlay-view-active .generic-view:not([hidden]) { width: 100%; padding: 19px; border-radius: 18px; }
  .view-container.overlay-view-active .generic-view .view-intro { padding: 0 0 16px; border-radius: 0; }
  .view-container.overlay-view-active .generic-view .view-intro h2 { font-size: 28px; }
  .hub-close { top: calc(var(--hub-nav-h) + 8px); right: 12px; min-height: 42px; }
}

@media (max-width: 440px) {
  .profile-chip { min-width: 0; max-width: 148px; }
  .profile-chip div:nth-child(2) span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item > span:not(.nav-icon):not(.nav-count) { max-width: 68px; }
  .overview-view .metric-item div span { font-size: 8px; }
  .overview-view .metric-item div strong { font-size: 17px; }
}

/* Contraste final do HUD: nenhum texto pode desaparecer sobre o glass claro. */
body.light-mode .overview-view .mission-board,
body.light-mode .overview-view .progression-strip {
  color: var(--ink);
  background: linear-gradient(120deg, rgba(250,255,253,.97), rgba(241,246,255,.96));
  border-color: rgba(22,126,117,.28);
  box-shadow: 0 8px 0 rgba(65,120,135,.1), 0 18px 40px rgba(25,83,91,.2);
}
.overview-view .mission-board {
  grid-template-columns: 40px minmax(0, 1fr) minmax(128px, .48fr);
  grid-template-rows: auto auto;
  align-items: center;
}
.overview-view .mission-board .mission-orb { grid-row: 1 / -1; }
.overview-view .mission-board .mission-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.overview-view .mission-board .mission-copy h3,
body.light-mode .overview-view .mission-board .mission-copy h3 { color: var(--ink); }
.overview-view .mission-board .mission-copy p:last-child,
body.light-mode .overview-view .mission-board .mission-copy p:last-child { color: var(--ink-soft); }
.overview-view .mission-board .mission-progress {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-top: 3px;
}
.overview-view .mission-board .mission-progress span,
body.light-mode .overview-view .mission-board .mission-progress span { color: var(--ink-faint); }
.overview-view .mission-board .mission-progress strong,
body.light-mode .overview-view .mission-board .mission-progress strong { color: var(--teal); }
.overview-view .mission-board .mission-progress small,
body.light-mode .overview-view .mission-board .mission-progress small { color: var(--ink-faint); }
.overview-view .mission-board .mission-action {
  grid-column: 3;
  grid-row: 1 / -1;
  width: 100%;
  min-height: 48px;
  white-space: nowrap;
}
body.light-mode .overview-view .progression-strip .eyebrow,
body.light-mode .overview-view .progression-strip span,
body.light-mode .overview-view .progression-strip small { color: var(--ink-faint); }
body.light-mode .overview-view .progression-strip strong,
body.light-mode .overview-view .progression-strip .progression-level strong { color: var(--ink); }
body.light-mode .overview-view .progression-strip .progression-level > div > span { color: var(--teal); }
body.light-mode .overview-view .progression-strip .inventory-summary strong { color: var(--teal); }
body.light-mode .overview-view .progression-strip .progression-action { color: #fff; background: linear-gradient(135deg, #1b9687, #167e75); }

@media (max-width: 700px) {
  .overview-view .mission-board { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto; }
  .overview-view .mission-board .mission-copy { grid-column: 2; grid-row: 1; }
  .overview-view .mission-board .mission-progress { display: none; }
  .overview-view .mission-board .mission-action { grid-column: 3; grid-row: 1; min-height: 44px; }
}