:root { color-scheme: light dark; --bg:#f6f2ed; --panel:#fffdf9; --ink:#27221e; --muted:#6c625a; --line:#ded5cc; --accent:#7d4f3c; --accent-ink:#fff; --focus:#0a66c2; --danger:#a12b2b; --shadow:0 12px 36px rgba(43,31,24,.08); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media (prefers-color-scheme:dark) { :root { --bg:#171412; --panel:#211d1a; --ink:#f7efe8; --muted:#b7aaa0; --line:#403833; --accent:#d29475; --accent-ink:#21140e; --shadow:none; } }
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--ink); font-size:16px; }
body { margin:0; min-height:100vh; line-height:1.5; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:20; background:var(--panel); padding:.75rem; }
.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem max(1rem,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(16px); }
.brand { font-size:1.05rem; font-weight:750; text-decoration:none; letter-spacing:-.02em; }
.brand span { color:var(--muted); font-weight:500; }
.site-nav { display:flex; align-items:center; gap:.85rem; }
.site-nav a,.nav-button { border:0; background:none; color:var(--ink); padding:.65rem .25rem; text-decoration:none; cursor:pointer; }
.container { width:min(1160px,100%); margin:0 auto; padding:clamp(1rem,3vw,2rem); padding-bottom:max(3rem,env(safe-area-inset-bottom)); }
.page-header { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin:1rem 0 1.5rem; }
h1,h2 { line-height:1.15; letter-spacing:-.025em; }
h1 { font-size:clamp(1.8rem,5vw,3rem); margin:.15rem 0; }
h2 { font-size:1.15rem; margin:.25rem 0 .65rem; }
.eyebrow { margin:0; color:var(--accent); font-size:.78rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:.7rem; margin-bottom:1.25rem; }
.stat { display:flex; flex-direction:column; gap:.3rem; min-height:94px; padding:1rem; border:1px solid var(--line); border-radius:16px; background:var(--panel); text-decoration:none; box-shadow:var(--shadow); }
.stat span { color:var(--muted); font-size:.85rem; }
.stat strong { font-size:1.8rem; }
.filters { display:grid; grid-template-columns:minmax(180px,2fr) repeat(4,minmax(120px,1fr)) auto auto; align-items:end; gap:.7rem; padding:1rem; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
label { display:flex; flex-direction:column; gap:.35rem; font-weight:650; font-size:.85rem; }
input,select,textarea { width:100%; min-height:46px; border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem; color:var(--ink); background:var(--bg); }
textarea { min-height:110px; resize:vertical; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border:1px solid var(--accent); border-radius:11px; padding:.65rem 1rem; color:var(--accent-ink); background:var(--accent); text-decoration:none; font-weight:750; cursor:pointer; }
.button.secondary { color:var(--ink); background:transparent; border-color:var(--line); }
.button.danger { margin-top:.8rem; color:#fff; background:var(--danger); border-color:var(--danger); }
.button.full { width:100%; margin-top:.8rem; }
.text-button { display:inline-flex; align-items:center; min-height:44px; padding:.5rem; border:0; color:var(--accent); background:transparent; font-weight:700; text-decoration:none; cursor:pointer; }
.bulk-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1.2rem 0 .7rem; }
.report-list { display:grid; gap:.75rem; }
.report-card { position:relative; display:grid; grid-template-columns:44px 1fr; border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden; box-shadow:var(--shadow); }
.select-report { align-items:center; justify-content:center; border-right:1px solid var(--line); }
.select-report input { width:22px; min-height:22px; }
.report-link { display:grid; grid-template-columns:150px 1fr; min-width:0; text-decoration:none; }
.report-link img,.thumbnail-placeholder { width:150px; height:100%; min-height:170px; object-fit:cover; background:var(--bg); }
.thumbnail-placeholder { display:grid; place-items:center; color:var(--muted); font-size:.8rem; }
.report-copy { min-width:0; padding:1rem; }
.report-copy p { color:var(--muted); margin:.35rem 0 .75rem; }
.badges { display:flex; flex-wrap:wrap; gap:.4rem; }
.badge { display:inline-flex; align-items:center; min-height:28px; padding:.25rem .55rem; border-radius:999px; background:var(--bg); color:var(--muted); font-size:.75rem; font-weight:750; }
.priority-critical { color:#fff; background:#a12b2b; }.priority-high { color:#7c2d12; background:#ffedd5; }
.metadata { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem 1rem; margin:0; font-size:.8rem; }
.metadata div { min-width:0; }.metadata dt { color:var(--muted); }.metadata dd { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel { margin-bottom:1rem; padding:clamp(1rem,3vw,1.35rem); border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); }
.detail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:1rem; align-items:start; }
.sticky { position:sticky; top:80px; }
.sticky label { margin-top:.8rem; }
.screenshots figure { margin:0; }.screenshots img { display:block; width:100%; max-height:75vh; object-fit:contain; border-radius:12px; background:#0e0d0c; touch-action:pinch-zoom; }.screenshots figcaption { color:var(--muted); margin-top:.5rem; }
.screenshot-toolbar { display:flex; gap:.25rem; margin-bottom:.5rem; }
.attachment-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; }.attachment-grid a { text-decoration:none; }.attachment-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }.attachment-grid span { display:block; color:var(--muted); font-size:.8rem; padding-top:.25rem; }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; }.detail-list div { min-width:0; }.detail-list dt { color:var(--muted); font-size:.8rem; }.detail-list dd { margin:.1rem 0; overflow-wrap:anywhere; }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
pre,code { max-width:100%; overflow:auto; overflow-wrap:anywhere; white-space:pre-wrap; }
.notes article { padding:.75rem 0; border-bottom:1px solid var(--line); }.notes small,.timeline small { color:var(--muted); }
.timeline { padding-left:1.2rem; }.timeline li { padding:.3rem 0 .7rem .3rem; }.timeline span,.timeline small { display:block; }
.back-link { display:inline-flex; min-height:44px; align-items:center; color:var(--accent); text-decoration:none; font-weight:700; }
.pagination { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:1.5rem 0; }.pagination a { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; text-decoration:none; }.pagination a[aria-current] { background:var(--accent); color:var(--accent-ink); }
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.login-card { width:min(460px,100%); margin:clamp(2rem,9vh,6rem) auto; padding:clamp(1.2rem,5vw,2rem); border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); }.login-card form { display:grid; gap:.8rem; }.divider { display:flex; align-items:center; gap:.7rem; color:var(--muted); margin:1rem 0; }.divider::before,.divider::after { content:""; flex:1; border-top:1px solid var(--line); }.security-note { color:var(--muted); font-size:.8rem; margin-top:1.2rem; }.form-message { color:var(--danger); min-height:1.5em; }.button-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.export-list { display:grid; gap:.8rem; }.export-list .panel { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.export-list code { display:block; color:var(--muted); font-size:.72rem; }
.credential-list { display:grid; gap:.6rem; margin:1rem 0; }.credential-list article { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; }.credential-list strong,.credential-list span { display:block; }.credential-list span { color:var(--muted); font-size:.8rem; }.danger-zone { border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); }
.toast { position:fixed; left:50%; bottom:max(1.25rem,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:30; max-width:calc(100% - 2rem); padding:.8rem 1rem; border-radius:12px; color:var(--accent-ink); background:var(--accent); box-shadow:var(--shadow); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@media (max-width:900px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.filters label:first-child { grid-column:1/-1; }.detail-grid { grid-template-columns:1fr; }.sticky { position:static; }.metadata { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .site-header { align-items:flex-start; }.site-nav { flex-wrap:wrap; justify-content:flex-end; gap:.1rem; font-size:.78rem; }.site-nav a,.nav-button { min-height:40px; padding:.5rem .2rem; }.container { padding:1rem; }.page-header { align-items:flex-start; }.stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.filters { grid-template-columns:1fr; }.filters label:first-child { grid-column:auto; }.report-card { grid-template-columns:40px 1fr; }.report-link { grid-template-columns:96px 1fr; }.report-link img,.thumbnail-placeholder { width:96px; min-height:210px; }.metadata { grid-template-columns:1fr; }.metadata div:nth-child(n+4) { display:none; }.detail-list { grid-template-columns:1fr; }.export-list .panel { align-items:stretch; flex-direction:column; }.button-row .button { flex:1 1 100%; }.credential-list article { align-items:stretch; flex-direction:column; } }
@media (prefers-reduced-motion:no-preference) { .report-card,.stat,.button { transition:transform .15s ease,box-shadow .15s ease; }.report-card:hover,.stat:hover { transform:translateY(-1px); }.button:active { transform:scale(.98); } }
@media (forced-colors:active) { * { box-shadow:none !important; }.badge,.panel,.report-card,.stat { border:1px solid CanvasText; } }