Spaces:
Sleeping
Sleeping
| /* | |
| * EWAAST Premium Stylesheet | |
| * Based on Google MedGemma Visual Language | |
| * | |
| * Design Tokens: | |
| * - Primary: #4285F4 (Google Blue) | |
| * - Secondary: #34A853 (Green), #EA4335 (Red), #FBBC04 (Yellow) | |
| * - Background: #F8F9FA (Light Gray) | |
| * - Card: #FFFFFF | |
| * - Text: #202124 (Primary), #5F6368 (Secondary) | |
| * - Rounding: 16px (Primary Cards), 8px (Buttons) | |
| */ | |
| :root { | |
| --color-primary: #4285F4; | |
| --color-secondary-green: #34A853; | |
| --color-secondary-red: #EA4335; | |
| --color-secondary-yellow: #FBBC04; | |
| --color-bg: #F8F9FA; | |
| --color-card: #FFFFFF; | |
| --color-text-primary: #202124; | |
| --color-text-secondary: #5F6368; | |
| --color-border: #DADCE0; | |
| --radius-card: 16px; | |
| --radius-button: 8px; | |
| --radius-pill: 24px; | |
| --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05); | |
| --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| --font-display: 'Google Sans', 'Roboto', sans-serif; | |
| --font-body: 'Roboto', sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--color-bg); | |
| color: var(--color-text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| /* ===== APP CONTAINER ===== */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| /* ===== HEADER ===== */ | |
| .app-header { | |
| background: var(--color-card); | |
| border-bottom: 1px solid var(--color-border); | |
| padding: 12px 24px; | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo-group { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 12px; | |
| } | |
| .logo-text { | |
| font-family: var(--font-display); | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--color-primary); | |
| } | |
| .powered-by { | |
| font-size: 13px; | |
| color: var(--color-text-secondary); | |
| } | |
| .medgemma-badge { | |
| background: linear-gradient(135deg, #EA4335, #FBBC04, #34A853, #4285F4); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| font-weight: 500; | |
| } | |
| .back-link { | |
| color: var(--color-text-secondary); | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: color 0.2s; | |
| } | |
| .back-link:hover { | |
| color: var(--color-primary); | |
| } | |
| .details-btn { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 8px 16px; | |
| border-radius: var(--radius-pill); | |
| text-decoration: none; | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: box-shadow 0.2s; | |
| } | |
| .details-btn:hover { | |
| box-shadow: var(--shadow-hover); | |
| } | |
| /* ===== HERO SECTION ===== */ | |
| .hero-container { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px 24px; | |
| } | |
| .hero-card { | |
| background: var(--color-card); | |
| border-radius: var(--radius-card); | |
| box-shadow: var(--shadow-card); | |
| padding: 48px; | |
| max-width: 680px; | |
| text-align: center; | |
| } | |
| .hero-icon { | |
| margin-bottom: 24px; | |
| } | |
| .hero-title { | |
| font-family: var(--font-display); | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| margin-bottom: 16px; | |
| line-height: 1.3; | |
| } | |
| .hero-description { | |
| font-size: 16px; | |
| color: var(--color-text-secondary); | |
| margin-bottom: 32px; | |
| line-height: 1.7; | |
| } | |
| .hero-description strong { | |
| color: var(--color-primary); | |
| } | |
| .feature-grid { | |
| display: flex; | |
| justify-content: center; | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| .feature-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| background: var(--color-bg); | |
| border-radius: var(--radius-button); | |
| font-size: 14px; | |
| color: var(--color-text-secondary); | |
| } | |
| .feature-icon { | |
| font-size: 18px; | |
| } | |
| .cta-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 16px 32px; | |
| border-radius: var(--radius-pill); | |
| text-decoration: none; | |
| font-family: var(--font-display); | |
| font-size: 16px; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .cta-button:hover { | |
| box-shadow: var(--shadow-hover); | |
| transform: translateY(-2px); | |
| } | |
| .cta-button .arrow { | |
| transition: transform 0.2s; | |
| } | |
| .cta-button:hover .arrow { | |
| transform: translateX(4px); | |
| } | |
| .disclaimer { | |
| margin-top: 24px; | |
| font-size: 12px; | |
| color: var(--color-text-secondary); | |
| background: #FFF3CD; | |
| padding: 12px; | |
| border-radius: var(--radius-button); | |
| } | |
| /* ===== ASSESSMENT PAGE ===== */ | |
| .assess-container { | |
| flex: 1; | |
| padding: 24px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .three-column-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 24px; | |
| height: calc(100vh - 180px); | |
| } | |
| .column { | |
| background: var(--color-card); | |
| border-radius: var(--radius-card); | |
| box-shadow: var(--shadow-card); | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .column-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--color-border); | |
| margin-bottom: 16px; | |
| } | |
| .column-header h2 { | |
| font-family: var(--font-display); | |
| font-size: 18px; | |
| font-weight: 500; | |
| } | |
| .avatar, | |
| .report-icon { | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .agent-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .agent-subtitle { | |
| font-size: 12px; | |
| color: var(--color-text-secondary); | |
| } | |
| /* ===== CLINICIAN COLUMN ===== */ | |
| .input-section { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .input-label { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--color-text-primary); | |
| } | |
| .upload-area { | |
| border: 2px dashed var(--color-border); | |
| border-radius: var(--radius-button); | |
| padding: 24px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: border-color 0.2s, background 0.2s; | |
| min-height: 160px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--color-primary); | |
| background: rgba(66, 133, 244, 0.05); | |
| } | |
| .upload-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--color-text-secondary); | |
| } | |
| .upload-icon { | |
| font-size: 32px; | |
| } | |
| .preview-image { | |
| max-width: 100%; | |
| max-height: 200px; | |
| border-radius: 8px; | |
| display: none; | |
| } | |
| .context-input { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-button); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| .context-input:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2); | |
| } | |
| .assess-button { | |
| background: var(--color-primary); | |
| color: white; | |
| border: none; | |
| padding: 14px 24px; | |
| border-radius: var(--radius-button); | |
| font-family: var(--font-display); | |
| font-size: 15px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| margin-top: auto; | |
| } | |
| .assess-button:disabled { | |
| background: var(--color-border); | |
| cursor: not-allowed; | |
| } | |
| .assess-button:not(:disabled):hover { | |
| box-shadow: var(--shadow-hover); | |
| } | |
| /* ===== AGENT COLUMN ===== */ | |
| .thinking-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| padding: 16px 0; | |
| } | |
| .thinking-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-button); | |
| background: var(--color-bg); | |
| font-size: 14px; | |
| transition: all 0.3s; | |
| } | |
| .step-status { | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-size: 12px; | |
| } | |
| .step-status.pending { | |
| color: var(--color-text-secondary); | |
| } | |
| .step-status.active { | |
| color: var(--color-primary); | |
| animation: pulse 1.5s infinite; | |
| } | |
| .step-status.done { | |
| background: var(--color-secondary-green); | |
| color: white; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| opacity: 0.7; | |
| } | |
| } | |
| /* ===== REPORT COLUMN ===== */ | |
| .report-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| } | |
| .report-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| gap: 8px; | |
| color: var(--color-text-secondary); | |
| } | |
| .placeholder-icon { | |
| font-size: 48px; | |
| opacity: 0.5; | |
| } | |
| /* ===== REPORT CARDS ===== */ | |
| .report-card { | |
| background: var(--color-bg); | |
| border-radius: var(--radius-button); | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| } | |
| .report-card-header { | |
| font-family: var(--font-display); | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--color-text-secondary); | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .report-card-value { | |
| font-size: 18px; | |
| font-weight: 500; | |
| color: var(--color-text-primary); | |
| } | |
| .report-card.urgent { | |
| border-left: 4px solid var(--color-secondary-red); | |
| } | |
| .report-card.mst { | |
| border-left: 4px solid var(--color-primary); | |
| } | |
| .report-card.stage { | |
| border-left: 4px solid var(--color-secondary-yellow); | |
| } | |
| .report-card.care { | |
| border-left: 4px solid var(--color-secondary-green); | |
| } | |
| /* ===== FOOTER ===== */ | |
| .app-footer { | |
| background: var(--color-card); | |
| border-top: 1px solid var(--color-border); | |
| padding: 16px 24px; | |
| text-align: center; | |
| font-size: 13px; | |
| color: var(--color-text-secondary); | |
| } | |
| .app-footer a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| } | |
| .app-footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* ===== RESPONSIVE ===== */ | |
| @media (max-width: 1024px) { | |
| .three-column-layout { | |
| grid-template-columns: 1fr; | |
| height: auto; | |
| } | |
| .column { | |
| min-height: 400px; | |
| } | |
| .feature-grid { | |
| flex-wrap: wrap; | |
| } | |
| } |