/* Xellati Dashboard + Auth — Full Styles */

/* ── Auth / Login ──────────────────────────────── */
.xh-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg,#121212);}
.xh-auth-wrap{width:100%;max-width:420px;}
.xh-auth-box{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-xl,30px);padding:48px 40px;text-align:center;}
.xh-auth-logo{display:block;margin:0 auto 32px;text-align:center;}.xh-auth-logo img{height:48px;width:auto;display:block;margin:0 auto;}
.xh-auth-title{font-size:24px;font-weight:800;margin-bottom:8px;color:var(--text,#fff);}
.xh-auth-subtitle{font-size:14px;color:var(--text-muted,#b2b2b2);margin-bottom:32px;line-height:1.6;}
.xh-google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 24px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:var(--radius-md,16px);font-size:15px;font-weight:600;color:#3c4043;text-decoration:none;transition:box-shadow .18s;}
.xh-google-btn:hover{box-shadow:0 4px 20px rgba(0,0,0,.25);}
.xh-auth-terms{font-size:12px;color:var(--text-muted,#b2b2b2);margin-top:24px;line-height:1.7;}
.xh-auth-error{padding:12px 16px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm,12px);font-size:13px;color:#fca5a5;margin-bottom:16px;}

/* ── Dashboard Layout ──────────────────────────── */
.xh-dash{display:flex;min-height:100vh;background:var(--bg,#121212);color:var(--text,#fff);}
.xh-dash-header{width:280px;flex-shrink:0;background:var(--surface,#181818);border-inline-start:1px solid var(--line-soft,rgba(178,178,178,.22));display:flex;flex-direction:column;padding:28px 20px;position:sticky;top:0;height:100vh;overflow-y:auto;gap:20px;}
.xh-dash-main{flex:1;min-width:0;padding:36px 40px;overflow-y:auto;}
.xh-dash-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.xh-dash-logo img{height:32px;width:auto;}
.xh-dash-logo-sep{width:1px;height:18px;background:var(--line-soft,rgba(178,178,178,.22));flex-shrink:0;}
.xh-dash-logo-name{font-size:13px;font-weight:600;color:var(--text,#fff);}
.xh-dash-header-right{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;}
.xh-user-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line-soft,rgba(178,178,178,.22));display:block;margin:0 auto;}
.xh-lang-switch{display:flex;gap:8px;}
.xh-lang-btn{flex:1;padding:7px;text-align:center;background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-sm,12px);font-size:12px;font-weight:600;color:var(--text-muted,#b2b2b2);text-decoration:none;transition:all .18s;}
.xh-lang-btn.is-active,.xh-lang-btn:hover{background:var(--accent,#E8CC54);color:#121212;border-color:var(--accent,#E8CC54);}
.xh-logout-btn{display:block;padding:10px 14px;text-align:center;border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-sm,12px);font-size:12px;color:var(--text-muted,#b2b2b2);text-decoration:none;margin-top:auto;transition:all .18s;}
.xh-logout-btn:hover{border-color:rgba(239,68,68,.4);color:#fca5a5;}

/* ── Season Bar ────────────────────────────────── */
.xh-season-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 20px;margin-bottom:28px;background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);}
.xh-season-name{font-size:15px;font-weight:700;color:var(--accent,#E8CC54);}
.xh-season-meta{font-size:12px;color:var(--text-muted,#b2b2b2);margin-top:3px;}
.xh-season-days{display:flex;gap:24px;}
.xh-season-day-item{text-align:center;}
.xh-season-day-num{font-size:24px;font-weight:800;color:var(--text,#fff);line-height:1;}
.xh-season-day-label{font-size:11px;color:var(--text-muted,#b2b2b2);margin-top:4px;}

/* ── Stats Grid ────────────────────────────────── */
.xh-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
.xh-stat-card{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px 20px;text-align:center;transition:border-color .18s;}
.xh-stat-card:hover{border-color:rgba(232,204,84,.3);}
.xh-stat-value{font-size:38px;font-weight:800;color:var(--accent,#E8CC54);line-height:1;margin-bottom:8px;letter-spacing:-.03em;}
.xh-stat-label{font-size:12px;color:var(--text-muted,#b2b2b2);}
.xh-stat-sub{font-size:12px;color:var(--text-muted,#b2b2b2);margin-top:6px;}

/* ── Progress ──────────────────────────────────── */
.xh-progress-section{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-progress-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.xh-progress-title{font-size:14px;font-weight:700;}
.xh-progress-pct{font-size:28px;font-weight:800;color:var(--accent,#E8CC54);line-height:1;}
.xh-progress-track{height:8px;background:var(--surface-3,#242424);border-radius:999px;overflow:hidden;}
.xh-progress-fill{height:100%;background:var(--accent,#E8CC54);border-radius:999px;transition:width .8s ease;}
.xh-progress-note{font-size:12px;color:var(--text-muted,#b2b2b2);margin-top:10px;}

/* ── Code Section ──────────────────────────────── */
.xh-code-section{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-code-title{font-size:15px;font-weight:700;margin-bottom:6px;}
.xh-code-desc{font-size:13px;color:var(--text-muted,#b2b2b2);margin-bottom:18px;line-height:1.6;}
.xh-code-form{display:flex;gap:12px;}
.xh-code-input{flex:1;background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-sm,12px);padding:12px 16px;color:var(--text,#fff);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;transition:border-color .18s;}
.xh-code-input:focus{outline:none;border-color:rgba(232,204,84,.5);}
.xh-code-submit{padding:12px 24px;background:var(--accent,#E8CC54);color:#121212;border:none;border-radius:var(--radius-sm,12px);font-weight:700;cursor:pointer;font-size:14px;transition:opacity .2s;white-space:nowrap;}
.xh-code-submit:hover{opacity:.88;}
.xh-code-submit:disabled{opacity:.5;cursor:default;}
.xh-code-result{margin-top:14px;font-size:14px;padding:12px 16px;border-radius:var(--radius-sm,12px);}
.xh-code-result.is-success{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);color:#6ee7b7;}
.xh-code-result.is-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#fca5a5;}
.xh-attempts-left{display:flex;align-items:center;gap:8px;margin-top:10px;}
.xh-attempt-dot{width:8px;height:8px;border-radius:50%;background:var(--line-soft,rgba(178,178,178,.22));}
.xh-attempt-dot.is-used{background:rgba(239,68,68,.5);}
.xh-attempt-text{font-size:12px;color:var(--text-muted,#b2b2b2);}
.xh-locked-notice{padding:16px 20px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm,12px);font-size:13px;color:#fca5a5;margin-bottom:24px;line-height:1.6;}

/* ── Stars ─────────────────────────────────────── */
.xh-stars-section{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-stars-title{font-size:15px;font-weight:700;margin-bottom:16px;}
.xh-stars-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.xh-star{width:36px;height:36px;border-radius:50%;background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));display:flex;align-items:center;justify-content:center;font-size:18px;}
.xh-star.is-gold{background:rgba(232,204,84,.1);border-color:var(--accent,#E8CC54);}
.xh-stars-label{font-size:13px;color:var(--text-muted,#b2b2b2);}

/* ── Leaderboard ───────────────────────────────── */
.xh-leaderboard{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-lb-header{font-size:15px;font-weight:700;margin-bottom:16px;}
.xh-lb-list{display:flex;flex-direction:column;gap:8px;}
.xh-lb-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-2,#1e1e1e);border:1px solid transparent;border-radius:var(--radius-sm,12px);transition:border-color .18s;}
.xh-lb-item.is-me{border-color:rgba(232,204,84,.35);background:rgba(232,204,84,.04);}
.xh-lb-rank{width:28px;text-align:center;font-size:13px;font-weight:700;color:var(--text-muted,#b2b2b2);flex-shrink:0;}
.xh-lb-item.top-3 .xh-lb-rank{color:var(--accent,#E8CC54);}
.xh-lb-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.xh-lb-name{flex:1;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.xh-lb-pts{font-size:14px;font-weight:700;color:var(--accent,#E8CC54);white-space:nowrap;}

/* ── Profile ───────────────────────────────────── */
.xh-profile-section{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-profile-top{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.xh-profile-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.xh-profile-name{font-size:16px;font-weight:700;}
.xh-profile-email{font-size:12px;color:var(--text-muted,#b2b2b2);margin-top:3px;}
.xh-profile-fields{display:flex;flex-direction:column;gap:14px;}
.xh-field-row{display:flex;flex-direction:column;gap:6px;}
.xh-field-label{font-size:12px;color:var(--text-muted,#b2b2b2);font-weight:600;}
.xh-field-input{background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-sm,12px);padding:10px 14px;color:var(--text,#fff);font-size:14px;transition:border-color .18s;width:100%;}
.xh-field-input:focus{outline:none;border-color:rgba(232,204,84,.4);}
.xh-field-bonus{font-size:11px;color:var(--accent,#E8CC54);margin-top:3px;}
.xh-profile-save{margin-top:20px;padding:12px 24px;background:var(--accent,#E8CC54);color:#121212;border:none;border-radius:var(--radius-sm,12px);font-weight:700;cursor:pointer;font-size:14px;transition:opacity .2s;}
.xh-profile-save:hover{opacity:.88;}

/* ── Referral ──────────────────────────────────── */
.xh-referral-section{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-referral-title{font-size:15px;font-weight:700;margin-bottom:6px;}
.xh-referral-desc{font-size:13px;color:var(--text-muted,#b2b2b2);margin-bottom:18px;line-height:1.6;}
.xh-referral-link-row{display:flex;gap:10px;align-items:center;}
.xh-referral-link{flex:1;background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-sm,12px);padding:10px 14px;font-size:13px;color:var(--text-muted,#b2b2b2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start;}
.xh-copy-btn{padding:10px 18px;background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-sm,12px);color:var(--text,#fff);cursor:pointer;font-size:13px;transition:border-color .18s;white-space:nowrap;}
.xh-copy-btn:hover{border-color:rgba(232,204,84,.4);}

/* ── Social ────────────────────────────────────── */
.xh-social-section{background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:24px;margin-bottom:28px;}
.xh-social-title{font-size:13px;color:var(--text-muted,#b2b2b2);margin-bottom:14px;}
.xh-social-links{display:flex;gap:12px;flex-wrap:wrap;}
.xh-social-link{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--surface-2,#1e1e1e);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:50%;text-decoration:none;transition:border-color .18s;color:var(--text-muted,#b2b2b2);}
.xh-social-link:hover{border-color:var(--accent,#E8CC54);color:var(--accent,#E8CC54);}
.xh-social-link svg{width:16px;height:16px;}

/* ── Off-Season ────────────────────────────────── */
.xh-offseason{display:flex;align-items:center;justify-content:center;min-height:50vh;text-align:center;}
.xh-offseason-inner{padding:48px 24px;}
.xh-offseason-icon{font-size:48px;margin-bottom:20px;display:block;}

/* ── Share & Earn (New Feature) ────────────────── */
.xhs-wrap{padding:0 0 32px;}
.xhs-head{margin-bottom:20px;}
.xhs-head-title{font-size:16px;font-weight:700;color:var(--accent,#E8CC54);}
.xhs-head-sub{font-size:13px;color:var(--text-muted,#b2b2b2);margin-top:4px;}
.xhs-head-sub strong{color:var(--accent,#E8CC54);}
.xhs-grid{display:flex;flex-direction:column;gap:10px;}
.xhs-card{display:flex;align-items:center;gap:14px;background:var(--surface,#181818);border:1px solid var(--line-soft,rgba(178,178,178,.22));border-radius:var(--radius-md,16px);padding:14px 16px;transition:border-color .2s;}
.xhs-card.is-done{border-color:rgba(232,204,84,.3);background:rgba(232,204,84,.03);}
.xhs-num{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:rgba(255,255,255,.4);flex-shrink:0;}
.xhs-card.is-done .xhs-num{background:rgba(232,204,84,.15);color:var(--accent,#E8CC54);}
.xhs-info{flex:1;min-width:0;}
.xhs-card-title{font-size:14px;font-weight:600;color:var(--text,#fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.xhs-link{font-size:12px;color:var(--text-muted,#b2b2b2);text-decoration:none;margin-top:2px;display:inline-block;}
.xhs-link:hover{color:var(--accent,#E8CC54);}
.xhs-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.xhs-btn{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--accent,#E8CC54);background:transparent;color:var(--accent,#E8CC54);transition:all .2s;}
.xhs-btn:hover{background:var(--accent,#E8CC54);color:#121212;}
.xhs-btn:disabled{opacity:.5;cursor:default;}
.xhs-confirm-btn{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:var(--accent,#E8CC54);color:#121212;transition:all .2s;}
.xhs-confirm-btn:disabled{opacity:.6;cursor:default;}
.xhs-done-badge{font-size:13px;font-weight:700;color:var(--accent,#E8CC54);white-space:nowrap;}
.xhs-empty{text-align:center;padding:32px;color:var(--text-muted,#b2b2b2);font-size:14px;}

/* ── Responsive ────────────────────────────────── */
@media(max-width:900px){
  .xh-dash-header{width:240px;padding:20px 14px;}
  .xh-dash-main{padding:24px 20px;}
  .xh-stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .xh-dash{flex-direction:column!important;}
  .xh-dash-header{width:100%;height:auto;position:relative;padding:16px;flex-direction:row;flex-wrap:wrap;gap:12px;}
  .xh-dash-main{padding:20px 16px;}
  .xh-stats-grid{grid-template-columns:repeat(2,1fr);}
  .xh-code-form{flex-direction:column;}
  .xhs-card{flex-wrap:wrap;}
  .xhs-info,.xhs-actions{width:100%;}
  .xhs-actions{justify-content:flex-end;}
}

/* ── Fix 1: Login ──────────────────────────────── */
.xh-google-btn svg{width:18px;height:18px;flex-shrink:0;}
.xh-auth-terms a{color:var(--accent,#E8CC54);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* ── Fix 3: Social links sidebar ──────────────── */
.xh-social-links{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.xh-social-link{width:auto;height:34px;border-radius:8px;}

/* ── Fix 4: Share timer ────────────────────────── */
.xhs-timer{font-size:11px;color:rgba(255,255,255,.35);padding:4px 8px;white-space:nowrap;display:inline-block;}

/* ── Share & Earn — paste flow ───────────────────────── */
.xhs-paste-wrap{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:8px}
.xhs-paste-input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 14px;color:#fff;font-family:var(--xh-font,inherit);font-size:13px;width:100%;box-sizing:border-box;direction:ltr}
.xhs-paste-input:focus{outline:none;border-color:var(--xh-gold,#E8CC54)}
.xhs-submit-btn{background:var(--xh-gold,#E8CC54);color:#121212;border:none;border-radius:8px;padding:10px 20px;font-family:var(--xh-font,inherit);font-size:13px;font-weight:700;cursor:pointer;transition:opacity .2s}
.xhs-submit-btn:hover{opacity:.85}
.xhs-submit-btn:disabled{opacity:.4;cursor:not-allowed}
.xhs-paste-msg{font-size:12px;font-family:var(--xh-font,inherit);min-height:16px}
.xhs-paste-msg.is-error{color:#f87171}
.xhs-paste-msg.is-success{color:#6ee7b7}