/* Offline micro-UI kit (bootstrap-like subset). No external dependencies. */

:root{
  --font: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --text: #111827;
  --muted: #6b7280;
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: rgba(148,163,184,.35);
  --shadow: 0 8px 24px rgba(15,23,42,.08);
  --radius: 18px;

  --primary: #2563eb;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;
  --secondary: #64748b;

  --dark1: #0f172a;
  --dark2: #111827;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

/* IMPORTANT: prevent huge images from breaking layout */
img{ max-width: 100%; height: auto; display: block; }

/* Container */
.container{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Grid */
.row{ display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; }
.row > *{ padding-left:8px; padding-right:8px; }
.g-2{ --g: 8px; }
.g-3{ --g: 12px; }
.g-2.row, .g-3.row{ margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); }
.g-2.row > *, .g-3.row > *{ padding-left: var(--g); padding-right: var(--g); }
.col-12{ flex: 0 0 100%; max-width:100%; }
@media (min-width: 992px){
  .col-lg-7{ flex: 0 0 58.3333%; max-width:58.3333%; }
  .col-lg-5{ flex: 0 0 41.6667%; max-width:41.6667%; }
  .order-lg-1{ order:1; }
  .order-lg-2{ order:2; }
}
.order-1{ order:1; }
.order-2{ order:2; }
@media (min-width: 768px){
  .col-md-6{ flex: 0 0 50%; max-width:50%; }
}

/* Spacing utilities (subset) */
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.mt-2{ margin-top:.5rem !important; }
.mt-3{ margin-top:1rem !important; }
.mt-4{ margin-top:1.5rem !important; }
.py-4{ padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
.gap-2{ gap:.5rem !important; }
.gap-1{ gap:.25rem !important; }
.d-flex{ display:flex !important; }
.d-grid{ display:grid !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.align-items-center{ align-items:center !important; }
.align-items-start{ align-items:flex-start !important; }
.justify-content-between{ justify-content:space-between !important; }
.text-center{ text-align:center !important; }
.small{ font-size:.875rem; }
.text-muted{ color: var(--muted) !important; }
.text-white-50{ color: rgba(255,255,255,.65) !important; }
.d-none{ display:none !important; }
@media (min-width: 992px){ .d-lg-inline{ display:inline !important; } }
@media (min-width: 768px){ .d-md-flex{ display:flex !important; } }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-body{ padding: 16px; }
.shadow-sm{ box-shadow: var(--shadow); }

/* Forms */
.form-label{ display:block; font-weight:600; margin-bottom:6px; }
.form-text{ color: var(--muted); font-size:.82rem; margin-top:6px; }
.form-control, .form-select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.55);
  outline: none;
  background: #fff;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.6);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
  user-select:none;
}
.btn-sm{ padding: 8px 12px; font-size:.9rem; }
.btn-primary{ background: var(--primary); color:#fff; }
.btn-outline-secondary{ background:#fff; color: var(--text); border-color: rgba(148,163,184,.55); }
.btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,.35); }
.btn:disabled{ opacity:.7; cursor:not-allowed; }

.spinner-border{
  width: 14px; height:14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  border-radius: 50%;
  display:inline-block;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Alerts */
.alert{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.85);
}
.alert-secondary{ border-color: rgba(100,116,139,.35); }
.alert-success{ border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.08); }
.alert-danger{ border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.08); }
.alert-warning{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); }

/* Navbar */
.navbar{
  background: linear-gradient(135deg, var(--dark1), var(--dark2));
  color:#fff;
}
.sticky-top{ position:sticky; top:0; z-index:1000; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; padding-bottom:10px; }
.navbar-brand{ color:#fff; text-decoration:none; font-weight:800; letter-spacing: .2px; }
.navbar-toggler{
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 8px 10px;
  color:#fff;
}
.navbar-toggler-icon{
  width: 20px; height: 2px; background: rgba(255,255,255,.85);
  display:block; position: relative;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background: rgba(255,255,255,.85);
}
.navbar-toggler-icon::before{ top:-6px; }
.navbar-toggler-icon::after{ top:6px; }

.collapse{ display:none; }
.collapse.show{ display:block; }

.navbar-collapse{ width:100%; }
@media (min-width: 992px){
  .navbar-toggler{ display:none; }
  .navbar-collapse{ display:flex !important; align-items:center; justify-content:space-between; gap:16px; width:auto; }
  .collapse{ display:flex; }
}
.navbar-nav{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
@media (min-width: 992px){ .navbar-nav{ flex-direction:row; gap:10px; } }
.nav-link{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
}
.nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.nav-item{ margin:0; }

.navbar-text{ font-size:.9rem; }

/* Result image frame: fixed height to prevent layout shift */
.image-frame{
  width: 100%;
  height: 320px;
  max-height: 320px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
@media (max-width: 576px){
  .image-frame{ height: 240px; max-height: 240px; }
}
.image-frame-img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Step 19: Faces list thumbnails (grid cards) */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 12px;
}
@media (min-width: 768px){
  .grid-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .grid-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.face-thumb{
  height: 140px;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background: rgba(255,255,255,.85);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.thumb-img{
  width: 100px;
  height: auto;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.9);
  object-fit: contain;
  display:block;
}
.thumb-skeleton{
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(148,163,184,.20), rgba(148,163,184,.35), rgba(148,163,184,.20));
  background-size: 200% 100%;
  animation: sk 1.1s ease-in-out infinite;
}
@keyframes sk{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }
.thumb-fallback{
  color: var(--muted);
  font-size: .9rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,.35);
}
.badge-success{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.30); color: #166534; }
.badge-danger{ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.30); color: #991b1b; }
.badge-secondary{ background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.25); color: #334155; }

.fw-bold{ font-weight: 800; }