.wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.small { font-size: 13px; }
.link { color: var(--accent); text-decoration: underline; }

/* drop zone */
.drop {
  border: 2px dashed #2b3c50; border-radius: 20px; padding: 56px 20px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(94,234,212,.04), transparent); transition: .2s; outline: none;
}
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); background: rgba(94,234,212,.07); }
.drop.over { transform: scale(1.01); }
.drop-icon { font-size: 44px; }
.drop h2 { margin: 8px 0 4px; font-size: 24px; }
.drop p { margin: 4px 0; }
.drop.compact { padding: 14px; border-radius: 14px; }
.drop.compact .drop-icon, .drop.compact .small { display: none; }
.drop.compact h2 { font-size: 16px; display: inline; margin-right: 6px; }
.drop.compact p { display: inline; }

/* layout */
.workspace { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 860px) { .workspace { grid-template-columns: 1fr; } }

.files { position: sticky; top: 74px; display: grid; gap: 10px; }
@media (max-width: 860px) { .files { position: static; } }
.files-head { display: flex; justify-content: space-between; align-items: center; }
#file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
#file-list li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 14px; }
#file-list li:hover { background: var(--panel-2); }
#file-list li.sel { background: #1e2c3c; outline: 1px solid #2f4258; }
.fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.high { background: var(--high); box-shadow: 0 0 8px var(--high); }
.dot.med { background: var(--med); }
.dot.ok { background: var(--ok); }
.batch { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); }

.detail { display: grid; gap: 14px; min-width: 0; }
.hero { display: grid; grid-template-columns: 240px 1fr; gap: 18px; }
@media (max-width: 600px) { .hero { grid-template-columns: 1fr; } }
.preview { background: #0a1018 repeating-conic-gradient(#121b26 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 10px; display: grid; place-items: center; min-height: 160px; overflow: hidden; }
.preview img { max-width: 100%; max-height: 260px; display: block; }
.hero h2 { margin: 0; font-size: 20px; word-break: break-all; }
.hero-info p { margin: 4px 0 10px; }

.verdict { padding: 10px 12px; border-radius: 10px; font-weight: 550; margin-bottom: 10px; border: 1px solid; }
.verdict.high { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.4); color: #fecaca; }
.verdict.med { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); color: #fde68a; }
.verdict.ok { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.35); color: #bbf7d0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--text); background: var(--panel-2); }
.chip b { margin-left: 2px; }
.chip.high { border-color: rgba(248,113,113,.5); }
.chip.med { border-color: rgba(251,191,36,.45); }
.chip.low { border-color: rgba(96,165,250,.4); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.note { padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; font-size: 14px; border-left: 3px solid; background: var(--panel); }
.note.high { border-color: var(--high); }
.note.med { border-color: var(--med); }
.note.low { border-color: var(--low); color: var(--muted); }

.card h3 { margin: 0 0 8px; font-size: 16px; }
.card summary { cursor: pointer; font-weight: 600; }
.gps-grid { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.coords { font-size: 15px; display: grid; gap: 2px; white-space: pre; }
.mini-map canvas { border-radius: 8px; border: 1px solid var(--line); display: block; }
#thumb { max-width: 240px; border-radius: 8px; border: 1px solid var(--line); }

.group summary { font-size: 15px; }
.table-wrap { overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
td.k { width: 38%; color: var(--muted); white-space: nowrap; }
td.v { font-family: var(--mono); font-size: 13px; word-break: break-word; }
tr:target td { background: rgba(94,234,212,.08); }
.tag { display: inline-block; width: 22px; text-align: center; border-radius: 6px; }
.tag.high { background: rgba(248,113,113,.15); }
.tag.med { background: rgba(251,191,36,.12); }
.tag.low { background: rgba(96,165,250,.1); }

#xmp-raw { white-space: pre-wrap; word-break: break-all; font-size: 12px; max-height: 360px; overflow: auto; color: var(--muted); }
#structure { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; margin-top: 10px; }
.seg { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line); padding: 2px 0; }

.explain { margin-top: 48px; }
.explain h2 { font-size: 20px; }
.explain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.explain-grid > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.explain-grid h3 { margin: 0 0 4px; font-size: 15px; }
.explain-grid p { margin: 0; font-size: 14px; }

.tiny { font-size: 12px; margin: 0; }
#vpreview { max-width: 100%; max-height: 260px; display: block; border-radius: 8px; }
.doc-tile { font-size: 56px; text-align: center; line-height: 1.1; }
.doc-tile small { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* what a stranger could learn */
.stranger h3 { display: flex; align-items: center; gap: 8px; }
.learn { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.learn li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-size: 15px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border-left: 3px solid var(--line); }
.learn li.high { border-left-color: var(--high); }
.learn li.med { border-left-color: var(--med); }
.learn li.low { border-left-color: var(--low); }
.learn .ico { font-size: 18px; }
.learn.clean li { border-left-color: var(--ok); }

/* before / after */
.compare .cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 6px 0 12px; }
.compare .side { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.compare .side b { font-size: 22px; display: block; }
.compare .side.after b { color: var(--ok); }
.compare .arrow { font-size: 22px; color: var(--muted); }
.removed { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.removed span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.3); text-decoration: line-through; text-decoration-color: rgba(248,113,113,.7); color: var(--muted); }
.kept span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.3); color: var(--muted); }
.kept { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }