:root {
    --bg: #f3f6fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #6b7280;
    --line: #e5e7eb;
    --danger: #b91c1c;
    --danger-2: #7f1d1d;
    --danger-soft: #fff1f2;
    --danger-soft-2: #fee2e2;
    --success: #166534;
    --shadow: 0 12px 34px rgba(15, 23, 42, .07);
}

* { box-sizing: border-box; }
html, body, form { margin: 0; min-height: 100%; }
body {
    font-family: Inter, Segoe UI, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}
button, input, select { font: inherit; }

.topbar {
    min-height: 96px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar h1 { margin: 2px 0 4px; font-size: 24px; line-height: 1.15; }
.topbar p { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--danger); }
.top-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-link { text-decoration: none; color: #334155; background: #f8fafc; border: 1px solid var(--line); padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.nav-link:hover { background: #eef2f7; }
.counter { min-width: 88px; background: var(--danger-soft-2); color: var(--danger); border-radius: 12px; padding: 8px 12px; text-align: center; }
.counter span { display: block; font-size: 23px; line-height: 1; font-weight: 800; }
.counter small { display: block; margin-top: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.split-dashboard { height: calc(100vh - 96px); padding: 16px; display: grid; grid-template-columns: minmax(340px, 430px) 1fr; gap: 16px; }
.single-dashboard { min-height: calc(100vh - 96px); padding: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; min-height: 0; }
.split-dashboard .panel { display: flex; flex-direction: column; }
.panel-head { padding: 15px 17px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; }
.panel-head strong { display: block; font-size: 15px; }
.panel-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.update-time { color: var(--muted); font-size: 11px; white-space: nowrap; }

.tracking-list { overflow-y: auto; min-height: 0; flex: 1; }
.tracking-card { width: 100%; border: 0; border-bottom: 1px solid #fecaca; padding: 14px 15px; text-align: left; cursor: pointer; transition: .14s ease; background: var(--danger-soft); color: #7f1d1d; }
.tracking-card:hover { transform: translateX(2px); filter: saturate(1.12); }
.tracking-card.high { background: #fee2e2; }
.tracking-card.critical { background: #fecaca; color: #6b1010; }
.tracking-card.selected { background: var(--danger); color: #fff; box-shadow: inset 4px 0 0 #450a0a; }
.tracking-main, .tracking-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tracking-main b { font-size: 15px; overflow-wrap: anywhere; }
.tracking-meta { margin-top: 7px; font-size: 11px; opacity: .82; }
.delay-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 999px; background: rgba(127,29,29,.09); font-weight: 800; white-space: nowrap; }
.selected .delay-pill { background: rgba(255,255,255,.17); }

.gallery-wrap { overflow-y: auto; min-height: 0; flex: 1; padding: 15px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 14px; }
.photo-card { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #f8fafc; transition: .15s ease; }
.photo-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,23,42,.10); }
.photo-card img { width: 100%; height: 260px; object-fit: contain; display: block; background: #111827; }
.photo-card span { display: block; padding: 9px 11px; font-size: 12px; color: var(--muted); }

.empty-state { padding: 34px 20px; color: #94a3b8; text-align: center; font-size: 13px; }
.photo-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.camera { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed #cbd5e1; margin-bottom: 12px; font-size: 26px; }
.success-state { color: var(--success) !important; }
.error-state { color: var(--danger); }
.error-box { margin: 12px 14px 0; padding: 10px 12px; border-radius: 10px; color: #991b1b; background: #fee2e2; border: 1px solid #fecaca; font-size: 12px; white-space: pre-wrap; }
.hidden { display: none !important; }

.table-panel { min-height: calc(100vh - 128px); }
.table-scroll { overflow: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; min-width: 1050px; }
.dashboard-table th { position: sticky; top: 0; z-index: 2; background: #f8fafc; color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: .045em; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dashboard-table td { padding: 13px 14px; border-bottom: 1px solid #eef2f7; font-size: 13px; vertical-align: middle; }
.dashboard-table td small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }
.delay-row.warning td:first-child { border-left: 5px solid #ef4444; }
.delay-row.high { background: #fff7f7; }
.delay-row.high td:first-child { border-left: 5px solid #dc2626; }
.delay-row.critical { background: #fff1f2; color: #7f1d1d; }
.delay-row.critical td:first-child { border-left: 5px solid #991b1b; }
.status-chip { display: inline-block; padding: 5px 8px; border-radius: 8px; background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 700; }
.empty-cell { text-align: center; color: #94a3b8; padding: 38px !important; }

.home-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.home-shell { width: min(900px,100%); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 34px; }
.brand-pill { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px; background: #172033; color: #fff; font-weight: 900; letter-spacing: .08em; }
.home-shell h1 { margin: 18px 0 8px; }
.home-shell > p { color: var(--muted); margin: 0 0 24px; }
.home-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.home-card { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: var(--text); padding: 20px; background: #f8fafc; }
.home-card:hover { border-color: #cbd5e1; box-shadow: 0 10px 24px rgba(15,23,42,.07); }
.home-card strong { font-size: 18px; }
.home-card span { color: var(--muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 900px) {
    .topbar { position: static; align-items: flex-start; flex-direction: column; }
    .split-dashboard { height: auto; grid-template-columns: 1fr; }
    .tracking-panel { min-height: 480px; }
    .gallery-panel { min-height: 500px; }
    .home-grid { grid-template-columns: 1fr; }
}