:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --text: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --soft: #f2f4f7;
  --primary: #111827;
  --primary-2: #374151;
  --success: #067647;
  --success-bg: #ecfdf3;
  --warning: #b54708;
  --warning-bg: #fffaeb;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --blue: #175cd3;
  --blue-bg: #eff8ff;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-shell { min-height: 100vh; display:grid; place-items:center; padding:24px; background: radial-gradient(circle at top left,#fff 0,#f4f6fa 35%,#edf1f7 100%); }
.login-card { width:min(440px,100%); background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:32px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand strong { display:block; font-size:15px; }
.brand span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#111827; color:#fff; font-weight:800; }
.brand-login { margin-bottom:36px; }
.login-copy h1 { margin:0 0 8px; font-size:28px; }
.login-copy p { margin:0 0 24px; color:var(--muted); line-height:1.6; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; background:#fff; border-right:1px solid var(--line); padding:24px 18px; display:flex; flex-direction:column; }
.sidebar .brand { padding:0 8px 26px; }
.nav { display:flex; flex-direction:column; gap:7px; }
.nav-item { border:0; background:transparent; color:#475467; border-radius:12px; padding:12px 14px; text-align:left; display:flex; align-items:center; gap:12px; font-weight:600; }
.nav-item:hover { background:#f7f8fa; }
.nav-item.active { background:#111827; color:#fff; }
.nav-icon { width:20px; text-align:center; font-size:17px; }
.sidebar-footer { margin-top:auto; display:grid; gap:14px; }
.user-mini { display:flex; gap:10px; align-items:center; padding:12px 8px; border-top:1px solid var(--line); }
.user-mini strong { display:block; max-width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.user-mini span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#f2f4f7; font-size:12px; font-weight:700; }

.main { min-width:0; padding:0 34px 60px; }
.topbar { min-height:102px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.topbar h1 { margin:3px 0 0; font-size:24px; letter-spacing:-.03em; }
.eyebrow, .panel-kicker { margin:0; color:#98a2b3; font-size:10px; font-weight:700; letter-spacing:.12em; }
.top-actions { display:flex; align-items:center; gap:12px; }
.live-dot { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }
.live-dot i { width:8px; height:8px; border-radius:50%; background:#12b76a; box-shadow:0 0 0 4px #ecfdf3; }

.view { display:none; }
.view.active { display:block; }

.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; border-radius:26px; padding:36px; background:linear-gradient(120deg,#101828 0,#1f2937 55%,#334155 100%); color:#fff; min-height:265px; box-shadow:var(--shadow); }
.hero h2 { max-width:760px; font-size:38px; line-height:1.12; letter-spacing:-.045em; margin:14px 0 13px; }
.hero p { max-width:700px; margin:0; color:#d0d5dd; line-height:1.65; }
.pill { display:inline-flex; align-items:center; min-height:27px; padding:0 10px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.08em; color:#344054; background:#f2f4f7; }
.hero .pill { color:#fff; background:rgba(255,255,255,.12); }

.stats-grid { margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.stat-label { color:var(--muted); font-size:12px; font-weight:600; }
.stat-card strong { display:block; margin:8px 0 3px; font-size:34px; letter-spacing:-.04em; }
.stat-card small { color:#98a2b3; }

.grid-2 { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:18px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.panel-head h3 { margin:5px 0 0; font-size:17px; }
.panel-head-actions { gap:16px; }

.quick-search, .search-large { display:flex; gap:10px; }
input, select, textarea { width:100%; border:1px solid #d0d5dd; border-radius:11px; padding:11px 13px; color:var(--text); outline:none; background:#fff; transition:.18s ease; }
input:focus, select:focus, textarea:focus { border-color:#98a2b3; box-shadow:0 0 0 3px rgba(152,162,179,.14); }
label > span { display:block; font-size:12px; font-weight:600; color:#344054; margin-bottom:7px; }
.stack { display:grid; gap:16px; }

.btn { border:1px solid transparent; border-radius:10px; min-height:41px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:13px; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:#111827; color:#fff; }
.btn-primary:hover { background:#1f2937; }
.btn-secondary { background:#fff; border-color:#d0d5dd; color:#344054; }
.btn-secondary:hover { background:#f9fafb; }
.btn-ghost { background:transparent; color:#475467; }
.btn-ghost:hover { background:#f2f4f7; }
.btn-full { width:100%; }
.btn-lg { min-height:48px; padding:0 20px; }

.quick-result { margin-top:14px; }
.empty-state { border:1px dashed #d0d5dd; border-radius:13px; padding:22px; text-align:center; color:#98a2b3; font-size:13px; }
.empty-state.compact { padding:16px; }
.match-card { display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--line); border-radius:13px; padding:14px 16px; }
.match-card + .match-card { margin-top:8px; }
.match-title strong { display:block; font-size:14px; }
.match-title span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }

.statuses { display:flex; gap:7px; flex-wrap:wrap; }
.status { display:inline-flex; align-items:center; gap:6px; min-height:27px; padding:0 9px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; }
.status.ok { background:var(--success-bg); color:var(--success); }
.status.warn { background:var(--warning-bg); color:var(--warning); }
.status.danger { background:var(--danger-bg); color:var(--danger); }
.status.neutral { background:#f2f4f7; color:#667085; }
.status.blue { background:var(--blue-bg); color:var(--blue); }

.history-list { display:grid; gap:8px; }
.history-item { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid #f2f4f7; }
.history-item:last-child { border-bottom:0; }
.history-item strong { display:block; font-size:12px; }
.history-item span { color:var(--muted); font-size:11px; margin-top:3px; display:block; }
.history-counts { display:flex; gap:5px; }
.skeleton-row { height:50px; border-radius:10px; background:linear-gradient(90deg,#f2f4f7,#fafafa,#f2f4f7); background-size:200% 100%; animation:sk 1.2s infinite; }
@keyframes sk { from{background-position:200% 0} to{background-position:-200% 0} }

.section-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:5px 0 22px; }
.section-intro h2 { margin:10px 0 8px; font-size:30px; letter-spacing:-.04em; }
.section-intro p { margin:0; color:var(--muted); line-height:1.6; }
.database-head { align-items:center; }

.analyze-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }
.upload-panel { display:grid; gap:14px; }
.drop-zone { min-height:370px; border:1.5px dashed #cfd4dc; border-radius:16px; display:grid; place-items:center; background:#fbfcfd; overflow:hidden; }
.drop-zone.dragover { border-color:#667085; background:#f8fafc; }
#dropIdle { text-align:center; padding:35px; }
.upload-icon { width:54px; height:54px; margin:0 auto 14px; border-radius:15px; display:grid; place-items:center; background:#f2f4f7; font-size:24px; }
#dropIdle h3 { margin:0 0 7px; font-size:17px; }
#dropIdle p { margin:0 0 16px; color:var(--muted); font-size:12px; }

.preview-wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.preview-wrap img { width:100%; height:315px; object-fit:contain; background:#f7f8fa; }
.preview-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 15px; border-top:1px solid var(--line); background:#fff; }
.preview-footer strong { display:block; max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.preview-footer span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }

.flow-list { display:grid; gap:8px; }
.flow-item { display:flex; gap:12px; padding:13px; border:1px solid var(--line); border-radius:13px; }
.flow-item b { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#111827; color:#fff; font-size:11px; flex:0 0 auto; }
.flow-item strong { display:block; font-size:12px; }
.flow-item span { display:block; color:var(--muted); font-size:11px; margin-top:5px; line-height:1.45; }

.analysis-result { margin-top:18px; display:grid; gap:18px; }
.result-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.result-summary article { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.result-summary span { color:var(--muted); font-size:11px; }
.result-summary strong { display:block; margin-top:5px; font-size:25px; }
.result-summary article.ok { background:var(--success-bg); border-color:#abefc6; }
.result-summary article.warn { background:var(--warning-bg); border-color:#fedf89; }
.result-summary article.danger { background:var(--danger-bg); border-color:#fecdca; }

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; color:#667085; font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:13px 12px; border-bottom:1px solid #f2f4f7; font-size:12px; vertical-align:middle; }
tbody tr:hover { background:#fcfcfd; }
td strong { font-size:12px; }
.muted { color:var(--muted); }

.search-large { max-width:780px; margin-bottom:22px; }
.search-results { display:grid; gap:8px; }
.search-card { display:grid; grid-template-columns:minmax(0,1.3fr) 1fr 110px; gap:14px; align-items:center; border:1px solid var(--line); padding:15px; border-radius:13px; }
.score { text-align:right; font-size:11px; color:var(--muted); }

.filters { display:grid; grid-template-columns:minmax(220px,1fr) 240px; gap:10px; margin-bottom:14px; }
.pagination { margin-top:16px; display:flex; justify-content:center; align-items:center; gap:15px; color:var(--muted); font-size:11px; }

.modal-backdrop { position:fixed; inset:0; background:rgba(16,24,40,.45); backdrop-filter:blur(5px); display:grid; place-items:center; z-index:50; padding:20px; }
.modal { width:min(560px,100%); background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(16,24,40,.2); padding:24px; }
.modal-head { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:20px; }
.modal-head h3 { margin:5px 0 0; font-size:20px; }
.modal-close { border:0; background:#f2f4f7; width:34px; height:34px; border-radius:9px; font-size:20px; color:#475467; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }
.form-error { background:var(--danger-bg); color:var(--danger); border:1px solid #fecdca; padding:10px 12px; border-radius:10px; font-size:11px; line-height:1.5; }

@media (max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2, .analyze-layout { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:14px; }
  .sidebar .brand { padding:0 0 12px; }
  .nav { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
  .nav-item { justify-content:center; padding:10px; font-size:11px; }
  .nav-icon { display:none; }
  .sidebar-footer { display:none; }
  .main { padding:0 16px 40px; }
  .topbar { min-height:82px; }
  .top-actions .live-dot { display:none; }
  .hero { display:block; padding:25px; }
  .hero h2 { font-size:29px; }
  .hero .btn { margin-top:22px; }
  .result-summary { grid-template-columns:repeat(2,1fr); }
  .search-card { grid-template-columns:1fr; }
  .score { text-align:left; }
}
@media (max-width:560px) {
  .nav { grid-template-columns:repeat(2,1fr); }
  .top-actions .btn { display:none; }
  .stats-grid, .result-summary, .form-grid, .filters { grid-template-columns:1fr; }
  .quick-search, .search-large { flex-direction:column; }
  .section-intro { align-items:start; flex-direction:column; }
}