:root { --brass: #d9a441; --bg: #0f0d0b; }
body.checkin { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, #3a2a18 0%, var(--bg) 60%) fixed; color: #f3ece0; }
.brand-mark { width: 64px; height: 64px; margin: 0 auto .6rem; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; color: #1a1208; background: linear-gradient(145deg, #f0c775, #a8752a); box-shadow: 0 10px 30px rgba(217,164,65,.25); }
.brand-title { font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; }
.checkin-card { background: rgba(22,19,15,.88); border: 1px solid rgba(217,164,65,.2); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.step-num { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--brass); color: #1a1208; font-size: .8em; font-weight: 700; margin-right: .3em; }
.code-input { text-transform: uppercase; letter-spacing: .2em; font-family: "Courier New", monospace; font-weight: 700; text-align: center; }
.nav-pills .nav-link.active { background: var(--brass); color: #1a1208; }
.nav-pills .nav-link { color: #e9dfcf; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; }
.swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--brass); }
.emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.emoji-btn { font-size: 1.3rem; background: rgba(255,255,255,.04); border: 1px solid transparent; border-radius: 8px; padding: 2px 0; }
.emoji-btn.selected { border-color: var(--brass); background: rgba(217,164,65,.15); }
.robot-preview { display: inline-flex; flex-direction: column; align-items: center; animation: hover 3s ease-in-out infinite; }
.robot-antenna { width: 3px; height: 18px; background: #333; position: relative; margin-left: 60px; }
.robot-antenna::after { content: ''; position: absolute; top: -8px; left: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 12px var(--brass); }
.robot-head { padding: 8px; background: linear-gradient(#e5e8ec, #b8bdc3); border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.robot-face { width: 150px; height: 108px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; font-size: 3.6rem; background-image: repeating-linear-gradient(transparent 0 3px, rgba(0,0,0,.12) 3px 4px) !important; }
.robot-face img { width: 100%; height: 100%; object-fit: cover; }
.robot-body { width: 70px; height: 60px; margin-top: 6px; border-radius: 50% 50% 40% 40%; background: linear-gradient(#e5e8ec, #9aa1a8); box-shadow: 0 16px 20px -12px rgba(217,164,65,.6); }
@keyframes hover { 50% { transform: translateY(-6px); } }
.photo-box { width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 12px; overflow: hidden; }
.photo-box video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

/* admin */
body.admin { background: #0f1115; min-height: 100vh; }
.admin-nav { background: #15181e; border-bottom: 1px solid #262a33; }
.admin-nav .navbar-brand { font-family: Georgia, serif; color: var(--brass); }
.kpi { background: #161a21; border: 1px solid #262a33; border-radius: 14px; padding: 1rem 1.1rem; height: 100%; }
.kpi .kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #8a93a3; }
.kpi .kpi-value { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size: .8rem; color: #8a93a3; }
.admin-card { background: #161a21; border: 1px solid #262a33; border-radius: 14px; }
.admin-card .card-header { background: transparent; border-bottom: 1px solid #262a33; font-weight: 600; }
.table-admin { --bs-table-bg: transparent; }
.table-admin td, .table-admin th { vertical-align: middle; }
.code-mono { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .08em; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { fill: #8a93a3; font-size: 11px; }
.funnel-bar { height: 22px; border-radius: 6px; background: linear-gradient(90deg, #d9a441, #b07d2b); min-width: 2px; }
.timeline { border-left: 2px solid #262a33; padding-left: 1rem; }
.timeline .t-item { position: relative; padding: .2rem 0; font-size: .88rem; }
.timeline .t-item::before { content: ''; position: absolute; left: -1.34rem; top: .65rem; width: 9px; height: 9px; border-radius: 50%; background: #3a4150; }
.timeline .t-item.good::before { background: #49d17a; }
.timeline .t-item.warn::before { background: #f0c419; }
.timeline .t-item.bad::before { background: #ff6b6b; }