/* NoteSync Pro — Premium Dark UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --bg:            #080810;
  --surface:       #111118;
  --surface-2:     #1a1a28;
  --surface-3:     #22223a;
  --primary:       #7c6ff0;
  --primary-light: #9d93f5;
  --primary-dim:   rgba(124,111,240,.12);
  --primary-glow:  rgba(124,111,240,.38);
  --text:          #e8e8f2;
  --text-2:        #9090b0;
  --text-3:        #52526a;
  --border:        rgba(255,255,255,.07);
  --border-focus:  rgba(124,111,240,.5);
  --danger:        #ff5562;
  --danger-dim:    rgba(255,85,98,.14);
  --success:       #4ade80;
  --success-dim:   rgba(74,222,128,.14);
  --warn:          #fbbf24;
  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     24px;
  --shadow:        0 4px 32px rgba(0,0,0,.55);
  --shadow-p:      0 8px 32px var(--primary-glow);
  --safe-b:        env(safe-area-inset-bottom, 0px);
  --safe-t:        env(safe-area-inset-top, 0px);
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:2px; }

/* ═══════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════ */
.login-page {
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(124,111,240,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(80,60,200,.12)   0%, transparent 50%),
    var(--bg);
}
.login-card {
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:48px 36px;
  box-shadow:var(--shadow);
  animation:slideUp .4s ease;
}
.brand { display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.brand-icon {
  width:48px; height:48px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#9d50ff);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-p);
}
.brand-icon svg { width:26px; height:26px; }
.brand-name  { font-size:1.15rem; font-weight:700; color:var(--text); letter-spacing:-.3px; }
.brand-tag   { font-size:.72rem; color:var(--text-2); margin-top:2px; }
.login-title    { font-size:1.6rem; font-weight:700; letter-spacing:-.5px; margin-bottom:8px; }
.login-subtitle { font-size:.875rem; color:var(--text-2); margin-bottom:32px; }

.form-group  { margin-bottom:20px; }
.form-label  { display:block; font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); margin-bottom:8px; }
.input-wrap  { position:relative; }
.form-input  {
  width:100%;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 46px 14px 16px;
  font-size:.95rem; font-family:inherit; color:var(--text);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color:var(--text-3); }
.form-input:focus { border-color:var(--border-focus); box-shadow:0 0 0 4px var(--primary-dim); }
.input-toggle {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-3); padding:4px;
  display:flex; align-items:center; transition:color .2s;
}
.input-toggle:hover { color:var(--text-2); }

.btn-primary {
  width:100%;
  background:linear-gradient(135deg,var(--primary),#9d50ff);
  color:#fff; border:none;
  border-radius:var(--radius-sm);
  padding:15px;
  font-size:.95rem; font-weight:600; font-family:inherit;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:opacity .2s, transform .1s, box-shadow .2s;
  box-shadow:var(--shadow-p);
  margin-top:8px;
}
.btn-primary:hover  { opacity:.9; box-shadow:0 12px 40px var(--primary-glow); }
.btn-primary:active { transform:scale(.99); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }

.error-msg {
  background:var(--danger-dim);
  border:1px solid rgba(255,85,98,.3);
  border-radius:var(--radius-sm);
  padding:12px 16px; font-size:.85rem; color:var(--danger);
  margin-top:16px; display:none;
}
.error-msg.show { display:block; animation:fadeIn .2s; }

/* ═══════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════ */
.app-layout {
  display:flex; flex-direction:column;
  min-height:100dvh;
  max-width:800px; margin:0 auto;
}

/* Header */
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  padding-top:calc(16px + var(--safe-t));
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,16,.88);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.header-brand { display:flex; align-items:center; gap:10px; }
.header-icon {
  width:36px; height:36px;
  background:linear-gradient(135deg,var(--primary),#9d50ff);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.header-icon svg { width:18px; height:18px; }
.header-title { font-size:1rem; font-weight:700; }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-btn {
  width:38px; height:38px;
  border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, color .2s;
  text-decoration:none;
}
.icon-btn:hover { background:var(--surface-3); color:var(--text); }
.icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; }

/* Main content */
.app-main {
  flex:1;
  padding:20px;
  padding-bottom:calc(80px + var(--safe-b));
}

/* Tabs */
.tab-content        { display:none; }
.tab-content.active { display:block; animation:fadeIn .25s ease; }

/* ═══════════════════════════════════════
   UPLOAD ZONE
═══════════════════════════════════════ */
.upload-zone {
  border:2px dashed var(--border);
  border-radius:var(--radius-lg);
  padding:48px 24px; text-align:center;
  cursor:pointer; position:relative; overflow:hidden;
  margin-bottom:24px;
  transition:border-color .2s, background .2s;
}
.upload-zone:hover,
.upload-zone.drag-over { border-color:var(--primary); background:var(--primary-dim); }

.upload-icon {
  width:64px; height:64px;
  background:var(--primary-dim); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.upload-icon svg { width:30px; height:30px; stroke:var(--primary); fill:none; }
.upload-title    { font-size:1.05rem; font-weight:600; margin-bottom:8px; }
.upload-subtitle { font-size:.85rem; color:var(--text-2); margin-bottom:20px; line-height:1.6; }
.upload-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary-dim); color:var(--primary-light);
  border:1.5px solid rgba(124,111,240,.3); border-radius:50px;
  padding:10px 22px; font-size:.875rem; font-weight:500;
  cursor:pointer; font-family:inherit;
  transition:background .2s, border-color .2s;
}
.upload-btn:hover { background:rgba(124,111,240,.22); border-color:var(--primary); }
.upload-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; }
#file-input { display:none; }

/* Upload queue items */
.upload-queue { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.upload-item {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  animation:slideUp .3s ease;
}
.upload-item-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.upload-thumb {
  width:44px; height:44px;
  border-radius:8px; object-fit:cover;
  background:var(--surface-2); flex-shrink:0;
}
.upload-info { flex:1; min-width:0; }
.upload-name {
  font-size:.875rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.upload-status { font-size:.75rem; color:var(--text-2); margin-top:3px; }
.upload-status.resuming { color:var(--primary-light); }
.upload-status.done     { color:var(--success); }
.upload-status.error    { color:var(--danger); }
.upload-cancel {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); padding:4px; border-radius:6px;
  display:flex; align-items:center;
  transition:color .2s, background .2s;
}
.upload-cancel:hover { color:var(--danger); background:var(--danger-dim); }
.upload-cancel svg   { width:16px; height:16px; stroke:currentColor; fill:none; }

/* Progress bar */
.progress-track  { height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.progress-bar    {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  transition:width .35s ease; width:0%;
  position:relative;
}
.progress-bar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35));
  animation:shimmer 1.6s ease infinite;
}
.progress-bar.indeterminate { width:38%; animation:indetermSlide 1.4s ease infinite; }

/* ═══════════════════════════════════════
   GALLERY
═══════════════════════════════════════ */
.stats-bar {
  display:flex; align-items:center; justify-content:space-around;
  padding:14px 16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:20px;
}
.stat-item  { text-align:center; }
.stat-value { font-size:1rem; font-weight:700; }
.stat-label { font-size:.68rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

.gallery-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.gallery-title { font-size:.8rem; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.5px; }
.gallery-count { font-size:.78rem; color:var(--text-3); }

/* Grid */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}
@media(min-width:500px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); gap:6px; } }
@media(min-width:700px){ .gallery-grid{ grid-template-columns:repeat(5,1fr); gap:8px; } }

.gallery-item {
  aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
  position:relative; cursor:pointer; background:var(--surface-2);
  animation:fadeIn .3s ease;
}
.gallery-item img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease;
}
.gallery-item:hover img { transform:scale(1.06); }

.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  opacity:0; transition:opacity .2s;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:6px; gap:5px;
}
.gallery-item:hover .gallery-overlay { opacity:1; }

/* Shared action button / link in overlay */
.gallery-act {
  width:28px; height:28px;
  border-radius:7px; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s; text-decoration:none;
  flex-shrink:0;
}
.gallery-act svg { width:13px; height:13px; }

/* Download — purple tint */
.gallery-dl  { background:rgba(124,111,240,.8); color:var(--primary-light); }
.gallery-dl:hover { background:var(--primary); }

/* Delete — red tint */
.gallery-del { background:rgba(255,85,98,.8); color:#fff; }
.gallery-del:hover { background:var(--danger); }

.gallery-empty {
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-3);
}
.gallery-empty-icon {
  width:60px; height:60px;
  background:var(--surface-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.gallery-empty-icon svg { width:26px; height:26px; stroke:var(--text-3); fill:none; }
.gallery-empty p { font-size:.875rem; }

/* ═══════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════ */
.lightbox {
  position:fixed; inset:0; z-index:1000;
  display:none; background:rgba(0,0,0,.96);
  align-items:center; justify-content:center;
}
.lightbox.open { display:flex; animation:fadeIn .2s ease; }
.lightbox-img  {
  max-width:95vw; max-height:90vh; object-fit:contain;
  border-radius:var(--radius); box-shadow:0 32px 80px rgba(0,0,0,.8);
  animation:scaleIn .2s ease; display:block;
}
.lb-btn {
  position:fixed; z-index:1001;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.lb-btn:hover    { background:rgba(255,255,255,.2); }
.lb-btn svg      { width:20px; height:20px; stroke:#fff; fill:none; }
.lb-close        { top:20px; right:20px; }
.lb-prev         { top:50%; left:16px; transform:translateY(-50%); }
.lb-next         { top:50%; right:16px; transform:translateY(-50%); }

.lb-bar {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1); border-radius:50px;
  padding:10px 20px; z-index:1001;
}
.lb-counter { font-size:.8rem; color:rgba(255,255,255,.7); }
.lb-act {
  width:32px; height:32px; border-radius:50%; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s; text-decoration:none;
}
.lb-act svg { width:15px; height:15px; stroke:currentColor; fill:none; }
.lb-download { background:rgba(124,111,240,.2); color:var(--primary-light); }
.lb-download:hover { background:rgba(124,111,240,.4); }
.lb-delete   { background:rgba(255,85,98,.2);   color:var(--danger); }
.lb-delete:hover { background:rgba(255,85,98,.4); }

/* ═══════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════ */
.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:800px;
  background:rgba(17,17,24,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex; align-items:center;
  padding-bottom:var(--safe-b);
  z-index:200;
}
.nav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; padding:12px 0; gap:5px;
  border:none; background:none; color:var(--text-3);
  font-family:inherit; font-size:.68rem; font-weight:500;
  cursor:pointer; transition:color .2s;
}
.nav-item svg { width:22px; height:22px; stroke:currentColor; fill:none; transition:transform .2s; }
.nav-item.active { color:var(--primary-light); }
.nav-item.active svg { transform:scale(1.1); }

.nav-upload {
  flex:0 0 auto; width:56px; height:56px; margin:0 12px;
  background:linear-gradient(135deg,var(--primary),#9d50ff);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:4px solid var(--bg);
  box-shadow:0 4px 20px var(--primary-glow);
  transition:transform .2s, box-shadow .2s;
}
.nav-upload:hover { transform:scale(1.06); box-shadow:0 8px 28px var(--primary-glow); }
.nav-upload svg  { width:24px; height:24px; stroke:#fff; fill:none; }

/* ═══════════════════════════════════════
   TOASTS
═══════════════════════════════════════ */
.toast-container {
  position:fixed; top:80px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 18px; font-size:.875rem; color:var(--text);
  box-shadow:var(--shadow); animation:slideInR .3s ease;
  pointer-events:auto; max-width:280px;
}
.toast.success { border-color:rgba(74,222,128,.3); }
.toast.error   { border-color:rgba(255,85,98,.3); }

/* ═══════════════════════════════════════
   CONFIRM MODAL
═══════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .2s ease;
}
.modal {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
  max-width:320px; width:100%; animation:scaleIn .2s ease;
}
.modal-title { font-size:1.1rem; font-weight:700; margin-bottom:12px; }
.modal-body  { font-size:.875rem; color:var(--text-2); margin-bottom:24px; line-height:1.6; }
.modal-actions { display:flex; gap:12px; }
.btn-cancel {
  flex:1; padding:12px;
  background:var(--surface-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-2);
  font-family:inherit; font-size:.875rem; font-weight:500;
  cursor:pointer; transition:background .2s;
}
.btn-cancel:hover { background:var(--surface-2); }
.btn-danger {
  flex:1; padding:12px;
  background:var(--danger-dim); border:1.5px solid rgba(255,85,98,.4);
  border-radius:var(--radius-sm); color:var(--danger);
  font-family:inherit; font-size:.875rem; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.btn-danger:hover { background:rgba(255,85,98,.25); }

/* ═══════════════════════════════════════
   INSTALL PROMPT
═══════════════════════════════════════ */
.install-prompt {
  background:var(--primary-dim);
  border:1.5px solid rgba(124,111,240,.3); border-radius:var(--radius);
  padding:16px; display:flex; align-items:center; gap:14px;
  margin-bottom:20px; animation:slideUp .4s ease;
}
.install-icon {
  width:42px; height:42px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#9d50ff); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.install-icon svg { width:22px; height:22px; stroke:#fff; fill:none; }
.install-text     { flex:1; }
.install-text h4  { font-size:.9rem; font-weight:600; margin-bottom:3px; }
.install-text p   { font-size:.75rem; color:var(--text-2); }
.btn-install {
  background:var(--primary); color:#fff; border:none;
  border-radius:8px; padding:10px 16px;
  font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit;
  white-space:nowrap; transition:opacity .2s; flex-shrink:0;
}
.btn-install:hover { opacity:.88; }
.btn-dismiss {
  background:none; border:none; color:var(--text-3);
  cursor:pointer; padding:4px; flex-shrink:0;
}
.btn-dismiss svg { width:16px; height:16px; stroke:currentColor; fill:none; }

/* ═══════════════════════════════════════
   SPINNER
═══════════════════════════════════════ */
.spinner {
  width:20px; height:20px;
  border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}

/* ═══════════════════════════════════════
   SETTINGS
═══════════════════════════════════════ */
.settings-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-bottom:16px;
}
.settings-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:.9rem; font-weight:500; }
.settings-row-sub   { font-size:.75rem; color:var(--text-2); margin-top:3px; }
.settings-row-val   { font-size:.8rem; color:var(--text-2); }
.settings-row-link  {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; color:var(--danger);
  text-decoration:none; font-weight:500; font-size:.9rem;
  transition:background .2s;
}
.settings-row-link:hover { background:var(--danger-dim); }
.settings-h { font-size:1.1rem; font-weight:700; margin-bottom:20px; }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeIn       { from{opacity:0}    to{opacity:1} }
@keyframes slideUp      { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInR     { from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn      { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@keyframes spin         { to{transform:rotate(360deg)} }
@keyframes shimmer      { 0%,100%{opacity:0} 50%{opacity:1} }
/* ═══════════════════════════════════════
   UPLOAD ACTIONS (files + camera side-by-side)
═══════════════════════════════════════ */
.upload-actions {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.camera-pick-btn {
  background: rgba(255,85,98,.1);
  color: #ff8a93;
  border-color: rgba(255,85,98,.3);
}
.camera-pick-btn:hover {
  background: rgba(255,85,98,.2);
  border-color: var(--danger);
  color: var(--danger);
}

/* ═══════════════════════════════════════
   CAMERA OVERLAY
═══════════════════════════════════════ */
.camera-overlay {
  position:fixed; inset:0; z-index:3000;
  display:none; flex-direction:column;
  align-items:center; justify-content:space-between;
  background:#000;
}
.camera-overlay.open { display:flex; }

#camera-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Header */
.camera-header {
  position:relative; z-index:3001;
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  background:linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
}
.cam-title {
  color:#fff; font-size:.9rem; font-weight:600;
  letter-spacing:.3px;
}
.cam-hbtn {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
  backdrop-filter:blur(6px);
}
.cam-hbtn:hover    { background:rgba(255,255,255,.25); }
.cam-hbtn:active   { transform:scale(.93); }

/* Footer */
.camera-footer {
  position:relative; z-index:3001;
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 40px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent);
}

/* Shutter button */
.capture-btn {
  width:72px; height:72px; border-radius:50%;
  background:#fff;
  border:5px solid rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(255,255,255,.2), 0 8px 32px rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
  flex-shrink:0;
}
.capture-btn:active {
  transform:scale(.88);
  box-shadow:0 0 0 6px rgba(255,255,255,.3);
}

/* Flash animation on capture */
@keyframes camFlash {
  0%   { opacity:0; }
  20%  { opacity:.7; }
  100% { opacity:0; }
}
.cam-flash {
  position:fixed; inset:0; z-index:4000;
  background:#fff; pointer-events:none;
  animation:camFlash .35s ease forwards;
}