:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --muted: #5f6368;
  --text: #202124;
  --accent: #1a73e8;
  --accent-2: #4285f4;
  --border: #dadce0;
  --ok: #188038;
  --warn: #f29900;
  --danger: #d93025;
  --shadow: 0 1px 2px rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, Helvetica,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
.page { min-height:100svh; display:flex; align-items:center; justify-content:center; padding: clamp(12px,3vw,24px); }

/* Launcher */
.launcher-card { width:min(92vw,540px); background:linear-gradient(180deg,#ffffff 0%,#fafbff 100%); border:1px solid var(--border); border-radius:18px; box-shadow:0 14px 36px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06); padding: clamp(14px,3.6vw,24px); display:flex; flex-direction:column; gap:clamp(.6rem,2.4vw,.9rem); }
.launcher-header {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.g-logo { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#4caf50 0%, #2e7d32 100%); flex-shrink:0; font-size:1.25rem; }
.lh-texts {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.launcher-card h1 {
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  margin: 0;
  font-weight: 600;
}
.launcher-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.9rem, 3.6vw, .95rem);
}
.trust-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; background:#f3f6fb; color:#1f4b8f; border:1px solid #e2e8f3; font-size:.8rem; }
.btn-action{ background:#1366ff; border-color:#1366ff; padding:clamp(.8rem,3.4vw,.95rem) 1.2rem; font-size:clamp(.95rem,3.8vw,1rem); border-radius:12px; box-shadow: 0 6px 16px rgba(19,102,255,.24); }
.btn-action:hover{ background:#0f57d9; border-color:#0f57d9; }
.launcher-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.sep {
  opacity: 0.6;
}

/* Dialog generic */
.dialog { border:1px solid var(--border); border-radius:16px; padding:0; box-shadow:0 18px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1); width:min(96vw, 540px); }
.dialog::backdrop {
  background: rgba(32, 33, 36, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.dialog.inner {
  padding: 1.5rem;
}

/* Card CAPTCHA */
.captcha-card { background:var(--card); border-radius:16px; width:100%; max-width:500px; padding:clamp(.8rem,3.4vw,1rem); display:flex; flex-direction:column; gap:.7rem; max-height: 88svh; }

.captcha-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.badge-icon { width:30px; height:30px; border-radius:10px; background:linear-gradient(135deg,#e8f0fe,#dbe7fd); color:#1a73e8; display:grid; place-items:center; font-weight:700; flex-shrink:0; }
.title {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0;
  font-weight: 600;
}
.subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.close-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  padding: 0.5rem;
  line-height: 1;
}

.hint { background:#e8f0fe; border:1px solid #d2e3fc; color:#174ea6; padding:.5rem .7rem; border-radius:10px; font-size:.85rem; display:flex; gap:.5rem; align-items:center; }
.inline-alert{ margin-top:.5rem; background:#fff3cd; color:#7a4d00; border:1px solid #ffe69c; border-radius:10px; padding:.6rem .8rem; font-size:.9rem; display:block; }
.inline-alert[hidden]{ display:none !important; }
@keyframes shake{ 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.inline-alert.is-shaking{ animation: shake .45s ease; }

.sample {
  position: relative;
}
.badge { position:absolute; top:.6rem; left:.6rem; background:rgba(255,255,255,.9); border:1px solid var(--border); font-size:.7rem; padding:.2rem .45rem; border-radius:8px; backdrop-filter:blur(2px); }
.sample-img { width:100%; aspect-ratio:16/9; border-radius:12px; border:1px solid var(--border); background:#f0f3f7; position:relative; overflow:hidden; display:grid; place-items:center; }
.sample-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sample-label {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; max-height: 54vh; overflow:auto; scroll-behavior:smooth; }
.grid{ flex:1 1 auto; min-height:0; }
.tile { position:relative; border-radius:10px; overflow:hidden; border:2px solid rgba(0,0,0,.04); background:#f0f3f7 center/cover no-repeat; aspect-ratio:1/1; cursor:pointer; outline:none; transition:all .2s; }
.tile:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.tile[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile .tick { position:absolute; top:.4rem; right:.4rem; background:var(--accent); border:2px solid #fff; border-radius:999px; width:22px; height:22px; display:none; color:#fff; font-weight:700; font-size:.95rem; align-items:center; justify-content:center; line-height:1; }
.tile[aria-pressed='true'] .tick {
  display: flex;
}

.actions { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:.25rem; }
.btn { font:inherit; border-radius:12px; padding:.7rem 1.1rem; cursor:pointer; font-weight:600; transition:all .2s; }
.btn-outline-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn[disabled] {
  filter: grayscale(0.2);
  opacity: 0.7;
  cursor: not-allowed;
}

.footnote {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Success state */
.success-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; text-align:center; padding:1.5rem 1rem; }
.success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e6f4ea;
  color: #137333;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
}
.success-state h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0 0;
  font-weight: 600;
}
.success-state p {
  margin: 0;
  color: var(--muted);
}

.skeleton {
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.05),
    transparent
  );
  transform: translateX(-100%);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* inner dialogs */
#creditsDialog { max-width:560px; width:min(92vw,560px); }
.credits-list {
  max-height: 40vh;
  overflow: auto;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.85rem;
}
.credits-list a {
  color: var(--accent);
}
.policy {
  max-width: 60ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width:480px){ .captcha-card{ padding:.7rem; gap:.5rem; } .grid{ gap:.28rem; max-height: 60svh; } .btn{ padding:.6rem .9rem; font-size:.95rem; } .actions{ flex-direction:column-reverse; align-items:stretch; } .trust-row{ justify-content:center; } }

.swal2-container { z-index: 100000 !important; }

.site-footer{ position:fixed; inset-inline:0; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); text-align:center; font-size:.85rem; color:#8a8f99; padding-inline:12px; }