:root {
  --sidebar: #0f172a;
  --sidebar-text: #dbeafe;
  --surface: #ffffff;
  --page: #f4f7fb;
  --text: #1f2937;
  --muted: #64748b;
  --primary: #d52b1e;
  --secondary: #00a8e0;
  --border: #d8e0ec;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: var(--page); color: var(--text); }
a { color: inherit; }
.layout { display: flex; min-height: calc(100vh - 46px); }
.sidebar { width: 260px; background: var(--sidebar); color: var(--sidebar-text); padding: 22px 18px; position: sticky; top: 0; height: 100vh; }
.sidebar h1 { font-size: 22px; margin: 0 0 6px; }
.sidebar .sub { color: #94a3b8; font-size: 14px; margin-bottom: 24px; }
.nav { display: flex; flex-direction: column; gap: 8px; }
.nav a { text-decoration: none; padding: 11px 14px; border-radius: 10px; color: var(--sidebar-text); }
.nav a.active, .nav a:hover { background: rgba(255,255,255,.1); }
.content { flex: 1; padding: 24px; }
.card { background: var(--surface); border-radius: 14px; box-shadow: 0 2px 12px rgba(15,23,42,.08); padding: 20px; margin-bottom: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { background: linear-gradient(180deg, #fff, #f8fbff); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.metric .label { color: var(--muted); font-size: 14px; }
.metric .value { font-size: 28px; font-weight: 700; margin-top: 8px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 700; font-size: 14px; }
.btn { display: inline-block; text-decoration: none; border: none; border-radius: 10px; padding: 10px 14px; background: var(--primary); color: #fff; cursor: pointer; }
.btn.secondary { background: #334155; }
.btn.light { background: #e2e8f0; color: #0f172a; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.small { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; }
.site-grid { display: grid; grid-template-columns: 170px 1fr; gap: 8px 12px; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.photo-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.photo-card .meta { padding: 10px; font-size: 13px; }
.report-actions { display:flex; gap:10px; flex-wrap:wrap; }
.notice { padding: 12px; border-radius: 10px; background: #eff6ff; color: #1e3a8a; }
.error { padding: 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .layout { display:block; } .sidebar { width:auto; height:auto; position:relative; } .content { padding:16px; } .form-grid, .grid-4 { grid-template-columns: 1fr; } }

.header-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stack{display:flex;flex-direction:column;gap:20px}.codebox{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:10px;white-space:pre-wrap}.logo-preview{max-height:72px;max-width:220px;object-fit:contain;display:block;margin-top:10px}.filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.thumb-btn img{cursor:pointer}.site-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.section-title{margin:0 0 10px}.kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}@media (max-width: 900px){.filters,.two-col,.kpi-row{grid-template-columns:1fr}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}.lightbox.visible{display:flex}.lightbox img{max-width:86vw;max-height:86vh;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45)}.lightbox .close,.lightbox .prev,.lightbox .next{position:absolute;border:none;background:rgba(255,255,255,.16);color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer}.lightbox .close{top:18px;right:18px}.lightbox .prev{left:18px;top:50%;transform:translateY(-50%)}.lightbox .next{right:18px;top:50%;transform:translateY(-50%)}
.chart-row{display:grid;grid-template-columns:160px 1fr 48px;gap:10px;align-items:center;margin:8px 0}.bar{height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:var(--primary);border-radius:999px}.lightbox-panel{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:center;max-width:96vw;max-height:92vh}.lightbox-info{background:#fff;color:#0f172a;border-radius:12px;padding:14px;max-height:86vh;overflow:auto}.lightbox-info strong{display:block;font-size:18px;margin-bottom:8px}.lightbox-info span{display:block;color:#64748b;margin-bottom:8px}.lightbox-info pre{white-space:pre-wrap;font-family:Arial,sans-serif;margin:0;font-size:14px}.thumb{width:92px;height:64px;object-fit:cover;border-radius:8px}.bulk-toolbar{display:flex;gap:8px;flex-wrap:wrap}@media (max-width: 1000px){.lightbox-panel{grid-template-columns:1fr}.lightbox-info{max-height:220px}.chart-row{grid-template-columns:1fr}}

.sidebar h1{letter-spacing:.2px}.sidebar .sub .partner{color:#fff;font-weight:700}.btn.secondary{background:var(--secondary)} .metric{border-top:3px solid var(--primary)} .card h3{color:#0f172a}.photo-card img,.thumb-img{background:#f8fafc}.logo-preview{background:#fff;padding:6px;border-radius:8px;border:1px solid var(--border)}

.sidebar{display:flex;flex-direction:column;min-height:100vh;}
.sidebar .nav{flex:1 1 auto;}
.sidebar-footer{margin-top:auto;padding:16px 0 4px;font-size:13px;color:#94a3b8;border-top:1px solid rgba(255,255,255,.08);}
.btn.tiny{padding:6px 10px;font-size:12px;}
code.wrap{white-space:normal;word-break:break-all;display:block;}

.page-footer{padding:12px 24px 18px;text-align:center;font-size:13px;color:#64748b;border-top:1px solid var(--border);background:var(--page);}