:root {
  --bg: #0b0b0d;
  --panel: #151519;
  --panel-2: #1b1b20;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text: #f4f3f6;
  --muted: #9b9aa3;
  --muted-2: #6f6e77;
  --good: #7fe7b0;
  --warn: #ffd479;
  --bad: #ff8e8e;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(0,0,0,.32);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app-bg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 15%, rgba(120,88,255,.14), transparent 28%), radial-gradient(circle at 85% 12%, rgba(0,210,255,.08), transparent 24%), radial-gradient(circle at 70% 88%, rgba(255,70,170,.08), transparent 26%); filter: saturate(.8); }
.app-shell { position: relative; min-height: 100vh; max-width: 1180px; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom)); }
.center-screen { min-height: calc(100vh - 52px); display: grid; place-items: center; align-content: center; text-align: center; gap: 8px; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.02)); box-shadow: inset 0 1px rgba(255,255,255,.1), var(--shadow); font-family: Georgia, serif; font-size: 30px; font-style: italic; }
.eyebrow { margin: 12px 0 0; font-size: 11px; font-weight: 760; letter-spacing: .22em; color: #c5c4cb; }
h1,h2,h3,p { margin-top: 0; } h1 { font-size: clamp(34px, 7vw, 62px); letter-spacing: -.045em; margin-bottom: 8px; } h2 { font-size: clamp(25px, 4.5vw, 38px); letter-spacing: -.035em; margin-bottom: 10px; } h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.login-wrap { min-height: calc(100vh - 52px); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 28px; align-items: center; }
.hero-copy { max-width: 600px; } .hero-copy .lead { color: #b5b4bc; font-size: clamp(17px,2.4vw,21px); line-height: 1.55; max-width: 550px; }
.card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(26,26,31,.94), rgba(18,18,22,.94)); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.login-card { padding: 28px; max-width: 440px; width: 100%; justify-self: end; }
.field { display: grid; gap: 8px; margin-bottom: 16px; } .field label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #c9c8cf; }
.input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; background: rgba(255,255,255,.045); color: var(--text); outline: none; transition: .18s ease; }
.input:focus, textarea:focus, select:focus { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.065); } textarea { min-height: 96px; resize: vertical; }
.btn { appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 14px; min-height: 46px; padding: 0 17px; font-weight: 730; cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease; }
.btn:hover { background: rgba(255,255,255,.1); border-color: var(--line-strong); } .btn:active { transform: scale(.985); } .btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary { background: #f4f3ef; color: #0a0a0b; border-color: #f4f3ef; } .btn-primary:hover { background: #fff; }
.btn-danger { color: #ffd3d3; border-color: rgba(255,110,110,.25); background: rgba(255,75,75,.08); } .btn-ghost { background: transparent; } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; } .big-btn { min-height: 58px; font-size: 16px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; } .topbar-compact { margin-bottom: 22px; }
.brand-line { display: flex; align-items: center; gap: 12px; cursor: pointer; } .brand-mini { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05); font-family: Georgia, serif; font-style: italic; font-size: 21px; }
.brand-text strong { display: block; font-size: 13px; letter-spacing: .12em; } .brand-text span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.account { display: flex; align-items: center; gap: 12px; } .account-email { font-size: 13px; color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .page-head p { margin-bottom: 0; }
.grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.hero-card { padding: clamp(22px,4vw,34px); margin-bottom: 20px; overflow: hidden; position: relative; } .hero-card::after { content:""; position:absolute; width:260px; height:260px; right:-80px; top:-120px; background:radial-gradient(circle,rgba(255,255,255,.13),transparent 62%); pointer-events:none; } .live-border { border-color: rgba(127,231,176,.2); }
.status-row { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:18px; } .badge { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:0 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); font-size:12px; font-weight:730; color:#d7d6dc; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--muted-2); } .dot.active { background:var(--good); box-shadow:0 0 0 4px rgba(127,231,176,.08); } .dot.draft { background:var(--warn); } .dot.completed { background:#9ea5ff; }
.kpi { padding:19px; } .kpi .label { font-size:12px; color:var(--muted); margin-bottom:8px; } .kpi .value { font-size:25px; font-weight:780; letter-spacing:-.04em; }
.section { margin-top:26px; } .section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:13px; } .section-head h3 { margin:0; }
.event-list { display:grid; gap:10px; } .event-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); } .event-item:hover { background:rgba(255,255,255,.045); }
.event-title { font-weight:740; margin-bottom:5px; } .event-meta { font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:7px 12px; } .event-actions { display:flex; gap:8px; } .icon-btn { min-width:40px; padding:0 12px; }
.empty { padding:26px; border:1px dashed var(--line-strong); border-radius:18px; text-align:center; color:var(--muted); } .small-empty { padding:16px; font-size:13px; }
.overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); }
.modal { width:min(680px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:24px; } .modal-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:20px; } .modal-head h2 { font-size:26px; margin:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; } .form-grid .span-2 { grid-column:span 2; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; } .detail-card { padding:23px; } .detail-list { display:grid; gap:0; } .detail-row { padding:13px 0; border-bottom:1px solid var(--line); } .detail-row:last-child { border-bottom:0; } .detail-row span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; } .detail-row strong { font-size:14px; font-weight:670; }
.callout { border:1px solid rgba(255,212,121,.18); background:rgba(255,212,121,.055); border-radius:15px; padding:14px 15px; color:#e9dcbb; font-size:13px; line-height:1.5; } .danger-callout { border-color:rgba(255,100,100,.3); background:rgba(255,80,80,.07); color:#ffd4d4; }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; } .role-option { position:relative; display:grid; gap:5px; min-height:145px; align-content:center; justify-items:center; text-align:center; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); cursor:pointer; transition:.18s ease; } .role-option input { position:absolute; opacity:0; } .role-option.selected { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); transform:translateY(-1px); } .role-icon { font-size:32px; } .role-option strong { font-size:17px; } .role-option small { color:var(--muted); }
.op-header { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; } .op-header h2 { margin-bottom:5px; } .op-header p:last-child { margin-bottom:0; } .op-actions { display:flex; gap:8px; flex-wrap:wrap; }
.system-status { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; } .status-pill { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:8px 11px; font-size:12px; color:var(--muted); background:rgba(255,255,255,.025); } .status-pill i { width:7px; height:7px; border-radius:50%; background:var(--muted-2); } .status-pill.ok i { background:var(--good); } .status-pill.warn i { background:var(--warn); } .status-pill.bad i { background:var(--bad); } .status-pill.neutral i { background:#8f91aa; }
.camera-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; } .capture-card { min-height:590px; padding:26px; display:grid; align-content:center; } .capture-card.capture-active { align-content:stretch; } .capture-empty { width:min(580px,100%); margin:auto; text-align:center; } .capture-glyph { display:grid; place-items:center; width:90px; height:90px; margin:0 auto 10px; border-radius:50%; border:1px solid var(--line-strong); font-size:42px; background:rgba(255,255,255,.035); }
.session-kind { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:25px 0 16px; } .kind-option { position:relative; display:grid; gap:4px; padding:16px; border:1px solid var(--line); border-radius:15px; text-align:left; cursor:pointer; background:rgba(255,255,255,.02); } .kind-option input { position:absolute; opacity:0; } .kind-option.selected { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.07); } .kind-option span { font-weight:750; } .kind-option small { color:var(--muted); }
.capture-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .session-timer { font-size:clamp(64px,13vw,128px); font-weight:800; letter-spacing:-.07em; text-align:center; margin:45px 0 6px; font-variant-numeric:tabular-nums; } .capture-card > p { text-align:center; }
.capture-buttons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:30px 0 18px; } .capture-btn { min-height:170px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; display:grid; place-items:center; align-content:center; gap:7px; } .capture-btn:hover { background:rgba(255,255,255,.07); } .capture-btn span { font-size:38px; } .capture-btn strong { font-size:15px; } .capture-btn small { color:var(--muted); }
.mini-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .mini-kpis div { padding:12px 10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); } .mini-kpis span { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; } .mini-kpis strong { font-size:21px; }
.session-list { display:grid; gap:8px; } .session-row { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:11px 2px; } .session-row:last-child { border-bottom:0; } .session-row strong, .session-row span { display:block; } .session-row > div span { color:var(--muted); font-size:12px; margin-top:3px; } .session-list.compact .session-row { padding:9px 0; }
.control-hero { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:26px; margin-bottom:18px; } .control-hero h1 { font-size:clamp(32px,5vw,54px); margin-top:14px; } .control-hero p { margin-bottom:0; }
.control-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:18px; margin-top:18px; } .control-empty { min-height:220px; display:grid; place-items:center; align-content:center; gap:5px; } .control-empty strong { color:var(--text); font-size:18px; } .control-empty span { font-size:13px; }
.active-session-stack { display:grid; gap:10px; } .active-session-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; border:1px solid rgba(127,231,176,.18); border-radius:18px; background:rgba(127,231,176,.035); } .active-session-card h2 { margin:12px 0 5px; } .active-session-card p { margin:0; } .session-live-time { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.device-list { display:grid; gap:4px; } .device-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); } .device-row:last-child { border-bottom:0; } .device-dot { width:9px; height:9px; border-radius:50%; background:var(--muted-2); } .device-dot.online { background:var(--good); box-shadow:0 0 0 4px rgba(127,231,176,.07); } .device-row strong, .device-row span { display:block; } .device-row > div span { color:var(--muted); font-size:11px; margin-top:3px; }
.audit-box { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; } .audit-box div { border:1px solid var(--line); border-radius:13px; padding:13px; } .audit-box span { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; margin-bottom:5px; } .audit-box strong { font-size:20px; }
.toast-region { position:fixed; z-index:80; right:18px; bottom:max(18px, env(safe-area-inset-bottom)); display:grid; gap:8px; pointer-events:none; } .toast { max-width:min(390px,calc(100vw - 36px)); border:1px solid var(--line-strong); background:rgba(25,25,29,.96); color:var(--text); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); font-size:13px; animation:toast-in .18s ease-out; } .toast.error { border-color:rgba(255,100,100,.35); } .toast.success { border-color:rgba(127,231,176,.28); } @keyframes toast-in { from { transform:translateY(8px); opacity:0; } }
.loader { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.18); border-top-color:#fff; animation:spin .75s linear infinite; display:inline-block; vertical-align:middle; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 920px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .camera-layout, .control-grid { grid-template-columns:1fr; } .camera-side { grid-template-columns:1fr 1fr; } }
@media (max-width: 820px) { .login-wrap { grid-template-columns:1fr; align-content:center; } .hero-copy { display:none; } .login-card { justify-self:center; } .grid-3 { grid-template-columns:1fr; } .detail-grid { grid-template-columns:1fr; } .page-head { align-items:stretch; flex-direction:column; } .page-head .btn { width:100%; } .op-header { align-items:stretch; flex-direction:column; } .control-hero { align-items:stretch; flex-direction:column; } }
@media (max-width: 620px) { .app-shell { padding-left:15px; padding-right:15px; } .topbar { margin-bottom:22px; } .account-email { display:none; } .grid-2, .grid-4 { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .form-grid .span-2 { grid-column:span 1; } .event-item { grid-template-columns:1fr; } .event-actions .btn { flex:1; } .modal { padding:20px; } .role-grid, .session-kind, .capture-buttons, .camera-side { grid-template-columns:1fr; } .capture-card { min-height:520px; padding:18px; } .capture-buttons .capture-btn { min-height:120px; } .capture-top { align-items:flex-start; flex-direction:column; } .session-timer { font-size:64px; margin:32px 0 4px; } .active-session-card { align-items:flex-start; flex-direction:column; } .session-live-time { font-size:30px; } .audit-box { grid-template-columns:1fr; } .op-actions .btn { flex:1; } }

/* ============================================================
   V0.3 — CAPTURE ENGINE
   ============================================================ */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.capture-v03 { align-content:start !important; min-height:680px; }
.capture-empty-v03 { padding:24px 0; }
.capture-session-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:16px 0 14px; }
.capture-session-bar > div { padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.capture-session-bar span { display:block; color:var(--muted); font-size:9px; font-weight:760; letter-spacing:.09em; margin-bottom:4px; }
.capture-session-bar strong { display:block; font-size:17px; font-variant-numeric:tabular-nums; }
.capture-engine-tabs { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.engine-tab { min-height:70px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); color:var(--text); cursor:pointer; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; text-align:left; padding:12px 14px; }
.engine-tab > span { grid-row:1 / span 2; font-size:25px; color:#dddde5; }
.engine-tab strong { font-size:13px; }
.engine-tab small { color:var(--muted); font-size:11px; }
.engine-tab.active { border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.085); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.preference-card { margin:15px 0 18px; padding:14px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); text-align:left; }
.preference-card > span { display:block; color:var(--muted); font-size:10px; font-weight:760; letter-spacing:.08em; margin-bottom:9px; }
.preference-card > small { display:block; color:var(--muted); line-height:1.45; margin-top:9px; }
.preference-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pref-btn { min-height:42px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); color:var(--text); font-weight:720; cursor:pointer; }
.pref-btn.active { background:#f4f3ef; color:#0a0a0b; border-color:#f4f3ef; }
.native-capture-panel { padding:28px; border:1px solid var(--line); border-radius:20px; background:radial-gradient(circle at 50% -30%,rgba(255,255,255,.11),transparent 46%),rgba(255,255,255,.018); text-align:center; }
.native-camera-icon { width:66px; height:66px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:21px; margin:0 auto 11px; font-size:30px; background:rgba(255,255,255,.055); }
.native-capture-panel h2 { font-size:clamp(24px,4vw,34px); margin:7px 0 8px; }
.native-explainer { max-width:650px; margin:0 auto 14px; line-height:1.55; }
.feature-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:15px 0 20px; }
.feature-chips span { border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:999px; padding:7px 10px; color:#d8d7dd; font-size:11px; }
.native-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 auto 20px; max-width:680px; }
.native-flow div { display:grid; gap:6px; justify-items:center; border:1px solid var(--line); border-radius:14px; padding:13px 9px; background:rgba(255,255,255,.02); }
.native-flow b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#f4f3ef; color:#0b0b0d; font-size:12px; }
.native-flow span { color:var(--muted); font-size:11px; line-height:1.35; }
.native-import-btn { display:flex; align-items:center; justify-content:center; cursor:pointer; max-width:520px; margin:0 auto; }
.microcopy { color:var(--muted-2); font-size:10px; line-height:1.45; margin:10px 0 0; }
.web-camera-panel { display:grid; gap:13px; }
.camera-stage { position:relative; width:min(100%,520px); margin:0 auto; aspect-ratio:9/16; max-height:67vh; overflow:hidden; border-radius:22px; border:1px solid var(--line-strong); background:#030304; box-shadow:0 22px 55px rgba(0,0,0,.36); }
.camera-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.camera-stage::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); border-radius:inherit; }
.camera-stage-top { position:absolute; z-index:3; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px; background:linear-gradient(180deg,rgba(0,0,0,.62),transparent); }
.camera-live-state, .recording-pill { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 10px; background:rgba(0,0,0,.48); backdrop-filter:blur(10px); color:#fff; font-size:11px; }
.camera-live-state i { width:7px; height:7px; border-radius:50%; background:var(--good); }
.recording-pill { color:#ffd5d5; }
.camera-stage-bottom { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:48px 12px 12px; background:linear-gradient(0deg,rgba(0,0,0,.78),transparent); }
.camera-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,.8fr) auto; gap:8px; align-items:end; }
.camera-device-field, .zoom-field { display:grid; gap:5px; }
.camera-device-field > span, .zoom-field > span { color:#cfcfd6; font-size:9px; font-weight:760; letter-spacing:.08em; }
.camera-device-field select { min-height:39px; padding:7px 9px; border-radius:10px; background:rgba(12,12,15,.82); font-size:11px; }
.zoom-field input { width:100%; accent-color:#fff; }
.camera-restart { min-height:39px; padding:0 11px; font-size:10px; background:rgba(12,12,15,.82); }
.web-capture-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.capture-action { min-height:105px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.027); color:var(--text); display:grid; justify-items:center; align-content:center; gap:4px; cursor:pointer; }
.capture-action:disabled { opacity:.38; cursor:not-allowed; }
.capture-action strong { font-size:12px; }
.capture-action small { color:var(--muted); font-size:9px; }
.shutter { width:38px; height:38px; border-radius:50%; display:block; border:3px solid rgba(255,255,255,.82); box-shadow:inset 0 0 0 3px rgba(0,0,0,.45); }
.shutter.white { background:#fff; }
.shutter.red { background:#ff5353; }
.video-action.recording { border-color:rgba(255,83,83,.45); background:rgba(255,83,83,.08); }
.burst-symbol { font-size:34px; line-height:1; }
.camera-limit-callout { margin-top:1px; color:#d6cfbc; }
.capture-footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.local-health-card .section-head { align-items:start; }
.storage-meter { display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--line); border-radius:13px; padding:11px 12px; margin:12px 0 9px; }
.storage-meter span { font-variant-numeric:tabular-nums; font-size:12px; }
.storage-meter b { color:var(--good); font-size:10px; }
.local-gallery-modal { width:min(900px,100%); }
.local-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.local-media-card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); cursor:pointer; }
.local-media-card:hover { background:rgba(255,255,255,.05); }
.local-media-thumb { min-height:92px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.045); margin-bottom:9px; font-size:27px; }
.local-media-card strong { display:block; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.local-media-card span { display:block; margin-top:5px; color:var(--muted); font-size:9px; }
.preview-overlay { z-index:70; }
.preview-stage { position:relative; width:min(920px,100%); height:min(88vh,900px); display:grid; place-items:center; }
.preview-stage img, .preview-stage video { max-width:100%; max-height:100%; border-radius:18px; box-shadow:var(--shadow); background:#000; }
.preview-close { position:absolute; z-index:2; top:8px; right:8px; background:rgba(0,0,0,.72); }

@media (max-width:920px) {
  .v03-camera-layout { grid-template-columns:1fr; }
  .camera-stage { max-height:62vh; }
}
@media (max-width:620px) {
  .capture-v03 { padding:14px; }
  .capture-session-bar { grid-template-columns:repeat(2,1fr); }
  .capture-engine-tabs { grid-template-columns:1fr 1fr; }
  .engine-tab { padding:10px; min-height:64px; column-gap:7px; }
  .engine-tab > span { font-size:21px; }
  .engine-tab strong { font-size:11px; }
  .engine-tab small { font-size:9px; }
  .native-capture-panel { padding:20px 14px; }
  .native-flow { grid-template-columns:1fr; }
  .native-flow div { grid-template-columns:auto 1fr; justify-items:start; align-items:center; text-align:left; }
  .camera-stage { width:100%; max-height:none; }
  .camera-toolbar { grid-template-columns:1fr; }
  .web-capture-actions { grid-template-columns:repeat(3,1fr); }
  .capture-action { min-height:91px; padding:8px 3px; }
  .capture-footer-actions { grid-template-columns:1fr; }
  .local-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preference-choice { grid-template-columns:1fr 1fr; }
}
.capability-list { display:grid; gap:0; }
.capability-list div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.capability-list div:last-child { border-bottom:0; }
.capability-list span { color:var(--muted); font-size:11px; }
.capability-list strong { font-size:11px; text-align:right; }
.device-dot.busy { background:var(--warn); box-shadow:0 0 0 4px rgba(255,212,121,.07); }

/* ============================================================
   V0.3.1 — iOS DIRECT CAPTURE
   Foto/Video: HTML Media Capture -> archivo directo a la sesión.
   Modos computacionales Apple: importación puntual desde Fotos.
   ============================================================ */
.ios-camera-shell {
  width:min(100%,520px);
  margin:0 auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  overflow:hidden;
  background:#000;
  color:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.48);
}
.ios-camera-topbar {
  min-height:56px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#050505;
}
.ios-camera-status {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:780;
  letter-spacing:.09em;
  color:#f2f2f4;
}
.ios-camera-status i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--good);
  box-shadow:0 0 0 4px rgba(127,231,176,.08);
}
.ios-gallery-pill {
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  min-width:44px;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  font-weight:760;
  cursor:pointer;
}
.ios-camera-viewport {
  position:relative;
  aspect-ratio:3 / 4;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 52% 37%,rgba(255,255,255,.075),transparent 17%),
    radial-gradient(circle at 37% 58%,rgba(140,140,145,.10),transparent 24%),
    linear-gradient(155deg,#171719 0%,#070708 46%,#111114 100%);
  overflow:hidden;
}
.ios-camera-viewport::before,
.ios-camera-viewport::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
.ios-camera-viewport::before {
  inset:0;
  background:
    linear-gradient(90deg,transparent 33.1%,rgba(255,255,255,.055) 33.3%,rgba(255,255,255,.055) 33.55%,transparent 33.75%,transparent 66.2%,rgba(255,255,255,.055) 66.4%,rgba(255,255,255,.055) 66.65%,transparent 66.85%),
    linear-gradient(0deg,transparent 33.1%,rgba(255,255,255,.055) 33.3%,rgba(255,255,255,.055) 33.55%,transparent 33.75%,transparent 66.2%,rgba(255,255,255,.055) 66.4%,rgba(255,255,255,.055) 66.65%,transparent 66.85%);
  opacity:.75;
}
.ios-camera-viewport::after {
  width:150%;
  height:120px;
  left:-25%;
  bottom:-76px;
  border-radius:50%;
  background:rgba(255,255,255,.035);
  filter:blur(18px);
}
.ios-camera-placeholder {
  position:relative;
  z-index:1;
  max-width:290px;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:7px;
  padding:22px;
  color:#fff;
}
.ios-lens-mark {
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(10px);
  font-size:27px;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  margin-bottom:5px;
}
.ios-camera-placeholder strong { font-size:17px; letter-spacing:-.02em; }
.ios-camera-placeholder small { color:rgba(255,255,255,.58); line-height:1.45; font-size:11px; }
.ios-camera-controls {
  background:#050505;
  padding:10px 12px 18px;
  min-height:162px;
}
.ios-mode-strip {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:34px;
  overflow-x:auto;
  scrollbar-width:none;
  margin-bottom:13px;
}
.ios-mode-strip::-webkit-scrollbar { display:none; }
.ios-mode {
  appearance:none;
  border:0;
  padding:5px 1px;
  background:transparent;
  color:rgba(255,255,255,.56);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  white-space:nowrap;
  cursor:pointer;
}
.ios-mode.active { color:#ffd64a; }
.ios-shutter-row {
  display:grid;
  grid-template-columns:74px 1fr 74px;
  align-items:center;
  justify-items:center;
  min-height:91px;
}
.ios-shutter-button {
  width:74px;
  height:74px;
  appearance:none;
  border:4px solid #fff;
  border-radius:50%;
  background:transparent;
  padding:4px;
  cursor:pointer;
  transition:transform .12s ease, opacity .15s ease;
}
.ios-shutter-button:active { transform:scale(.94); }
.ios-shutter-button span {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:#fff;
  transition:.15s ease;
}
.ios-shutter-button.video span { background:#ff3b30; transform:scale(.78); }
.ios-thumb-button {
  appearance:none;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:linear-gradient(145deg,#252529,#101012);
  color:#fff;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1px;
  cursor:pointer;
}
.ios-thumb-button span { font-size:17px; line-height:1; }
.ios-thumb-button small { font-size:8px; color:rgba(255,255,255,.72); }
.ios-camera-hint { display:grid; justify-items:center; gap:3px; }
.ios-camera-hint span { color:#fff; font-size:10px; font-weight:800; }
.ios-camera-hint small { color:rgba(255,255,255,.45); font-size:9px; }
.ios-special-modes {
  width:100%;
  border-top:1px solid rgba(255,255,255,.09);
  padding:14px 8px 4px;
  display:grid;
  gap:11px;
  text-align:left;
}
.ios-special-modes p { margin:0; display:grid; gap:5px; }
.ios-special-modes p strong { font-size:13px; }
.ios-special-modes p span { color:rgba(255,255,255,.58); font-size:11px; line-height:1.45; }
.ios-special-modes > small { color:rgba(255,255,255,.42); text-align:center; font-size:9px; }
.ios-special-modes .native-import-btn { width:100%; max-width:none; }
.ios-feature-chips { justify-content:flex-start; margin:0; }
.ios-feature-chips span { color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.055); }
.ios-capture-note { width:min(100%,520px); margin:12px auto 0; }

@media (max-width:620px) {
  .ios-camera-shell { border-radius:22px; }
  .ios-camera-viewport { aspect-ratio:3 / 4; }
  .ios-camera-controls { padding-bottom:14px; }
  .ios-mode-strip { gap:18px; justify-content:flex-start; padding-inline:14px; }
  .ios-shutter-row { grid-template-columns:64px 1fr 64px; }
  .ios-shutter-button { width:70px; height:70px; }
}


/* ============================================================
   V0.3.3 — STABLE CAMERA
   Un solo sistema de cámara: Foto + Video + zoom + flash/luz + calidad.
   ============================================================ */
.compact-capture-top { align-items:center; }
.capture-counter-inline { color:var(--muted); font-size:11px; }
.capture-counter-inline b { color:var(--text); }
.unified-camera-shell { width:min(100%,560px); margin:14px auto 0; background:#000; color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:30px; overflow:hidden; box-shadow:0 28px 76px rgba(0,0,0,.5); }
.unified-camera-stage { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:#000; touch-action:manipulation; }
.unified-camera-shell.video-mode .unified-camera-stage { aspect-ratio:9/16; }
.unified-camera-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.camera-top-controls { position:absolute; z-index:5; top:0; left:0; right:0; min-height:62px; display:grid; grid-template-columns:70px 1fr 84px; align-items:center; gap:8px; padding:12px 14px 18px; background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.18),transparent); }
.camera-icon-btn,.camera-quality-btn { appearance:none; border:0; color:#fff; background:rgba(24,24,26,.55); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); cursor:pointer; }
.camera-icon-btn { width:48px; min-height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:4px; justify-self:start; }
.camera-icon-btn span { font-size:18px; line-height:1; } .camera-icon-btn small { font-size:8px; font-weight:800; }
.camera-icon-btn.active { color:#ffd84e; background:rgba(255,216,78,.12); }
.camera-icon-btn:disabled { opacity:.35; cursor:not-allowed; }
.camera-center-status { display:flex; justify-content:center; align-items:center; color:rgba(255,255,255,.82); font-size:10px; font-weight:750; letter-spacing:.04em; }
.camera-quality-btn { min-height:38px; padding:0 9px; border-radius:999px; display:flex; justify-content:center; align-items:center; gap:4px; justify-self:end; }
.camera-quality-btn strong { font-size:10px; white-space:nowrap; } .camera-quality-btn small { opacity:.7; }
.clean-rec { background:rgba(255,59,48,.22); border:1px solid rgba(255,59,48,.38); }
.camera-zoom-pills { position:absolute; z-index:5; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:5px; border-radius:999px; background:rgba(0,0,0,.38); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.camera-zoom-pills button { appearance:none; border:0; width:34px; height:34px; border-radius:50%; background:transparent; color:#fff; font-size:11px; font-weight:800; cursor:pointer; }
.camera-zoom-pills button.active { background:#fff; color:#000; }
.camera-zoom-pills button[hidden] { display:none; }
.focus-ring { position:absolute; z-index:6; width:64px; height:64px; border:1.5px solid #ffd84e; transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.focus-ring::after { content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; border:1px solid #ffd84e; transform:translate(-50%,-50%); }
.focus-ring.show { animation:focus-pop 1s ease; }
@keyframes focus-pop { 0%{opacity:0; transform:translate(-50%,-50%) scale(1.25)} 18%,70%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0} }
.unified-camera-controls { background:#050505; padding:10px 14px 16px; }
.camera-mode-switch { height:34px; display:flex; justify-content:center; align-items:center; gap:30px; margin-bottom:8px; }
.camera-mode-switch button { appearance:none; border:0; background:transparent; color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.055em; font-weight:850; padding:7px 2px; cursor:pointer; }
.camera-mode-switch button.active { color:#ffd84e; }
.camera-shutter-row { display:grid; grid-template-columns:72px 1fr 72px; align-items:center; justify-items:center; min-height:96px; }
.unified-shutter { width:76px; height:76px; border:4px solid #fff; border-radius:50%; padding:5px; background:transparent; appearance:none; cursor:pointer; transition:transform .12s ease; }
.unified-shutter:active { transform:scale(.94); }
.unified-shutter span { display:block; width:100%; height:100%; border-radius:50%; background:#fff; transition:.18s ease; }
.unified-shutter.video span { background:#ff3b30; transform:scale(.77); }
.unified-shutter.video.recording span { border-radius:7px; transform:scale(.48); }
.camera-side-action { width:52px; height:52px; border-radius:12px; border:1px solid rgba(255,255,255,.15); color:#fff; background:rgba(255,255,255,.08); display:grid; place-items:center; align-content:center; gap:1px; cursor:pointer; font-family:inherit; }
.camera-side-action span { font-size:19px; line-height:1; } .camera-side-action small { font-size:8px; color:rgba(255,255,255,.72); }
.import-action { box-sizing:border-box; }
.zoom-slider-row { display:grid; grid-template-columns:46px 1fr 40px; gap:8px; align-items:center; color:rgba(255,255,255,.6); font-size:9px; min-height:30px; }
.zoom-slider-row input { width:100%; accent-color:#fff; } .zoom-slider-row span:first-child { color:#fff; font-weight:800; }
.single-camera-footer { align-items:center; }
.single-camera-footer > span { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.camera-settings-modal { max-width:560px; }
.settings-group { display:grid; gap:9px; padding:14px 0; border-bottom:1px solid var(--line); }
.settings-group > span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; }
.quality-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.quality-option { border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); color:var(--text); min-height:78px; display:grid; align-content:center; justify-items:center; gap:3px; cursor:pointer; }
.quality-option strong { font-size:15px; } .quality-option small { color:var(--muted); font-size:9px; }
.quality-option.active { border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.09); }
.settings-help { color:var(--muted); line-height:1.45; font-size:10px; }
.camera-tech-readout strong { font-size:22px; } .camera-tech-readout small { color:var(--muted); }
.btn-small { min-height:34px; padding:0 11px; font-size:10px; }

@media (max-width:620px) {
  .capture-card.capture-v03 { padding:8px; border-radius:24px; }
  .compact-capture-top { padding:4px 4px 0; }
  .unified-camera-shell { width:calc(100% + 0px); border-radius:24px; margin-top:10px; }
  .camera-top-controls { grid-template-columns:58px 1fr 76px; padding-inline:10px; }
  .camera-quality-btn strong { font-size:9px; }
  .camera-mode-switch { gap:26px; }
  .camera-shutter-row { grid-template-columns:60px 1fr 60px; }
  .unified-shutter { width:72px; height:72px; }
  .camera-side-action { width:48px; height:48px; }
  .zoom-slider-row { padding-inline:2px; }
  .quality-grid { grid-template-columns:1fr; }
  .single-camera-footer { grid-template-columns:1fr; }
}


/* V0.3.3 — estabilidad de cámara */
.camera-recovery-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.camera-recovery-overlay[hidden] { display: none; }
.camera-recovery-overlay span {
  padding: .58rem .86rem;
  border-radius: 999px;
  background: rgba(10,10,12,.74);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .04em;
}
.unified-shutter:disabled { opacity: .5; cursor: not-allowed; }


/* ============================================================
   V0.4 — GOOGLE DRIVE AUTOMATION
   ============================================================ */
.drive-card { margin: 18px 0; }
.drive-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0 16px; }
.drive-summary > div { border:1px solid var(--line, rgba(255,255,255,.12)); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.drive-summary span { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65; }
.drive-summary strong { font-size:1.08rem; }
@media (max-width:720px){ .drive-summary { grid-template-columns:1fr; } }