/* Quick Setup page — builds on site-shared.css tokens */
/* All --q-* vars replaced with direct var(--...) from site-shared */

.qs-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  padding: calc(var(--topbar-h) + 24px) 16px 48px;
}

.qs-hero {
  max-width: 560px; margin: 0 auto; width: 100%;
  text-align: center; margin-bottom: 28px;
}
.qs-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  font-weight: 800; letter-spacing: -0.03em;
}
.qs-hero p {
  margin: 0; color: var(--text2); font-size: 0.95rem; line-height: 1.65;
}

/* APK yoksa — kompakt indirme şeridi */
.qs-apk {
  max-width: 540px; width: 100%; margin: 0 auto 24px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(229,9,20,0.12) 0%, rgba(10,10,14,0.9) 100%);
  border: 1px solid rgba(229,9,20,0.28);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.qs-apk h2 {
  margin: 0;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.qs-apk p { margin: 0; font-size: 0.88rem; color: var(--text2); line-height: 1.5; max-width: 32rem; }
.qs-apk .btn--apk { width: 100%; max-width: 360px; }

/* Panel */
.qs-panel {
  max-width: 540px; width: 100%; margin: 0 auto;
  background: linear-gradient(155deg, rgba(18,18,24,0.85) 0%, rgba(8,8,10,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 20px 52px rgba(0,0,0,0.45);
}

/* Tabs */
.qs-tabs {
  display: flex; gap: 6px;
  background: rgba(5,5,8,0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 4px;
  margin-bottom: 20px;
}
.qs-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: 13.5px; font-weight: 600;
  background: transparent; border: none;
  border-radius: 9px; cursor: pointer;
  color: var(--muted);
  transition: background 0.18s, color 0.18s;
}
.qs-tab:hover { color: var(--text); }
.qs-tab.active {
  background: rgba(229,9,20,0.14);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(229,9,20,0.4);
}

/* Form fields */
.qs-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.qs-field label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.qs-field .opt { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500; color: rgba(255,255,255,0.3); }
.qs-field input {
  background: rgba(5,5,8,0.70);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
  border-radius: 11px;
  padding: 13px 14px;
  font-size: 14.5px; font-family: inherit;
  outline: none; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qs-field input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,9,20,0.16);
}
.qs-field input::placeholder { color: rgba(255,255,255,0.2); }

.qs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .qs-row { grid-template-columns: 1fr; } }

/* Password toggle */
.qs-pwd { position: relative; }
.qs-pwd input { padding-right: 44px; }
.qs-pwd-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; width: 34px; height: 34px;
  border-radius: 8px; display: grid; place-items: center;
  color: var(--muted); cursor: pointer;
}
.qs-pwd-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.qs-pwd-btn svg { width: 18px; height: 18px; }

/* Error */
.qs-error {
  background: rgba(229,9,20,0.10);
  border: 1px solid rgba(229,9,20,0.35);
  color: #ffb0b8;
  border-radius: 10px; padding: 11px 14px;
  font-size: 13px; margin: 4px 0 14px;
}

/* Submit button */
.qs-submit {
  width: 100%; min-height: 50px; margin-top: 4px;
  background: linear-gradient(135deg, var(--red2), var(--red));
  color: #fff; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 20px rgba(229,9,20,0.38);
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.qs-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(229,9,20,0.50); }
.qs-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.qs-spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.qs-legal {
  margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6;
}
.qs-legal strong { color: var(--text2); font-weight: 600; }

/* Code panel */
.qs-code-panel {
  max-width: 540px; width: 100%; margin: 0 auto;
  border-radius: 18px; padding: 28px 24px 24px;
  text-align: center;
  background: linear-gradient(165deg, rgba(20,10,12,0.96) 0%, rgba(8,8,10,0.98) 100%);
  border: 1px solid rgba(229,9,20,0.38);
  box-shadow: 0 0 0 1px rgba(229,9,20,0.12), 0 24px 60px rgba(0,0,0,0.5);
}
.qs-code-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin: 0 0 10px;
}
.qs-code-number {
  font-size: clamp(3rem, 16vw, 5rem);
  font-weight: 900; letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 0 40px rgba(229,9,20,0.35);
  margin: 0 0 10px; font-variant-numeric: tabular-nums;
  user-select: all;
}
.qs-code-hint {
  font-size: 14px; color: var(--text2); margin: 0 0 14px; line-height: 1.55;
}
.qs-code-hint strong { color: var(--red); }
.qs-timer {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  margin-bottom: 20px;
}
.qs-timer-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(229,9,20,0.22);
  animation: timerp 1.4s ease-in-out infinite;
}
@keyframes timerp { 50% { box-shadow: 0 0 0 7px rgba(229,9,20,0); } }
.qs-code-panel.expired .qs-timer-dot { background: #888; animation: none; box-shadow: none; }
.qs-code-panel.expired .qs-code-number { color: rgba(255,255,255,0.35); text-shadow: none; }

.qs-code-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 360px) { .qs-code-actions { grid-template-columns: 1fr; } }

.qs-btn {
  padding: 13px 16px; border-radius: 11px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.qs-btn--copy {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--text);
}
.qs-btn--copy:hover { border-color: var(--red); background: rgba(229,9,20,0.08); }
.qs-btn--new {
  background: linear-gradient(135deg, var(--red2), var(--red));
  color: #fff;
  box-shadow: 0 4px 14px rgba(229,9,20,0.3);
}
.qs-btn--new:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(229,9,20,0.42); }

.qs-footer {
  text-align: center; margin-top: 14px;
  font-size: 11px; color: var(--muted);
}