/* ============ BUTTONS ============ */
.btn{
  padding:14px 22px;border-radius:14px;
  font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,box-shadow .2s,background .2s,opacity .2s;
}
.btn-primary{
  background:var(--ink);color:var(--bg);
  box-shadow:0 4px 14px rgba(14,14,12,.15);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{background:var(--surface-2)}
.btn-accent{
  background:var(--accent);color:#fff;
  box-shadow:0 4px 14px rgba(255,77,109,.3);
}
.btn-accent:hover{transform:translateY(-2px)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

.icon-btn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  display:grid;place-items:center;font-size:15px;
  transition:transform .2s,background .2s;
}
.icon-btn:hover{transform:scale(1.05);background:var(--surface-2)}

/* ============ FORM ============ */
.field{display:flex;flex-direction:column;gap:10px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.text-input{
  width:100%;padding:16px 18px;border-radius:14px;
  background:var(--surface);border:1.5px solid var(--line);
  font-size:16px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.text-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);
}
.text-input::placeholder{color:var(--ink-4)}

/* ============ CHIPS ============ */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:12px 16px;border-radius:100px;
  border:1.5px solid var(--line);
  background:var(--surface);
  font-size:14px;font-weight:500;
  transition:all .15s;
}
.chip:hover{border-color:var(--ink-4)}
.chip.selected{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
}

/* ============ CHOICE GRID ============ */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{
  padding:20px 16px;border-radius:18px;
  background:var(--surface);border:1.5px solid var(--line);
  text-align:left;display:flex;flex-direction:column;gap:6px;
  transition:all .2s cubic-bezier(.2,.8,.2,1);
}
.choice:hover{border-color:var(--ink-4);transform:translateY(-1px)}
.choice.selected{
  background:var(--ink);color:var(--bg);
  border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,14,12,.15);
}
.choice-emoji{font-size:26px}
.choice-label{font-weight:600;font-size:14px}
.choice-desc{font-size:12px;color:var(--ink-3)}
.choice.selected .choice-desc{color:var(--ink-4)}

/* ============ PROGRESS ============ */
.progress-wrap{display:flex;align-items:center;gap:12px}
.progress-track{
  flex:1;height:6px;
  background:var(--surface-2);
  border-radius:100px;overflow:hidden;
  border:1px solid var(--line);
}
.progress-fill{
  height:100%;background:var(--accent);
  border-radius:100px;
  transition:width .4s cubic-bezier(.2,.8,.2,1);
}
.progress-label{
  font-size:12px;font-weight:600;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ============ CARDS ============ */
.section-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:24px;
  width:100%;text-align:left;
}
.section-card h3{
  font-family:var(--font-display);
  font-size:18px;letter-spacing:-.01em;
  margin-bottom:12px;
}
.section-card p{
  font-size:15px;line-height:1.6;
  color:var(--ink-2);
}
.section-card .muted{color:var(--ink-3);font-size:14px}

/* ============ LABEL CHIPS ============ */
.label-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.label-chip{
  padding:8px 14px;border-radius:100px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:13px;font-weight:600;
}

/* ============ BAR / RESULT DIMS ============ */
.result-dims{display:grid;gap:14px;width:100%;margin-top:8px}
.result-dim{display:flex;align-items:center;gap:12px;font-size:14px}
.result-dim .em{font-size:18px;width:24px;text-align:center}
.result-dim .nm{flex:1;text-align:left;color:var(--ink-2)}
.result-dim .bar{
  flex:1.2;height:8px;
  background:var(--surface-2);
  border-radius:100px;overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}
.result-dim .bar-fill{
  display:block;
  height:100%;background:var(--accent);
  border-radius:100px;
  width:var(--w,0%);
  transition:width .9s cubic-bezier(.2,.8,.2,1);
  will-change:width;
}
.result-dim .val{
  font-weight:700;min-width:44px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ============ CIRCLE LIST ============ */
.circle-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.circle-row{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .15s;
}
.circle-row:hover{transform:translateX(2px)}
.circle-avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:15px;
  flex-shrink:0;
}
.circle-name{flex:1;text-align:left;font-weight:600;font-size:15px}
.circle-score{
  font-family:var(--font-display);
  font-weight:700;font-size:20px;
  color:var(--accent);
}

/* ============ SHARE CARD ============ */
.share-card{
  background:var(--ink);color:var(--bg);
  border-radius:28px;padding:32px 24px;
  text-align:center;position:relative;overflow:hidden;
}
.share-card::before{
  content:"";position:absolute;
  inset:auto auto -60% -30%;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%);
  pointer-events:none;
}
.share-card *{position:relative;z-index:1}
.share-title{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:-.02em;
  margin-bottom:6px;font-weight:700;
}
.share-sub{font-size:14px;opacity:.7;margin-bottom:20px}
.share-link-box{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:14px 16px;border-radius:14px;
  font-family:var(--font-display);
  font-size:15px;font-weight:600;
  margin-bottom:16px;
  word-break:break-all;
}
.share-buttons{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.share-btn{
  padding:14px;border-radius:14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  font-size:14px;font-weight:600;color:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s;
}
.share-btn:hover{background:rgba(255,255,255,.18)}
.share-btn.primary{
  background:var(--accent);border-color:var(--accent);
  grid-column:1/-1;
}



.result-dim .bar{
  flex:1.2;height:8px;
  background:var(--surface-2);
  border-radius:100px;overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}
.result-dim .bar-fill{
  position:absolute;
  top:0;left:0;bottom:0;
  background:var(--accent);
  border-radius:100px;
  width:var(--w,0%);
  transition:width .9s cubic-bezier(.2,.8,.2,1);
}



/* ============ AVATAR WITH IMAGE ============ */
.avatar-img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.avatar-upload{
  position:relative;
  width:96px;height:96px;
  border-radius:50%;
  background:var(--surface-2);
  border:2px dashed var(--line-2);
  display:grid;place-items:center;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s;
  margin:0 auto;
}
.avatar-upload:hover{border-color:var(--accent)}
.avatar-upload img{width:100%;height:100%;object-fit:cover}
.avatar-upload .plus{font-size:32px;color:var(--ink-3)}
.avatar-upload input[type=file]{display:none}

/* ============ FLAG GAME ============ */
.flag-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:8px;
}
.flag-btn{
  padding:24px 16px;
  border-radius:20px;
  border:2px solid var(--line);
  background:var(--surface);
  display:flex;flex-direction:column;
  align-items:center;gap:8px;
  font-size:15px;font-weight:700;
  transition:all .15s cubic-bezier(.2,.8,.2,1);
}
.flag-btn:hover{transform:translateY(-2px)}
.flag-btn:active{transform:scale(.96)}
.flag-btn.flag-green:hover{border-color:#84CC16;background:color-mix(in srgb,#84CC16 10%,var(--surface))}
.flag-btn.flag-red:hover{border-color:#FF5677;background:color-mix(in srgb,#FF5677 10%,var(--surface))}
.flag-icon{font-size:32px}

/* ============ NOTIFICATIONS ============ */
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-row{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform .15s,border-color .2s;
}
.notif-row:hover{transform:translateY(-1px);border-color:var(--line-2)}
.notif-avatar{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:16px;
  flex-shrink:0;
}
.notif-content{flex:1;text-align:left}
.notif-title{font-size:14px;color:var(--ink);margin-bottom:4px}
.notif-meta{font-size:13px;color:var(--ink-3)}
.notif-action{
  font-size:13px;font-weight:600;
  color:var(--accent);
  padding:8px 12px;
  border-radius:100px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  transition:background .2s;
}
.notif-action:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}

/* ============ REEL INPUT ============ */
.reel-input{font-size:14px}

/* ============ INTERNET VIBE ============ */
.internet-vibe-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-top:12px;
}
.iv-cell{
  padding:14px;border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  text-align:center;
}
.iv-cell .iv-em{font-size:22px;margin-bottom:6px}
.iv-cell .iv-label{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.05em;margin-bottom:4px}
.iv-cell .iv-pct{font-family:var(--font-display);font-weight:700;font-size:18px}


/* ============ AUTH ============ */
.username-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.username-prefix{
  position:absolute;
  left:16px;
  font-size:16px;
  font-weight:600;
  color:var(--ink-3);
  pointer-events:none;
  z-index:1;
}
.username-input{
  padding-left:34px !important;
  font-weight:500;
}
.field-hint{
  font-size:12px;
  color:var(--ink-4);
  line-height:1.5;
  margin-top:2px;
}
.auth-switch-btn{
  color:var(--accent);
  font-weight:600;
  font-size:14px;
  background:none;
  border:none;
  cursor:pointer;
  padding:12px;
}
.auth-switch-btn:hover{
  text-decoration:underline;
}
.auth-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:var(--ink-4);
  padding:16px;
  text-align:center;
  line-height:1.5;
  margin-top:8px;
}


/* ============ MESSAGE INBOX ============ */
.msg-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msg-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:left;
  width:100%;
  transition:transform .15s, border-color .2s, background .2s;
  cursor:pointer;
}
.msg-row:hover{
  transform:translateY(-1px);
  border-color:var(--line-2);
}
.msg-unread{
  border-left:3px solid var(--accent);
}
.msg-icon{
  font-size:24px;
  flex-shrink:0;
  width:32px;
  text-align:center;
}
.msg-body{flex:1;min-width:0}
.msg-preview{
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.4;
}
.msg-meta{
  font-size:12px;
  color:var(--ink-3);
}
.msg-arrow{
  font-size:16px;
  color:var(--ink-4);
  flex-shrink:0;
}
.msg-revealed{border-left:3px solid #22C55E}
.msg-anon{border-left:3px solid var(--ink-4)}

/* ============ SEND MESSAGE ============ */
.send-msg-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  color:#fff;
  overflow:hidden;
  box-shadow:0 12px 32px -8px rgba(255,77,109,.3);
}
.send-msg-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.msg-textarea{
  resize:vertical;
  min-height:120px;
  font-family:var(--font-body);
  line-height:1.5;
  padding:16px 18px;
}

/* ============ REVEAL MESSAGE ============ */
.reveal-message-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px 24px;
  position:relative;
  overflow:hidden;
}
.reveal-message-card::before{
  content:'"';
  position:absolute;
  top:8px;
  right:20px;
  font-family:var(--font-serif);
  font-size:80px;
  line-height:1;
  color:var(--accent);
  opacity:.12;
  pointer-events:none;
}
.reveal-message-card.revealed{
  background:linear-gradient(160deg,#e8f5e9,var(--surface));
  border-color:#a7f3d0;
}
[data-theme="dark"] .reveal-message-card.revealed{
  background:linear-gradient(160deg,#0f1f14,var(--surface));
  border-color:#1f4a2c;
}
.reveal-message-card.anonymous{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
}
.reveal-message-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:14px;
}
.reveal-message-content{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.45;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
}

/* ============ GUESS INPUTS ============ */
.guess-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guess-label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:2px;
}
.guess-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:var(--surface);
  border:1.5px solid var(--line);
  transition:all .2s;
}
.guess-input-wrap.active{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);
}
.guess-input-wrap.past{
  opacity:.5;
}
.guess-num{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--surface-2);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--ink-3);
  flex-shrink:0;
}
.guess-input-wrap.active .guess-num{
  background:var(--accent);
  color:#fff;
}
.guess-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.guess-input::placeholder{
  color:var(--ink-4);
}

/* ============ MSG SHARE INLINE ============ */
.msg-share-inline{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 10px 16px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.msg-share-url{
  flex:1;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.msg-share-inline .btn{
  padding:10px 16px;
  font-size:13px;
  border-radius:10px;
}



/* ============ MESSAGE SHARE CARD ============ */
.share-card-msg{
  background:linear-gradient(160deg,#1a1a2e,#16213e) !important;
  color:#f5f5f2 !important;
}
.share-card-msg .share-title,
.share-card-msg .share-sub,
.share-card-msg .share-link-box{
  color:#f5f5f2 !important;
}
.share-card-msg .share-link-box{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.2) !important;
}
.share-card-msg .share-btn{
  color:#f5f5f2 !important;
}
[data-theme="light"] .share-card-msg{
  background:linear-gradient(160deg,#1a1a2e,#16213e) !important;
  color:#f5f5f2 !important;
}



/* ============ SHARE MODAL ============ */
.share-modal-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.share-modal{
  background:var(--surface);
  border-radius:28px;
  padding:24px;
  max-width:420px;
  width:100%;
  max-height:92vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 32px 80px -20px rgba(0,0,0,.6);
  animation:modalIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.9) translateY(20px)}
  to{opacity:1;transform:none}
}
.share-modal-close{
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:grid;place-items:center;
  font-size:16px;
  font-weight:600;
  color:var(--ink-2);
  transition:transform .15s, background .15s;
  z-index:2;
}
.share-modal-close:hover{
  background:var(--line);
  transform:scale(1.05);
}
.share-modal-preview{
  border-radius:20px;
  overflow:hidden;
  margin-bottom:20px;
  background:#000;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.4);
  aspect-ratio:9/16;
  max-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.share-modal-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.share-modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.share-modal-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 8px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:600;
  color:var(--ink-2);
  transition:all .15s;
  text-align:center;
  line-height:1.3;
}
.share-modal-btn:hover{
  background:var(--surface);
  transform:translateY(-2px);
  border-color:var(--line-2);
}
.share-modal-btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.share-modal-btn.primary:hover{
  filter:brightness(1.05);
}
.share-modal-btn span:first-child{
  font-size:20px;
  line-height:1;
}
.share-modal-hint{
  font-size:12px;
  color:var(--ink-3);
  text-align:center;
  line-height:1.5;
  margin-top:4px;
}
.share-modal-hint b{
  color:var(--accent);
  font-weight:700;
}

@media (max-width:420px){
  .share-modal-actions{
    grid-template-columns:1fr 1fr;
  }
  .share-modal-btn{
    font-size:12px;
    padding:14px 10px;
  }
}



/* ============ REVEAL MODAL ============ */
.reveal-perk-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  background:var(--surface-2);
  border-radius:16px;
  margin-top:8px;
}
.reveal-perk{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-2);
}
.reveal-perk span:first-child{
  font-size:16px;
}

/* ============ REVEAL BUTTON IN CHAT ============ */
.chat-header-reveal{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  font-size:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:transform .15s;
}
.chat-header-reveal:hover{
  transform:scale(1.05);
}
.chat-header-reveal.level-1{
  background:linear-gradient(135deg, #84CC16, #65A30D);
}
.chat-header-reveal.level-2{
  background:linear-gradient(135deg, #7DD3FC, #38BDF8);
}



/* ============================================================
   ANONYMOUS CHAT
   ============================================================ */

.chat-app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* HEADER */
.chat-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
}
.chat-back{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:16px;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .15s;
}
.chat-back:hover{transform:scale(1.05)}
.chat-header-info{
  flex:1;
  min-width:0;
  overflow:hidden;
}
.chat-header-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-header-status{
  font-size:12px;
  color:var(--ink-3);
  margin-top:2px;
}
.chat-header-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.chat-theme-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:16px;
  cursor:pointer;
  transition:transform .15s;
}
.chat-theme-btn:hover{transform:scale(1.05) rotate(15deg)}

.chat-header-reveal{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  font-size:11px;
  font-weight:700;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s;
}
.chat-header-reveal:hover{transform:scale(1.05)}
.chat-header-reveal.level-1{
  background:linear-gradient(135deg, #84CC16, #65A30D);
}
.chat-header-reveal.level-2{
  background:linear-gradient(135deg, #7DD3FC, #38BDF8);
}

/* MESSAGES AREA */
.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:20px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.chat-empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.chat-date-sep{
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  padding:12px 0;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.chat-system{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.5);
  padding:8px 16px;
  font-style:italic;
}

.chat-bubble-row{
  display:flex;
  margin:2px 0;
  animation:msgIn .25s ease;
}
.chat-bubble-row.mine{justify-content:flex-end}
.chat-bubble-row.theirs{justify-content:flex-start}

@keyframes msgIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.chat-bubble{
  max-width:75%;
  padding:10px 14px 6px;
  border-radius:18px;
  font-size:15px;
  line-height:1.4;
  word-wrap:break-word;
  word-break:break-word;
  position:relative;
}
.chat-bubble-mine{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-bottom-right-radius:6px;
}
.chat-bubble-theirs{
  background:rgba(255,255,255,0.1);
  color:#F5F5F2;
  border-bottom-left-radius:6px;
  backdrop-filter:blur(10px);
}

.chat-time{
  font-size:10px;
  opacity:.7;
  margin-top:2px;
  text-align:right;
  font-weight:500;
}

.chat-voice{
  width:220px;
  margin:2px 0;
}

/* INPUT AREA */
.chat-input-wrap{
  position:sticky;
  bottom:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  z-index:10;
}
.chat-input-inner{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:4px 4px 4px 12px;
}
.chat-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:12px 4px;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  min-width:0;
}
.chat-input::placeholder{color:var(--ink-4)}
.chat-input:disabled{opacity:.5}

.chat-emoji-btn,
.chat-send-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:none;
  cursor:pointer;
  font-size:16px;
  flex-shrink:0;
  transition:transform .15s, background .15s;
}
.chat-emoji-btn{
  background:transparent;
}
.chat-emoji-btn:hover{background:var(--surface-2)}

.chat-send-btn{
  background:var(--accent);
  color:#fff;
  font-size:18px;
  font-weight:700;
}
.chat-send-btn:hover{transform:scale(1.05)}
.chat-send-btn:disabled{
  background:var(--line-2);
  color:var(--ink-4);
  cursor:not-allowed;
}

/* LIMIT BAR */
.chat-limit-bar{
  padding:14px 16px;
  background:linear-gradient(90deg, rgba(255,77,109,.15), rgba(255,128,149,.1));
  border-top:1px solid rgba(255,77,109,.3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  backdrop-filter:blur(20px);
}
.chat-limit-text{
  font-size:13px;
  font-weight:600;
  color:#fff;
}
.chat-limit-bar .btn{
  padding:10px 18px;
  font-size:13px;
  border-radius:100px;
}

/* TYPING INDICATOR */
.chat-typing{
  display:flex;
  gap:4px;
  padding:12px 16px;
  background:rgba(255,255,255,0.1);
  border-radius:18px;
  width:fit-content;
}
.chat-typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  animation:typing 1.4s infinite;
}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}

@keyframes typing{
  0%, 60%, 100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-4px);opacity:1}
}

/* THEME PICKER MODAL */
.chat-theme-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:8px 0;
}
.chat-theme-item{
  aspect-ratio:1;
  border-radius:16px;
  border:2px solid var(--line);
  cursor:pointer;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:transform .15s, border-color .15s;
  overflow:hidden;
}
.chat-theme-item:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}
.chat-theme-item.active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.chat-theme-emoji{
  font-size:24px;
  position:relative;
  z-index:1;
}
.chat-theme-name{
  font-size:10px;
  font-weight:700;
  color:#fff;
  position:relative;
  z-index:1;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.chat-theme-pro{
  position:absolute;
  top:6px;
  right:6px;
  background:var(--gold);
  color:#1A0A2E;
  font-size:9px;
  font-weight:800;
  padding:2px 6px;
  border-radius:100px;
  z-index:1;
}

/* MOBILE */
@media (max-width:500px){
  .chat-bubble{max-width:82%}
  .chat-voice{width:180px}
  .chat-theme-grid{grid-template-columns:repeat(3, 1fr)}
}



/* ============================================================
   SHARE CARDS — Premium redesign
   ============================================================ */

.share-card{
  position:relative;
  border-radius:28px;
  padding:32px 24px 28px;
  text-align:center;
  overflow:hidden;
  margin-bottom:4px;
}

/* VIBE CARD */
.share-card-vibe{
  background:linear-gradient(160deg, #0B0B0F, #1A1A24);
  color:#F5F5F2;
}
.share-card-vibe::before{
  content:'';
  position:absolute;
  inset:auto auto -40% -30%;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,77,109,.35), transparent 70%);
  pointer-events:none;
}

/* MESSAGE CARD */
.share-card-msg{
  background:linear-gradient(160deg, #1A0F18, #2D1B3D);
  color:#F5F5F2;
}
.share-card-msg::before{
  content:'';
  position:absolute;
  inset:auto -40% -40% auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,.3), transparent 70%);
  pointer-events:none;
}

/* CHAT CARD — FEATURED */
.share-card-chat{
  background:linear-gradient(160deg, #0F0A1E, #1F1438, #2D1B4A);
  color:#F5F5F2;
  border:1.5px solid rgba(167,139,250,.3);
  box-shadow:0 24px 60px -20px rgba(167,139,250,.4);
}
.share-card-chat::before{
  content:'';
  position:absolute;
  inset:-50% -50% auto auto;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,77,109,.25), transparent 65%);
  pointer-events:none;
}
.share-card-chat::after{
  content:'';
  position:absolute;
  inset:auto auto -50% -50%;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(125,211,252,.2), transparent 65%);
  pointer-events:none;
}

.share-card > *{
  position:relative;
  z-index:1;
}

/* BADGE */
.share-card-badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:100px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  color:rgba(255,255,255,.85);
  margin-bottom:16px;
  backdrop-filter:blur(10px);
}
.share-card-badge-premium{
  background:linear-gradient(135deg, #C6F35A, #84CC16);
  border-color:rgba(198,243,90,.4);
  color:#0B0B0F;
  box-shadow:0 4px 16px rgba(198,243,90,.4);
}

/* ICON */
.share-icon{
  font-size:48px;
  line-height:1;
  margin-bottom:14px;
  display:block;
}

/* TITLE */
.share-card .share-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:8px;
  color:#fff;
}

.share-card .share-sub{
  font-size:14px;
  opacity:.7;
  margin-bottom:20px;
  line-height:1.5;
  color:#fff;
  max-width:340px;
  margin-left:auto;
  margin-right:auto;
}

/* LINK BOX */
.share-card .share-link-box{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  padding:14px 18px;
  border-radius:14px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  margin-bottom:16px;
  word-break:break-all;
  color:#fff;
  letter-spacing:.01em;
}

/* BUTTONS */
.share-card .share-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.share-card .share-btn{
  padding:14px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  font-size:13px;
  font-weight:600;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:transform .15s, background .15s;
  cursor:pointer;
}
.share-card .share-btn:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
}
.share-card .share-btn:active{
  transform:scale(.97);
}
.share-card .share-btn.primary{
  background:linear-gradient(135deg, #FF4D6D, #FF8095);
  border-color:transparent;
  grid-column:1/-1;
  box-shadow:0 8px 24px -8px rgba(255,77,109,.6);
}
.share-card .share-btn.primary:hover{
  background:linear-gradient(135deg, #FF5677, #FF8095);
  box-shadow:0 12px 32px -8px rgba(255,77,109,.7);
}

/* HINT */
.share-card-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.6);
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}

@media (max-width:420px){
  .share-card{
    padding:24px 18px 22px;
  }
  .share-card .share-title{
    font-size:19px;
  }
  .share-icon{
    font-size:40px;
  }
}


/* ============================================================
   CHAT LIST
   ============================================================ */

.chat-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.chat-list-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .15s, border-color .2s, background .2s;
  text-align:left;
  width:100%;
}
.chat-list-row:hover{
  transform:translateY(-1px);
  border-color:var(--line-2);
  background:var(--surface-2);
}
.chat-list-row:active{
  transform:scale(.99);
}

.chat-list-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  color:#fff;
  flex-shrink:0;
}

.chat-list-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.chat-list-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chat-list-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-list-time{
  font-size:11px;
  color:var(--ink-3);
  flex-shrink:0;
  font-weight:500;
}
.chat-list-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chat-list-preview{
  font-size:13px;
  color:var(--ink-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.chat-list-unread{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.chat-list-badge{
  padding:3px 10px;
  border-radius:100px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.badge-revealed{
  background:linear-gradient(135deg, #84CC16, #65A30D);
  color:#fff;
}



/* ============================================================
   WALLET + COIN SYSTEM
   ============================================================ */

/* WALLET HERO */
.wallet-hero{
  position:relative;
  border-radius:28px;
  padding:36px 24px;
  overflow:hidden;
  background:linear-gradient(135deg, #1A0F18, #2D1B3D, #3D1F4A);
  color:#F5F5F2;
  box-shadow:0 24px 60px -20px rgba(167,139,250,.4);
}
.wallet-hero-bg{
  position:absolute;
  inset:-40% -40% auto auto;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,215,0,.2), transparent 65%);
  pointer-events:none;
}
.wallet-hero-content{
  position:relative;
  z-index:1;
  text-align:center;
}
.wallet-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:rgba(255,255,255,.6);
  margin-bottom:12px;
}
.wallet-balance{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin-bottom:14px;
}
.wallet-coin{
  font-size:36px;
  line-height:1;
}
.wallet-num{
  font-family:var(--font-display);
  font-size:56px;
  font-weight:700;
  letter-spacing:-.03em;
  background:linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.wallet-unit{
  font-size:16px;
  color:rgba(255,255,255,.6);
  font-weight:500;
}
.wallet-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.65);
}

/* PACKS GRID */
.packs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.pack-card{
  position:relative;
  padding:20px 16px;
  border-radius:20px;
  background:var(--surface);
  border:1.5px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  transition:transform .15s, border-color .2s;
}
.pack-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
}
.pack-best{
  border-color:var(--accent);
  background:linear-gradient(160deg, rgba(255,77,109,.08), var(--surface));
  box-shadow:0 12px 32px -12px rgba(255,77,109,.3);
}
.pack-badge{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  background:var(--accent);
  color:#fff;
  padding:4px 12px;
  border-radius:100px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.pack-coins{
  display:flex;
  align-items:baseline;
  gap:4px;
}
.pack-num{
  font-family:var(--font-display);
  font-size:34px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--ink);
}
.pack-label{
  font-size:11px;
  color:var(--ink-3);
  font-weight:600;
}
.pack-bonus{
  font-size:11px;
  color:#22C55E;
  font-weight:700;
  background:rgba(34,197,94,.1);
  padding:2px 8px;
  border-radius:100px;
}
.pack-price{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  color:var(--ink);
  margin-top:4px;
}
.pack-save{
  font-size:10px;
  color:var(--accent);
  font-weight:700;
  letter-spacing:.03em;
}
.pack-buy-btn{
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  background:var(--ink);
  color:var(--bg);
  font-size:13px;
  font-weight:700;
  border:none;
  cursor:pointer;
  margin-top:6px;
  transition:transform .15s;
}
.pack-buy-btn:hover{transform:translateY(-1px)}
.pack-best .pack-buy-btn{
  background:var(--accent);
  color:#fff;
}

/* TRANSACTIONS */
.tx-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tx-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 4px;
  border-bottom:1px solid var(--line);
}
.tx-row:last-child{border-bottom:none}
.tx-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--surface-2);
  display:grid;
  place-items:center;
  font-size:16px;
  flex-shrink:0;
}
.tx-body{
  flex:1;
  min-width:0;
}
.tx-desc{
  font-size:14px;
  font-weight:500;
  color:var(--ink-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tx-time{
  font-size:11px;
  color:var(--ink-4);
  margin-top:2px;
}
.tx-amount{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
}
.tx-amount.credit{color:#22C55E}
.tx-amount.debit{color:var(--accent)}

/* PURCHASE MODAL */
.purchase-header{
  text-align:center;
  padding:8px 0 16px;
}
.purchase-icon{
  font-size:56px;
  margin-bottom:12px;
}
.purchase-summary{
  background:var(--surface-2);
  border-radius:18px;
  padding:16px;
  margin-bottom:16px;
}
.purchase-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  padding:8px 0;
  color:var(--ink-2);
}
.purchase-bonus{
  color:#22C55E;
  font-weight:600;
}
.purchase-total{
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:4px;
  font-weight:700;
  color:var(--ink);
}
.purchase-price{
  border-top:2px solid var(--line);
  padding-top:12px;
  margin-top:8px;
  font-weight:800;
  font-size:16px;
  color:var(--ink);
  font-family:var(--font-display);
}
.purchase-trust{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:16px;
  font-size:11px;
  color:var(--ink-3);
  font-weight:500;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:4px;
}

/* NAV COIN BADGE */
.nav-coin-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  border-radius:100px;
  background:linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,165,0,.1));
  border:1px solid rgba(255,215,0,.3);
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  color:#FFA500;
  cursor:pointer;
  transition:transform .15s;
  margin-right:6px;
}
.nav-coin-badge:hover{transform:scale(1.05)}
.nav-coin-badge .coin-em{font-size:14px}

@media (max-width:420px){
  .packs-grid{grid-template-columns:1fr}
  .wallet-num{font-size:44px}
  .wallet-coin{font-size:28px}
}



/* ============================================================
   REFERRAL
   ============================================================ */

.referral-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.rs-item{
  padding:20px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:center;
}
.rs-value{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.02em;
}
.rs-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-top:6px;
}

.referral-code-card{
  padding:28px 24px;
  border-radius:24px;
  background:linear-gradient(135deg, #1A0F18, #2D1B3D, #3D1F4A);
  color:#F5F5F2;
  text-align:center;
  box-shadow:0 20px 50px -15px rgba(167,139,250,.4);
}
.rc-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:rgba(255,255,255,.6);
  margin-bottom:12px;
}
.rc-code{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  word-break:break-all;
  padding:16px;
  background:rgba(255,255,255,.1);
  border:1px dashed rgba(255,255,255,.3);
  border-radius:16px;
}

.referral-share-btns{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hiw-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.hiw-num{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  flex-shrink:0;
}



/* ============================================================
   REFERRAL
   ============================================================ */

.referral-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.rs-item{
  padding:20px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:center;
}
.rs-value{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:700;
  color:var(--ink);
}
.rs-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-top:6px;
}

.referral-code-card{
  padding:28px 24px;
  border-radius:24px;
  background:linear-gradient(135deg, #1A0F18, #2D1B3D, #3D1F4A);
  color:#F5F5F2;
  text-align:center;
}
.rc-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:rgba(255,255,255,.6);
  margin-bottom:12px;
}
.rc-code{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  word-break:break-all;
  padding:16px;
  background:rgba(255,255,255,.1);
  border:1px dashed rgba(255,255,255,.3);
  border-radius:16px;
}

.referral-share-btns{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hiw-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.hiw-num{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  flex-shrink:0;
}



/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-content{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px 28px;
}
.legal-content h2{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  margin-top:28px;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
.legal-content h2:first-child{margin-top:0}
.legal-content p{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  margin-bottom:14px;
}
.legal-content ul{
  margin:8px 0 16px 20px;
  color:var(--ink-2);
}
.legal-content li{
  font-size:15px;
  line-height:1.7;
  margin-bottom:6px;
}
.legal-content a{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}
.legal-content a:hover{text-decoration:underline}

.footer-links{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.footer-link{
  background:none;
  border:none;
  color:var(--ink-3);
  cursor:pointer;
  font-size:13px;
  padding:4px;
  transition:color .15s;
}
.footer-link:hover{color:var(--accent)}
.footer-sep{color:var(--ink-4)}


/* ============================================================
   CHAT — Animated 3D themes
   ============================================================ */

.chat-app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  background:var(--theme-bg, var(--bg));
  background-size:200% 200%;
  animation:bgShift 20s ease infinite;
}

@keyframes bgShift{
  0%, 100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Particles */
.chat-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.particle{
  position:absolute;
  border-radius:50%;
  opacity:.4;
  animation:float 4s ease-in-out infinite;
}

.particle-stars{background:radial-gradient(circle, #fff, transparent);box-shadow:0 0 8px rgba(255,255,255,.8);opacity:.6}
.particle-aurora{background:radial-gradient(circle, #7DD3FC, transparent);box-shadow:0 0 12px rgba(125,211,252,.8);opacity:.5}
.particle-warm{background:radial-gradient(circle, #FFB347, transparent);box-shadow:0 0 12px rgba(255,179,71,.8);opacity:.5}
.particle-leaves{background:radial-gradient(circle, #84CC16, transparent);box-shadow:0 0 10px rgba(132,204,22,.6);opacity:.4}
.particle-bubbles{background:radial-gradient(circle, #fff, transparent);box-shadow:0 0 10px rgba(255,255,255,.6);opacity:.4}
.particle-neon{background:radial-gradient(circle, #C6F35A, transparent);box-shadow:0 0 14px rgba(198,243,90,.9);opacity:.6}
.particle-fire{background:radial-gradient(circle, #F59E0B, transparent);box-shadow:0 0 14px rgba(245,158,11,.8);opacity:.6;animation-name:floatFire}
.particle-snow{background:radial-gradient(circle, #fff, transparent);box-shadow:0 0 8px rgba(255,255,255,.9);opacity:.7;animation-name:floatSlow}
.particle-gold{background:radial-gradient(circle, #FFD700, transparent);box-shadow:0 0 14px rgba(255,215,0,.9);opacity:.5}
.particle-retro{background:radial-gradient(circle, #fff, transparent);box-shadow:0 0 12px rgba(255,255,255,.7);opacity:.4}
.particle-matrix{background:radial-gradient(circle, #00FF41, transparent);box-shadow:0 0 10px rgba(0,255,65,.9);opacity:.5;animation-name:floatMatrix}

@keyframes float{
  0%, 100%{transform:translate(0, 0)}
  50%{transform:translate(20px, -30px)}
}
@keyframes floatFire{
  0%{transform:translate(0, 0) scale(1);opacity:.8}
  50%{transform:translate(10px, -40px) scale(1.2);opacity:.6}
  100%{transform:translate(-10px, -80px) scale(.8);opacity:0}
}
@keyframes floatSlow{
  0%{transform:translate(0, 0);opacity:.8}
  100%{transform:translate(-20px, 100vh);opacity:.2}
}
@keyframes floatMatrix{
  0%{transform:translateY(-10px);opacity:.3}
  50%{opacity:.8}
  100%{transform:translateY(10px);opacity:.3}
}

/* Chat header glass effect */
.chat-theme-midnight .chat-header,
.chat-theme-aurora .chat-header,
.chat-theme-sunset .chat-header,
.chat-theme-forest .chat-header,
.chat-theme-galaxy .chat-header,
.chat-theme-fire .chat-header,
.chat-theme-ice .chat-header,
.chat-theme-royal .chat-header,
.chat-theme-matrix .chat-header,
.chat-theme-neon .chat-header{
  background:rgba(0,0,0,0.3);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.chat-theme-midnight .chat-header-name,
.chat-theme-aurora .chat-header-name,
.chat-theme-sunset .chat-header-name,
.chat-theme-forest .chat-header-name,
.chat-theme-galaxy .chat-header-name,
.chat-theme-fire .chat-header-name,
.chat-theme-ice .chat-header-name,
.chat-theme-royal .chat-header-name,
.chat-theme-matrix .chat-header-name,
.chat-theme-neon .chat-header-name{
  color:#fff;
}
.chat-theme-midnight .chat-header-status,
.chat-theme-aurora .chat-header-status,
.chat-theme-sunset .chat-header-status,
.chat-theme-forest .chat-header-status,
.chat-theme-galaxy .chat-header-status,
.chat-theme-fire .chat-header-status,
.chat-theme-ice .chat-header-status,
.chat-theme-royal .chat-header-status,
.chat-theme-matrix .chat-header-status,
.chat-theme-neon .chat-header-status{
  color:rgba(255,255,255,.7);
}

.chat-theme-candy .chat-header,
.chat-theme-vaporwave .chat-header{
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.08);
}

/* 3D Bubbles */
.chat-bubble-mine{
  background:var(--theme-bubble-mine, linear-gradient(135deg, #FF4D6D, #FF8095));
  color:var(--theme-text-mine, #fff);
  box-shadow:var(--theme-bubble-mine-shadow, 0 4px 12px rgba(255,77,109,.3));
  border:1px solid rgba(255,255,255,.15);
}
.chat-bubble-theirs{
  background:var(--theme-bubble-theirs, rgba(255,255,255,0.1));
  color:var(--theme-text-theirs, #F5F5F2);
  box-shadow:var(--theme-bubble-theirs-shadow, 0 4px 12px rgba(0,0,0,.2));
  border:var(--theme-bubble-theirs-border, 1px solid rgba(255,255,255,0.1));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* Chat input glass */
.chat-theme-midnight .chat-input-wrap,
.chat-theme-aurora .chat-input-wrap,
.chat-theme-sunset .chat-input-wrap,
.chat-theme-forest .chat-input-wrap,
.chat-theme-galaxy .chat-input-wrap,
.chat-theme-fire .chat-input-wrap,
.chat-theme-ice .chat-input-wrap,
.chat-theme-royal .chat-input-wrap,
.chat-theme-matrix .chat-input-wrap,
.chat-theme-neon .chat-input-wrap{
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.1);
}
.chat-theme-midnight .chat-input-inner,
.chat-theme-aurora .chat-input-inner,
.chat-theme-sunset .chat-input-inner,
.chat-theme-forest .chat-input-inner,
.chat-theme-galaxy .chat-input-inner,
.chat-theme-fire .chat-input-inner,
.chat-theme-ice .chat-input-inner,
.chat-theme-royal .chat-input-inner,
.chat-theme-matrix .chat-input-inner,
.chat-theme-neon .chat-input-inner{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
}
.chat-theme-midnight .chat-input,
.chat-theme-aurora .chat-input,
.chat-theme-sunset .chat-input,
.chat-theme-forest .chat-input,
.chat-theme-galaxy .chat-input,
.chat-theme-fire .chat-input,
.chat-theme-ice .chat-input,
.chat-theme-royal .chat-input,
.chat-theme-matrix .chat-input,
.chat-theme-neon .chat-input{
  color:#fff;
}
.chat-theme-midnight .chat-input::placeholder,
.chat-theme-aurora .chat-input::placeholder,
.chat-theme-sunset .chat-input::placeholder,
.chat-theme-forest .chat-input::placeholder,
.chat-theme-galaxy .chat-input::placeholder,
.chat-theme-fire .chat-input::placeholder,
.chat-theme-ice .chat-input::placeholder,
.chat-theme-royal .chat-input::placeholder,
.chat-theme-matrix .chat-input::placeholder,
.chat-theme-neon .chat-input::placeholder{
  color:rgba(255,255,255,.5);
}
.chat-theme-midnight .chat-send-btn,
.chat-theme-aurora .chat-send-btn,
.chat-theme-sunset .chat-send-btn,
.chat-theme-forest .chat-send-btn,
.chat-theme-galaxy .chat-send-btn,
.chat-theme-fire .chat-send-btn,
.chat-theme-ice .chat-send-btn,
.chat-theme-royal .chat-send-btn,
.chat-theme-matrix .chat-send-btn,
.chat-theme-neon .chat-send-btn{
  background:var(--theme-accent, #FF4D6D);
}

/* Chat date */
.chat-theme-midnight .chat-date-sep,
.chat-theme-aurora .chat-date-sep,
.chat-theme-sunset .chat-date-sep,
.chat-theme-forest .chat-date-sep,
.chat-theme-galaxy .chat-date-sep,
.chat-theme-fire .chat-date-sep,
.chat-theme-ice .chat-date-sep,
.chat-theme-royal .chat-date-sep,
.chat-theme-matrix .chat-date-sep,
.chat-theme-neon .chat-date-sep{
  color:rgba(255,255,255,.5);
}

/* Chat back button */
.chat-theme-midnight .chat-back,
.chat-theme-aurora .chat-back,
.chat-theme-sunset .chat-back,
.chat-theme-forest .chat-back,
.chat-theme-galaxy .chat-back,
.chat-theme-fire .chat-back,
.chat-theme-ice .chat-back,
.chat-theme-royal .chat-back,
.chat-theme-matrix .chat-back,
.chat-theme-neon .chat-back{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
}
.chat-theme-midnight .chat-theme-btn,
.chat-theme-aurora .chat-theme-btn,
.chat-theme-sunset .chat-theme-btn,
.chat-theme-forest .chat-theme-btn,
.chat-theme-galaxy .chat-theme-btn,
.chat-theme-fire .chat-theme-btn,
.chat-theme-ice .chat-theme-btn,
.chat-theme-royal .chat-theme-btn,
.chat-theme-matrix .chat-theme-btn,
.chat-theme-neon .chat-theme-btn{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .chat-app{animation:none}
  .particle{animation:none;opacity:.2}
}




/* ============================================================
   NOTIFICATION BADGE
   ============================================================ */
.notif-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-weight:700;
  min-width:16px;
  height:16px;
  border-radius:8px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border:2px solid var(--bg);
  box-shadow:0 2px 6px rgba(255,77,109,.4);
  animation:badgePop .3s cubic-bezier(.2,.8,.2,1);
}

@keyframes badgePop{
  0%{transform:scale(0)}
  70%{transform:scale(1.15)}
  100%{transform:scale(1)}
}



/* ============================================================
   ADMIN ANALYTICS
   ============================================================ */
.an-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.an-stat{
  padding:24px 16px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:center;
  transition:transform .15s;
}
.an-stat:hover{transform:translateY(-2px)}
.an-stat-icon{font-size:24px;margin-bottom:8px}
.an-stat-value{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
.an-stat-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-top:6px;
}

.an-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  margin-top:12px;
}
.an-card-title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  margin-bottom:16px;
  letter-spacing:-.01em;
}
.an-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.an-row:last-child{border-bottom:none}
.an-flag{font-size:20px;flex-shrink:0}
.an-name{flex:1;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-bar{
  flex:1;
  height:6px;
  background:var(--surface-2);
  border-radius:100px;
  overflow:hidden;
  border:1px solid var(--line);
  max-width:120px;
}
.an-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:100px;
  transition:width .6s ease;
}
.an-count{
  font-family:var(--font-display);
  font-weight:700;
  min-width:40px;
  text-align:right;
  color:var(--ink);
}
.an-empty{
  text-align:center;
  padding:20px;
  color:var(--ink-4);
  font-size:13px;
  font-style:italic;
}
.an-visit{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  font-size:13px;
  border-bottom:1px solid var(--line);
}
.an-visit:last-child{border-bottom:none}
.an-visit-flag{font-size:18px}
.an-visit-country{flex:1;color:var(--ink-2);font-weight:500}
.an-visit-path{
  color:var(--ink-3);
  font-family:var(--font-display);
  font-size:12px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.an-visit-time{color:var(--ink-4);font-size:11px;flex-shrink:0}

@media (max-width:820px){
  .an-stats{grid-template-columns:1fr 1fr}
  .an-visit-path{display:none}
}



/* Hourly chart */
.an-hourly{
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  gap:3px;
  height:100px;
  align-items:end;
  padding-top:20px;
}
.an-hour{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
}
.an-hour-bar{
  width:100%;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:4px 4px 0 0;
  min-height:4px;
  position:relative;
  transition:height .3s;
}
.an-hour-count{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:700;
  color:var(--accent);
}
.an-hour-label{
  font-size:8px;
  color:var(--ink-4);
  margin-top:4px;
}

.an-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.an-visit{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.an-visit:last-child{border-bottom:none}
.an-visit-flag{font-size:20px;flex-shrink:0}
.an-visit-info{flex:1;min-width:0}
.an-visit-loc{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}
.an-visit-meta{
  font-size:11px;
  color:var(--ink-3);
}
.an-visit-time{
  font-size:11px;
  color:var(--ink-4);
  flex-shrink:0;
  text-align:right;
}

@media (max-width:820px){
  .an-grid-2{grid-template-columns:1fr}
  .an-hourly{grid-template-columns:repeat(24, 1fr);gap:2px}
  .an-hour-label{font-size:7px}
}



/* ============================================================
   MANUAL UPI PAYMENT
   ============================================================ */

.upi-qr-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px 24px;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.upi-qr-header{margin-bottom:20px}
.upi-qr-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--ink-3);
  margin-bottom:6px;
}
.upi-qr-amount{
  font-family:var(--font-display);
  font-size:42px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--ink);
}
.upi-qr-wrapper{
  display:inline-block;
  padding:16px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.15);
  margin-bottom:16px;
}
.upi-qr-image{
  width:240px;
  height:240px;
  display:block;
}
.upi-qr-apps{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.upi-app{
  padding:6px 12px;
  border-radius:100px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:600;
  color:var(--ink-3);
}
.upi-id-row{
  display:flex;
  gap:8px;
  align-items:center;
  padding:12px 16px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.upi-id-text{
  flex:1;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  word-break:break-all;
}

/* ADMIN PANEL */
.admin-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.as-item{
  padding:20px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line);
  text-align:center;
}
.as-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-bottom:6px;
}
.as-value{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:700;
  color:var(--ink);
}
.admin-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.admin-payment-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
}
.apc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.apc-user{
  display:flex;
  align-items:center;
  gap:12px;
}
.apc-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
}
.apc-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
}
.apc-time{
  font-size:11px;
  color:var(--ink-3);
  margin-top:2px;
}
.apc-status{
  padding:5px 12px;
  border-radius:100px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
}
.apc-pending{background:rgba(255,179,71,.15);color:#F59E0B}
.apc-approved{background:rgba(34,197,94,.15);color:#22C55E}
.apc-rejected{background:rgba(255,77,109,.15);color:var(--accent)}
.apc-body{
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.apc-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--ink-2);
}
.apc-row b{
  color:var(--ink);
  font-weight:700;
  font-family:var(--font-display);
}
.apc-screenshot{
  display:block;
  margin:14px 0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  max-width:200px;
}
.apc-screenshot img{width:100%;display:block}
.apc-no-screenshot{
  padding:14px;
  text-align:center;
  font-size:12px;
  color:var(--ink-4);
  background:var(--surface-2);
  border-radius:12px;
  margin:14px 0;
}
.apc-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.apc-btn{
  padding:12px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:transform .15s;
}
.apc-btn:hover{transform:translateY(-1px)}
.apc-approve{
  background:linear-gradient(135deg, #22C55E, #16A34A);
  color:#fff;
}
.apc-reject{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}
.apc-footer{
  text-align:center;
  padding-top:14px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-3);
}




/* ============================================================
   RESPONSIVE NAV
   ============================================================ */

.nav-desktop{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-mobile{
  display:none;
  align-items:center;
  gap:6px;
}

.coin-icon-btn{
  display:flex;
  align-items:center;
}

.notif-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-weight:700;
  min-width:16px;
  height:16px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border:2px solid var(--bg);
}

/* Small screens */
@media (max-width: 820px){
  .nav-desktop{ display:none; }
  .nav-mobile{ display:flex; }

  .topnav-inner{
    padding:12px 14px;
  }

  .brand-text{
    font-size:16px;
  }

  .icon-btn{
    width:36px;
    height:36px;
    font-size:14px;
  }

  .coin-icon-btn{
    padding:0 8px !important;
  }

  .coin-icon-btn span:last-child{
    font-size:11px !important;
  }
}

/* Very small screens */
@media (max-width: 400px){
  .brand-text{
    display:none;
  }

  .topnav-inner{
    padding:10px 12px;
  }

  .nav-mobile{
    gap:4px;
  }

  .icon-btn{
    width:34px;
    height:34px;
  }
}

/* Mobile: also add bottom nav with all actions */
.bn-item{
  position:relative;
}

.bn-item .notif-badge{
  position:absolute;
  top:0;
  right:0;
  font-size:8px;
  min-width:14px;
  height:14px;
}



/* ============================================================
   SHARE CARD THEME PICKER
   ============================================================ */

.share-modal-card{
  max-width:520px;
}

.card-modal-header{
  text-align:center;
  padding:0 0 16px;
}

.card-theme-picker{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:12px;
  margin-bottom:16px;
  scrollbar-width:none;
}

.card-theme-picker::-webkit-scrollbar{display:none}

.card-theme-opt{
  flex-shrink:0;
  padding:12px 14px;
  border-radius:14px;
  border:2px solid transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:70px;
  transition:all .15s;
  position:relative;
}

.card-theme-opt.active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
}

.card-theme-opt:hover{
  transform:translateY(-2px);
}

.card-theme-name{
  font-size:10px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
  white-space:nowrap;
}

.share-modal-preview{
  border-radius:20px;
  overflow:hidden;
  background:#000;
  margin-bottom:16px;
  min-height:200px;
  max-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.share-modal-preview img{
  width:100%;
  height:auto;
  max-height:60vh;
  object-fit:contain;
  display:block;
}

.loading-preview{
  padding:40px;
  text-align:center;
  font-size:14px;
  color:rgba(255,255,255,.6);
}