/* =========================================================
   EBRAM GOLSHAN — Digital Membership Card
   Design tokens
   ========================================================= */
:root{
  --bg:            #09090b;
  --bg-2:          #131218;
  --surface:       rgba(255,255,255,0.045);
  --surface-2:     rgba(255,255,255,0.075);
  --border:        rgba(255,255,255,0.10);
  --border-soft:   rgba(255,255,255,0.06);

  --gold:          #cda86a;
  --gold-strong:   #e9c98a;
  --gold-dim:      rgba(205,168,106,0.16);

  --text:          #f3efe6;
  --text-muted:    #a39c8f;
  --text-faint:    #6f6a62;

  --radius-lg:     26px;
  --radius-md:     18px;
  --radius-sm:     12px;

  --font-display:  'Space Grotesk', 'Vazirmatn', sans-serif;
  --font-body:     'Inter', 'Vazirmatn', sans-serif;
  --font-fa:       'Vazirmatn', 'Inter', sans-serif;

  --shadow-card:   0 20px 60px -20px rgba(0,0,0,0.65);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ambient glow */
.bg-glow{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.35;
  z-index:0;
  pointer-events:none;
}
.bg-glow--a{
  width:420px; height:420px;
  top:-140px; left:-120px;
  background:radial-gradient(circle, var(--gold) 0%, transparent 70%);
  opacity:0.16;
}
.bg-glow--b{
  width:380px; height:380px;
  bottom:-120px; right:-100px;
  background:radial-gradient(circle, #6b5a3c 0%, transparent 70%);
  opacity:0.18;
}

.wrap{
  position:relative; z-index:1;
  max-width:480px;
  margin:0 auto;
  padding:28px 18px 12px;
}

/* ---------- reveal animation ---------- */
[data-animate]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-animate].in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---------- card base (glassmorphism) ---------- */
.card{
  background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.02));
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-card);
  padding:26px 22px;
  margin-bottom:16px;
}

.section-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:18px;
}
.eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

/* ============ PROFILE CARD ============ */
.profile-card{
  text-align:center;
  padding-top:20px;
  position:relative;
}
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px;
  font-weight:500;
  color:var(--text-muted);
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:6px 12px;
  border-radius:99px;
}
.status-dot{
  width:7px; height:7px; border-radius:50%;
  background:#5fd67e;
  box-shadow:0 0 0 0 rgba(95,214,126,.6);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(95,214,126,.55);}
  70%{box-shadow:0 0 0 8px rgba(95,214,126,0);}
  100%{box-shadow:0 0 0 0 rgba(95,214,126,0);}
}

.avatar-frame{
  position:relative;
  width:130px; height:130px;
  margin:8px auto 18px;
}
.avatar{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--bg-2);
  position:relative;
  z-index:2;
}
.avatar-ring{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--gold), transparent 30%, transparent 70%, var(--gold-strong));
  z-index:1;
  animation:spin 6s linear infinite;
  opacity:.75;
}
@keyframes spin{to{transform:rotate(360deg);}}

.name{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:700;
  letter-spacing:.02em;
}
.username{
  color:var(--gold);
  font-size:14px;
  font-weight:500;
  margin-top:4px;
  margin-bottom:16px;
}
.bio{
  font-family:var(--font-fa);
  font-size:15px;
  line-height:2;
  color:var(--text-muted);
  max-width:320px;
  margin:0 auto 22px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  border-radius:var(--radius-md);
  padding:15px 22px;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease, background .18s ease;
}
.btn:active{transform:scale(.97);}
.btn--primary{
  background:linear-gradient(135deg, var(--gold-strong), var(--gold));
  color:#1a1509;
  width:100%;
}
.btn--primary:hover{filter:brightness(1.08);}
.btn--large{padding:16px 22px; font-size:16px;}
.btn--full{width:100%;}
.btn--ghost{
  background:var(--gold-dim);
  color:var(--gold-strong);
  border:1px solid rgba(205,168,106,0.35);
}
.btn--outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn--outline:hover{background:var(--surface-2);}
.icon{width:19px; height:19px;}

/* ============ NFC SIGNATURE VISUAL ============ */
.nfc-card{text-align:center;}
.nfc-visual{
  position:relative;
  width:100%;
  aspect-ratio:1.586/1;
  max-width:320px;
  margin:0 auto 16px;
  border-radius:20px;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(233,201,138,0.20), transparent 55%),
    linear-gradient(155deg, #1c1a16 0%, #0d0c0a 60%, #17140d 100%);
  border:1px solid rgba(205,168,106,0.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  color:var(--gold-strong);
  cursor:pointer;
}
.nfc-visual__sheen{
  position:absolute;
  top:-50%; left:-60%;
  width:60%; height:200%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform:rotate(20deg);
  animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{
  0%{left:-60%;}
  45%{left:130%;}
  100%{left:130%;}
}
.nfc-wave{width:30px; height:30px; align-self:flex-end;}
.nfc-visual__label{
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.14em;
  font-weight:600;
  text-align:left;
}
.nfc-visual__tag{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--text-faint);
  text-align:left;
  text-transform:uppercase;
}
.nfc-hint{
  font-size:13px;
  color:var(--text-muted);
}

/* ============ LINKS ============ */
.link-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 12px;
  border-radius:var(--radius-md);
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.link-row + .link-row{margin-top:8px;}
.link-row:hover{
  background:var(--surface-2);
  border-color:var(--border);
  transform:translateX(2px);
}
.link-icon{
  width:42px; height:42px;
  flex:0 0 42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--border);
}
.link-icon svg{width:20px; height:20px;}
.link-icon--ig{color:#e79c56;}
.link-icon--wa{color:#5fd67e;}
.link-icon--tg{color:#6fb6e8;}
.link-icon--web{color:var(--gold);}
.link-text{flex:1; display:flex; flex-direction:column; gap:2px;}
.link-text strong{font-size:15px; font-weight:600;}
.link-text small{font-size:12.5px; color:var(--text-muted);}
.chev{width:16px; height:16px; color:var(--text-faint); flex:0 0 auto;}

/* ============ MUSIC ============ */
.music-links{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.music-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 14px;
  border-radius:99px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  font-size:13px; font-weight:500;
  text-decoration:none;
}
.music-chip svg{width:16px; height:16px; color:var(--gold);}
.music-chip:hover{border-color:var(--gold);}

.player{
  display:flex; align-items:center; gap:14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-bottom:16px;
}
.player-toggle{
  width:44px; height:44px; flex:0 0 44px;
  border-radius:50%;
  border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--gold-strong), var(--gold));
  color:#1a1509;
  display:flex; align-items:center; justify-content:center;
}
.player-toggle svg{width:18px; height:18px;}
.player-meta{flex:1; min-width:0;}
.player-meta strong{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player-meta small{color:var(--text-muted); font-size:12px;}
.player-bars{display:flex; align-items:flex-end; gap:3px; height:20px;}
.player-bars span{
  width:3px; background:var(--gold); border-radius:2px;
  height:6px;
  animation:bar 1.1s ease-in-out infinite;
  opacity:.55;
}
.player-bars span:nth-child(2){animation-delay:.15s;}
.player-bars span:nth-child(3){animation-delay:.3s;}
.player-bars span:nth-child(4){animation-delay:.45s;}
@keyframes bar{
  0%,100%{height:6px;}
  50%{height:18px;}
}
.player.is-playing .player-bars span{opacity:1;}

/* ============ QR ============ */
.qr-card{text-align:center;}
.qr-box{
  display:inline-flex;
  padding:14px;
  background:#fff;
  border-radius:16px;
  margin:4px auto 14px;
}
#qr-canvas img, #qr-canvas canvas{display:block; border-radius:6px;}
.qr-url{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:16px;
  word-break:break-all;
}

/* ============ INFO / NFC NOTE ============ */
.info-card{
  display:flex; align-items:center; gap:14px;
  color:var(--text-muted);
  font-size:13.5px;
}
.info-icon{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:10px;
  background:var(--gold-dim);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.info-icon svg{width:18px; height:18px;}

.footer{
  text-align:center;
  padding:18px 0 30px;
  color:var(--text-faint);
  font-size:12px;
}

/* ============ TOAST ============ */
.toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translate(-50%, 20px);
  background:#1c1a16;
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 20px;
  border-radius:99px;
  font-size:13.5px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

@media (min-width:520px){
  .wrap{padding-top:44px;}
}

/* ============ SAVE CONTACT CONFIRM MODAL ============ */
.confirm-modal{
  position:fixed; inset:0;
  background:rgba(9,9,11,0.72);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:100;
  animation:fadeIn .18s ease;
}
.confirm-modal[hidden]{ display:none; }
.confirm-modal__box{
  width:100%; max-width:340px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:26px 22px 20px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  animation:popIn .2s ease;
}
.confirm-modal__text{
  font-size:16px;
  color:var(--text);
  margin:0 0 20px;
  font-family:"Vazirmatn", sans-serif;
}
.confirm-modal__actions{
  display:flex; gap:10px;
}
.confirm-modal__btn{
  flex:1;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes popIn{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }

/* ============ COLOR THEMES ============ */
[data-theme="neon"]{
  --gold: #5ec8ff;
  --gold-strong: #9fe0ff;
  --gold-dim: rgba(94,200,255,0.16);
}
[data-theme="mint"]{
  --gold: #7fd9a0;
  --gold-strong: #a9f0c4;
  --gold-dim: rgba(127,217,160,0.16);
}

/* ============ TOPBAR (status / clock / tools) ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.topbar--tools{ margin-bottom:18px; gap:8px; }
.clock-pill{
  font-family:"Space Grotesk", monospace;
  font-size:13px; color:var(--gold-strong);
  background:var(--surface); border:1px solid var(--border-soft);
  padding:6px 12px; border-radius:99px; letter-spacing:0.5px;
}
.tool-btn{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border-soft);
  color:var(--text-muted); font-size:12.5px; font-family:inherit;
  cursor:pointer;
}
.tool-btn svg{ width:16px; height:16px; }
.tool-btn--icon{ padding:8px; }
.tool-btn:hover{ border-color:var(--gold); color:var(--gold-strong); }


/* ============ ANONYMOUS MESSAGE + CYBER TERMINAL ============ */
.anon-panel{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  justify-content:flex-start;
  background:rgba(4,4,6,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:"Courier New",monospace;
  animation:anonFadeIn .18s ease both;
}
.anon-panel[hidden]{display:none}
@keyframes anonFadeIn{from{opacity:0}to{opacity:1}}
.anon-panel__sheet{
  position:relative;
  width:min(100%,480px);
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 10%,rgba(210,177,111,.08),transparent 32%),
    linear-gradient(180deg,#09090b,#050506);
  border-right:1px solid rgba(210,177,111,.22);
  box-shadow:24px 0 70px rgba(0,0,0,.55);
  padding:20px 18px max(22px,env(safe-area-inset-bottom));
  transform:translateX(-105%);
  animation:anonSheetIn .34s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes anonSheetIn{to{transform:translateX(0)}}
.anon-panel__sheet:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(215,181,109,.025) 0 1px,transparent 1px 4px);
}
.anon-panel__header{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.anon-panel__header h2{
  margin:0;color:var(--gold-strong);font-size:15px;letter-spacing:1.1px;
  text-shadow:0 0 14px rgba(215,181,109,.22);
}
.anon-prompt{color:var(--gold);animation:terminalBlink 1.15s step-end infinite}
@keyframes terminalBlink{50%{opacity:.28}}
.anon-panel__close{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.025);border:1px solid var(--border-soft);
  color:var(--text-muted);cursor:pointer;
}
.anon-panel__close:hover{color:var(--gold-strong);border-color:var(--gold)}
.anon-panel__hint{
  position:relative;z-index:1;
  color:var(--text-muted);font-family:"Vazirmatn",sans-serif;
  font-size:12px;line-height:1.9;margin:0 0 14px;
}
.anon-binary{
  position:relative;z-index:1;
  overflow:hidden;white-space:nowrap;
  color:rgba(215,181,109,.46);
  font-size:10px;letter-spacing:1.2px;line-height:1.8;
  margin-bottom:8px;min-height:18px;
}
.anon-auth{
  position:relative;z-index:1;
  max-width:430px;margin:auto;
  padding-top:7vh;
}
.anon-auth .field{margin-bottom:10px}
.anon-auth input,.anon-panel__composer textarea{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(215,181,109,.18)!important;
  border-radius:13px;padding:13px 14px;
  color:var(--text)!important;outline:none;
  font-family:"Courier New","Vazirmatn",monospace!important;
}
.anon-auth input:focus,.anon-panel__composer textarea:focus{
  border-color:rgba(215,181,109,.65)!important;
  box-shadow:0 0 0 3px rgba(215,181,109,.07);
}
.anon-auth input::placeholder,.anon-panel__composer textarea::placeholder{color:#6f6a5f}
.anon-auth__mode{display:flex;gap:7px;margin:10px 0 12px}
.anon-auth__mode button{
  flex:1;padding:9px;border-radius:10px;
  background:rgba(255,255,255,.025);border:1px solid var(--border-soft);
  color:var(--text-muted);font:inherit;cursor:pointer;
}
.anon-auth__mode button.active{
  color:#17130a;background:linear-gradient(135deg,var(--gold-strong),var(--gold));
  border-color:var(--gold);
}
.anon-auth-error{color:#e98989;font-family:"Vazirmatn",sans-serif;font-size:12px;line-height:1.8;margin:8px 0}
#anon-auth-submit{
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.anon-chat{
  position:relative;z-index:1;
  display:flex;flex-direction:column;height:calc(100% - 54px);
}
.anon-chat__top{
  display:flex;align-items:center;gap:7px;
  color:var(--text-muted);font-size:10.5px;margin-bottom:9px;
}
.anon-chat__top>span{margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anon-logout,.anon-notify{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--border-soft);background:rgba(255,255,255,.025);
  color:var(--gold-strong);border-radius:9px;padding:7px 9px;
  font:inherit;font-size:10px;cursor:pointer;white-space:nowrap;
}
.anon-logout svg{width:15px;height:15px}
.anon-panel__thread{
  flex:1;min-height:120px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  padding:4px 2px 12px;scrollbar-width:thin;
}
.anon-bubble{
  position:relative;max-width:84%;padding:10px 12px;border-radius:14px;
  font-family:"Vazirmatn",sans-serif;font-size:13px;line-height:1.75;
  border:1px solid var(--border-soft);background:rgba(255,255,255,.035);
}
.anon-bubble.me{
  align-self:flex-end;color:var(--gold-strong);
  background:rgba(215,181,109,.10);border-color:rgba(215,181,109,.45);
}
.anon-bubble.them{align-self:flex-start;color:var(--text);background:rgba(255,255,255,.035)}
.anon-bubble img{max-width:100%;border-radius:10px;display:block}
.anon-bubble audio{width:200px;max-width:100%}
.anon-bubble time{display:block;font-size:10px;color:var(--text-faint);margin-top:4px}
.anon-emoji{
  display:flex;flex-wrap:wrap;gap:5px;padding:9px;
  background:#11110f;border:1px solid var(--border-soft);border-radius:12px;margin-bottom:7px;
}
.anon-emoji[hidden]{display:none}
.anon-emoji button{background:transparent;border:0;font-size:19px;cursor:pointer;line-height:1;padding:4px}
.anon-recording{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
  background:rgba(211,91,91,.10);border:1px solid rgba(211,91,91,.3);
  color:#e99a9a;padding:8px 10px;border-radius:11px;font-size:12px;
}
.anon-recording[hidden]{display:none}
.anon-recording__dot{width:8px;height:8px;border-radius:50%;background:#e46a6a;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.anon-recording button{margin-inline-start:auto;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.anon-recording .anon-cancel{margin-inline-start:0}
.anon-panel__composer{margin-top:auto}
.anon-panel__composer textarea{resize:none;height:74px;margin-bottom:7px;font-family:"Vazirmatn",sans-serif!important}
.anon-panel__actions{display:flex;align-items:center;gap:6px}
.anon-icon-btn{
  width:39px;height:39px;flex:0 0 39px;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid var(--border-soft);
  color:var(--gold-strong);font-size:16px;cursor:pointer;
}
.anon-send-btn{
  flex:1;height:39px;border:0;border-radius:10px;
  background:linear-gradient(135deg,var(--gold-strong),var(--gold));
  color:#17130a;font-family:"Vazirmatn",sans-serif;font-weight:700;cursor:pointer;
}

.anon-recording__label{flex:1;min-width:0}
.anon-recording__timer{font-variant-numeric:tabular-nums;letter-spacing:.4px;color:#f2c87b;min-width:42px;text-align:center}
.anon-recording__stop{margin-inline-start:auto!important}
.anon-recording button{border:1px solid rgba(215,181,109,.28);background:rgba(215,181,109,.07);color:var(--gold-strong);padding:7px 9px;border-radius:9px;font:600 11px "Vazirmatn",sans-serif;cursor:pointer}
.anon-recording .anon-cancel{background:transparent;border-color:var(--border-soft);color:var(--text-muted)}
.anon-recording button:disabled{opacity:.45;cursor:not-allowed}
.anon-voice-preview{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;margin-bottom:7px;padding:8px 9px;border:1px solid rgba(215,181,109,.25);background:rgba(215,181,109,.055);border-radius:12px}
.anon-voice-preview[hidden]{display:none}
.anon-voice-preview audio{width:100%;min-width:0;height:34px}
.anon-send-voice,.anon-voice-discard{height:34px;border-radius:9px;padding:0 10px;border:1px solid rgba(215,181,109,.28);font:600 11px "Vazirmatn",sans-serif;cursor:pointer;white-space:nowrap}
.anon-send-voice{background:linear-gradient(135deg,var(--gold-strong),var(--gold));color:#17130a;border:0}
.anon-voice-discard{background:rgba(255,255,255,.025);color:var(--text-muted);border-color:var(--border-soft)}
.anon-send-voice:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:390px){.anon-voice-preview{grid-template-columns:1fr auto}.anon-voice-preview audio{grid-column:1/-1}}
.anon-install-hint{
  position:fixed;z-index:360;
  top:max(74px,env(safe-area-inset-top) + 62px);
  right:14px;width:min(290px,calc(100vw - 28px));
  display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;
  padding:11px;border-radius:15px;
  background:rgba(18,17,14,.96);
  border:1px solid rgba(215,181,109,.35);
  box-shadow:0 18px 45px rgba(0,0,0,.5);
  color:var(--text);
  animation:installIn .32s cubic-bezier(.2,.8,.2,1);
}
.anon-install-hint[hidden]{display:none}
@keyframes installIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.anon-install-hint__icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--gold-dim);color:var(--gold-strong);font-size:21px;
}
.anon-install-hint__body{min-width:0}
.anon-install-hint__body strong,.anon-install-hint__body span{display:block}
.anon-install-hint__body strong{font-family:"Vazirmatn",sans-serif;font-size:12.5px;color:var(--gold-strong)}
.anon-install-hint__body span{font-family:"Vazirmatn",sans-serif;font-size:10.5px;color:var(--text-muted);margin-top:2px}
.anon-install-hint button{
  border:0;border-radius:9px;padding:8px 10px;
  background:linear-gradient(135deg,var(--gold-strong),var(--gold));
  color:#17130a;font-family:"Vazirmatn",sans-serif;font-size:11px;font-weight:700;cursor:pointer;
}
.anon-install-hint__close{
  grid-column:2/-1;background:transparent!important;color:var(--text-faint)!important;
  padding:2px!important;justify-self:start;
}

/* ============ FIXED MOBILE SLIDE-IN SIDEBAR ============ */
.sidebar-handle{
  position:fixed;right:0;top:42%;z-index:220;
  width:42px;height:58px;padding:0;
  border:1px solid var(--border);border-right:0;
  border-radius:17px 0 0 17px;
  background:rgba(18,17,14,.94);color:var(--gold-strong);
  box-shadow:-6px 10px 28px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .2s ease,background .2s ease;
}
.sidebar-handle svg{width:20px;height:20px}
.sidebar-handle:active{transform:scale(.96)}
.site-sidebar{
  position:fixed;top:0;right:0;bottom:0;z-index:230;
  width:min(84vw,340px);
  box-sizing:border-box;
  display:flex;flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 10% 0%,rgba(215,181,109,.07),transparent 35%),
    rgba(11,11,13,.985);
  border-left:1px solid rgba(215,181,109,.2);
  box-shadow:-24px 0 70px rgba(0,0,0,.58);
  transform:translateX(105%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  visibility:hidden;
}
.site-sidebar.open{transform:translateX(0);pointer-events:auto;visibility:visible}
.site-sidebar__head{
  display:flex;align-items:center;justify-content:space-between;
  color:var(--gold-strong);font-family:var(--font-display);
  letter-spacing:1px;padding-bottom:15px;border-bottom:1px solid var(--border-soft);
}
.site-sidebar__brand{display:flex;align-items:center;gap:9px}
.site-sidebar__brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-strong),var(--gold));
  color:#17130a;font-size:11px;font-weight:800;letter-spacing:0;
}
.sidebar-close{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--border-soft);
  color:var(--text-muted);cursor:pointer;
}
.sidebar-close svg{width:19px;height:19px}
.site-sidebar__nav{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.site-sidebar__nav a,.site-sidebar__nav button{
  display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;
  border:1px solid var(--border-soft);background:rgba(255,255,255,.025);
  color:var(--text);border-radius:14px;padding:13px 12px;
  text-align:right;text-decoration:none;font:inherit;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.site-sidebar__nav a:hover,.site-sidebar__nav button:hover{
  background:var(--gold-dim);border-color:rgba(215,181,109,.35);transform:translateX(-2px);
}
.sidebar-nav__icon{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;color:var(--gold-strong);background:rgba(215,181,109,.07);
}
.sidebar-nav__icon svg{width:18px;height:18px}
.sidebar-nav__label{flex:1}
.sidebar-nav__anon{color:var(--gold-strong)!important;border-color:rgba(215,181,109,.3)!important}
.sidebar-reply-badge{
  padding:4px 7px;border-radius:99px;
  background:rgba(215,181,109,.15);color:var(--gold-strong);
  font-family:"Vazirmatn",sans-serif;font-size:9px;
}
.sidebar-reply-badge[hidden]{display:none}
.site-sidebar__footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:14px;
  color:var(--text-faint);font-size:10px;border-top:1px solid var(--border-soft);
}
.sidebar-backdrop{
  position:fixed;inset:0;z-index:225;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.sidebar-backdrop[hidden]{display:none}

@media (max-width:390px){
  .anon-panel__sheet{padding-left:14px;padding-right:14px}
  .anon-auth{padding-top:4vh}
  .anon-install-hint{right:10px;width:calc(100vw - 20px)}
}
@media (prefers-reduced-motion:reduce){
  .site-sidebar,.sidebar-handle,.anon-panel,.anon-panel__sheet,.anon-install-hint,
  .anon-prompt,.anon-recording__dot{animation:none!important;transition:none!important}
}

.topbar--tools{justify-content:flex-end;min-height:36px}
/* Premium voice player */
.voice-player{display:flex;align-items:center;gap:9px;position:relative;width:min(100%,300px);min-width:210px;padding:8px 9px;border:1px solid rgba(205,168,106,.2);border-radius:13px;background:rgba(255,255,255,.035);overflow:hidden}
.voice-player__toggle{width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(205,168,106,.3);border-radius:10px;background:var(--gold-dim);color:var(--gold-strong);display:grid;place-items:center;cursor:pointer}
.voice-player__toggle svg{width:17px;height:17px}.voice-player__pause{display:none}.voice-player.is-playing .voice-player__play{display:none}.voice-player.is-playing .voice-player__pause{display:block}
.voice-player__visual{flex:1;min-width:0}.voice-player__bars{height:38px;display:flex;align-items:center;gap:3px;overflow:hidden;mask-image:linear-gradient(to left,transparent 0,#000 8%,#000 92%,transparent 100%)}
.voice-player__bars i{width:3px;min-width:3px;height:calc(var(--h)*100%);max-height:34px;border-radius:5px;background:rgba(205,168,106,.38);transform-origin:center;transition:background .15s,height .15s}
.voice-player{--progress:0%}.voice-player__bars i{background:linear-gradient(to right,var(--gold-strong) 0,var(--gold-strong) var(--progress),rgba(205,168,106,.35) var(--progress),rgba(205,168,106,.35) 100%)}
.voice-player.is-playing .voice-player__bars i{animation:voiceBars 1.05s ease-in-out infinite alternate}.voice-player.is-playing .voice-player__bars i:nth-child(3n){animation-delay:-.3s}.voice-player.is-playing .voice-player__bars i:nth-child(4n){animation-delay:-.55s}
@keyframes voiceBars{from{transform:scaleY(.78)}to{transform:scaleY(1.06)}}
.voice-player__meta{display:flex;justify-content:space-between;font:10px "Vazirmatn",sans-serif;color:var(--text-faint);direction:ltr}.voice-player__error{position:absolute;inset:auto 8px 4px auto;color:#e98989;font:9px "Vazirmatn",sans-serif;background:#111;padding:1px 4px;border-radius:5px}.voice-player audio{display:none}.voice-player--preview{width:100%}
.site-sidebar__nav .sidebar-nav__dong{color:var(--text)}.site-sidebar__nav .sidebar-nav__dong:hover{color:var(--gold-strong)}
.anon-icon-btn svg,.anon-send-btn svg,.anon-logout svg{width:18px;height:18px}.anon-icon-btn{display:grid;place-items:center}.anon-send-btn{display:flex;align-items:center;justify-content:center;gap:7px}.anon-send-btn svg{width:16px;height:16px}
@media (max-width:390px){.voice-player{min-width:0}.voice-player__bars{gap:2px}.voice-player__bars i{width:2px;min-width:2px}}