@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap');

#il-section {
  --il-bg:#020d14; --il-surface:#061824; --il-surface2:#0a2233;
  --il-border:#0d3a52; --il-accent:#00c8e8; --il-accent2:#00e8c8;
  --il-text:#daf4fc; --il-muted:#4a8fa8;
  background:var(--il-bg); position:relative; overflow:hidden; margin-top:40px;
}
#il-section::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 70% 50% at 5% 0%,rgba(0,200,232,0.10) 0%,transparent 60%),
              radial-gradient(ellipse 50% 40% at 95% 100%,rgba(0,232,200,0.07) 0%,transparent 60%);
}
#il-section::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(0,200,232,0.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,200,232,0.03) 1px,transparent 1px);
  background-size:40px 40px;
}
.il-app {
  position:relative; z-index:1; max-width:520px; margin:0 auto;
  padding:28px 20px 48px; display:flex; flex-direction:column; gap:18px;
}
.il-header { display:flex; align-items:center; justify-content:space-between; }
.il-logo { display:flex; align-items:center; gap:10px; }
.il-logo-icon {
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,#00c8e8,#00e8c8);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 0 22px rgba(0,200,232,0.28);
}
.il-logo-text {
  font-family:'Syne',sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.5px;
  background:linear-gradient(90deg,#00c8e8,#00e8c8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.il-badge {
  font-size:10px; font-weight:500; padding:4px 10px; border-radius:20px;
  border:1px solid var(--il-border); color:var(--il-muted);
  letter-spacing:0.8px; text-transform:uppercase; background:var(--il-surface);
}
.il-start-screen {
  background:var(--il-surface); border-radius:20px;
  border:1px solid var(--il-border); padding:40px 20px; text-align:center;
}
.il-start-screen p { color:var(--il-muted); font-size:14px; margin-bottom:20px; line-height:1.7; }
.il-start-btn {
  padding:14px 32px; border-radius:14px; border:none;
  background:linear-gradient(135deg,#00c8e8,#00e8c8); color:#020d14;
  font-family:'Syne',sans-serif; font-weight:800; font-size:15px;
  cursor:pointer; transition:all 0.2s; box-shadow:0 4px 28px rgba(0,200,232,0.28);
}
.il-start-btn:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(0,200,232,0.4); }
.il-mode-toggle {
  display:flex; gap:6px; background:var(--il-surface);
  padding:5px; border-radius:14px; border:1px solid var(--il-border);
}
.il-mode-btn {
  flex:1; padding:9px 12px; border-radius:10px; border:none;
  background:transparent; color:var(--il-muted); font-size:13px; cursor:pointer;
  transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:6px;
}
.il-mode-btn.active {
  background:linear-gradient(135deg,rgba(0,200,232,0.15),rgba(0,232,200,0.08));
  color:var(--il-accent); border:1px solid rgba(0,200,232,0.3);
  box-shadow:0 0 12px rgba(0,200,232,0.1);
}
.il-camera-section {
  background:var(--il-surface); border-radius:20px;
  border:1px solid var(--il-border); overflow:hidden;
}
.il-viewfinder {
  position:relative; width:100%; aspect-ratio:4/3;
  background:#000d14; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
#il-videoEl { width:100%; height:100%; object-fit:cover; display:block; }
#il-previewImg { width:100%; height:100%; object-fit:cover; display:none; }
.il-scan-overlay { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.3s; }
.il-scan-overlay.active { opacity:1; }
.il-scan-line {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#00c8e8,transparent);
  top:0; animation:ilScanDown 2s ease-in-out infinite;
  box-shadow:0 0 14px #00c8e8,0 0 4px #00e8c8;
}
@keyframes ilScanDown { 0%{top:0%;opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%;opacity:0;} }
.il-corner {
  position:absolute; width:28px; height:28px;
  border-color:#00c8e8; border-style:solid;
  filter:drop-shadow(0 0 4px #00c8e8);
}
.il-corner.tl { top:14px; left:14px; border-width:2px 0 0 2px; }
.il-corner.tr { top:14px; right:14px; border-width:2px 2px 0 0; }
.il-corner.bl { bottom:14px; left:14px; border-width:0 0 2px 2px; }
.il-corner.br { bottom:14px; right:14px; border-width:0 2px 2px 0; }
.il-no-camera { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--il-muted); font-size:14px; }
.il-no-camera span { font-size:40px; }
.il-camera-controls {
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:var(--il-surface2); border-top:1px solid var(--il-border);
}
.il-btn-sec {
  background:transparent; border:1px solid var(--il-border); color:var(--il-muted);
  padding:8px 14px; border-radius:10px; font-size:13px; cursor:pointer; transition:all 0.2s;
}
.il-btn-sec:hover { border-color:var(--il-accent); color:var(--il-accent); }
.il-shutter {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#00c8e8,#00e8c8); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;
  box-shadow:0 0 28px rgba(0,200,232,0.28),0 4px 16px rgba(0,0,0,0.5);
  transition:transform 0.15s,box-shadow 0.15s;
}
.il-shutter:hover { transform:scale(1.06); box-shadow:0 0 40px rgba(0,200,232,0.4); }
.il-shutter:active { transform:scale(0.94); }
.il-shutter:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.il-upload-zone {
  border:1.5px dashed var(--il-border); border-radius:16px; padding:32px 28px;
  text-align:center; cursor:pointer; transition:all 0.25s;
  background:var(--il-surface); position:relative; overflow:hidden;
}
.il-upload-zone:hover { border-color:var(--il-accent); background:rgba(0,200,232,0.04); }
.il-upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.il-upload-zone .il-uicon { font-size:36px; margin-bottom:10px; }
.il-upload-zone p { font-size:14px; color:var(--il-muted); line-height:1.6; }
.il-upload-zone strong { color:var(--il-accent); }
.il-quick-prompts { display:flex; flex-wrap:wrap; gap:8px; }
.il-chip {
  padding:6px 13px; border-radius:20px; border:1px solid var(--il-border);
  background:var(--il-surface); color:var(--il-muted); font-size:12px;
  cursor:pointer; transition:all 0.2s;
}
.il-chip:hover { border-color:var(--il-accent); color:var(--il-accent); background:rgba(0,200,232,0.05); }
.il-prompt-area {
  background:var(--il-surface); border-radius:16px;
  border:1px solid var(--il-border); overflow:hidden;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.il-prompt-area:focus-within { border-color:rgba(0,200,232,0.5); box-shadow:0 0 16px rgba(0,200,232,0.1); }
.il-prompt-label { padding:12px 16px 0; font-size:10px; color:var(--il-muted); letter-spacing:1px; text-transform:uppercase; }
#il-promptInput {
  width:100%; background:transparent; border:none; outline:none;
  color:var(--il-text); font-size:14px; padding:8px 16px 14px;
  resize:none; min-height:60px; line-height:1.7;
}
#il-promptInput::placeholder { color:var(--il-muted); }
#il-analyzeBtn {
  width:100%; padding:16px; border-radius:14px; border:none;
  background:linear-gradient(135deg,#00c8e8,#00e8c8); color:#020d14;
  font-family:'Syne',sans-serif; font-weight:800; font-size:16px; letter-spacing:0.5px;
  cursor:pointer; transition:all 0.2s; box-shadow:0 4px 28px rgba(0,200,232,0.28);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
#il-analyzeBtn:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(0,200,232,0.4); }
#il-analyzeBtn:active { transform:translateY(0); }
#il-analyzeBtn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }
.il-spinner {
  width:18px; height:18px; border:2px solid rgba(2,13,20,0.3);
  border-top-color:#020d14; border-radius:50%;
  animation:ilSpin 0.7s linear infinite; display:none;
}
@keyframes ilSpin { to { transform:rotate(360deg); } }
.il-error-box {
  background:rgba(0,200,232,0.05); border:1px solid rgba(0,200,232,0.2);
  border-radius:12px; padding:13px 16px; font-size:14px; color:#f08080; display:none;
}
.il-history-label {
  font-size:11px; color:var(--il-muted); letter-spacing:1px; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.il-history-label::after { content:''; flex:1; height:1px; background:var(--il-border); }
.il-result-card {
  background:var(--il-surface); border-radius:20px;
  border:1px solid var(--il-border); overflow:hidden; animation:ilFadeUp 0.4s ease;
}
@keyframes ilFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.il-result-header {
  padding:12px 16px; border-bottom:1px solid var(--il-border);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,200,232,0.05);
}
.il-result-hl { display:flex; align-items:center; gap:10px; }
.il-result-num {
  font-family:'Syne',sans-serif; font-weight:800; font-size:13px;
  color:var(--il-accent); letter-spacing:1px;
  background:rgba(0,200,232,0.1); border:1px solid rgba(0,200,232,0.25);
  padding:2px 10px; border-radius:20px;
}
.il-result-dot {
  width:7px; height:7px; border-radius:50%; background:#00e8c8;
  box-shadow:0 0 8px #00e8c8; animation:ilPulse 2s ease infinite;
}
@keyframes ilPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.il-result-meta { font-size:11px; color:var(--il-muted); }
.il-result-tw { position:relative; border-bottom:1px solid var(--il-border); }
.il-result-thumb { width:100%; max-height:180px; object-fit:cover; display:block; }
.il-result-tbadge {
  position:absolute; bottom:8px; left:10px;
  background:rgba(2,13,20,0.75); border:1px solid var(--il-border);
  border-radius:8px; padding:3px 10px; font-size:11px; color:var(--il-muted);
  backdrop-filter:blur(4px);
}
.il-result-body {
  padding:18px 18px 20px; font-size:14px; line-height:1.85;
  color:var(--il-text); white-space:pre-wrap; word-break:break-word;
}
#il-canvas { display:none; }
.il-pdf-status {
  margin-top:10px; background:var(--il-surface2); border:1px solid var(--il-border);
  border-radius:12px; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.il-pdf-dl {
  display:none; padding:7px 16px; border-radius:8px;
  border:1px solid var(--il-accent); background:transparent;
  color:var(--il-accent); font-size:12px; cursor:pointer; transition:all 0.2s;
}
.il-pdf-dl:hover { background:rgba(0,200,232,0.1); }