:root {
    --bg-dark: #0a0e17;
    --col-left-bg: #f4f4f6;
    --col-mid-bg: #e3e6e8;
    --col-right-bg: #f4f4f6;
    --text-main: #2d3748;
    --text-muted: #718096;
    --accent-blue: #3182ce;
    --accent-blue-gradient: linear-gradient(135deg, #4299e1, #2b6cb0);
    --accent-teal: #4fd1c5;
    --card-bg: rgba(255, 255, 255, 0.6);
    --border-radius: 20px;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --red-alert: #e53e3e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.app-container {
    display: flex;
    gap: 15px;
    width: 100%;
    /* Wider canvas so the camera column can claim more horizontal space
       without crowding the side panels. Was 1400px; bumped to 1600px and
       capped at 96vw so it still fits smaller laptop screens. */
    max-width: min(1600px, 96vw);
    height: 92vh;
    min-height: 820px;
}

.column { border-radius: var(--border-radius); padding: 32px; display: flex; flex-direction: column; overflow-y: auto; }
.left-column, .right-column { background-color: var(--col-left-bg); flex: 1; }
.middle-column {
    background: #0f172a;
    background-image: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    flex: 1.8;
    position: relative;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    transition: flex 0.35s ease;
}

.phone-viewport {
    width: 100%;
    max-width: 410px;
    height: 100%;
    max-height: 820px;
    background-color: #0d1117;
    border: 12px solid #1e293b;
    border-radius: 40px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5), 
        0 0 25px rgba(59, 130, 246, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.phone-viewport .bottom-metrics-container {
    padding: 12px 16px 16px 16px;
    gap: 10px;
}

.phone-viewport .live-graph-card {
    height: 75px;
}

/* Scan-mode: when the user is mid-scan, give the camera column significantly
   more room. The app container grows from 1600 px to nearly the full viewport
   width and the middle column's flex ratio jumps from 1.8 to 3.0, while the
   side columns shrink so the metrics + instructions remain readable but
   compact. */
/* Scan-mode: keep the full 3-column layout visible — instructions on the
   left, camera + live metrics in the middle, and the live confidence badge
   on the right — but give the middle column noticeably more room than the
   default layout. Side panels are still shown so the user always has
   context for what the numbers mean. */
.app-container {
    transition: max-width 0.4s ease, height 0.4s ease, padding 0.4s ease, gap 0.4s ease;
}
.app-container.scan-mode {
    max-width: min(1850px, 99vw);
    height: 95vh;
    min-height: 880px;
    gap: 12px;
    padding: 12px;
}
.app-container.scan-mode .middle-column { flex: 2.6; }
.app-container.scan-mode .left-column,
.app-container.scan-mode .right-column { flex: 1; }
.app-container.scan-mode .column { padding: 26px; }

/* Left Column */
.brand-logo { letter-spacing: 4px; font-size: 0.9rem; font-weight: 600; color: #bfa780; margin-bottom: 40px; }
.main-title { font-size: 4rem; line-height: 1.1; font-weight: 800; color: #889096; margin-bottom: 40px; }
.section-subtitle { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; }
.steps-list { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.steps-list li { display: flex; align-items: center; gap: 15px; }
.step-number { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--text-muted); font-size: 0.85rem; color: var(--text-muted); }
.step-text { font-size: 1rem; font-weight: 500; }
.info-card { background: var(--card-bg); padding: 20px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); margin-top: auto; }

/* View Transitions */
.view-state {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 100%;
    width: 100%;
}
.view-state.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

/* Biofeedback & Graph Styles */
.live-graph-card { background: white; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); height: 110px; width: 100%; position: relative; overflow: hidden; }
#live-graph-canvas { width: 100%; height: 100%; display: block; }
.pacer-container { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 200px; height: 160px; z-index: 4; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.pacer-container.hidden { display: none; }
.pacer-circle { position: absolute; width: 45px; height: 45px; border-radius: 50%; background: rgba(79, 209, 197, 0.4); border: 3px solid #4fd1c5; transition: transform 0.1s linear; }
.pacer-text { position: relative; color: white; font-weight: 700; font-size: 1.1rem; text-shadow: 0 2px 6px rgba(0,0,0,0.8); z-index: 5; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Onboarding */
#onboarding-view {
    padding: 24px 20px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #111827 0%, #030712 100%);
    color: #f3f4f6;
}
.shen-logo { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; justify-content: center; color: #fff; }
.view-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 20px; text-align: center; }
.illustration-container { margin-bottom: 20px; position: relative; }
.illustration-circle { width: 160px; height: 160px; border-radius: 50%; background: rgba(31, 41, 55, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-md); display: flex; justify-content: center; align-items: center; position: relative; }
.illustration-icon { font-size: 3.2rem; color: var(--accent-blue); }
.floating-icon-1, .floating-icon-2 { position: absolute; font-size: 1.2rem; animation: float 3s ease-in-out infinite; }
.floating-icon-1 { top: 15%; left: 8%; color: #48bb78; }
.floating-icon-2 { bottom: 15%; right: 8%; color: #ed8936; animation-delay: 1.5s; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
.view-description { font-size: 0.88rem; line-height: 1.5; max-width: 85%; margin: 0 auto 20px auto; text-align: center; }
.carousel-dots { display: flex; gap: 8px; margin-bottom: 20px; justify-content: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e0; }
.dot.active { background: var(--accent-blue); }
.primary-btn { background: var(--accent-blue-gradient); color: white; border: none; padding: 12px 30px; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; width: 85%; max-width: 280px; transition: transform 0.2s, box-shadow 0.2s; margin-bottom: 10px; }

/* Adjustable scan-duration selector on the onboarding screen */
.duration-selector { width: 85%; max-width: 320px; margin: 0 auto 16px auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.duration-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); text-align: center; }
.duration-presets { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.duration-chip { background: rgba(31, 41, 55, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.15); color: #9ca3af; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.duration-chip:hover { border-color: #3b82f6; color: #3b82f6; }
.duration-chip.active { background: var(--accent-blue-gradient); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(49, 130, 206, 0.25); }
.duration-custom { display: flex; flex-direction: column; gap: 4px; align-items: center; }
#duration-slider { width: 100%; accent-color: var(--accent-blue); cursor: pointer; }
.duration-readout { display: flex; align-items: baseline; gap: 6px; }
.duration-readout #duration-readout { font-size: 0.9rem; font-weight: 700; color: var(--accent-blue); }
.duration-hint { font-size: 0.65rem; color: var(--text-muted); font-style: italic; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(49, 130, 206, 0.3); }
.secondary-btn { background: transparent; color: var(--accent-blue); border: none; font-size: 1rem; font-weight: 500; cursor: pointer; }

/* Scanning View Layout */
.scan-layout {
    background: linear-gradient(180deg, #e6ecf2 0%, #d3dae3 100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.camera-container-full { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; background: #000; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
#webcam { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transform: scaleX(-1); }
#face-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transform: scaleX(-1); pointer-events: none; }
.face-brackets { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; height: 75%; z-index: 3; pointer-events: none; transition: all 0.3s ease; }
.bracket { position: absolute; width: 80px; height: 80px; border: 6px solid #9e1a1a; transition: border-color 0.3s ease; }
.bracket::after { content: ''; position: absolute; width: 40px; height: 40px; border: 2px solid #9e1a1a; transition: border-color 0.3s ease; }
.face-brackets.detected .bracket, .face-brackets.detected .bracket::after { border-color: #48bb78; }
.bracket.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket.top-left::after { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.bracket.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket.top-right::after { top: 15px; right: 15px; border-left: none; border-bottom: none; }
.bracket.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket.bottom-left::after { bottom: 15px; left: 15px; border-right: none; border-top: none; }
.bracket.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }
.bracket.bottom-right::after { bottom: 15px; right: 15px; border-left: none; border-top: none; }

.scan-header-top { position: relative; z-index: 3; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.status-text-top { color: white; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; }
.stars { color: rgba(255,255,255,0.4); font-size: 1.3rem; }
.stars i.active { color: #fbbf24; }

.scan-action-area-bottom { position: relative; z-index: 3; padding: 20px; display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 15px;}
.bottom-icon { color: rgba(255,255,255,0.7); font-size: 1.8rem; cursor: pointer; }
.left-icon { position: absolute; left: 30px; }
.right-icon { position: absolute; right: 30px; }

.overlay-btn { background: white; color: var(--accent-teal); border: none; padding: 12px 35px; border-radius: 8px; font-size: 1.5rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.overlay-btn.stop { color: var(--accent-teal); }

.linear-progress-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: rgba(255,255,255,0.2); z-index: 3; }
#linear-progress-bar { height: 100%; width: 0%; background: var(--accent-teal); transition: width 1s linear; }

/* Bottom Metrics Area — three live cards (PULSE / STRESS / HRV) plus a
   waveform strip. Sized to be compact and centered under the camera so
   the user's eye lands on the values without scrolling. */
.bottom-metrics-container {
    background: transparent;
    padding: 14px 24px 18px 24px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    flex: 0 0 auto;
}
.live-cards-row { display: flex; gap: 12px; width: 100%; }
.live-card {
    background: white;
    flex: 1;
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    min-height: 72px;
}
.watermark-icon { position: absolute; right: -10px; bottom: -12px; font-size: 3.4rem; color: rgba(226, 232, 240, 0.55); z-index: 1; }
.live-card-title { font-size: 0.72rem; font-weight: 700; color: #4a5568; z-index: 2; position: relative; letter-spacing: 0.6px; }
.live-card-value-container { z-index: 2; position: relative; display: flex; align-items: baseline; gap: 5px; }
.live-card-value { font-size: 1.6rem; font-weight: 800; color: #1a202c; line-height: 1.05; }
.live-card-unit { font-size: 0.75rem; font-weight: 700; color: #4a5568; }
.status-message-card {
    background: white;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2d3748;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.status-message-card { background: white; border-radius: 8px; padding: 18px; text-align: center; font-size: 1.1rem; font-weight: 500; color: #2d3748; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Right Column Specifics */
.right-desc { color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.metric-card { background: #fff; border-radius: 16px; padding: 20px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.metric-card.experimental { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px dashed #cbd5e0; }
.metric-icon { font-size: 1.2rem; color: var(--text-muted); }
.metric-name { font-size: 0.95rem; font-weight: 600; line-height: 1.2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.metric-result { font-size: 1.4rem; font-weight: 800; color: var(--accent-blue); margin-top: 5px; }
.metric-result.beta-value { font-size: 1.05rem; font-weight: 700; color: #718096; }
.beta-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; color: #b7791f; background: #fefcbf; border: 1px solid #f6e05e; border-radius: 4px; padding: 1px 6px; }
.more-markers-card { background: #fff; border-radius: 16px; padding: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }

.confidence-badge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 18px; background: linear-gradient(135deg, #ebf8ff 0%, #f0fff4 100%); border: 1px solid #bee3f8; border-radius: 12px; }
.confidence-badge.low    { background: linear-gradient(135deg, #fffaf0 0%, #fef5e7 100%); border-color: #f6ad55; }
.confidence-badge.medium { background: linear-gradient(135deg, #ebf8ff 0%, #f0fff4 100%); border-color: #bee3f8; }
.confidence-badge.high   { background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%); border-color: #68d391; }
.cb-label   { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); }
.cb-value   { font-size: 1.4rem; font-weight: 800; color: var(--accent-blue); }
.cb-detail  { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; text-align: right; }

.results-disclaimer { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin-top: 14px; padding: 10px 12px; border-left: 3px solid #cbd5e0; background: rgba(0,0,0,0.02); border-radius: 0 8px 8px 0; }

#result-view {
    padding: 40px 24px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #111827 0%, #030712 100%);
    color: #fff;
}
#onboarding-view .view-description,
#result-view .view-description {
    color: #9ca3af;
    text-align: center;
}
.illustration-circle.success { background: #48bb78; color: white; }
.illustration-circle.success .illustration-icon { color: white; }

/* REVERT NOTE: Remove the rules below to revert the face photo display */
#card-ws {
    align-self: start;
}
.face-photo-card {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    height: 180px; /* Tall enough to show the full face without vertical cropping */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #cbd5e0;
    border-radius: 16px;
    background: #000 !important;
}
.face-photo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}