@import url("/image-converter/styles.css?v=1");
/* metadata tool additions on top of the converter's base styles */
.note.warn { color: var(--warn); }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 14px; margin-top: 12px; }
.groups .check { align-items: flex-start; }
.groups .check span.what { display: block; font-size: 11px; color: var(--muted); }
.qitem .found { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { font-size: 11px; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--border); color: var(--muted); }
.tag.lvl-personal { color: var(--warn); border-color: #4a3b1f; }
.tag.lvl-hidden { color: #d9a0ff; border-color: #3a2a4a; }
.tag.lvl-rights { color: var(--good); border-color: #2c4a1f; }
.tag.lvl-provenance { color: #7fd4ff; border-color: #1f3a4a; }
.qitem .place { color: var(--text); margin-top: 4px; }
.qitem button.link { background: transparent; border: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.proof { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; overflow-wrap: anywhere; gap: 4px 12px; font-size: 12px; margin-top: 6px; }
.proof .h { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.proof .removed { color: var(--good); }
.proof .kept { color: var(--muted); }
.proof .stayed { color: var(--bad); }
.verdict { margin-top: 6px; font-size: 12px; }
.verdict.ok { color: var(--good); }
.verdict.bad { color: var(--bad); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
.group h3 { margin: 0 0 6px; font-size: 13px; }
.group h3 .lvl { font-weight: 400; font-size: 11px; margin-left: 6px; }
.group ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted); }
.group li { overflow-wrap: anywhere; }
.rawtable { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 10px; }
.rawtable th, .rawtable td { text-align: left; padding: 3px 6px; border-top: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.rawtable th { color: var(--muted); font-weight: 600; }
.thumbcard img { max-width: 160px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border); background: #d8d8d8; }
.mapcard svg { width: 100%; height: auto; border-radius: 8px; display: block; }
.mapcard .sea { fill: #0b1a26; }
.mapcard .land { fill: #2a3444; stroke: #3f4d61; stroke-width: 0.6; }
.mapcard .pin circle { fill: var(--accent); }
.mapcard .pin .halo { fill: rgba(149, 214, 0, 0.25); }
.mapcard .place { font-size: 13px; margin: 8px 0 2px; }
.mapcard .coords { font-size: 12px; color: var(--muted); }
.mapcard .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mapcard .links a { font-size: 12px; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.prompt { white-space: pre-wrap; font-size: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px; max-height: 200px; overflow: auto; }
.qitem { grid-template-columns: 64px minmax(0, 1fr) auto; }
.qitem .thumb { width: 64px; height: 64px; }
.previewcard img { max-width: 100%; max-height: 260px; border-radius: 6px; border: 1px solid var(--border); background: #d8d8d8; display: block; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .presets { grid-template-columns: 1fr; } }
.preset { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: var(--text); font: inherit; cursor: pointer; }
.preset b { font-size: 13px; }
.preset span { font-size: 12px; color: var(--muted); }
.preset:hover { border-color: #5a6273; }
.preset[aria-checked="true"] { border-color: var(--text); background: rgba(230, 232, 238, 0.05); }
.effect { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; margin-top: 12px; }
.effect h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.effect .eff-item { display: inline-block; font-size: 12px; border-radius: 4px; padding: 1px 8px; margin: 0 4px 4px 0; border: 1px solid var(--border); color: var(--muted); }
.effect .rm .eff-item { border-color: #5a2f2f; color: var(--bad); }
.effect .eff-note { grid-column: 1 / -1; margin: 0; }
.groups .check input { accent-color: var(--bad); }
.groups .vb { font-weight: 600; }
.groups .what.sub { color: #6d7382; }
.groups .check.dim { opacity: 0.5; cursor: default; }
.dimlist { margin-top: 8px; }
.pf { border-top: 1px solid var(--border); padding: 8px 0; }
.pf .name { font-weight: 600; font-size: 12px; margin-bottom: 4px; overflow-wrap: anywhere; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 12px; align-items: center; }
.ov { font: inherit; font-size: 11px; border-radius: 4px; padding: 1px 10px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--muted); min-width: 72px; }
.ov.rm { border-color: #5a2f2f; color: var(--bad); background: rgba(255, 107, 107, 0.08); }