/* ===== ROOT & DESIGN TOKENS ===== */
:root {
    /* Coral Keepers HTML prototypes (CORAL_KEEPERS_SURFACE_COLORS.md) */
    --bg: #faf9f8;
    /* Bottom nav: slightly lifted from page canvas */
    --bg-nav: #ffffff;
    --text-dark: #2f3333;
    --text-muted: #5b605f;
    --card-border: rgba(0, 0, 0, 0.1);
    --divider: rgba(0, 0, 0, 0.05);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
    --radius-card: 8px;

    /* Brand Colors */
    --color-ocean-blue: #0075de;
    --color-coral-green: #16a34a;
    --color-text-black: var(--text-dark);
    --color-dark-bg: #28303F;
    
    /* UI Colors */
    --color-accent-grey: #EDF3FC;
    --color-secondary-text: var(--text-muted);
    --color-tertiary-text: #94A3B8;
    --color-neutral-dark: #2f3333;
    --color-border: #B6B9BF;
    
    /* Status Colors */
    --color-success: #16a34a;
    --color-info: #005EB4;
    --color-warning: #FF9800;
    --color-danger: #9F403D;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Monaco, monospace;
    
    --text-large-heading: 700 28px / 1 var(--font-primary);
    --text-heading: 700 24px / 1 var(--font-primary);
    --text-label: 700 12px / 1 var(--font-primary);
    --text-body: 400 14px / 1 var(--font-primary);
    
    /* Sizing */
    --safe-area-top: 44px;
    --safe-area-bottom: 34px;
    --nav-height: 99px;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    /* Borders & Shadows */
    --radius: 16px;
    --shadow-sm: var(--shadow-card);
}

/* ===== GLOBAL STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg);
    color: var(--text-dark);
    font-family: var(--font-primary);
    overflow: hidden;
}

/* ===== APP CONTAINER ===== */
.app-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: transparent;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    overflow: hidden;
}

/* ===== STATUS BAR ===== */
.status-bar {
    height: 26px;
    padding: 4px 20px 0;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: transparent;
    color: var(--text-dark);
    font: 700 17px/1 var(--font-primary);
}

.status-time {
    letter-spacing: -0.02em;
}

.status-indicators {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-icon {
    display: block;
    object-fit: contain;
}

.status-icon-signal {
    width: 18px;
    height: 12px;
}

.status-icon-wifi {
    width: 15px;
    height: 11px;
}

.status-icon-battery {
    width: 26px;
    height: 12px;
}

/* ===== HEADER ===== */
.header {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0 var(--space-lg) 12px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}

.page-title {
    font: var(--text-large-heading);
    letter-spacing: 0.797px;
    color: var(--text-dark);
}

/* ===== MAIN CONTENT ===== */
.content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    scroll-behavior: smooth;
}

/* Lab: header scrolls with body; horizontal alignment uses .content padding only */
.view-lab .content > .header {
    padding: 0 0 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
}

.view-lab .page-title {
    transform: none;
}

.view-lab .vitals-section:first-of-type {
    margin-top: 0;
}

.view {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.view.active {
    display: flex;
}

.messages-header {
    border-bottom: 0;
    padding: 0 var(--space-lg) 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Announcements tab / compose: ensure no solid header strip over page canvas */
.view-announcements > .header {
    background: transparent;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.message-tabs {
    margin-top: 8px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 6px;
    display: flex;
    gap: 8px;
    width: 100%;
}

.message-tab {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-secondary-text);
    font: 600 16px/1 var(--font-primary);
    padding: 8px 0;
    cursor: pointer;
    flex: 1;
}

.message-tab.active {
    background: var(--color-ocean-blue);
    color: #ffffff;
    box-shadow: none;
}

.messages-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.announcements-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg);
    padding: 16px 24px 112px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.view-announcements {
    position: relative;
}

.messages-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.messages-group-title {
    color: var(--color-secondary-text);
    font: var(--text-label);
    text-transform: uppercase;
}

.message-list-card {
    width: 100%;
    min-height: 72px;
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.message-list-card-action {
    cursor: pointer;
}

.message-list-card-specialist {
    cursor: pointer;
}

.message-list-card-specialist:focus-visible {
    outline: 2px solid var(--color-ocean-blue);
    outline-offset: 2px;
}

.message-list-card-course.message-list-card-action:focus-visible {
    outline: 2px solid var(--color-ocean-blue);
    outline-offset: 2px;
}

/* Specialist headshots: same left column; crop/zoom tuned inside fixed frame. */
.message-card-photo-frame {
    width: 64px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
    align-self: stretch;
}

.message-card-photo-frame .message-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Narrow vertical tile: center-weight + slight zoom-out so subjects aren’t pushed off-crop. */
    object-position: 50% 32%;
    transform: scale(0.86);
    transform-origin: center center;
}

.message-card-photo-frame--kim .message-card-photo {
    object-position: 60% 32%;
    transform: scale(1);
    transform-origin: center center;
}

.message-card-photo-frame--john .message-card-photo {
    object-position: 20% 32%;
    transform: scale(1.25);
    transform-origin: center center;
}

.message-card-photo {
    width: 64px;
    height: 72px;
    object-fit: cover;
    flex-shrink: 0;
}

.message-card-text {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.message-card-topline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.message-card-name {
    flex: 1;
    min-width: 0;
    color: var(--color-text-black);
    font: 600 16px/1 var(--font-primary);
}

.message-card-time {
    color: var(--color-ocean-blue);
    font: 400 14px/1 var(--font-primary);
    white-space: nowrap;
}

.message-card-preview {
    color: var(--color-secondary-text);
    font: 400 14px/1 var(--font-primary);
}

.message-card-course-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.message-card-course {
    color: var(--color-secondary-text);
    font: var(--text-label);
    text-transform: uppercase;
}

.message-card-action {
    color: var(--color-ocean-blue);
    font: 400 16px/1 var(--font-primary);
    white-space: nowrap;
}

.sent-toast {
    width: 100%;
    display: none;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-card);
    background: #ffffff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
}

.sent-toast.visible {
    display: flex;
}

.sent-toast-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.sent-toast-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sent-toast-title {
    color: var(--color-text-black);
    font: 700 16px/1 var(--font-primary);
}

.sent-toast-time {
    color: var(--color-secondary-text);
    font: 400 14px/1 var(--font-primary);
}

.sent-toast-close {
    border: 0;
    background: transparent;
    color: #5b605f;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 27px/1 var(--font-primary);
    cursor: pointer;
    padding: 0;
    transform: rotate(45deg);
}

.announcement-toast {
    width: 100%;
    display: none;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-card);
    background: #ffffff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
}

.announcement-toast.visible {
    display: flex;
}

.announcement-toast-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.announcement-toast-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.announcement-toast-title {
    color: var(--color-text-black);
    font: 700 16px/1 var(--font-primary);
}

.announcement-toast-time {
    color: var(--color-secondary-text);
    font: 400 14px/1 var(--font-primary);
}

.announcement-toast-close {
    border: 0;
    background: transparent;
    color: #5b605f;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 27px/1 var(--font-primary);
    cursor: pointer;
    padding: 0;
    transform: rotate(45deg);
}

.announcements-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.class-card {
    width: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
}

.class-card-header {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.class-card-header-orange {
    background: #EC6F41;
}

.class-card-header-purple {
    background: #8727BA;
}

.class-card-header-blue {
    background: #01BAEF;
}

.class-card-title {
    color: white;
    font: 600 16px/1 var(--font-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.class-announcement-list {
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.class-announcement {
    padding: 12px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--divider);
    background: #ffffff;
}

.class-announcement.is-new {
    background: #bceecf;
    border-top-color: #bceecf;
}

.class-announcement-title {
    color: var(--color-text-black);
    font: 400 16px/1.2 var(--font-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.class-announcement-meta {
    color: var(--color-secondary-text);
    font: 400 14px/1 var(--font-primary);
}

.announcement-fab {
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: var(--color-ocean-blue);
    color: white;
    font: 400 44px/1 var(--font-primary);
    box-shadow: 0 12px 22px rgba(43, 102, 228, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 0;
    line-height: 0;
    padding: 0;
}

.announcement-fab::before,
.announcement-fab::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

.announcement-fab::before {
    width: 26px;
    height: 4px;
}

.announcement-fab::after {
    width: 4px;
    height: 26px;
}

.announcement-fab:active {
    transform: scale(0.98);
}

.announcement-compose-content {
    gap: 24px;
}

.announcement-recipient-list {
    width: 100%;
    border-radius: 16px;
    background: white;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.announcement-recipient {
    width: 100%;
    min-height: 56px;
    padding: 0 14px 0 16px;
    border: 0;
    border-top: 1px solid #efefef;
    background: white;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.announcement-recipient:first-child {
    border-top: 0;
}

.announcement-recipient-mark {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.announcement-recipient-mark-orange {
    background: #EC6F41;
}

.announcement-recipient-mark-purple {
    background: #8727BA;
}

.announcement-recipient-mark-blue {
    background: #01BAEF;
}

.announcement-recipient-name {
    flex: 1;
    min-width: 0;
    color: var(--color-neutral-dark);
    font: 400 16px/1.2 var(--font-primary);
}

.announcement-recipient-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #d8dde5;
    flex-shrink: 0;
    position: relative;
}

.announcement-recipient.is-selected {
    background: rgba(0, 117, 222, 0.05);
}

.announcement-recipient.is-selected .announcement-recipient-radio {
    border-color: var(--color-ocean-blue);
    box-shadow: inset 0 0 0 6px var(--color-ocean-blue);
}

.announcement-compose-input,
.announcement-compose-textarea {
    width: 100%;
}

.announcement-send:disabled {
    cursor: default;
}

.announcement-send.active {
    background: var(--color-ocean-blue);
    color: white;
}

.account-header {
    border-bottom: none;
    padding: 0 var(--space-lg) 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.account-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.account-profile-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.account-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #d6dde7;
    object-fit: cover;
    display: block;
}

.account-name {
    color: var(--color-text-black);
    font: 600 18px/1 var(--font-primary);
    white-space: nowrap;
}

.account-view-profile {
    border: 0;
    border-radius: 4px;
    padding: 12px 20px;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    background: #0075de;
    color: #f6f7ff;
    font: 600 16px/1 var(--font-primary);
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.account-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.account-menu-item {
    border: 0;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    background: transparent;
    width: 100%;
    min-height: 44px;
    padding: 12px 4px 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-black);
    font: 600 16px/1 var(--font-primary);
    text-align: left;
    cursor: pointer;
}

.account-menu-item:last-child {
    border-bottom: none;
}

.account-menu-item:active {
    background: rgba(0, 0, 0, 0.04);
}

.account-menu-chevron {
    width: 10px;
    height: 16px;
    position: relative;
    display: inline-block;
}

.account-menu-chevron::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 1px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-secondary-text);
    border-right: 2px solid var(--color-secondary-text);
    transform: rotate(45deg);
}

.account-profile-header {
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 var(--space-lg) 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.account-profile-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.account-profile-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-profile-section-title {
    color: var(--color-text-black);
    font: 600 18px/1 var(--font-primary);
    margin-bottom: 10px;
}

.account-field-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--divider);
}

.account-field-label {
    color: var(--color-secondary-text);
    font: 700 12px/1 var(--font-primary);
    text-transform: uppercase;
}

.account-field-value {
    color: var(--color-text-black);
    font: 400 16px/1 var(--font-primary);
}

.account-field-value-link {
    color: var(--color-ocean-blue);
}

.compose-header {
    border-bottom: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 var(--space-lg) 12px;
}

.compose-title {
    margin: 0;
}

.compose-back {
    border: 0;
    width: 12px;
    height: 20px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.compose-back img {
    width: 20px;
    height: 12px;
    transform: rotate(90deg);
    display: block;
}

.compose-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.compose-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compose-input {
    width: 100%;
    height: 52px;
    border: 1px solid #efefef;
    border-radius: 16px;
    background: white;
    color: var(--color-text-black);
    font: 400 16px/1 var(--font-primary);
    padding: 0 16px;
    outline: none;
}

.compose-textarea {
    width: 100%;
    min-height: 109px;
    border: 1px solid #efefef;
    border-radius: 16px;
    background: white;
    color: var(--color-text-black);
    font: 400 16px/1.25 var(--font-primary);
    padding: 16px;
    resize: none;
    outline: none;
}

.compose-send {
    width: 100%;
    border: 0;
    border-radius: 4px;
    padding: 12px;
    background: #7b889b;
    color: #f6f7ff;
    font: 600 16px/1 var(--font-primary);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    cursor: default;
}

.compose-send.active {
    background: var(--color-ocean-blue);
    cursor: pointer;
}

.compose-send:disabled {
    opacity: 1;
}

/* Specialist chat & compose: no solid header strip */
.specialist-chat-header,
.announcement-compose-header,
.compose-header {
    background: transparent;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0 var(--space-lg) 12px;
}

/* Specialist 1:1 chat */
.specialist-chat-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.specialist-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-row {
    display: flex;
    width: 100%;
}

.dm-row--them {
    justify-content: flex-start;
}

.dm-row--me {
    justify-content: flex-end;
}

.dm-bubble {
    max-width: min(85%, 320px);
    padding: 10px 14px;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

.dm-bubble--them {
    background: #ffffff;
    border: 1px solid var(--card-border);
    color: var(--color-text-black);
}

.dm-bubble--me {
    background: var(--color-ocean-blue);
    color: #ffffff;
}

.dm-bubble p {
    margin: 0;
    font: 400 15px/1.35 var(--font-primary);
    word-wrap: break-word;
}

.dm-time {
    display: block;
    margin-top: 6px;
    font: 400 11px/1.2 var(--font-primary);
    opacity: 0.72;
}

.dm-bubble--me .dm-time {
    color: rgba(255, 255, 255, 0.9);
}

.specialist-chat-composer {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--card-border);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.specialist-chat-input {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    border: 1px solid #efefef;
    border-radius: 16px;
    background: #ffffff;
    color: var(--color-text-black);
    font: 400 16px/1.25 var(--font-primary);
    padding: 11px 14px;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.specialist-chat-send {
    flex-shrink: 0;
    border: 0;
    border-radius: 16px;
    padding: 0 18px;
    min-width: 72px;
    background: #7b889b;
    color: #f6f7ff;
    font: 600 15px/1 var(--font-primary);
    cursor: default;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.specialist-chat-send.active:not(:disabled) {
    background: var(--color-ocean-blue);
    cursor: pointer;
}

.specialist-chat-send:disabled {
    opacity: 1;
}

.content,
.messages-content,
.announcements-content,
.compose-content,
.specialist-thread,
.account-content,
.account-profile-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.content::-webkit-scrollbar,
.messages-content::-webkit-scrollbar,
.announcements-content::-webkit-scrollbar,
.compose-content::-webkit-scrollbar,
.specialist-thread::-webkit-scrollbar,
.account-content::-webkit-scrollbar,
.account-profile-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ===== SECTIONS ===== */
.vitals-section,
.recap-section,
.live-feed-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.view-lab .vitals-section:first-of-type .section-header {
    margin-top: 0;
}

.live-feed-section {
    gap: 0;
}

.live-feed-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: #ffffff;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.section-label {
    font: var(--text-label);
    color: var(--color-secondary-text);
    text-transform: uppercase;
    letter-spacing: 0;
}

/* ===== STATUS BADGES ===== */
.status-badge {
    font: var(--text-label);
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
}

.status-excellent {
    background: transparent;
}

.status-stable {
    background: transparent;
}

/* Colors driven by gaugeColorAtHealth() in script.js */
#health-score-status,
#core-vitals-status {
    color: #34c96b;
}

/* ===== HEALTH CARD ===== */
.health-card {
    position: relative;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: #ffffff;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
    box-shadow: var(--shadow-card);
}

/* Hidden demo control: tap top-right of health card for low tank demo (0–50% range, starts at 30%) */
.tank-low-mode-hitbox {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

/* Arc gauge + knob (arc-knob-implementation.md) */
.health-meter-container.gauge-panel {
    position: relative;
    width: 100%;
    max-width: 320px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meter-wrapper {
    max-width: 500px;
    position: relative;
    transform: translateY(18px);
    width: 100%;
    z-index: 2;
}

.gauge-svg {
    cursor: default;
    height: auto;
    overflow: visible;
    width: 100%;
}

.gauge-base {
    fill: none;
    stroke: url(#gaugeGradient);
    stroke-linecap: round;
    stroke-width: 16;
}

.knob-pill {
    cursor: default;
    fill: var(--bg);
    stroke: rgba(0, 0, 0, 0.12);
    stroke-width: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
    transition: transform 0.1s ease-out;
}

.health-icon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

/* Fixed footprint so Cory 1–6 SVGs (different viewBoxes) render at consistent size */
.health-icon-frame {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 92px;
    height: 160px;
    flex-shrink: 0;
    transform: translateY(14px);
}

.health-icon {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: bottom center;
}

.health-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    margin-top: -18px;
}

.trend {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.trend-arrow {
    width: 22px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 14px/1 var(--font-primary);
    color: var(--color-info);
    transform: translateY(-0.5px);
}

.trend-value {
    font: 700 14px / 20px var(--font-primary);
    color: var(--color-info);
}

.health-percentage {
    font: 700 48px / 1 var(--font-primary);
    color: #34c96b;
    letter-spacing: 0;
}

/* ===== RECAP CARD ===== */
.recap-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: #ffffff;
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
}

.recap-text {
    font: var(--text-body);
    color: var(--text-dark);
    line-height: 1.4;
}

/* ===== VITALS GRID ===== */
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.vital-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: #ffffff;
    padding: 17px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    box-shadow: var(--shadow-card);
    min-height: 107px;
    justify-content: space-between;
}

.vital-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vital-icon {
    width: auto;
    height: 15px;
    object-fit: contain;
    display: block;
}

.vital-change {
    display: flex;
    gap: 2px;
    align-items: center;
}

.change-arrow {
    width: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 12px/1 var(--font-primary);
    color: var(--color-neutral-dark);
    transform: translateY(-0.5px);
}

.vital-change img[src$="trend-up.svg"],
.vital-change img[src$="trend-down.svg"] {
    width: auto;
    height: 7px;
    object-fit: contain;
    display: block;
}

.change-value {
    font: 700 14px / 15px var(--font-primary);
    color: var(--color-neutral-dark);
}

.vital-title {
    font: var(--text-label);
    color: var(--color-secondary-text);
    text-transform: uppercase;
}

.vital-value {
    font: 700 24px / 1 var(--font-primary);
    color: var(--color-neutral-dark);
}

/* ===== LIVE FEED SECTION ===== */
.live-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 17px;
    background: #ffffff;
    border-bottom: 1px solid var(--divider);
}

.live-feed-title {
    font: 700 24px / 1 var(--font-primary);
    color: var(--color-neutral-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9F403D;
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.timestamp {
    font: var(--text-label);
    color: var(--color-secondary-text);
}

.live-feed-video {
    position: relative;
    overflow: hidden;
    background: #000;
    aspect-ratio: 354 / 197;
}

.live-feed-poster {
    position: relative;
    width: 100%;
    height: 100%;
}

.live-feed-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.live-feed-iframe-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.live-feed-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Desktop: invisible layer captures taps (iframe is cross-origin). Phone: corner chip only so YouTube controls stay usable when muted-autoplay is required. */
.live-feed-tap-back {
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.live-feed-tap-back--full {
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.live-feed-tap-back--chip {
    inset: auto;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.live-feed-tap-back--chip::before,
.live-feed-tap-back--chip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.live-feed-tap-back--chip::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.live-feed-tap-back--chip::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.feed-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.play-button:active {
    background: transparent;
}

.play-button img {
    width: 77px;
    height: auto;
    display: block;
}

/* ===== BOTTOM NAVIGATION ===== */
.bottom-nav {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 0;
    padding: 25px 16px 23px;
    background: var(--bg-nav);
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
    min-height: 90px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.12s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-item:active {
    opacity: 0.7;
}

.nav-icon {
    object-fit: contain;
    display: block;
    margin-top: -3px;
}

.nav-icon-lab {
    width: 30px;
    height: 24px;
}

.nav-icon-messages {
    width: 22px;
    height: 21px;
}

.nav-icon-account {
    width: 14px;
    height: 18px;
}

.nav-label {
    font: var(--text-label);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-tertiary-text);
    text-align: center;
}

.nav-label-lab {
    width: 51px;
}

.nav-label-messages {
    width: 61px;
}

.nav-label-account {
    width: 51px;
}

.nav-item.active .nav-label {
    color: var(--color-ocean-blue);
    font-weight: 700;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 390px) {
    .app-container {
        max-width: 100%;
        max-height: 100vh;
    }

    .status-bar {
        gap: 100px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .live-indicator {
        animation: none;
        opacity: 1;
    }

    .knob-pill {
        transition: none;
    }

    * {
        transition: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .bottom-nav,
    .status-bar {
        display: none;
    }
}