.mobile-capture-app { max-width: 760px; margin: 0 auto; display: grid; gap: 1rem; padding-bottom:1rem; }
.mobile-capture-hero { display:flex; justify-content:space-between; gap:1rem; padding:1.25rem; border-radius:1rem; color:#fff; background:linear-gradient(135deg,#123f55,#197b98); box-shadow:0 16px 38px rgb(12 55 75 / 18%); }
.mobile-capture-hero span:first-child,.mobile-section-heading>span { color:#ff8a66; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.mobile-capture-hero h1,.mobile-capture-hero p,.mobile-section-heading h2,.mobile-section-heading p { margin:0; }
.mobile-capture-hero h1 { margin:.25rem 0; }
.mobile-online-state { align-self:start; padding:.45rem .7rem; border-radius:999px; background:#dff7e9; color:#197347; font-weight:800; }
.mobile-online-state.is-offline { background:#ffe4df; color:#a43b28; }
.mobile-mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:.4rem; border:1px solid #d8e3e8; border-radius:.85rem; background:#fff; position:sticky; top:.5rem; z-index:10; box-shadow:0 8px 20px rgb(22 57 72 / 8%); }
.mobile-mode-tabs button { min-height:3rem; border:0; border-radius:.65rem; background:transparent; color:#4f6674; font-weight:800; }
.mobile-mode-tabs button.is-active { color:#fff; background:#e85a32; }
.mobile-mode-panel { display:none; padding:1.1rem; border:1px solid #d8e3e8; border-radius:1rem; background:#fff; box-shadow:0 8px 28px rgb(22 57 72 / 7%); }
.mobile-mode-panel.is-active { display:block; }
.mobile-section-heading { margin-bottom:1rem; }
.mobile-section-heading h2 { color:#173f52; margin:.25rem 0; }
.mobile-section-heading p { color:#607483; }
.mobile-people-toolbar { display:flex; align-items:center; gap:.75rem; margin-bottom:.85rem; }
.mobile-people-toolbar label { flex:1; }
.mobile-people-toolbar input { width:100%; min-height:3rem; border:1px solid #cbd9df; border-radius:.75rem; padding:0 .9rem; background:#f8fbfc; }
.mobile-people-toolbar strong { color:#607483; white-space:nowrap; font-size:.82rem; }
.mobile-people-list { display:grid; gap:.65rem; }
.mobile-person-card { display:grid; grid-template-columns:3.25rem 1fr auto; gap:.8rem; align-items:center; padding:.75rem; border:1px solid #dce6ea; border-radius:.9rem; background:#fbfdfe; }
.mobile-person-avatar { width:3.25rem; aspect-ratio:1; border-radius:.8rem; overflow:hidden; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#164a61,#2785a0); font-weight:900; }
.mobile-person-avatar img { width:100%; height:100%; object-fit:cover; }
.mobile-person-copy { min-width:0; }
.mobile-person-copy h3,.mobile-person-copy p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-person-copy h3 { color:#173f52; font-size:1rem; }
.mobile-person-copy p { margin-top:.15rem; color:#6a7e89; font-size:.78rem; }
.mobile-person-actions { display:flex; gap:.4rem; }
.mobile-person-actions button { min-height:2.5rem; }
.mobile-back-button { border:0; padding:0; margin-bottom:.85rem; color:#17617e; background:transparent; font-weight:800; cursor:pointer; }
.mobile-selected-person { display:grid; gap:.1rem; padding:.85rem 1rem; border-radius:.8rem; color:#173f52; background:#eef6f8; border-left:4px solid #e85a32; }
.mobile-selected-person span { color:#6a7e89; font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.mobile-selected-person strong { font-size:1.05rem; }
.mobile-selected-person small { color:#647985; }
.mobile-photo-form { display:grid; gap:1rem; }
.mobile-photo-form label { display:grid; gap:.4rem; }
.mobile-photo-form label>span,.mobile-manual-scan label>span { color:#536b78; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.mobile-photo-form select { min-height:3rem; width:100%; }
.mobile-camera-field { position:relative; place-items:center; min-height:9rem; padding:1rem; border:2px dashed #b8ccd5; border-radius:.9rem; background:#f5f9fa; color:#174f69; cursor:pointer; }
.mobile-camera-field input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.mobile-photo-form [hidden] { display:none!important; }
.mobile-photo-camera { position:relative; display:grid; gap:.75rem; }
.mobile-photo-camera video,.mobile-camera-placeholder { width:100%; aspect-ratio:4/3; border-radius:1rem; background:#102e3c; object-fit:cover; }
.mobile-camera-placeholder { display:grid; place-content:center; gap:.35rem; padding:1rem; color:#dce9ee; text-align:center; }
.mobile-camera-placeholder strong { color:#fff; font-size:1.1rem; }
.mobile-camera-status { margin:0; color:#536b78; font-size:.82rem; }
.mobile-camera-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.mobile-camera-fallback { min-height:5rem; }
.mobile-photo-form.is-camera-active .mobile-camera-fallback { display:none; }
.mobile-photo-form.is-camera-active [data-mobile-photo-capture] { position:absolute; z-index:3; left:50%; bottom:4.4rem; min-width:10rem; min-height:3.25rem; transform:translateX(-50%); border:3px solid #fff; border-radius:999px; background:#ef5935; color:#fff; box-shadow:0 6px 20px rgb(0 0 0 / 35%); font-weight:900; }
.mobile-photo-form.is-camera-active [data-mobile-photo-stop] { margin-left:auto; }
.mobile-photo-preview { width:min(100%,420px); max-height:420px; margin:auto; border-radius:1rem; object-fit:cover; }
.mobile-scanner { display:grid; gap:.8rem; }
.mobile-scanner video,.mobile-scanner-frame { width:100%; aspect-ratio:4/3; border-radius:1rem; background:#102e3c; object-fit:cover; }
.mobile-scanner-frame { display:grid; place-items:center; align-content:center; color:#dce9ee; }
.mobile-scanner-frame span { width:55%; aspect-ratio:1; border:3px solid #ff6a43; border-radius:1rem; }
.mobile-manual-scan { display:grid; grid-template-columns:1fr auto; gap:.7rem; align-items:end; }
.mobile-manual-scan label { display:grid; gap:.35rem; }
.mobile-manual-scan input { min-height:2.8rem; width:100%; }
.mobile-scan-result { margin-top:1rem; padding:1rem; border:1px solid #b9dfca; border-radius:.9rem; background:#effaf4; }
.mobile-scan-result.is-error { border-color:#efc2ba; background:#fff2ef; }
.mobile-scan-result.is-warning { border-color:#efc66e; background:#fff8e8; }
.mobile-scan-warning { display:block; margin-bottom:.75rem; color:#895c00; }
.mobile-scan-result h3 { color:#173f52; margin:.25rem 0 .8rem; }
.mobile-scan-result dl { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:0; }
.mobile-scan-result dl div { padding:.7rem; border-radius:.6rem; background:#fff; }
.mobile-scan-result dt { color:#667b87; font-size:.7rem; font-weight:800; text-transform:uppercase; }
.mobile-scan-result dd { margin:.2rem 0 0; font-weight:800; }
@media(max-width:600px){.mobile-capture-hero{flex-direction:column}.mobile-manual-scan{grid-template-columns:1fr}.mobile-scan-result dl{grid-template-columns:1fr}.mobile-mode-panel{padding:.85rem}.mobile-person-card{grid-template-columns:3rem 1fr}.mobile-person-avatar{width:3rem}.mobile-person-actions{grid-column:1/-1}.mobile-person-actions button{flex:1}.mobile-people-toolbar{align-items:stretch;flex-direction:column}.mobile-mode-tabs{bottom:.5rem;top:auto;order:10}.mobile-mode-tabs button{font-size:.78rem}}

:root[data-theme="dark"] .mobile-mode-tabs,
:root[data-theme="dark"] .mobile-mode-panel {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-panel);
    box-shadow: 0 10px 28px rgb(0 0 0 / 24%);
}
:root[data-theme="dark"] .mobile-mode-tabs button { color: var(--ui-text-muted); }
:root[data-theme="dark"] .mobile-mode-tabs button:hover { color: var(--ui-text); background:var(--ui-hover); }
:root[data-theme="dark"] .mobile-mode-tabs button.is-active { color:#fff; background:#e85a32; }
:root[data-theme="dark"] .mobile-section-heading h2,
:root[data-theme="dark"] .mobile-person-copy h3,
:root[data-theme="dark"] .mobile-selected-person,
:root[data-theme="dark"] .mobile-scan-result h3 { color:var(--ui-text); }
:root[data-theme="dark"] .mobile-section-heading p,
:root[data-theme="dark"] .mobile-people-toolbar strong,
:root[data-theme="dark"] .mobile-person-copy p,
:root[data-theme="dark"] .mobile-selected-person small,
:root[data-theme="dark"] .mobile-selected-person span,
:root[data-theme="dark"] .mobile-scan-result dt { color:var(--ui-text-muted); }
:root[data-theme="dark"] .mobile-people-toolbar input,
:root[data-theme="dark"] .mobile-photo-form select,
:root[data-theme="dark"] .mobile-manual-scan input {
    color:var(--ui-text);
    border-color:var(--ui-border);
    background:var(--ui-muted);
}
:root[data-theme="dark"] .mobile-person-card,
:root[data-theme="dark"] .mobile-selected-person,
:root[data-theme="dark"] .mobile-camera-field,
:root[data-theme="dark"] .mobile-scan-result dl div {
    color:var(--ui-text);
    border-color:var(--ui-border);
    background:var(--ui-muted);
}
:root[data-theme="dark"] .mobile-person-card:hover { border-color:#168dc1; background:var(--ui-hover); }
:root[data-theme="dark"] .mobile-camera-field { color:#64c8ef; }
:root[data-theme="dark"] .mobile-scan-result { color:var(--ui-text); background:#123126; border-color:#286746; }
:root[data-theme="dark"] .mobile-scan-result.is-error { background:#351d1d; border-color:#784139; }
:root[data-theme="dark"] .mobile-scan-result.is-warning { background:#352c17; border-color:#7d652b; }
:root[data-theme="dark"] .mobile-scan-warning { color:#f2c96d; }