/* Base */
*{box-sizing:border-box}
body.bg{background:#f5f7fa;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif}
.wrap{max-width:1100px;margin:16px auto;padding:16px}
.mt{margin-top:12px}
.mt8{margin-top:8px}
.h2{margin:0 0 8px}
.muted{color:#666}
.w100{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}
.space{align-items:center;justify-content:space-between}
.span2{grid-column:1/-1}

/* Cards & header */
.card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.hero{position:relative;padding:0;overflow:hidden;border-radius:18px}
.banner{width:100%;height:180px;object-fit:cover;display:block}
@media(max-width:560px){.banner{height:140px}}
.hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;background:linear-gradient(to bottom,rgba(0,0,0,0) 55%,rgba(0,0,0,.38))}
.logo{position:absolute;top:12px;left:12px;width:56px;height:56px;border-radius:999px;background:#fff;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero-title{margin-left:80px;margin-bottom:6px;font-weight:800;font-size:20px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Inputs & buttons */
.in{width:100%;padding:12px;border:1px solid #ddd;border-radius:12px;font-size:15px;background:#fff}
.btn{padding:12px 16px;border:0;border-radius:12px;font-weight:700;background:#111;color:#fff;cursor:pointer;text-align:center}

/* Layout grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.gridWide{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
@media(max-width:1000px){.gridWide{grid-template-columns:1fr}}

/* Tables */
.tablewrap{margin-top:10px;overflow:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:10px;border-bottom:1px solid #eee;font-size:14px;vertical-align:top}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.tab{padding:10px 14px;border-radius:999px;background:#eee;cursor:pointer;font-weight:700;border:0}
.tab.active{background:#111;color:#fff}
.hidden{display:none}

/* Pills */
.pill{background:#eee;border-radius:999px;padding:6px 12px;display:inline-block}

/* Camera */
.cam{display:grid;grid-template-columns:1fr 160px;gap:10px}
@media(max-width:520px){.cam{grid-template-columns:1fr}}
video,canvas,img.snap{width:100%;border-radius:12px;background:#000;max-height:240px;object-fit:cover}

/* Logout */
.logout{position:fixed;right:14px;top:14px;z-index:9;padding:10px 14px;border:0;border-radius:12px;font-weight:700;background:#111;color:#fff}
.divider{border:none;border-top:1px solid #eee;margin:14px 0}
.wraptags{flex-wrap:wrap;gap:8px}