:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --ink:#1f2328;
    --muted:#6a7178;
    --accent:#2563eb;
    --accent-ink:#ffffff;
    --ring:#cfd7ff;
    --hr:#e7ecf3;
    --ok:#10b981;
    --err:#ef4444;
    --shadow: 0 10px 25px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    --radius: 16px;
}
*{box-sizing:border-box}
html,body{
    margin:0; height:100%;
    background: radial-gradient(1200px 800px at 10% 10%, #eef3ff 0%, transparent 60%), var(--bg);
    color:var(--ink);
    font:16px/1.45 system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
header.site{
    position:sticky; top:0; z-index:10;
    background:linear-gradient(#fff,#fff9);
    backdrop-filter:saturate(180%) blur(6px);
    border-bottom:1px solid var(--hr);
}
.header-inner{
    max-width: 980px; margin: 0 auto; padding: 12px 16px;
    display:flex; align-items:center; gap:12px;
}
.logo{ width:36px; height:36px; border-radius:10px;
    background:linear-gradient(135deg, #4f46e5, #22c1c3);
    box-shadow: inset 0 0 0 1px #ffffff40, 0 6px 16px #4f46e520;
}
.title-wrap h1{margin:0; font-size:22px; letter-spacing:.2px}
.title-wrap .desc{margin:2px 0 0; color:var(--muted); font-size:13px}

.wrap{
    min-height: calc(100% - 64px);
    display:grid; place-items:start center;
    padding: 24px 16px 40px;
}
.container{ width:100%; max-width:980px; }

.card{
    background:var(--card);
    border:1px solid var(--hr);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

.badge{
    display:inline-block;
    padding:4px 10px; border:1px solid var(--ring);
    background:#fff; border-radius:999px; font-size:12px; color:#334;
}

.aisles{
    display:grid; gap:12px; margin-top:8px;
}
.aisle-card h2{
    margin:0 0 10px; font-size:16px;
}
.table-wrap{
    overflow:auto; border-radius:12px; border:1px solid var(--hr);
}
.items{
    width:100%; border-collapse:separate; border-spacing:0;
    background:#fff;
}
.items thead th{
    text-align:left; font-weight:600; font-size:12px; color:var(--muted);
    border-bottom:1px solid var(--hr); padding:10px 12px; white-space:nowrap;
}
.items td{
    padding:12px; vertical-align:top; border-bottom:1px solid var(--hr);
}
.items tr:last-child td{ border-bottom:none; }
.items td.name{ font-weight:500; }
.items td.confidence{ width:90px; white-space:nowrap; text-align:right; }
.items td.aisle{ color:var(--muted); width:30%; }

.actions{
    margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;
}
.button{
    appearance:none; border:0; cursor:pointer;
    border-radius:12px; padding:10px 14px;
    background:var(--accent); color:var(--accent-ink); font-weight:600; letter-spacing:.2px;
    box-shadow: 0 8px 18px rgba(37,99,235,.25), 0 2px 6px rgba(37,99,235,.18);
}
.button.link{
    background:#fff; color:var(--accent);
    border:1px solid var(--ring); box-shadow:none;
}

.muted{ color:var(--muted); }
footer.site{
    max-width:980px; margin:16px auto 40px; padding:0 16px;
    color:var(--muted); font-size:12px; text-align:right;
}

/* Larger screens slightly roomier */
@media (min-width: 900px){
    .card{ padding:26px; }
}