/* ════════════════════════════════════
   AUTH PAGE (auth.css)
════════════════════════════════════ */

/* ─── Page layout ─── */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 90px 20px 40px;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #2D1157 0%, #1A0A2E 55%, #0F0620 100%);
}
.auth-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* ─── Auth box ─── */
.auth-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: rgba(26,10,46,.85);
  border: .5px solid var(--border-m);
  border-radius: 20px;
  padding: 36px 36px 32px;
  backdrop-filter: blur(16px);
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
}
@media(max-width:480px){ .auth-box { padding: 28px 20px 24px; border-radius: 16px; } }

/* Logo */
.auth-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-bottom: 28px;
  font-family: 'Playfair Display',serif; font-size: 17px; color: var(--text);
}
.auth-logo:hover { color: var(--text); }

/* ─── Tabs ─── */
.auth-tabs {
  display: flex; gap: 0;
  background: rgba(15,6,32,.6);
  border: .5px solid var(--border); border-radius: 10px;
  padding: 4px; margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 9px 16px;
  font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 500;
  background: transparent; border: none; border-radius: 7px;
  color: var(--muted); cursor: pointer;
  transition: background .2s, color .2s;
}
.auth-tab.active { background: var(--purple); color: #fff; }
.auth-tab:hover:not(.active) { color: var(--text); }

/* ─── Message bar ─── */
.auth-msg {
  padding: 11px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; margin-bottom: 16px;
  line-height: 1.4;
}
.auth-msg.success { background: rgba(29,158,117,.15); color: #4ade80; border: .5px solid rgba(29,158,117,.3); }
.auth-msg.error   { background: rgba(239,68,68,.12);  color: #fca5a5; border: .5px solid rgba(239,68,68,.3); }
.auth-msg.info    { background: rgba(123,63,196,.15); color: var(--glow); border: .5px solid var(--border-m); }

/* ─── Panel ─── */
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* ─── Form groups ─── */
.auth-group {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.auth-group label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.req { color: var(--gold); }
.auth-group input {
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,.05);
  border: .5px solid var(--border-m); border-radius: var(--r-sm);
  color: var(--text); font-family: 'Inter',sans-serif; font-size: 14px;
  outline: none; transition: border-color .2s, background .2s;
}
.auth-group input:focus  { border-color: var(--purple); background: rgba(123,63,196,.07); }
.auth-group input.err    { border-color: #ef4444; }
.auth-group input.ok     { border-color: #1D9E75; }
.auth-group input::placeholder { color: var(--muted); opacity: .7; }

/* Password wrapper */
.auth-pw-wrap { position: relative; }
.auth-pw-wrap input { padding-right: 42px; }
.auth-pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 4px; transition: color .2s;
}
.auth-pw-toggle:hover { color: var(--glow); }

/* Field errors */
.auth-field-err {
  font-size: 12px; color: #fca5a5; min-height: 16px; line-height: 1.4;
}

/* Password strength */
.pw-strength {
  margin-top: 6px; font-size: 12px; display: flex; align-items: center; gap: 8px;
}
.pw-strength-bar {
  flex: 1; height: 4px; border-radius: 2px; background: var(--border);
  overflow: hidden;
}
.pw-strength-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }

/* Checkbox */
.auth-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: 16px;
}
.auth-check input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px;
  accent-color: var(--purple); cursor: pointer; margin-top: 1px;
}
.auth-check a { color: var(--glow); }

/* Forgot link */
.auth-forgot { font-size: 12px; color: var(--muted); }
.auth-forgot:hover { color: var(--glow); }

/* Forgot desc */
.auth-forgot-desc { font-size: 14px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }

/* Submit */
.auth-submit {
  width: 100%; padding: 13px; font-size: 15px; font-weight: 500;
  background: var(--purple); color: #fff;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  font-family: 'Inter',sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .2s, transform .1s; margin-bottom: 14px;
}
.auth-submit:hover   { background: var(--violet); }
.auth-submit:active  { transform: scale(.98); }
.auth-submit:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner inside button */
.auth-spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Switch tab link */
.auth-switch { font-size: 13px; color: var(--muted); text-align: center; }
.auth-switch a { color: var(--glow); }
.auth-switch a:hover { color: var(--text); }

/* ════════════════════════════════════
   KẾT QUẢ PAGE (kq-*)
════════════════════════════════════ */

/* ─── Page layout: sidebar + main ─── */
.kq-page {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  padding-top: 64px; /* nav height */
}
@media(max-width:900px) {
  .kq-page { grid-template-columns: 1fr; }
  .kq-sidebar { position: static !important; border-right: none; border-bottom: .5px solid var(--border); }
}

/* ─── Sidebar ─── */
.kq-sidebar {
  position: sticky; top: 64px; height: calc(100vh - 64px);
  overflow-y: auto; background: var(--deep);
  border-right: .5px solid var(--border);
  display: flex; flex-direction: column; gap: 0;
  scrollbar-width: thin; scrollbar-color: var(--mid) transparent;
  padding-bottom: 24px;
}

/* User card */
.kq-user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px 16px; border-bottom: .5px solid var(--border);
}
.kq-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; font-family: 'Playfair Display',serif;
}
.kq-user-info { flex: 1; min-width: 0; }
.kq-user-name  { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-user-email { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-logout-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: 6px; transition: color .2s, background .2s; flex-shrink: 0;
}
.kq-logout-btn:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* Guest notice */
.kq-guest-notice { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
.kq-guest-title { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.kq-login-link  { font-size: 12px; color: var(--glow); }

/* New button */
.kq-new-btn {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 12px; padding: 10px 14px;
  background: rgba(123,63,196,.18); border: .5px solid rgba(196,168,255,.25);
  border-radius: var(--r-sm); color: var(--glow); text-decoration: none;
  font-size: 13px; font-weight: 500; transition: background .2s;
}
.kq-new-btn:hover { background: rgba(123,63,196,.32); color: var(--glow); }

/* History */
.kq-history-section { flex: 1; padding: 0 12px; }
.kq-history-label {
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); padding: 12px 4px 8px;
}
.kq-history-list { display: flex; flex-direction: column; gap: 6px; }
.kq-history-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 8px 4px; }
.kq-spinner-sm {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-m); border-top-color: var(--purple);
  animation: spin .7s linear infinite; display: inline-block;
}

.kq-history-item {
  padding: 10px 12px; border-radius: var(--r-sm);
  border: .5px solid var(--border);
  background: rgba(15,6,32,.4); cursor: pointer;
  transition: border-color .2s, background .2s;
  text-decoration: none; display: block;
}
.kq-history-item:hover  { border-color: var(--border-m); background: rgba(45,17,87,.3); }
.kq-history-item.active { border-color: var(--purple); background: rgba(123,63,196,.15); }
.kq-hi-name  { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.kq-hi-meta  { font-size: 11px; color: var(--muted); line-height: 1.4; }
.kq-hi-date  { font-size: 11px; color: var(--muted); margin-top: 4px; }
.kq-hi-empty { font-size: 13px; color: var(--muted); padding: 8px 4px; }

/* ─── Main area ─── */
.kq-main { padding: 32px 36px 60px; min-width: 0; }
@media(max-width:768px) { .kq-main { padding: 24px 16px 48px; } }

/* Loading */
.kq-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.kq-loading-inner { text-align: center; }
.kq-loading-spinner {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 16px;
  border: 3px solid var(--border); border-top-color: var(--purple);
  animation: spin 1s linear infinite;
}
.kq-loading p { font-size: 14px; color: var(--muted); }

/* Auth prompt */
.kq-auth-prompt {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 200px);
}
.kq-auth-prompt-inner {
  text-align: center; max-width: 440px;
  padding: 48px 32px;
  background: rgba(45,17,87,.35);
  border: .5px solid var(--border-m); border-radius: 20px;
}
.kq-prompt-stars { color: var(--gold); font-size: 18px; letter-spacing: 5px; margin-bottom: 20px; }
.kq-auth-prompt-inner h2 { font-size: 24px; color: var(--text); margin-bottom: 12px; }
.kq-auth-prompt-inner p  { font-size: 15px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; font-weight: 300; }
.kq-prompt-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.kq-prompt-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted); margin: 20px 0;
}
.kq-prompt-divider::before,.kq-prompt-divider::after { content:''; flex:1; height:.5px; background:var(--border); }
.kq-prompt-laso-link { font-size: 14px; color: var(--glow); }

/* Claim banner */
.kq-claim-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: rgba(232,201,122,.12); border: .5px solid rgba(232,201,122,.3);
  color: var(--gold); font-size: 13px; margin-bottom: 24px;
}
.kq-claim-banner strong { color: #f0d68a; }
.kq-claim-banner a { color: var(--gold); text-decoration: underline; }

/* ─── Result header ─── */
.kq-result-header { margin-bottom: 24px; }
.kq-result-title-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.kq-result-title { font-size: clamp(22px,3.5vw,32px); color: var(--text); margin: 0; }
.kq-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kq-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 8px 13px; border-radius: var(--r-sm);
  border: .5px solid var(--border-m); cursor: pointer; font-family: 'Inter',sans-serif;
  background: transparent; transition: .2s;
}
.kq-btn-pdf    { color: var(--gold);   border-color: rgba(232,201,122,.35); }
.kq-btn-pdf:hover { background: rgba(232,201,122,.1); }
.kq-btn-share  { color: var(--glow);   border-color: var(--border-m); }
.kq-btn-share:hover { background: rgba(196,168,255,.07); }
.kq-btn-delete { color: #ef4444; border-color: rgba(239,68,68,.25); }
.kq-btn-delete:hover { background: rgba(239,68,68,.1); }

.kq-info-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--muted);
  background: rgba(45,17,87,.3); border: .5px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 16px;
}
.kq-info-bar strong { color: var(--text); }
.kq-ib-sep { opacity: .3; }

/* ─── Content tabs ─── */
.kq-content-tabs {
  display: flex; gap: 0; margin-bottom: 24px;
  border-bottom: .5px solid var(--border);
}
.kq-ctab {
  padding: 10px 20px; background: none; border: none;
  font-family: 'Inter',sans-serif; font-size: 14px; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.kq-ctab:hover { color: var(--text); }
.kq-ctab.active { color: var(--glow); border-bottom-color: var(--purple); }
@media(max-width:480px){ .kq-ctab { padding: 10px 12px; font-size: 13px; } }

/* ─── Tab panels ─── */
.kq-tab-panel { display: none; }
.kq-tab-panel.active { display: block; animation: fadeInUp .3s ease; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ─── Lá số grid (reuse from laso-form.css, scoped) ─── */
.kq-la-so-wrap { overflow-x: auto; }
.kq-la-so-wrap .la-so-table {
  min-width: 440px;
  display: grid; grid-template-rows: repeat(4,1fr);
  border: .5px solid var(--border-m); border-radius: var(--r-md);
  overflow: hidden; background: rgba(15,6,32,.8);
  margin-bottom: 28px;
}
.kq-la-so-wrap .ls-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-bottom: .5px solid var(--border);
}
.kq-la-so-wrap .ls-row:last-child { border-bottom: none; }
.kq-la-so-wrap .ls-cell {
  padding: 10px 9px; border-right: .5px solid var(--border);
  min-height: 110px; display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; transition: background .2s;
}
.kq-la-so-wrap .ls-cell:last-child { border-right: none; }
.kq-la-so-wrap .ls-cell:hover { background: rgba(123,63,196,.07); }
.kq-la-so-wrap .ls-menh { background: rgba(123,63,196,.18); border: .5px solid rgba(196,168,255,.35) !important; }
.kq-la-so-wrap .ls-than  { background: rgba(232,201,122,.09); }
.kq-la-so-wrap .ls-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.kq-la-so-wrap .ls-cung-ten { font-size: 10px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kq-la-so-wrap .ls-chi-ten  { font-size: 12px; font-weight: 700; color: var(--gold); }
.kq-la-so-wrap .ls-tuHoa    { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 3px; }
.kq-la-so-wrap .ls-hoa-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.06); }
.kq-la-so-wrap .ls-chinh-tinh { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.kq-la-so-wrap .ls-sao-row { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.kq-la-so-wrap .ls-sao-ten { font-size: 11.5px; font-weight: 500; color: var(--text); line-height: 1.2; }
.kq-la-so-wrap .ls-mieu    { font-size: 9px; font-weight: 600; white-space: nowrap; }
.kq-la-so-wrap .ls-badges  { display: flex; gap: 3px; margin-top: 3px; }
.kq-la-so-wrap .ls-badge-menh { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(123,63,196,.45); color: var(--glow); }
.kq-la-so-wrap .ls-badge-than  { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(232,201,122,.3); color: var(--gold); }
.kq-la-so-wrap .ls-center {
  grid-column: 2/4; grid-row: 2/4; border-right: .5px solid var(--border) !important;
  background: rgba(45,17,87,.5); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; min-height: 220px;
}
.kq-la-so-wrap .ls-center-inner { display: flex; flex-direction: column; gap: 8px; }
.kq-la-so-wrap .ls-center-title { font-family: 'Playfair Display',serif; font-size: 15px; font-weight: 500; color: var(--text); }
.kq-la-so-wrap .ls-menh-label   { font-size: 10px; color: var(--muted); }
.kq-la-so-wrap .ls-center-menh  { font-size: 13px; color: var(--gold); font-weight: 500; }
.kq-la-so-wrap .ls-center-cuc   { font-size: 12px; color: var(--glow); }
.kq-la-so-wrap .ls-center-lunar,.kq-la-so-wrap .ls-center-giosinh,.kq-la-so-wrap .ls-center-chieu { font-size: 11px; color: var(--muted); }
.kq-la-so-wrap .ls-empty { background: transparent; border-right: .5px solid var(--border); }

/* ─── Analysis tab ─── */
#kq-analysis-content { display: flex; flex-direction: column; gap: 20px; }
.kq-analysis-card {
  padding: 22px 24px;
  background: rgba(45,17,87,.25); border: .5px solid var(--border); border-radius: var(--r-md);
}
.kq-analysis-card h3 {
  font-size: 16px; color: var(--gold); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: .5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.kq-analysis-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 10px;
  padding: 8px 0; border-bottom: .5px solid rgba(196,168,255,.06);
  font-size: 13px; align-items: start;
}
.kq-analysis-row:last-child { border-bottom: none; }
.kq-ar-label { color: var(--muted); font-weight: 500; }
.kq-ar-val   { color: var(--body); line-height: 1.5; }
@media(max-width:600px) { .kq-analysis-row { grid-template-columns: 1fr; gap: 3px; } }

/* ─── Guide tab ─── */
.kq-guide-content h2 { font-size: 22px; color: var(--text); margin-bottom: 24px; }
.kq-guide-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media(max-width:600px) { .kq-guide-grid { grid-template-columns: 1fr; } }
.kq-guide-card {
  padding: 20px; background: rgba(45,17,87,.25);
  border: .5px solid var(--border); border-radius: var(--r-md);
}
.kq-guide-icon { font-size: 22px; margin-bottom: 10px; }
.kq-guide-card h3 { font-size: 15px; color: var(--text); margin-bottom: 8px; }
.kq-guide-card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ─── Upgrade CTA ─── */
.kq-upgrade-cta {
  margin-top: 32px; padding: 28px 24px; text-align: center;
  background: rgba(45,17,87,.4); border: .5px solid rgba(196,168,255,.2);
  border-radius: var(--r-lg);
}
.kq-upgrade-stars { color: var(--gold); font-size: 16px; letter-spacing: 4px; margin-bottom: 12px; }
.kq-upgrade-cta h3 { font-size: 18px; color: var(--text); margin-bottom: 10px; }
.kq-upgrade-cta p  { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; font-weight: 300; }

/* ─── Delete confirm overlay ─── */
.kq-delete-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.kq-delete-modal {
  background: var(--deep); border: .5px solid var(--border-m);
  border-radius: 16px; padding: 32px 28px; max-width: 360px; width: 100%; text-align: center;
}
.kq-delete-modal h3 { font-size: 20px; color: var(--text); margin-bottom: 10px; }
.kq-delete-modal p  { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.kq-delete-modal-actions { display: flex; gap: 10px; justify-content: center; }
.kq-del-cancel { padding: 10px 22px; border-radius: 8px; border: .5px solid var(--border-m); background: none; color: var(--muted); font-family: 'Inter',sans-serif; font-size: 14px; cursor: pointer; }
.kq-del-confirm { padding: 10px 22px; border-radius: 8px; border: none; background: #ef4444; color: #fff; font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; }