#scanner{--bg:#05050a;--surface:#0a0a12;--surface2:#0f0f1a;--surface3:#141422;--accent:#c8102e;--accent-glow:rgba(200,16,46,.2);--gold:#c9a84c;--gold-dim:rgba(201,168,76,.15);--text:#e8e8f0;--text-muted:#8b8ba6;--text-dim:#62627d;--border:#1a1a2e;--border-light:#252540;--green:#2ecc71;--safe-b:env(safe-area-inset-bottom,0px);--font:system-ui,sans-serif;--mono:ui-monospace,Menlo,monospace;
background:var(--bg);color:var(--text);font-family:var(--font);padding:clamp(48px,7vw,96px) 0;position:relative}
#scanner *{box-sizing:border-box}
#scanner .sc-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
#scanner .sc-head{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between}
#scanner .sc-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-muted)}
#scanner .sc-eyebrow b{color:var(--green);font-weight:500}
#scanner h2{margin:12px 0 0;font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.02em;font-weight:var(--h-weight,600)}
#scanner .sc4-sub{max-width:520px;font-size:15px;line-height:1.6;margin:0}
#scanner .sc4-r-specs{padding:0}
#scanner dl,#scanner dd{margin:0}
#scanner button{border-radius:var(--radius,0)}
#scanner .sc4-term,#scanner .sc4-results{border-radius:var(--radius-lg,0);overflow:hidden}
#scanner .btn-red {
    background: var(--btn, var(--accent));
    color: var(--btn-fg, #fff);
    border: none;
    padding: 16px 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
#scanner .btn-red::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
  }
#scanner .btn-red:hover::after { left: 100%; }
#scanner .btn-red:hover { box-shadow: 0 0 40px var(--accent-glow); }
#scanner .btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    padding: 16px 40px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.3s;
  }
#scanner .btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }
#scanner .terminal-bar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface2);
  }
#scanner .terminal-bar .dots {
    display: flex;
    gap: 6px;
  }
#scanner .terminal-bar .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-light);
  }
#scanner .terminal-bar .dot:first-child { background: var(--accent); }
#scanner .terminal-bar .path {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
  }
#scanner .terminal-body {
    padding: 60px 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
#scanner .terminal-body:hover { background: var(--surface2); }
#scanner .upload-crosshair {
    width: 80px; height: 80px;
    position: relative;
    margin: 0 auto 24px;
  }
#scanner .upload-crosshair::before, #scanner .upload-crosshair::after {
    content: '';
    position: absolute;
    background: var(--accent);
  }
#scanner .upload-crosshair::before {
    width: 1px; height: 100%;
    left: 50%; top: 0;
  }
#scanner .upload-crosshair::after {
    width: 100%; height: 1px;
    top: 50%; left: 0;
  }
#scanner .upload-crosshair .corner {
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--text-muted);
    border-style: solid;
  }
#scanner .corner.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
#scanner .corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
#scanner .corner.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
#scanner .corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
#scanner .terminal-body h3 {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
  }
#scanner .terminal-body p {
    font-size: 12px;
    color: var(--text-dim);
  }
#scanner .terminal-body input { display: none; }
#scanner .preview-active { padding: 20px; }
#scanner .preview-active img {
    max-width: 100%;
    max-height: 350px;
    display: block;
    margin: 0 auto;
  }
#scanner .scan-bar {
    position: absolute;
    left: 0; width: 100%;
    height: 100%;
    display: none;
    top: 0;
    overflow: hidden;
    pointer-events: none;
  }
#scanner .scan-bar.active { display: block; }
#scanner .scan-bar::before {
    content: '';
    position: absolute;
    left: 0; width: 100%; height: 2px;
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow), 0 0 60px var(--accent-glow);
    animation: scanLine 0.4s linear infinite;
  }
#scanner .scan-bar::after {
    content: '';
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200,16,46,0.03) 2px, rgba(200,16,46,0.03) 4px),
      repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(200,16,46,0.02) 3px, rgba(200,16,46,0.02) 4px);
    animation: matrixRain 0.15s steps(8) infinite;
    mix-blend-mode: screen;
  }
@keyframes scanLine{
    0% { top: 0; opacity: 1; }
    100% { top: 100%; opacity: 0.6; }
  }
@keyframes matrixRain{
    0% { background-position: 0 0; }
    100% { background-position: 0 20px; }
  }
#scanner .terminal-footer {
    border-top: 1px solid var(--border);
    padding: 16px 20px;
    display: none;
    justify-content: space-between;
    align-items: center;
    background: var(--surface2);
  }
#scanner .terminal-footer.active { display: flex; }
#scanner .terminal-footer .status {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
  }
#scanner .analyze-btn {
    background: var(--btn, var(--accent));
    color: var(--btn-fg, #fff);
    border: none;
    padding: 10px 28px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.3s;
  }
#scanner .analyze-btn:hover { box-shadow: 0 0 30px var(--accent-glow); }
#scanner .sc4-sub { color: var(--text-muted); font-size: 14px; margin-top: 10px; }
#scanner .sc4 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; align-items: start; }
@media (max-width: 960px){#scanner .sc4 { grid-template-columns: minmax(0, 1fr); }
 }
#scanner .sc4 > * { min-width: 0; }
#scanner .sc4-term { border: 1px solid var(--border-light); background: var(--surface); position: relative; }
#scanner .sc4-term .terminal-bar { display: flex; align-items: center; gap: 12px; }
#scanner .sc4-pill { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--border-light); color: var(--text-muted); white-space: nowrap; }
#scanner .sc4-pill[data-state="loading"] { color: var(--gold); border-color: var(--gold-dim); }
#scanner .sc4-pill[data-state="armed"] { color: var(--green); border-color: rgba(46,204,113,.35); }
#scanner .sc4-pill[data-state="error"] { color: var(--accent); border-color: var(--accent); }
#scanner .sc4-stage { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(200,16,46,.05), transparent 70%); transition: box-shadow .2s, border-color .2s; }
#scanner .sc4-stage.drag { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 60px var(--accent-glow); }
#scanner .sc4-empty { text-align: center; }
#scanner .sc4-empty h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin: 18px 0 22px; }
#scanner .sc4-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#scanner .sc4-actions button { min-height: 48px; }
#scanner .sc4-hint { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 16px; letter-spacing: .5px; }
#scanner .sc4-touch { display: none; }
@media (pointer: coarse){#scanner .sc4-touch { display: inline-flex; }
#scanner span.sc4-touch { display: inline; }
#scanner .sc4-desk { display: none; }
 }
#scanner .sc4-canvas { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; min-width: 0; object-fit: contain; }
#scanner .sc4-samples { border-top: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#scanner .sc4-samples-label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: .5px; }
#scanner .sc4-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#scanner .sc4-chips button { width: 52px; height: 52px; padding: 0; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; border-radius: 2px; transition: border-color .2s, transform .15s; }
#scanner .sc4-chips img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.4) contrast(1.05); transition: filter .2s; }
#scanner .sc4-chips button:hover img { filter: none; }
#scanner .sc4-chips button:hover { border-color: var(--accent); transform: translateY(-1px); }
#scanner .sc4-foot { border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; padding-bottom: calc(14px + var(--safe-b) * 0); }
#scanner .sc4-status { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--text-muted); flex: 1; min-width: 0; }
#scanner .sc4-status span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scanner .sc4-progress { height: 2px; background: var(--border); margin-top: 8px; }
#scanner .sc4-progress div { height: 100%; width: 0; background: var(--gold); transition: width .2s; }
#scanner .sc4-term .analyze-btn { min-height: 40px; }
#scanner .sc4-results { border: 1px solid var(--border-light); background: var(--surface); padding: 28px; position: relative; }
#scanner .sc4-results::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--border-light); }
#scanner .sc4-results[data-verdict="threat"]::before { background: var(--accent); }
#scanner .sc4-results[data-verdict="nsfw"]::before, #scanner .sc4-results[data-verdict="pareidolia"]::before { background: var(--gold); }
#scanner .sc4-results[data-verdict="clear"]::before { background: var(--green); }
#scanner .sc4-r-label { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
#scanner .sc4-r-idle p { color: var(--text-muted); font-size: 14px; line-height: 1.7; }
#scanner .sc4-r-specs { list-style: none; margin-top: 22px; border-top: 1px solid var(--border); }
#scanner .sc4-r-specs li { font-size: 13px; color: var(--text-muted); padding: 12px 0; border-bottom: 1px solid var(--border); }
#scanner .sc4-r-specs b { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); font-weight: 500; display: inline-block; width: 88px; }
#scanner .sc4-verdict { font-size: clamp(34px, 6vw, 46px); font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
#scanner .sc4-results[data-verdict="threat"] .sc4-verdict { color: var(--accent); }
#scanner .sc4-results[data-verdict="nsfw"] .sc4-verdict, #scanner .sc4-results[data-verdict="pareidolia"] .sc4-verdict { color: var(--gold); }
#scanner .sc4-results[data-verdict="clear"] .sc4-verdict { color: var(--green); }
#scanner .sc4-verdict-sub { color: var(--text-muted); font-size: 14px; margin: 10px 0 24px; line-height: 1.5; }
#scanner .sc4-meters { display: grid; gap: 16px; margin-bottom: 22px; }
#scanner .sc4-m-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
#scanner .sc4-m-top b { color: var(--text); font-weight: 700; }
#scanner .sc4-m-bar { height: 6px; background: var(--surface3); overflow: hidden; }
#scanner .sc4-m-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .9s cubic-bezier(.2,.8,.2,1); }
#scanner .sc4-m-bar.gold i { background: var(--gold); }
#scanner .sc4-facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
#scanner .sc4-facts div { padding: 12px 0; border-bottom: 1px solid var(--border); min-width: 0; }
#scanner .sc4-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
#scanner .sc4-facts dd { font-size: 14px; color: var(--text); margin-top: 4px; overflow-wrap: anywhere; }
#scanner .sc4-json { margin-top: 16px; }
#scanner .sc4-json summary { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); cursor: pointer; padding: 8px 0; }
#scanner .sc4-json pre { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); padding: 14px; overflow: auto; max-height: 260px; }
#scanner .sc4-r-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
#scanner .sc4-r-actions button { flex: 1 1 140px; min-height: 48px; padding: 14px 16px; white-space: nowrap; }
#scanner .sc4-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-top: 14px; cursor: pointer; }
#scanner .sc4-check input { accent-color: var(--accent); width: 16px; height: 16px; }
@media (max-width: 600px){#scanner .sc4-stage { min-height: 280px; padding: 16px; }
#scanner .sc4-results { padding: 22px 18px; }
#scanner .sc4-samples { padding: 14px 16px; }
#scanner .sc4-foot { padding: 12px 16px; }
#scanner .sc4-term .terminal-bar .path { display: none; }

  }
#scanner .scan-bar { pointer-events: none; }
#scanner .sc4-credit { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 14px; text-align: center; }
#scanner .sc4-credit a { color: inherit; }
#scanner [hidden] { display: none !important; }

</style>
</head>