/* ──────────── RESET & TOKENS ──────────── */
  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  :root {
      --c-bg: #07111f;
      --c-surface: #0d1d35;
      --c-card: rgba(13, 29, 53, 0.75);
      --c-border: rgba(96, 165, 250, 0.16);
      --c-border2: rgba(96, 165, 250, 0.08);
      --blue-500: #1e4d8c;
      --blue-400: #2563b0;
      --blue-300: #3b82d8;
      --accent: #38bdf8;
      --accent2: #818cf8;
      --accent-glow: rgba(56, 189, 248, 0.35);
      --success: #34d399;
      --success-dim: rgba(52, 211, 153, 0.15);
      --danger: #f87171;
      --danger-dim: rgba(248, 113, 113, 0.12);
      --warning: #fbbf24;
      --warning-dim: rgba(251, 191, 36, 0.12);
      --text-1: #eef4ff;
      --text-2: #8db4d8;
      --text-3: #4a7096;
      --r-sm: 10px;
      --r-md: 18px;
      --r-lg: 28px;
      --font: 'Inter', system-ui, sans-serif;
  }

  html,
  body {
      height: 100%;
      font-family: var(--font);
      background: var(--c-bg);
      color: var(--text-1);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }

  ::-webkit-scrollbar {
      width: 3px;
  }

  ::-webkit-scrollbar-thumb {
      background: var(--blue-400);
      border-radius: 3px;
  }

  /* ──────────── AURORA BACKGROUND ──────────── */
  .aurora {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
  }

  .aurora-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.45;
      animation: blobFloat 18s ease-in-out infinite alternate;
  }

  .aurora-blob:nth-child(1) {
      width: 480px;
      height: 480px;
      top: -140px;
      left: -120px;
      background: radial-gradient(circle, #1a4f9e 0%, #0b2a66 60%, transparent 80%);
      animation-duration: 18s;
  }

  .aurora-blob:nth-child(2) {
      width: 360px;
      height: 360px;
      top: 40%;
      right: -80px;
      background: radial-gradient(circle, #0e7490 0%, #164e63 60%, transparent 80%);
      animation-duration: 14s;
      animation-delay: -5s;
  }

  .aurora-blob:nth-child(3) {
      width: 300px;
      height: 300px;
      bottom: -80px;
      left: 20%;
      background: radial-gradient(circle, #312e81 0%, #1e1b4b 60%, transparent 80%);
      animation-duration: 20s;
      animation-delay: -9s;
  }

  .aurora-blob:nth-child(4) {
      width: 220px;
      height: 220px;
      top: 55%;
      left: -60px;
      background: radial-gradient(circle, #0369a1 0%, transparent 70%);
      animation-duration: 12s;
      animation-delay: -3s;
  }

  @keyframes blobFloat {
      0% {
          transform: translate(0, 0) scale(1);
      }

      33% {
          transform: translate(30px, -20px) scale(1.06);
      }

      66% {
          transform: translate(-20px, 30px) scale(0.96);
      }

      100% {
          transform: translate(15px, 10px) scale(1.03);
      }
  }

  /* subtle noise texture overlay */
  .aurora::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.35;
  }

  /* ──────────── LAYOUT ──────────── */
  #app {
      position: relative;
      z-index: 1;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      max-width: 480px;
      margin: 0 auto;
      padding-bottom: env(safe-area-inset-bottom, 24px);
  }

  /* ──────────── HEADER ──────────── */
  header {
      position: sticky;
      top: 0;
      z-index: 200;
      padding: 14px 22px 12px;
      background: rgba(7, 17, 31, 0.82);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      border-bottom: 1px solid var(--c-border);
  }

  .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
  }

  .logo-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--blue-400), var(--accent));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 12px rgba(56, 189, 248, 0.4);
  }

  .logo-icon svg {
      width: 18px;
      height: 18px;
      fill: white;
  }

  .logo-text {
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: -0.5px;
  }

  .logo-text em {
      font-style: normal;
      color: var(--accent);
  }

  .header-right {
      text-align: right;
      line-height: 1.25;
  }

  .hdr-time {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.3px;
      font-variant-numeric: tabular-nums;
  }

  .hdr-date {
      font-size: 0.68rem;
      color: var(--text-2);
  }

  /* ──────────── TAB BAR (Masuk / Pulang) ──────────── */
  .tab-bar {
      display: flex;
      gap: 0;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--c-border);
      border-radius: 14px;
      padding: 4px;
      margin: 0 18px;
  }

  .tab-btn {
      flex: 1;
      padding: 10px 0;
      border: none;
      background: transparent;
      font-family: var(--font);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-3);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
  }

  .tab-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
  }

  .tab-btn.active-in {
      background: linear-gradient(135deg, var(--blue-400), var(--accent));
      color: white;
      box-shadow: 0 4px 16px rgba(37, 99, 176, 0.45);
  }

  .tab-btn.active-out {
      background: linear-gradient(135deg, #d97706, #f59e0b);
      color: white;
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  }

  .tab-badge {
      font-size: 0.6rem;
      padding: 1px 6px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.2);
      font-weight: 700;
      text-transform: uppercase;
  }

  /* ──────────── MAIN ──────────── */
  main {
      flex: 1;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  /* ──────────── STEP BAR ──────────── */
  .step-bar {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--c-border);
      border-radius: 100px;
      padding: 5px 7px;
  }

  .step-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 3px;
      border-radius: 100px;
      font-size: 0.67rem;
      font-weight: 600;
      color: var(--text-3);
      transition: all 0.3s;
  }

  .step-item.active {
      background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
      color: white;
      box-shadow: 0 2px 10px rgba(37, 99, 176, 0.4);
  }

  .step-item.active-out-step {
      background: linear-gradient(135deg, #d97706, #f59e0b);
      color: white;
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
  }

  .step-item.done {
      color: var(--success);
  }

  .step-dot {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1.5px solid var(--c-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.58rem;
      font-weight: 700;
      flex-shrink: 0;
      transition: all 0.3s;
  }

  .step-item.active .step-dot {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
  }

  .step-item.active-out-step .step-dot {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
  }

  .step-item.done .step-dot {
      background: var(--success);
      border-color: var(--success);
      color: white;
  }

  .step-div {
      width: 18px;
      height: 1px;
      background: var(--c-border);
      flex-shrink: 0;
  }

  /* ──────────── CARD ──────────── */
  .card {
      background: var(--c-card);
      border: 1px solid var(--c-border);
      border-radius: var(--r-md);
      padding: 18px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
  }

  .card-title {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      color: var(--text-3);
      margin-bottom: 13px;
  }

  /* ──────────── STUDENT CARD ──────────── */
  .student-card {
      position: relative;
      overflow: hidden;
      padding: 18px;
      border-radius: var(--r-md);
      background: linear-gradient(135deg, rgba(37, 99, 176, 0.5) 0%, rgba(13, 29, 53, 0.9) 100%);
      border: 1px solid rgba(56, 189, 248, 0.25);
  }

  .student-card::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(56, 189, 248, 0.14) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
  }

  .stu-row {
      display: flex;
      align-items: center;
      gap: 14px;
      position: relative;
      z-index: 1;
  }

  .stu-avatar {
      width: 52px;
      height: 52px;
      border-radius: 15px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--blue-400), var(--accent));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: 800;
      color: white;
      box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35);
  }

  .stu-name {
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 2px;
  }

  .stu-nim {
      font-size: 0.72rem;
      color: var(--text-2);
      margin-bottom: 6px;
  }

  .stu-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(52, 211, 153, 0.14);
      border: 1px solid rgba(52, 211, 153, 0.35);
      color: var(--success);
      font-size: 0.62rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 100px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
  }

  .dot-live {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--success);
      animation: pulse 1.5s infinite;
  }

  /* attendance status row */
  .stu-status-row {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      position: relative;
      z-index: 1;
  }

  .stu-stat {
      flex: 1;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--c-border);
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
  }

  .stu-stat-label {
      font-size: 0.6rem;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.7px;
      margin-bottom: 3px;
  }

  .stu-stat-value {
      font-size: 0.82rem;
      font-weight: 700;
  }

  .stu-stat-value.in {
      color: var(--success);
  }

  .stu-stat-value.out {
      color: var(--warning);
  }

  .stu-stat-value.none {
      color: var(--text-3);
  }

  /* ──────────── SESSION ──────────── */
  .session-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
  }

  .sess-item {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--c-border2);
      border-radius: var(--r-sm);
      padding: 10px 12px;
  }

  .sess-label {
      font-size: 0.62rem;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.7px;
      margin-bottom: 3px;
  }

  .sess-value {
      font-size: 0.85rem;
      font-weight: 600;
  }

  .sess-item.full {
      grid-column: 1/-1;
  }

  /* ──────────── LOCATION ──────────── */
  .loc-status {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border-radius: var(--r-sm);
      border: 1px solid var(--c-border);
      background: rgba(255, 255, 255, 0.03);
      transition: all 0.4s;
  }

  .loc-status.checking {
      border-color: rgba(251, 191, 36, 0.45);
      background: var(--warning-dim);
  }

  .loc-status.success {
      border-color: rgba(52, 211, 153, 0.45);
      background: var(--success-dim);
  }

  .loc-status.error {
      border-color: rgba(248, 113, 113, 0.45);
      background: var(--danger-dim);
  }

  .loc-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);
  }

  .loc-icon svg {
      width: 19px;
      height: 19px;
  }

  .loc-status.checking .loc-icon {
      background: var(--warning-dim);
  }

  .loc-status.success .loc-icon {
      background: var(--success-dim);
  }

  .loc-status.error .loc-icon {
      background: var(--danger-dim);
  }

  .loc-info {
      flex: 1;
      min-width: 0;
  }

  .loc-title {
      font-size: 0.83rem;
      font-weight: 600;
      margin-bottom: 1px;
  }

  .loc-detail {
      font-size: 0.7rem;
      color: var(--text-2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .loc-acc {
      font-size: 0.62rem;
      color: var(--text-3);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--c-border);
      padding: 2px 7px;
      border-radius: 100px;
      white-space: nowrap;
      flex-shrink: 0;
  }

  /* ──────────── LEAFLET MAP ──────────── */
  #leafletMap {
      width: 100%;
      height: 200px;
      border-radius: var(--r-sm);
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid var(--c-border);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
      display: none;
  }

  #leafletMap.show {
      display: block;
  }

  /* Custom Leaflet dark theme overrides */
  .leaflet-container {
      background: #0a1726 !important;
      font-family: var(--font) !important;
  }

  .leaflet-control-zoom a {
      background: rgba(13, 29, 53, 0.95) !important;
      color: var(--text-1) !important;
      border-color: var(--c-border) !important;
      backdrop-filter: blur(8px);
  }

  .leaflet-control-zoom a:hover {
      background: var(--blue-500) !important;
  }

  .leaflet-control-attribution {
      background: rgba(7, 17, 31, 0.75) !important;
      color: var(--text-3) !important;
      font-size: 9px !important;
      backdrop-filter: blur(4px);
  }

  .leaflet-control-attribution a {
      color: var(--accent) !important;
  }

  .leaflet-popup-content-wrapper {
      background: rgba(13, 29, 53, 0.95) !important;
      color: var(--text-1) !important;
      border: 1px solid var(--c-border) !important;
      border-radius: 12px !important;
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  }

  .leaflet-popup-tip {
      background: rgba(13, 29, 53, 0.95) !important;
  }

  .leaflet-popup-close-button {
      color: var(--text-2) !important;
  }

  .custom-pin-icon {
      filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.7));
  }

  .campus-pin {
      filter: drop-shadow(0 4px 12px rgba(52, 211, 153, 0.6));
  }

  .map-popup-title {
      font-size: 0.82rem;
      font-weight: 700;
      margin-bottom: 3px;
  }

  .map-popup-sub {
      font-size: 0.68rem;
      color: var(--text-2);
  }

  .map-popup-coord {
      font-size: 0.65rem;
      color: var(--text-3);
      margin-top: 4px;
      font-variant-numeric: tabular-nums;
  }

  .map-dist-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 6px;
      background: rgba(52, 211, 153, 0.15);
      border: 1px solid rgba(52, 211, 153, 0.3);
      color: var(--success);
      font-size: 0.65rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 100px;
  }

  .map-dist-badge.far {
      background: var(--danger-dim);
      border-color: rgba(248, 113, 113, 0.3);
      color: var(--danger);
  }

  /* ──────────── BUTTONS ──────────── */
  .btn-loc {
      width: 100%;
      margin-top: 12px;
      padding: 13px;
      border-radius: var(--r-sm);
      border: none;
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.83rem;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: white;
      background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
      box-shadow: 0 4px 18px rgba(37, 99, 176, 0.4);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .btn-loc:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(37, 99, 176, 0.5);
  }

  .btn-loc:active:not(:disabled) {
      transform: translateY(0);
  }

  .btn-loc:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }

  .btn-loc svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
  }

  /* ──────────── CAMERA ──────────── */
  .cam-wrap {
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      background: #000;
      aspect-ratio: 3/4;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65);
      border: 1px solid var(--c-border);
  }

  #video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scaleX(-1);
      display: block;
  }

  #canvas {
      display: none;
  }

  .cam-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
  }

  .cc {
      position: absolute;
      width: 20px;
      height: 20px;
      border-color: var(--accent);
      border-style: solid;
      border-width: 0;
      opacity: 0.85;
  }

  .cc.tl {
      top: 12px;
      left: 12px;
      border-top-width: 2.5px;
      border-left-width: 2.5px;
      border-radius: 4px 0 0 0;
  }

  .cc.tr {
      top: 12px;
      right: 12px;
      border-top-width: 2.5px;
      border-right-width: 2.5px;
      border-radius: 0 4px 0 0;
  }

  .cc.bl {
      bottom: 12px;
      left: 12px;
      border-bottom-width: 2.5px;
      border-left-width: 2.5px;
      border-radius: 0 0 0 4px;
  }

  .cc.br {
      bottom: 12px;
      right: 12px;
      border-bottom-width: 2.5px;
      border-right-width: 2.5px;
      border-radius: 0 0 4px 0;
  }

  .face-oval {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);
      width: 155px;
      height: 195px;
      border: 2px solid rgba(56, 189, 248, 0.55);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      animation: ovalPulse 3s ease-in-out infinite;
  }

  .scan-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      animation: scanAnim 2.4s ease-in-out infinite;
      opacity: 0.65;
  }

  .cam-top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
  }

  .cam-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.66rem;
      font-weight: 700;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      padding: 4px 9px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: white;
  }

  .rec-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--danger);
      animation: pulse 1s infinite;
  }

  .cam-tip {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 58px);
      width: 86%;
      text-align: center;
      font-size: 0.68rem;
      color: rgba(255, 255, 255, 0.65);
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(8px);
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cam-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 18px 22px 22px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 26px;
  }

  .shutter {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      flex-shrink: 0;
      background: white;
      border: 4px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
  }

  .shutter::before {
      content: '';
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  }

  .shutter:hover:not(:disabled) {
      transform: scale(1.06);
  }

  .shutter:active:not(:disabled) {
      transform: scale(0.91);
  }

  .shutter:disabled {
      opacity: 0.35;
      cursor: not-allowed;
  }

  .side-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
  }

  .side-btn:hover {
      background: rgba(255, 255, 255, 0.22);
  }

  .side-btn svg {
      width: 17px;
      height: 17px;
      stroke: white;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  /* ──────────── PREVIEW ──────────── */
  .preview-wrap {
      position: relative;
      border-radius: var(--r-md);
      overflow: hidden;
      aspect-ratio: 3/4;
      display: none;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(52, 211, 153, 0.45);
  }

  .preview-wrap.show {
      display: block;
  }

  #snapshot {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scaleX(-1);
  }

  .preview-ok {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--success);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 14px rgba(52, 211, 153, 0.5);
  }

  .preview-ok svg {
      width: 16px;
      height: 16px;
      stroke: white;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  .preview-retake {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: white;
      font-size: 0.76rem;
      font-weight: 500;
      font-family: var(--font);
      padding: 7px 16px;
      border-radius: 100px;
      cursor: pointer;
      transition: all 0.2s;
  }

  .preview-retake:hover {
      background: rgba(0, 0, 0, 0.9);
  }

  /* ──────────── CAM PLACEHOLDER ──────────── */
  #camPlaceholder {
      display: none;
      aspect-ratio: 3/4;
      background: rgba(255, 255, 255, 0.02);
      border: 2px dashed rgba(255, 255, 255, 0.08);
      border-radius: var(--r-md);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      color: var(--text-3);
      text-align: center;
      padding: 24px;
  }

  #camPlaceholder svg {
      width: 44px;
      height: 44px;
      opacity: 0.35;
  }

  #camPlaceholder p {
      font-size: 0.78rem;
      line-height: 1.6;
  }

  /* ──────────── CHECKLIST ──────────── */
  .checklist {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--c-border2);
      border-radius: var(--r-sm);
  }

  .chk {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.78rem;
      color: var(--text-2);
      transition: color 0.3s;
  }

  .chk.ok {
      color: var(--success);
  }

  .chk-dot {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1.5px solid var(--c-border);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
  }

  .chk.ok .chk-dot {
      background: var(--success-dim);
      border-color: var(--success);
  }

  .chk-dot svg {
      width: 9px;
      height: 9px;
      stroke-width: 2.5;
      stroke: currentColor;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  /* ──────────── SUBMIT ──────────── */
  .btn-submit {
      width: 100%;
      padding: 15px;
      border: none;
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: white;
      border-radius: var(--r-sm);
      background: linear-gradient(135deg, var(--blue-400), var(--accent2));
      box-shadow: 0 6px 26px rgba(37, 99, 176, 0.45);
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
  }

  .btn-submit.out-mode {
      background: linear-gradient(135deg, #d97706, #f59e0b);
      box-shadow: 0 6px 26px rgba(245, 158, 11, 0.35);
  }

  .btn-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  }

  .btn-submit:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(37, 99, 176, 0.55);
  }

  .btn-submit:active:not(:disabled) {
      transform: translateY(0);
  }

  .btn-submit:disabled {
      opacity: 0.38;
      cursor: not-allowed;
      transform: none;
  }

  .btn-submit svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: white;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
  }

  /* ──────────── MODAL ──────────── */
  .modal-ov {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(7, 17, 31, 0.88);
      backdrop-filter: blur(18px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
  }

  .modal-ov.show {
      opacity: 1;
      pointer-events: all;
  }

  .modal-sheet {
      width: 100%;
      max-width: 480px;
      background: linear-gradient(160deg, #112040, #0a1628);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      padding: 28px 24px 40px;
      text-align: center;
      transform: translateY(100%);
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .modal-ov.show .modal-sheet {
      transform: translateY(0);
  }

  .modal-handle {
      width: 34px;
      height: 4px;
      border-radius: 2px;
      background: var(--c-border);
      margin: 0 auto 24px;
  }

  .modal-icon {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
  }

  .modal-icon.in-icon {
      background: rgba(52, 211, 153, 0.12);
      border: 2px solid rgba(52, 211, 153, 0.4);
      box-shadow: 0 0 40px rgba(52, 211, 153, 0.18);
  }

  .modal-icon.out-icon {
      background: rgba(251, 191, 36, 0.12);
      border: 2px solid rgba(251, 191, 36, 0.4);
      box-shadow: 0 0 40px rgba(251, 191, 36, 0.18);
  }

  .modal-icon svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  .modal-icon.in-icon svg {
      stroke: var(--success);
  }

  .modal-icon.out-icon svg {
      stroke: var(--warning);
  }

  .modal-title {
      font-size: 1.3rem;
      font-weight: 800;
      margin-bottom: 6px;
  }

  .modal-sub {
      font-size: 0.82rem;
      color: var(--text-2);
      margin-bottom: 22px;
      line-height: 1.65;
  }

  .modal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin-bottom: 22px;
      text-align: left;
  }

  .modal-item {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--c-border2);
      border-radius: var(--r-sm);
      padding: 10px 12px;
  }

  .modal-item.full {
      grid-column: 1/-1;
  }

  .mi-label {
      font-size: 0.6rem;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 3px;
  }

  .mi-value {
      font-size: 0.82rem;
      font-weight: 600;
  }

  .btn-close {
      width: 100%;
      padding: 14px;
      border: none;
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.88rem;
      font-weight: 700;
      color: white;
      background: linear-gradient(135deg, var(--blue-400), var(--accent));
      border-radius: var(--r-sm);
      box-shadow: 0 4px 18px rgba(56, 189, 248, 0.3);
      transition: all 0.2s;
  }

  .btn-close:hover {
      transform: translateY(-1px);
  }

  /* ──────────── HISTORY PILL ──────────── */
  .history-row {
      display: flex;
      flex-direction: column;
      gap: 7px;
  }

  .hist-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: var(--r-sm);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--c-border2);
  }

  .hist-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
  }

  .hist-dot.in {
      background: var(--success);
      box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
  }

  .hist-dot.out {
      background: var(--warning);
      box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  }

  .hist-label {
      font-size: 0.78rem;
      font-weight: 600;
      flex: 1;
  }

  .hist-time {
      font-size: 0.72rem;
      color: var(--text-2);
      font-variant-numeric: tabular-nums;
  }

  /* ──────────── SPINNER & TOAST ──────────── */
  .spinner {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 2.5px solid rgba(255, 255, 255, 0.2);
      border-top-color: white;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
  }

  #toast {
      position: fixed;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      z-index: 600;
      max-width: 330px;
      width: calc(100% - 32px);
      background: rgba(10, 20, 38, 0.97);
      backdrop-filter: blur(16px);
      border: 1px solid var(--c-border);
      border-radius: var(--r-sm);
      padding: 11px 14px;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.78rem;
      color: var(--text-1);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
  }

  #toast.show {
      transform: translateX(-50%) translateY(0);
  }

  #toast .t-icon {
      flex-shrink: 0;
      width: 17px;
      height: 17px;
  }

  footer {
      text-align: center;
      padding: 14px 22px 8px;
      font-size: 0.64rem;
      color: var(--text-3);
  }

  .hidden {
      display: none !important;
  }

  .submit-section {
      display: flex;
      flex-direction: column;
      gap: 9px;
  }

  /* ──────────── ANIMATIONS ──────────── */
  @keyframes pulse {

      0%,
      100% {
          opacity: 1
      }

      50% {
          opacity: 0.4
      }
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }

  @keyframes ovalPulse {

      0%,
      100% {
          border-color: rgba(56, 189, 248, 0.5);
          box-shadow: none;
      }

      50% {
          border-color: rgba(56, 189, 248, 0.9);
          box-shadow: 0 0 22px 4px rgba(56, 189, 248, 0.18);
      }
  }

  @keyframes scanAnim {
      0% {
          top: 20%;
          opacity: 0.6
      }

      50% {
          top: 80%;
          opacity: 0.85
      }

      100% {
          top: 20%;
          opacity: 0.6
      }
  }

  @keyframes popIn {
      from {
          transform: scale(0.35);
          opacity: 0
      }

      to {
          transform: scale(1);
          opacity: 1
      }
  }

  @keyframes slideUp {
      from {
          opacity: 0;
          transform: translateY(14px)
      }

      to {
          opacity: 1;
          transform: translateY(0)
      }
  }

  .fade-in {
      animation: slideUp 0.4s ease forwards;
  }