static/styles.css

/* ─────────────────────────────────────────────────────────────────
   GharScan — styles.css
   Concrete-grey inspection report aesthetic.
   Mobile-first. Custom UI for Off-Brand badge.
───────────────────────────────────────────────────────────────── */

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary:      #0f1114;
  --bg-card:         #181b20;
  --bg-elevated:     #20242b;
  --bg-input:        #1a1d23;

  --border:          #2a2f38;
  --border-subtle:   #1e2229;

  --text-primary:    #e8eaed;
  --text-secondary:  #8b9099;
  --text-muted:      #555d6b;
  --text-mono:       #6fb3e0;

  --accent-blue:     #3b82f6;
  --accent-green:    #22c55e;
  --accent-yellow:   #f59e0b;
  --accent-orange:   #ef4444;
  --accent-dark-red: #7f1d1d;

  --severity-1:  #22c55e;
  --severity-2:  #84cc16;
  --severity-3:  #f59e0b;
  --severity-4:  #ef4444;
  --severity-5:  #991b1b;

  --font-sans:  'Inter', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;

  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background:  var(--bg-primary);
  color:       var(--text-primary);
  min-height:  100vh;
  font-size:   15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding:       14px 16px;
  position:      sticky;
  top:           0;
  z-index:       100;
}
.header-inner {
  max-width:     640px;
  margin:        0 auto;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon   { font-size: 26px; }
.brand-name   { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.brand-tagline { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.model-badge {
  display:        flex;
  align-items:    center;
  gap:            6px;
  background:     var(--bg-elevated);
  border:         1px solid var(--border);
  border-radius:  20px;
  padding:        4px 10px;
  font-size:      11px;
  color:          var(--text-mono);
  font-family:    var(--font-mono);
}
.model-dot {
  width:           7px;
  height:          7px;
  border-radius:   50%;
  background:      var(--accent-green);
  animation:       pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Main layout ─────────────────────────────────────────────── */
.app-main {
  max-width:  640px;
  margin:     0 auto;
  padding:    20px 16px 60px;
}
.section-label {
  font-size:   11px;
  font-weight: 500;
  color:       var(--text-mono);
  letter-spacing: .06em;
  margin-bottom: 10px;
  font-family: var(--font-mono);
}

/* ── Capture section ──────────────────────────────────────────── */
.capture-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  margin-bottom: 14px;
}
.capture-preview {
  width:       100%;
  aspect-ratio: 4/3;
  background:  var(--bg-input);
  display:     flex;
  align-items: center;
  justify-content: center;
  overflow:    hidden;
  border-bottom: 1px solid var(--border);
}
.capture-placeholder {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  color:          var(--text-muted);
  padding:        20px;
  text-align:     center;
}
.placeholder-icon { font-size: 40px; }
.capture-placeholder p { font-size: 13px; max-width: 240px; }

.preview-image {
  width:        100%;
  height:       100%;
  object-fit:   cover;
}

.capture-actions {
  display:   flex;
  gap:       10px;
  padding:   14px;
}
.language-toggle {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        0 14px 14px;
  font-size:      12px;
  color:          var(--text-secondary);
}
.lang-btn {
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  border-radius: 4px;
  padding:       3px 10px;
  font-size:     12px;
  cursor:        pointer;
}
.lang-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         10px 16px;
  border-radius:   var(--radius-md);
  font-size:       14px;
  font-weight:     500;
  cursor:          pointer;
  border:          none;
  transition:      background 0.15s, opacity 0.15s;
  text-decoration: none;
  white-space:     nowrap;
  flex:            1;
}
.btn-primary {
  background: var(--accent-blue);
  color:      #fff;
}
.btn-primary:hover { background: #2563eb; }

.btn-secondary {
  background: var(--bg-elevated);
  color:      var(--text-primary);
  border:     1px solid var(--border);
}
.btn-secondary:hover { background: #252930; }

.btn-analyze {
  width:          100%;
  padding:        14px;
  font-size:      15px;
  font-weight:    600;
  background:     linear-gradient(135deg, #2563eb, #1d4ed8);
  color:          #fff;
  border-radius:  var(--radius-md);
  margin-bottom:  0;
  cursor:         pointer;
  border:         none;
  transition:     opacity 0.15s, transform 0.1s;
}
.btn-analyze:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-analyze:not(:disabled):hover { opacity: 0.9; }
.btn-full { width: 100%; margin-top: 12px; }

/* ── Loading section ──────────────────────────────────────────── */
.loading-section { margin-top: 24px; }
.loading-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       28px 20px;
  text-align:    center;
}
.loading-spinner {
  width:   44px;
  height:  44px;
  border:  3px solid var(--border);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.loading-sub   { font-size: 12px; color: var(--text-mono); margin-bottom: 20px; }

.loading-steps {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  text-align:     left;
}
.load-step {
  padding:       10px 14px;
  border-radius: var(--radius-sm);
  font-size:     13px;
  color:         var(--text-muted);
  background:    var(--bg-elevated);
  border-left:   3px solid transparent;
  transition:    all 0.3s;
}
.load-step.active {
  color:         var(--text-primary);
  border-color:  var(--accent-blue);
}
.load-step.done {
  color:         var(--accent-green);
  border-color:  var(--accent-green);
}

/* ── Report section ──────────────────────────────────────────── */
.report-section { margin-top: 8px; }

.structural-banner {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  border-radius: var(--radius-md);
  padding:       14px 16px;
  margin-bottom: 12px;
  font-size:     14px;
}
.structural-banner.danger {
  background:  rgba(127,29,29,0.25);
  border:      1px solid #7f1d1d;
  color:       #fca5a5;
}
.structural-banner.safe {
  background:  rgba(21,128,61,0.2);
  border:      1px solid #166534;
  color:       #86efac;
}
.banner-icon { font-size: 20px; flex-shrink: 0; }

.report-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       20px;
  margin-bottom: 12px;
  box-shadow:    var(--shadow-card);
}
.report-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   16px;
  gap:             12px;
}
.defect-label {
  font-size:   18px;
  font-weight: 700;
  display:     block;
  line-height: 1.2;
}
.defect-type-sub {
  font-size:  11px;
  color:      var(--text-secondary);
  display:    block;
  margin-top: 3px;
}

.severity-chip {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  background:     var(--bg-elevated);
  border-radius:  var(--radius-md);
  padding:        8px 14px;
  min-width:      70px;
  flex-shrink:    0;
  border:         2px solid var(--border);
}
.severity-num  { font-size: 22px; font-weight: 700; font-family: var(--font-mono); line-height: 1; }
.severity-word { font-size: 10px; color: var(--text-secondary); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }

/* Severity meter */
.severity-meter-wrap { margin-bottom: 16px; }
.severity-track {
  height:        8px;
  background:    var(--bg-elevated);
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 4px;
}
.severity-fill {
  height:        100%;
  border-radius: 4px;
  transition:    width 0.6s cubic-bezier(.22,.68,0,1.2), background 0.4s;
}
.severity-ticks {
  display:         flex;
  justify-content: space-between;
  font-size:       10px;
  color:           var(--text-muted);
  font-family:     var(--font-mono);
}

.report-divider { height: 1px; background: var(--border-subtle); margin: 14px 0; }

.report-row {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-bottom:  12px;
}
.row-key {
  font-size:   10px;
  color:       var(--text-mono);
  letter-spacing: .08em;
  font-weight: 500;
}
.row-val { font-size: 14px; color: var(--text-primary); line-height: 1.5; }

.action-highlight {
  background:    rgba(59,130,246,0.08);
  border:        1px solid rgba(59,130,246,0.2);
  border-radius: var(--radius-md);
  padding:       12px;
  margin-bottom: 12px;
}
.action-text { font-weight: 500; color: #93c5fd; }
.urgency-text { font-weight: 500; }

/* Cost block */
.cost-block {
  background:    var(--bg-elevated);
  border-radius: var(--radius-md);
  padding:       14px;
  margin-bottom: 12px;
}
.cost-main {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  margin-bottom: 8px;
}
.cost-rupee { font-size: 22px; font-weight: 700; color: var(--accent-green); font-family: var(--font-mono); }
.cost-range { font-size: 20px; font-weight: 700; color: var(--accent-green); font-family: var(--font-mono); }
.professional-line {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--text-secondary);
}

/* Monsoon warning */
.monsoon-warning {
  background:    rgba(234,179,8,0.1);
  border:        1px solid rgba(234,179,8,0.3);
  border-radius: var(--radius-sm);
  padding:       10px 14px;
  font-size:     13px;
  color:         #fde68a;
  margin-top:    10px;
}

/* Liability banner (Watch-Out 2) */
.liability-banner {
  display:       flex;
  gap:           10px;
  background:    rgba(239,68,68,0.1);
  border:        1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-md);
  padding:       14px;
  font-size:     12px;
  color:         #fca5a5;
  margin-bottom: 10px;
  line-height:   1.5;
}
.disclaimer-card {
  background:    var(--bg-elevated);
  border-left:   3px solid var(--accent-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding:       10px 14px;
  font-size:     12px;
  color:         var(--text-secondary);
  margin-bottom: 10px;
  line-height:   1.5;
}

/* ── Error state ──────────────────────────────────────────────── */
.error-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       32px 20px;
  text-align:    center;
}
.error-icon  { font-size: 40px; }
.error-title { font-size: 17px; font-weight: 600; margin: 12px 0 6px; }
.error-msg   { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  text-align:    center;
  padding:       24px 16px;
  font-size:     11px;
  color:         var(--text-muted);
  border-top:    1px solid var(--border-subtle);
  line-height:   1.8;
}
.site-footer a { color: var(--text-secondary); }
.site-footer .disclaimer-footer { color: var(--text-muted); margin-top: 4px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (min-width: 480px) {
  .capture-actions { flex-direction: row; }
}
@media (max-width: 360px) {
  .brand-tagline { display: none; }
  .model-badge   { display: none; }
}