@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --bg: #0b0d10;
  --fg: #e9eef3;
  --muted: #a7b4c2;
  --card: #151a20;
  --accent: #7cdfff;
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #f87171;

  --font-display: 'Google Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); -webkit-font-smoothing: antialiased; }

header { padding: 28px 20px 8px; text-align: center; }
h1 { 
  margin: 0; 
  font-family: var(--font-display); 
  font-size: var(--text-4xl);     
  font-weight: 800;             
}
.sub { margin: 6px 0 0; color: var(--muted); }

main { max-width: 1200px; padding: 20px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
@media (max-width: 960px) { main { grid-template-columns: 1fr; } }

.panel { background: var(--card); border: 1px solid #222a33; border-radius: 16px; padding: 20px; }
.controls-panel { height: fit-content; }
.results-panel { min-height: 500px; }

h2 { 
  margin: 0 0 20px 0; 
  font-family: var(--font-display);  
  font-size: var(--text-2xl);     
  font-weight: 700;                
  color: var(--accent); 
}

h3 { 
  margin: 0 0 12px 0; 
  font-family: var(--font-display); 
  font-size: var(--text-lg);        
  font-weight: 700;                
  color: var(--muted); 
}

.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }

label.file { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  padding: 10px 14px; 
  background: #1b2330; 
  border: 1px solid #25465c; 
  border-radius: 12px; 
  color: var(--fg); 
  cursor: pointer; 
  transition: all 0.2s ease;
  font-family: var(--font-display); 
  font-size: var(--text-base);      
  font-weight: 600;               
 }
label.file:hover { background: #1f2a3a; border-color: #3a4450; }
label.file input { display: none; }
label.file span { color: var(--fg); }

button { 
  padding: 10px 14px; 
  background: #1b3446; 
  border: 1px solid #25465c; 
  border-radius: 12px; 
  color: var(--fg); 
  cursor: pointer; 
  transition: all 0.2s ease; 
  font-family: var(--font-display); 
  font-size: var(--text-base);      
  font-weight: 600;               
}

button:hover:not([disabled]) { background: #1f3a4e; border-color: #2a4e66; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Special styling for enhanced analysis button */
#enhancedBtn { 
  background: linear-gradient(135deg, #1b3446 0%, #2a4e66 100%); 
  border-color: #3a5a7a;
  font-weight: 500;
}
#enhancedBtn:hover:not([disabled]) { 
  background: linear-gradient(135deg, #1f3a4e 0%, #2f5a7a 100%); 
  border-color: #4a6a8a;
}

.preview { margin-bottom: 20px; }
.preview img { width: 100%; max-height: 300px; object-fit: contain; background: #0f141a; border: 1px dashed #2b3643; border-radius: 12px; }

/* Results Panel Styles */
.result-main { display: flex; flex-direction: column; gap: 24px; position: relative; }

/* Loading overlay */
.loading-overlay { position: absolute; inset: 0; background: rgba(11, 13, 16, 0.7); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; z-index: 10; }
.spinner { width: 28px; height: 28px; border: 3px solid #2a3340; border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
.loading-text { color: var(--muted); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

.prediction-display { 
  background: linear-gradient(135deg, #1a2330 0%, #151a20 100%);
  border: 1px solid #2a3340;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.prediction-label { margin-bottom: 16px; }
.label-text { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.prediction-value { 
  display: block; 
  font-family: var(--font-display); 
  font-size: var(--text-4xl);   
  font-weight: 600; 
  color: var(--success);
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

.confidence-display { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
}
.confidence-value { 
  font-size: 18px; 
  font-weight: 500; 
  color: var(--accent);
  background: rgba(124, 223, 255, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(124, 223, 255, 0.3);
}

.result-details { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 16px; 
}

.detail-item { 
  background: #1a2330; 
  border: 1px solid #2a3340; 
  border-radius: 12px; 
  padding: 16px; 
  text-align: center; 
}

.detail-label { 
  display: block; 
  font-size: 12px; 
  color: var(--muted); 
  margin-bottom: 8px; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
}

.detail-value { 
  display: block; 
  font-size: 18px; 
  font-weight: 600; 
  color: var(--fg); 
}

.detail-unit { 
  font-size: 12px; 
  color: var(--muted); 
  margin-left: 4px; 
}

footer { 
  text-align: center;
  color: var(--muted);
  padding: 18px;
  font-family: var(--font-display); 
  font-size: var(--text-base);      
  font-weight: 600;               
 }

footer .sub {
  display: inline;
  margin-left: 4px;
}

footer a {
  color: var(--muted);
  font-family: var(--font-display); 
  font-size: var(--text-base);      
  font-weight: 600;            
}

code { background: #0e1217; padding: 1px 5px; border-radius: 6px; }
          
.perf-summary { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.perf-pill { background: #1a2330; border: 1px solid #2a3340; border-radius: 999px; padding: 6px 10px; font-size: 12px; color: var(--fg); }
          
.hidden { display: none; }
          
/* Outcome Analysis Table */
.device-table { margin-top: 16px; }
.device-table h3 { margin: 0 0 10px 0; color: var(--accent); }

#perfTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#perfTable thead th { text-align: left; padding: 8px; background: #1a2330; border-bottom: 1px solid #2a3340; }
#perfTable tbody td { padding: 8px; border-bottom: 1px solid #202a34; color: var(--fg); }
#perfTable tbody tr:nth-child(even) td { background: #141b22; }

/* Feedback Section */
.feedback-section { margin-top: 20px; padding: 16px; background: #1a2330; border: 1px solid #2a3340; border-radius: 12px; }
.feedback-section h3 { margin: 0 0 12px 0; color: var(--accent); }
.feedback-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.feedback-btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s ease; }
.feedback-correct { background: var(--success); color: #000; }
.feedback-correct:hover { background: #22c55e; }
.feedback-incorrect { background: var(--error); color: #fff; }
.feedback-incorrect:hover { background: #dc2626; }
#feedbackDetails { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#feedbackDetails label { color: var(--muted); font-size: 14px; }
#correctLabel { padding: 8px 12px; background: #0f141a; border: 1px solid #2a3340; border-radius: 6px; color: var(--fg); }
#feedbackSubmit { padding: 8px 16px; background: var(--accent); color: #000; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }
#feedbackSubmit:hover { background: #5bc0de; }