/* ═══════════════════════════════════════════════════════════
   CRYPCAM — Dark Glassmorphism Design System
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg-primary: #0d0d0d;
  --bg-secondary: #141414;
  --bg-tertiary: #1a1a1a;
  --glass-bg: rgba(255,255,255,0.03);
  --glass-bg-hover: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.06);
  --glass-border-light: rgba(255,255,255,0.10);
  --blur-glass: 20px;
  --text-primary: #e8e8e8;
  --text-secondary: #8a8a8a;
  --text-muted: #555555;
  --accent: #d4a017;
  --accent-glow: #e8b830;
  --accent-muted: rgba(212,160,23,0.12);
  --accent-border: rgba(212,160,23,0.25);
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.7);
  --topbar-height: 4rem;
  --bottomnav-height: 4rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }

body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height:100vh; min-height:100dvh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

#app { width:100%; height:100vh; height:100dvh; position:relative; overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
input,select,textarea { font:inherit; color:inherit; }
img { display:block; max-width:100%; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* ── Glass ── */
.glass { background:var(--glass-bg); backdrop-filter:blur(var(--blur-glass)); -webkit-backdrop-filter:blur(var(--blur-glass)); border-radius:var(--radius-md); }

/* ── Layout ── */
.app-shell { display:flex; flex-direction:column; height:100%; position:relative; }
.app-bg { position:absolute; inset:0; background:var(--bg-primary); z-index:0; }

.topbar {
  position:fixed; top:0; left:0; right:0; z-index:40;
  height:calc(var(--topbar-height) + var(--safe-top));
  padding-top:var(--safe-top);
  background:var(--glass-bg); backdrop-filter:blur(var(--blur-glass)); -webkit-backdrop-filter:blur(var(--blur-glass));
  border-bottom:1px solid var(--glass-border); transform:translateZ(0);
}
.topbar-inner { height:var(--topbar-height); padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; }

.main-content {
  flex:1; overflow-y:auto; overflow-x:hidden; position:relative; z-index:10;
  padding-top:calc(var(--topbar-height) + var(--safe-top));
  padding-bottom:calc(var(--bottomnav-height) + var(--safe-bottom));
}

.bottomnav {
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  min-height:var(--bottomnav-height); padding-bottom:var(--safe-bottom);
  background:var(--glass-bg); backdrop-filter:blur(var(--blur-glass)); -webkit-backdrop-filter:blur(var(--blur-glass));
  border-top:1px solid var(--glass-border); transform:translateZ(0);
}
.bottomnav-inner { display:flex; justify-content:space-around; align-items:center; height:var(--bottomnav-height); }

.nav-item {
  display:flex; align-items:center; justify-content:center;
  padding:0.75rem 1.25rem; color:var(--text-muted); transition:color var(--transition-fast); position:relative;
}
.nav-item:hover { color:var(--text-secondary); }
.nav-item.active { color:var(--accent); }
.nav-item.active::after { content:''; position:absolute; bottom:0; width:3rem; height:1px; background:var(--accent); }

.page { padding:1.5rem; max-width:56rem; margin:0 auto; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.75rem 1.5rem; border-radius:var(--radius-md); font-weight:500; font-size:0.875rem;
  transition:all var(--transition-fast); white-space:nowrap;
}
.btn-accent { background:var(--accent-muted); border:1px solid var(--accent-border); color:var(--accent-glow); }
.btn-accent:hover { background:var(--accent); color:#fff; }
.btn-accent:disabled { opacity:0.5; cursor:not-allowed; }
.btn-ghost { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); }
.btn-ghost:hover { background:var(--glass-bg-hover); color:var(--text-primary); }
.btn-danger { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; }
.btn-danger:hover { background:rgba(239,68,68,0.25); }
.btn-full { width:100%; }

/* ── Inputs ── */
.input {
  width:100%; padding:0.75rem 1rem; background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius-md); color:var(--text-primary); font-size:0.875rem; outline:none;
  transition:border-color var(--transition-fast);
}
.input::placeholder { color:var(--text-muted); }
.input:focus { border-color:var(--accent-border); }

select.input { appearance:auto; -webkit-appearance:auto; background-color:#1a1a1a; color:var(--text-primary); }
select.input option { background:#1a1a1a; color:var(--text-primary); }
select.input option:checked { background:#2a2a2a; }
textarea.input { resize:vertical; }

.input-icon-wrapper { position:relative; }
.input-icon-wrapper svg { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.input-icon-wrapper .input { padding-left:2.75rem; }

/* ── Cards ── */
.card {
  background:var(--glass-bg); backdrop-filter:blur(var(--blur-glass)); -webkit-backdrop-filter:blur(var(--blur-glass));
  border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:1.5rem;
}
.card-hover { transition:background var(--transition-fast); cursor:pointer; }
.card-hover:hover { background:var(--glass-bg-hover); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem; animation:fadeIn 0.2s ease;
}
.modal-content {
  width:100%; max-width:28rem; background:var(--glass-bg-strong); backdrop-filter:blur(30px);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:1.5rem; position:relative; animation:slideUp 0.25s ease;
}
.modal-close { position:absolute; right:0.75rem; top:0.75rem; color:var(--text-muted); padding:0.25rem; }
.modal-close:hover { color:var(--text-secondary); }

/* ── Misc ── */
.badge { display:inline-flex; align-items:center; gap:0.25rem; padding:0.125rem 0.5rem; font-size:0.7rem; font-weight:500; }
.badge-accent { background:var(--accent-muted); color:var(--accent-glow); }
.badge-success { background:rgba(34,197,94,0.15); color:#86efac; }
.alert-error { padding:0.75rem; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); border-radius:var(--radius-md); color:#fca5a5; font-size:0.875rem; }
.spinner { width:2rem; height:2rem; border:2px solid rgba(255,255,255,0.15); border-top-color:rgba(255,255,255,0.7); border-radius:50%; animation:spin 0.8s linear infinite; }
.loading-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg-primary); }

.switch { position:relative; width:44px; height:22px; cursor:pointer; display:inline-block; }
.switch input { display:none; }
.switch-track { position:absolute; inset:0; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:11px !important; transition:all var(--transition-normal); }
.switch-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; background:var(--glass-bg-hover); border:1px solid var(--glass-border-light); border-radius:50% !important; transition:all var(--transition-normal); box-shadow:var(--shadow-sm); }
.switch input:checked ~ .switch-track { background:var(--accent-muted); border-color:var(--accent); }
.switch input:checked ~ .switch-thumb { left:calc(100% - 20px); background:var(--accent-muted); border-color:var(--accent); }

.icon-btn { width:2.5rem; height:2.5rem; border-radius:50% !important; display:flex; align-items:center; justify-content:center; transition:background var(--transition-fast); }
.icon-btn-blue { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2); color:#60a5fa; }
.icon-btn-blue:hover { background:rgba(59,130,246,0.2); }
.icon-btn-red { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#f87171; }
.icon-btn-red:hover { background:rgba(239,68,68,0.2); }
.icon-btn-green { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); color:#4ade80; }

.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:4px; }
.photo-grid-item { aspect-ratio:1; overflow:hidden; border-radius:var(--radius-sm); position:relative; cursor:pointer; background:var(--bg-tertiary); }
.photo-grid-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-normal); }
.photo-grid-item:hover img { transform:scale(1.05); }

.tab-bar { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.5rem; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; border-radius:var(--radius-md); white-space:nowrap; font-size:0.875rem; transition:all var(--transition-fast); background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); }
.tab:hover { background:var(--glass-bg-hover); }
.tab.active { background:var(--accent); color:var(--text-primary); border-color:var(--accent); }

.note-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:1rem; cursor:pointer; transition:background var(--transition-fast); }
.note-card:hover { background:var(--glass-bg-hover); }

.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5rem 2rem; text-align:center; }
.empty-state-icon { width:4rem; height:4rem; background:var(--glass-bg); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform:rotate(360deg); } }

/* Utilities */
.text-center { text-align:center; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:0.5rem; }
.gap-3 { gap:0.75rem; }
.gap-4 { gap:1rem; }
.hidden { display:none !important; }
.mb-2 { margin-bottom:0.5rem; }
.mb-3 { margin-bottom:0.75rem; }
.mb-4 { margin-bottom:1rem; }
.mb-6 { margin-bottom:1.5rem; }
.mb-8 { margin-bottom:2rem; }
.mt-2 { margin-top:0.5rem; }
.mt-4 { margin-top:1rem; }
.mt-6 { margin-top:1.5rem; }
.w-full { width:100%; }
.font-medium { font-weight:500; }
.text-sm { font-size:0.875rem; }
.text-xs { font-size:0.75rem; }
.text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; }
.text-2xl { font-size:1.5rem; }
.text-3xl { font-size:1.875rem; }

@media (min-width:640px) { .photo-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } }
@media (min-width:768px) { .photo-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }

/* ── Skeleton loading ── */
.photo-skeleton {
  aspect-ratio:1; border-radius:var(--radius-sm);
  background:linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(255,255,255,0.05) 50%, var(--bg-tertiary) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* ── Performance & iOS fixes ── */
button, a, label { touch-action:manipulation; }
video { will-change:transform; }

/* ── Native select/option dark theme ── */
select {
  background:#1a1a1a !important;
  color:var(--text-primary) !important;
  border:1px solid var(--glass-border);
  padding:0.5rem 0.75rem;
  font-size:0.875rem;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 0.5rem center !important;
  padding-right:2rem;
  color-scheme:dark;
}
select option {
  background:#1a1a1a;
  color:#e7e5e4;
}