/* ============================================================
   KEY App — UI Polish layer
   اضافه‌شونده روی style.css اصلی — هیچ چیزی را override نمی‌کند
   ============================================================ */

/* ---------- 1. Skeleton Loading ---------- */
.skel{
  display:block;
  background:linear-gradient(90deg,
    var(--surface) 0%,
    var(--card-2) 50%,
    var(--surface) 100%);
  background-size:200% 100%;
  animation:skelShimmer 1.4s ease-in-out infinite;
  border-radius:10px;
}
@keyframes skelShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
[data-theme="dark"] .skel{
  background:linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
}
.skel-line{ height:12px; margin:6px 0; }
.skel-line.w-40{ width:40%; }
.skel-line.w-60{ width:60%; }
.skel-line.w-80{ width:80%; }
.skel-card{
  padding:16px; border:1px solid var(--border);
  border-radius:var(--radius-lg); margin:12px 0;
  background:var(--card);
}
.skel-avatar{
  width:44px; height:44px; border-radius:50%;
  display:inline-block;
}
.skel-thumb{ width:80px; height:80px; border-radius:var(--radius-sm); }
.skel-badge{ width:60px; height:20px; border-radius:99px; }

/* اسکلتون مخصوص کارت‌های چت */
.skel-bubble{
  height:38px; border-radius:14px; margin:8px 0;
  max-width:70%;
}
.skel-bubble.mine{ margin-inline-start:auto; border-radius:14px 14px 4px 14px; }
.skel-bubble.theirs{ margin-inline-end:auto; border-radius:14px 14px 14px 4px; }

/* ---------- 2. Number animation ---------- */
.num-animate{
  font-variant-numeric:tabular-nums;
  transition:color .2s;
}

/* ---------- 3. Pull-to-refresh ---------- */
#pullRefreshIndicator{
  position:fixed;
  top:-60px;
  left:50%;
  transform:translateX(-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  z-index:80;
  transition:top .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  color:var(--neon);
  pointer-events:none;
}
#pullRefreshIndicator.show{ top:70px; opacity:1; }
#pullRefreshIndicator.spinning svg{
  animation:ptrSpin .8s linear infinite;
}
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ---------- 4. Empty state ---------- */
.empty-state-pro{
  text-align:center;
  padding:44px 20px 40px;
  animation:fadeInUp .4s ease both;
}
.empty-state-pro .emp-icon{
  width:88px; height:88px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--primary-bg), var(--surface));
  border:1px solid var(--border);
  color:var(--neon);
}
.empty-state-pro .emp-icon svg{ width:42px; height:42px; }
.empty-state-pro h4{
  font-size:16px; font-weight:700; margin:0 0 8px;
  color:var(--text);
}
.empty-state-pro p{
  font-size:13px; color:var(--muted);
  line-height:1.75; margin:0 auto 18px;
  max-width:280px;
}
.empty-state-pro .primary-btn{ max-width:240px; margin:0 auto; }

/* ---------- 5. Success animation ---------- */
#successOverlay{
  position:fixed; inset:0;
  background:rgba(5,40,30,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:998;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
#successOverlay.show{ opacity:1; pointer-events:auto; }

.success-card{
  background:var(--card);
  border-radius:28px;
  padding:32px 36px 26px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  transform:scale(.85);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  max-width:300px;
}
#successOverlay.show .success-card{ transform:scale(1); }

.success-svg{
  width:80px; height:80px;
  display:block; margin:0 auto 14px;
}
.success-svg .circle{
  fill:none;
  stroke:var(--neon);
  stroke-width:3;
  stroke-dasharray:166;
  stroke-dashoffset:166;
  animation:successCircle .55s cubic-bezier(.65,0,.45,1) forwards;
}
.success-svg .check{
  fill:none;
  stroke:var(--neon);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation:successCheck .35s cubic-bezier(.65,0,.45,1) .5s forwards;
}
@keyframes successCircle{ to{ stroke-dashoffset:0; } }
@keyframes successCheck{ to{ stroke-dashoffset:0; } }

.success-card h3{
  font-size:17px; font-weight:800; margin:0 0 6px;
  color:var(--text);
}
.success-card p{
  font-size:13px; color:var(--muted);
  margin:0; line-height:1.7;
}
.success-card .primary-btn{
  margin-top:18px; max-width:200px;
}

/* ---------- 6. Toast upgrade ---------- */
.toast{
  /* جایگزین استایل قدیمی با نسخه‌ی جدید */
  position:fixed;
  left:50%;
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 12px);
  z-index:1000;
  max-width:calc(100vw - 32px);
  min-width:220px;
  padding:12px 16px 12px 44px;
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  font-size:13.5px;
  font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.18), 0 0 0 1px var(--border);
  text-align:right;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
  border-inline-start:3px solid var(--muted);
  pointer-events:none;
  animation:none; /* استایل قدیمی keyToastIn را غیرفعال می‌کنیم */
}
.toast.toast-show{
  opacity:1;
  transform:translate(-50%, 0);
}
.toast .toast-icon{
  flex:0 0 22px;
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
}
.toast .toast-icon svg{ width:18px; height:18px; }
.toast.success{ border-inline-start-color:var(--success); }
.toast.success .toast-icon{ color:var(--success); }
.toast.error  { border-inline-start-color:var(--danger); }
.toast.error   .toast-icon{ color:var(--danger); }
.toast.warning{ border-inline-start-color:var(--warning); }
.toast.warning .toast-icon{ color:var(--warning); }
.toast.info   { border-inline-start-color:var(--secondary); }
.toast.info    .toast-icon{ color:var(--secondary); }

/* در RTL جهات padding و ترتیب اصلاح می‌شود */
html[dir="rtl"] .toast{ padding:12px 44px 12px 16px; }

/* ---------- 7. Micro-typography ---------- */
.wallet-balance,
.mag-wallet-num,
.mag-pw-bal,
.coin-badge,
.tx-item span:last-child,
.stars-total,
.num-animate{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;
}
.mag-hero-name,
.result-area h3,
.auth-form h3,
.empty-state-pro h4,
.success-card h3{
  text-wrap:balance;
}
/* ============================================================
   KEY App — UI Polish v2
   Chat pro · Transaction cards · Expert profile · Achievements · Level
   ============================================================ */

/* ============================================================
   1) CHAT PRO — grouping + tail + timestamp + typing
   ============================================================ */

.chat-msgs-pro{
  height:min(55vh,440px);
  overflow-y:auto;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--surface);
  scroll-behavior:smooth;
}

/* جداکنندهٔ روز */
.chat-day{
  text-align:center;
  margin:14px 0 10px;
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}
.chat-day span{
  background:var(--card-2);
  padding:3px 12px;
  border-radius:99px;
  border:1px solid var(--border);
}

/* timestamp بین پیام‌ها */
.chat-ts{
  text-align:center;
  margin:10px 0 4px;
  font-size:10.5px;
  color:var(--muted);
  opacity:.85;
}

/* Bubble pro با tail */
.bubble-pro{
  max-width:78%;
  padding:8px 12px;
  font-size:14px;
  line-height:1.75;
  word-break:break-word;
  white-space:pre-wrap;
  position:relative;
  box-shadow:0 1px 2px rgba(5,40,30,.06);
}
.bubble-pro small{
  display:block;
  margin-top:3px;
  font-size:10px;
  opacity:.72;
  font-variant-numeric:tabular-nums;
}

/* مین (sender) — سمت راست در RTL */
.bubble-pro.mine{
  align-self:flex-start;
  background:var(--neon);
  color:#fff;
  border-radius:16px 16px 16px 4px;
}
/* theirs — سمت چپ */
.bubble-pro.theirs{
  align-self:flex-end;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px 16px 4px 16px;
}

/* Grouping — پیام‌های متوالی هم‌فرستنده */
.bubble-pro.group-mid{ margin-top:1px; }
.bubble-pro.group-first{ margin-top:8px; }
.bubble-pro.group-last{ margin-bottom:6px; }

/* Tail فقط روی آخرین پیام هر گروه */
.bubble-pro.mine.has-tail::after{
  content:"";
  position:absolute;
  bottom:0;
  right:-6px;
  width:12px;
  height:14px;
  background:var(--neon);
  border-bottom-left-radius:14px;
  mask:radial-gradient(circle at 0 0, transparent 10px, black 11px);
  -webkit-mask:radial-gradient(circle at 0 0, transparent 10px, black 11px);
}
.bubble-pro.theirs.has-tail::after{
  content:"";
  position:absolute;
  bottom:0;
  left:-6px;
  width:12px;
  height:14px;
  background:var(--card);
  border-bottom-right-radius:14px;
  mask:radial-gradient(circle at 100% 0, transparent 10px, black 11px);
  -webkit-mask:radial-gradient(circle at 100% 0, transparent 10px, black 11px);
}

/* dark mode tail */
[data-theme="dark"] .bubble-pro.mine.has-tail::after{ background:var(--neon); }
[data-theme="dark"] .bubble-pro.theirs.has-tail::after{ background:var(--card); }

/* Typing indicator — سه نقطه */
.typing-indicator{
  display:flex;
  align-items:center;
  gap:4px;
  padding:10px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px 16px 4px 16px;
  align-self:flex-end;
  max-width:60px;
  box-shadow:0 1px 2px rgba(5,40,30,.06);
  margin-top:6px;
}
.typing-indicator .tdot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--muted);
  animation:typingBounce 1.3s infinite ease-in-out;
}
.typing-indicator .tdot:nth-child(2){ animation-delay:.15s; }
.typing-indicator .tdot:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{
  0%,60%,100%{ transform:translateY(0); opacity:.45; }
  30%{ transform:translateY(-5px); opacity:1; }
}

/* Scrollbar نازک‌تر */
.chat-msgs-pro::-webkit-scrollbar{ width:4px; }
.chat-msgs-pro::-webkit-scrollbar-thumb{
  background:var(--border-bright);
  border-radius:2px;
}


/* ============================================================
   2) TRANSACTION CARDS
   ============================================================ */

.tx-list{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }

.tx-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  transition:border-color .18s, transform .18s;
}
.tx-card:hover{ border-color:var(--border-bright); transform:translateY(-1px); }

.tx-icon{
  flex:0 0 38px;
  width:38px; height:38px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  background:var(--surface);
  color:var(--text);
  position:relative;
}
.tx-card.tx-in .tx-icon{ background:var(--success-bg); }
.tx-card.tx-out .tx-icon{ background:var(--danger-bg); }
.tx-card.tx-fee .tx-icon{ background:var(--gold-bg); }
.tx-card.tx-ref .tx-icon{ background:rgba(124,58,237,.14); }
.tx-card.tx-neutral .tx-icon{ background:var(--secondary-bg); }

.tx-body{ flex:1; min-width:0; }
.tx-title{
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  margin:0 0 2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tx-sub{
  font-size:11.5px;
  color:var(--muted);
  display:flex;
  gap:6px;
  align-items:center;
}
.tx-sub .tx-time{ font-variant-numeric:tabular-nums; }

.tx-amount{
  flex:0 0 auto;
  font-size:14px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.tx-amount.in{ color:var(--success); }
.tx-amount.out{ color:var(--danger); }
.tx-amount.fee{ color:var(--gold); }
.tx-amount.ref{ color:var(--accent); }
.tx-amount.neutral{ color:var(--text-secondary); }

.tx-amount small{
  display:block;
  font-size:10px;
  font-weight:600;
  opacity:.75;
  margin-top:1px;
}

[data-theme="dark"] .tx-amount.in{ color:var(--neon-bright); }
[data-theme="dark"] .tx-amount.out{ color:#fca5a5; }
[data-theme="dark"] .tx-amount.fee{ color:#fde68a; }
[data-theme="dark"] .tx-amount.ref{ color:#c4b5fd; }

/* حالت فشرده برای نوار ادمین */
.tx-card.compact{ padding:9px 11px; }
.tx-card.compact .tx-icon{ width:32px; height:32px; flex-basis:32px; font-size:15px; }
.tx-card.compact .tx-title{ font-size:13px; }


/* ============================================================
   3) EXPERT PROFILE — Hero + Tabs
   ============================================================ */

.expert-hero-pro{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  margin:0 0 18px;
  background:linear-gradient(160deg, #0a2e24 0%, #041a14 100%);
  color:#fff;
  box-shadow:0 12px 34px rgba(5,40,30,.18);
  isolation:isolate;
}
.expert-hero-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 15%, rgba(16,185,129,.22), transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(8,145,178,.16), transparent 50%);
  z-index:0;
}
.expert-hero-inner{
  position:relative;
  z-index:1;
  padding:22px 20px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.expert-hero-avatar{
  width:84px; height:84px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--neon), var(--cyan));
  color:#fff;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:0 0 0 4px rgba(255,255,255,.1), 0 8px 24px rgba(16,185,129,.3);
  margin-bottom:12px;
  position:relative;
}
.expert-hero-avatar .online-dot{
  position:absolute;
  bottom:4px; left:4px;
  width:16px; height:16px;
  border-radius:50%;
  border:3px solid #041a14;
  background:var(--neon-bright);
  box-shadow:0 0 10px var(--neon-glow);
}
.expert-hero-avatar .online-dot.off{ background:#6b7280; box-shadow:none; }

.expert-hero-name{
  font-size:20px;
  font-weight:800;
  margin:0 0 4px;
  color:#fff;
  letter-spacing:-.01em;
  display:flex; align-items:center; gap:6px;
  justify-content:center;
  flex-wrap:wrap;
}
.expert-hero-name .verified-check{
  display:inline-flex;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--neon-bright);
  color:#041a14;
  align-items:center; justify-content:center;
  font-size:11px;
  font-weight:900;
}

.expert-hero-spec{
  font-size:13px;
  color:rgba(230,255,244,.85);
  margin:0 0 6px;
}

.expert-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-bottom:14px;
}
.expert-hero-pill{
  font-size:11px;
  padding:3px 10px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(230,255,244,.9);
  backdrop-filter:blur(6px);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.expert-hero-pill.gold{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.4);
  color:#fde68a;
}

.expert-hero-actions{
  display:flex;
  gap:8px;
  width:100%;
  max-width:340px;
}
.expert-hero-actions .primary-btn,
.expert-hero-actions .secondary-btn{
  flex:1;
  margin:0;
  padding:11px 12px;
  font-size:13.5px;
  border-radius:14px;
}
.expert-hero-actions .secondary-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:#e6fff4;
}
.expert-hero-actions .secondary-btn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  color:#fff;
}

/* Tabs */
.expert-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  margin:0 0 14px;
  overflow-x:auto;
  scrollbar-width:none;
}
.expert-tabs::-webkit-scrollbar{ display:none; }
.expert-tab{
  flex:1 0 auto;
  min-width:80px;
  padding:9px 14px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  border-radius:11px;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.expert-tab .count{
  font-size:10.5px;
  padding:1px 7px;
  border-radius:99px;
  background:var(--card);
  color:var(--muted);
  font-weight:800;
}
.expert-tab:hover{ color:var(--text); }
.expert-tab.active{
  background:var(--card);
  color:var(--neon);
  box-shadow:0 1px 2px rgba(5,40,30,.08);
}
.expert-tab.active .count{
  background:var(--primary-bg);
  color:var(--neon);
}
[data-theme="dark"] .expert-tab.active{
  background:var(--card-2);
  color:var(--neon-bright);
}

.expert-tab-panel{ animation:fadeInUp .3s ease both; }

/* کارت نظر */
.review-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:8px;
}
.review-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.review-head strong{ font-size:13.5px; color:var(--text); }
.review-stars{ color:#f59e0b; font-size:13px; letter-spacing:1px; }
.review-text{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.85;
  margin:0;
}


/* ============================================================
   4) ACHIEVEMENTS
   ============================================================ */

.achievements-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:10px;
  margin:12px 0;
}

.achievement-card{
  position:relative;
  padding:14px 12px 12px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--border);
  text-align:center;
  transition:all .25s;
  overflow:hidden;
}
.achievement-card.unlocked{
  background:linear-gradient(160deg, rgba(16,185,129,.08), var(--card));
  border-color:var(--border-bright);
}
.achievement-card.locked{
  opacity:.62;
  filter:saturate(.4);
}
.achievement-card.special.unlocked{
  background:linear-gradient(160deg, rgba(245,158,11,.14), var(--card));
  border-color:rgba(245,158,11,.4);
  box-shadow:0 8px 22px rgba(245,158,11,.14);
}

.achievement-icon{
  width:52px; height:52px;
  border-radius:50%;
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  background:var(--surface);
  border:2px solid var(--border);
  position:relative;
}
.achievement-card.unlocked .achievement-icon{
  background:linear-gradient(135deg, var(--neon-soft), rgba(8,145,178,.14));
  border-color:var(--border-bright);
  box-shadow:0 0 0 3px rgba(16,185,129,.08), 0 0 18px rgba(16,185,129,.18);
}
.achievement-card.special.unlocked .achievement-icon{
  background:linear-gradient(135deg, #fef3c7, #fcd34d);
  border-color:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.14), 0 0 22px rgba(245,158,11,.35);
}
.achievement-icon .lock-badge{
  position:absolute;
  bottom:-2px; left:-2px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--muted);
  color:var(--card);
  font-size:9px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card);
}
.achievement-card.unlocked .achievement-icon .lock-badge{
  background:var(--neon);
  color:#fff;
}

.achievement-title{
  font-size:12.5px;
  font-weight:800;
  color:var(--text);
  margin:0 0 4px;
  line-height:1.4;
}
.achievement-desc{
  font-size:10.5px;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}


/* ============================================================
   5) LEVEL PROGRESS
   ============================================================ */

.level-progress{
  background:linear-gradient(160deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin:12px 0;
}
.level-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:10px;
}
.level-progress-title{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
}
.level-progress-current{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  background:var(--surface);
  padding:3px 10px;
  border-radius:99px;
  border:1px solid var(--border);
}

.level-track{
  position:relative;
  height:10px;
  border-radius:99px;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
}
.level-fill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg, var(--neon), var(--neon-bright));
  width:0;
  transition:width .9s cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 12px var(--neon-glow);
}
.level-fill.gold{
  background:linear-gradient(90deg, #d97706, #f59e0b, #fcd34d);
  box-shadow:0 0 14px rgba(245,158,11,.5);
}
.level-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation:levelShine 2.2s linear infinite;
}
@keyframes levelShine{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

.level-milestones{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:10.5px;
  color:var(--muted);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.level-milestones .ms.active{ color:var(--neon); font-weight:800; }
.level-milestones .ms.passed{ color:var(--text-secondary); }

.level-hint{
  margin-top:10px;
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.7;
  text-align:center;
  padding:8px 10px;
  background:var(--surface);
  border-radius:10px;
  border:1px dashed var(--border);
}
.level-hint strong{ color:var(--neon); }

/* ============================================================
   Reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .typing-indicator .tdot{ animation:none; opacity:.7; }
  .level-fill::after{ display:none; }
  .expert-tab-panel{ animation:none; }
}

/* ============================================================
   SUPPORT: AI and System bubbles
   ============================================================ */
.bubble-pro.ai{
  align-self:flex-end;
  background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(99,102,241,.06));
  border:1px solid rgba(99,102,241,.35);
  color:var(--text);
  border-radius:16px 16px 4px 16px;
  max-width:82%;
  padding:8px 12px;
  font-size:14px;
  line-height:1.75;
  word-break:break-word;
  white-space:pre-wrap;
  box-shadow:0 1px 2px rgba(5,40,30,.06);
}
.bubble-pro.ai small{
  display:block;
  margin-top:3px;
  font-size:10px;
  opacity:.75;
  color:var(--accent);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .bubble-pro.ai{
  background:linear-gradient(135deg, rgba(139,92,246,.2), rgba(139,92,246,.08));
  border-color:rgba(139,92,246,.45);
}

.bubble-pro.system{
  align-self:center;
  max-width:90%;
  background:var(--surface);
  border:1px dashed var(--border);
  color:var(--muted);
  font-size:12px;
  padding:8px 14px;
  border-radius:12px;
  text-align:center;
  margin:10px auto;
}
.bubble-pro.system small{ display:none; }


/* ============================================================
   Academic Subject Badges (فاز ۱)
   ============================================================ */
.field .role-select {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.field .role-select::-webkit-scrollbar { width: 4px; }
.field .role-select::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 2px;
}
.field .role-select .checkbox-label {
  min-width: auto;
  flex: none;
  margin: 2px 0;
  font-size: 13px;
}


/* ============================================================
   ARTICLES: Hub + Card + Reader
   ============================================================ */

.articles-hub-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:20px 16px 14px;
  background:linear-gradient(160deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:20px;
  margin:0 0 16px;
}
.articles-hub-icon{
  font-size:44px;
  line-height:1;
  margin-bottom:8px;
}
.articles-hub-title{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  margin-bottom:4px;
}
.articles-hub-sub{
  font-size:13px;
  color:var(--muted);
}

.articles-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  margin:0 0 16px;
}
.articles-tab{
  flex:1;
  padding:10px 8px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  border-radius:11px;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.articles-tab.active{
  background:var(--card);
  color:var(--neon);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .articles-tab.active{
  background:var(--card-2);
  color:var(--neon-bright);
}

.article-card{
  display:flex;
  gap:12px;
  padding:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  margin-bottom:10px;
  cursor:pointer;
  transition:all .2s;
}
.article-card:hover{
  border-color:var(--border-bright);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(5,40,30,.08);
}
.article-thumb{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  background-color:var(--surface);
}
.article-thumb-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:var(--muted);
  background:linear-gradient(135deg, var(--surface), var(--card-2));
}
.article-card-body{
  flex:1;
  min-width:0;
}
.article-author{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}
.article-author strong{
  color:var(--neon);
  font-weight:700;
}
.article-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--text);
  margin:0 0 4px;
  line-height:1.5;
  word-break:break-word;
}
.article-tag{
  font-size:10px;
  padding:1px 7px;
  border-radius:99px;
  background:var(--surface);
  color:var(--muted);
  vertical-align:middle;
  font-weight:600;
}
.article-summary{
  font-size:12.5px;
  color:var(--text-secondary);
  margin:0 0 8px;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
}
.article-lock-badge{
  background:var(--gold-bg);
  color:#92400e;
  padding:2px 8px;
  border-radius:99px;
  font-weight:700;
  border:1px solid rgba(217,119,6,.4);
}
[data-theme="dark"] .article-lock-badge{ color:#fcd34d; }
.article-unlocked-badge{
  background:var(--success-bg);
  color:var(--neon);
  padding:2px 8px;
  border-radius:99px;
  font-weight:700;
}
.article-free-badge{
  background:var(--primary-bg);
  color:var(--neon);
  padding:2px 8px;
  border-radius:99px;
  font-weight:700;
}
.article-meta-stat{
  font-variant-numeric:tabular-nums;
}

.article-header-pro{
  padding:20px 16px;
  background:linear-gradient(160deg, #0a2e24, #041a14);
  border-radius:20px;
  color:#fff;
  margin-bottom:14px;
}
.article-header-author{
  font-size:12px;
  color:rgba(230,255,244,.75);
  margin-bottom:8px;
}
.article-header-author strong{
  color:var(--neon-bright);
}
.article-header-title{
  font-size:20px;
  font-weight:800;
  color:#fff;
  margin:0 0 10px;
  line-height:1.5;
}
.article-header-meta{
  font-size:11.5px;
  color:rgba(230,255,244,.7);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.article-hero-image{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  background-size:cover;
  background-position:center;
  margin-bottom:14px;
}
.article-video-wrap{
  margin-bottom:14px;
}
.article-content{
  font-size:14px;
  line-height:1.9;
  color:var(--text);
  padding:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:14px;
  word-break:break-word;
}
.article-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.article-actions .secondary-btn{
  flex:1;
  min-width:120px;
  margin:0;
}

.article-locked-view{
  text-align:center;
  padding:34px 20px;
  background:linear-gradient(160deg, var(--gold-bg), var(--card));
  border:2px dashed var(--gold);
  border-radius:20px;
  margin-bottom:14px;
}
.article-locked-icon{
  font-size:56px;
  line-height:1;
  margin-bottom:10px;
}
.article-locked-title{
  font-size:17px;
  font-weight:800;
  color:#92400e;
  margin:0 0 8px;
}
[data-theme="dark"] .article-locked-title{ color:#fcd34d; }
.article-locked-price{
  font-size:26px;
  font-weight:900;
  color:var(--gold);
  margin:6px 0 14px;
  font-variant-numeric:tabular-nums;
}
.article-locked-summary{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.7;
  margin:0 auto 16px;
  max-width:320px;
}
.article-locked-view .primary-btn,
.article-locked-view .secondary-btn{
  max-width:320px;
  margin:8px auto 0;
}

/* ============================================================
   Multi-row article builder
   ============================================================ */

.article-row-builder{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:18px;
  padding:14px 14px 16px;
  margin-bottom:14px;
  position:relative;
  animation:fadeInUp .3s ease both;
}

.article-row-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px dashed var(--border);
}

.article-row-num{
  font-size:12px;
  font-weight:800;
  color:var(--neon);
  background:var(--primary-bg);
  padding:3px 12px;
  border-radius:99px;
  letter-spacing:.3px;
}

.article-row-remove{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--danger);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
}
.article-row-remove:hover{
  background:var(--danger-bg);
  border-color:var(--danger);
  transform:scale(1.05);
}
.article-row-remove:active{ transform:scale(.95); }

.article-compress-hint{
  margin:6px 0 0;
  padding:8px 10px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--warning);
  background:var(--warning-bg);
  border:1px dashed var(--warning);
  border-radius:10px;
  font-weight:600;
}
.article-compress-hint strong{
  color:var(--text);
  font-weight:800;
}

.article-row-lock-wrap{
  margin-top:10px;
  padding:12px;
  background:var(--surface);
  border-radius:14px;
  border:1px solid var(--border);
}
.article-row-price-wrap{
  margin-top:10px;
}

#articleRowsContainer .field{
  margin-bottom:12px;
}

#articleRowsContainer input[type="file"]{
  padding:10px 12px;
  min-height:auto;
  font-size:13px;
  background:var(--surface);
}

#articleRowsContainer textarea{
  min-height:70px;
}

#articleRowsContainer + .secondary-btn{
  background:var(--surface);
  border:2px dashed var(--border-bright);
  color:var(--neon);
  font-weight:800;
  font-size:14px;
  padding:14px;
}
#articleRowsContainer + .secondary-btn:hover{
  background:var(--primary-bg);
  border-color:var(--neon);
}

.articles-hub-badge{
  margin-top:8px;
  font-size:11px;
  font-weight:700;
  color:var(--neon);
  background:var(--primary-bg);
  border:1px solid var(--border-bright);
  padding:4px 12px;
  border-radius:99px;
}
/* ============================================================
   KEY App — UI v3
   Floating Labels + Bottom Sheet + Empty State Pro + Skeleton tweaks
   ============================================================ */

/* ---------- آیکون داخل متن ---------- */
.k-icon-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:-2px;
  margin:0 2px;
  color:inherit;
}

/* ============================================================
   1) FLOATING LABEL
   ============================================================ */
.k-field{
  position:relative;
  margin:0 0 18px;
}
/* descendant (نه direct child) تا با .password-row هم کار کند */
.k-field input,
.k-field textarea,
.k-field select{
  width:100%;
  min-height:52px;
  padding:20px 14px 8px;
  margin:0;
  border:1.5px solid var(--border);
  border-radius:14px;
  background:var(--input-bg);
  color:var(--text);
  font-family:inherit;
  font-size:14.5px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.k-field textarea{ min-height:96px; padding-top:22px; }
.k-field select{ padding-top:20px; appearance:none; padding-inline-end:34px; }

.k-field input:focus,
.k-field textarea:focus,
.k-field select:focus{
  outline:none;
  border-color:var(--neon);
  box-shadow:0 0 0 3px rgba(5,150,105,.12);
}

.k-field > label,
.k-field > .field-label,
.k-field > .password-row > label{
  position:absolute;
  top:16px;
  inset-inline-start:16px;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  pointer-events:none;
  background:var(--input-bg);
  padding:0 6px;
  border-radius:6px;
  transition:all .18s cubic-bezier(.22,1,.36,1);
  line-height:1;
  max-width:calc(100% - 32px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.k-field > label .req,
.k-field > .field-label .req,
.k-field > .password-row > label .req{ color:var(--danger); font-weight:800; }

/* حالت بالا (floating) — k-active > label نگه داشته شد */
.k-field.k-active > label,
.k-field.k-active > .field-label,
.k-field.k-active > .password-row > label,
.k-field input:focus + label,
.k-field textarea:focus + label,
.k-field select:focus + label,
.k-field select + label{
  top:-9px;
  inset-inline-start:12px;
  font-size:11.5px;
  font-weight:700;
  color:var(--neon);
  letter-spacing:.2px;
}
.k-field input:not(:placeholder-shown) + label,
.k-field textarea:not(:placeholder-shown) + label{
  top:-9px;
  inset-inline-start:12px;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-secondary);
}

/* حالت دیسِیبل */
.k-field input:disabled,
.k-field textarea:disabled,
.k-field select:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* فیلدهای داخل password-row (دکمه‌ی چشم) */
.k-field.k-has-toggle{ padding-inline-end:56px; }
.k-field.k-has-toggle .pw-toggle{
  position:absolute;
  top:50%;
  inset-inline-end:8px;
  transform:translateY(-50%);
  width:40px; height:40px; min-width:40px;
  border-radius:10px;
}

/* ============================================================
   2) BOTTOM SHEET
   ============================================================ */
.k-sheet-backdrop{
  position:fixed;
  inset:0;
  background:rgba(5,20,15,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .22s ease;
  z-index:1200;
  pointer-events:none;
}
.k-sheet-backdrop.k-open{ opacity:1; pointer-events:auto; }

.k-sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  max-width:520px;
  margin:0 auto;
  background:var(--card);
  border-top-left-radius:26px;
  border-top-right-radius:26px;
  box-shadow:0 -20px 60px rgba(0,0,0,.25);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  z-index:1201;
  display:flex;
  flex-direction:column;
  max-height:88vh;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  will-change:transform;
}
.k-sheet.k-open{ transform:translateY(0); }

.k-sheet-grip{
  width:44px; height:5px;
  border-radius:99px;
  background:var(--border);
  margin:10px auto 4px;
  flex-shrink:0;
}

.k-sheet-header{
  padding:12px 20px 8px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
}
.k-sheet-header h3{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:var(--text);
  line-height:1.4;
  flex:1;
  min-width:0;
}
.k-sheet-close{
  flex-shrink:0;
  width:36px; height:36px;
  border:none;
  background:var(--surface);
  color:var(--muted);
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s, color .18s;
}
.k-sheet-close:hover{ background:var(--surface); color:var(--text); }

.k-sheet-body{
  padding:4px 20px 16px;
  overflow-y:auto;
  flex:1;
  min-height:0;
  -webkit-overflow-scrolling:touch;
  color:var(--text);
  font-size:14px;
  line-height:1.8;
}
.k-sheet-body p{ margin:0 0 12px; }
.k-sheet-body p:last-child{ margin-bottom:0; }

.k-sheet-actions{
  padding:12px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
  border-top:1px solid var(--border);
}
.k-sheet-actions .primary-btn,
.k-sheet-actions .secondary-btn,
.k-sheet-actions .action-btn{
  margin:0;
  width:100%;
}
.k-sheet-actions.k-row{
  flex-direction:row;
}
.k-sheet-actions.k-row > *{ flex:1; }

/* نوع دکمه‌های رنگی داخل sheet */
.k-sheet-actions .btn-danger{
  background:var(--danger-bg) !important;
  color:var(--danger) !important;
  border:1.5px solid rgba(220,38,38,.4) !important;
}
.k-sheet-actions .btn-success{
  background:linear-gradient(135deg,#047857,#059669) !important;
  color:#fff !important;
}

/* ============================================================
   3) EMPTY STATE PRO
   ============================================================ */
.k-empty{
  text-align:center;
  padding:44px 20px 40px;
  animation:kEmptyFade .35s ease both;
}
@keyframes kEmptyFade{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.k-empty-icon{
  width:96px; height:96px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(135deg, var(--primary-bg), var(--surface));
  border:1px solid var(--border);
  color:var(--neon);
  position:relative;
}
.k-empty-icon::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1.5px dashed var(--border);
  opacity:.6;
  animation:kEmptySpin 20s linear infinite;
}
@keyframes kEmptySpin{ to{ transform:rotate(360deg); } }
.k-empty-icon svg{
  width:40px; height:40px;
  position:relative;
  z-index:1;
}
.k-empty h4{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0 0 8px;
  text-wrap:balance;
}
.k-empty p{
  font-size:13px;
  color:var(--muted);
  line-height:1.75;
  margin:0 auto 20px;
  max-width:300px;
}
.k-empty .primary-btn,
.k-empty .secondary-btn{
  max-width:240px;
  margin:0 auto 8px;
}

/* variant ها */
.k-empty.warn .k-empty-icon{
  background:linear-gradient(135deg, var(--warning-bg), var(--surface));
  color:var(--warning);
}
.k-empty.danger .k-empty-icon{
  background:linear-gradient(135deg, var(--danger-bg), var(--surface));
  color:var(--danger);
}
.k-empty.gold .k-empty-icon{
  background:linear-gradient(135deg, var(--gold-bg), var(--surface));
  color:var(--gold);
}

/* ============================================================
   4) SKELETON helpers (در ادامه ui-polish.css)
   ============================================================ */
.k-skel-page{
  padding:8px 0;
}
.k-skel-header{
  height:22px;
  width:45%;
  border-radius:8px;
  margin:0 0 14px;
}
.k-skel-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:0 0 8px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}
.k-skel-row .skel-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
}
.k-skel-row .k-skel-lines{ flex:1; min-width:0; }
.k-skel-row .skel-line{ display:block; }
.k-skel-row .skel-badge{ flex-shrink:0; }
.app.public-mode{max-width:1120px;padding-bottom:0}
.auth-screen:has(#publicLanding){padding:0}
/* KEY 2.0 — Public Landing visual system */
.public-landing{max-width:1120px;margin:0 auto;padding:18px 28px 30px;color:var(--text);animation:fadeInUp .45s ease both}
.landing-nav{height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.landing-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:21px;font-weight:900;letter-spacing:2px}
.landing-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#0b8f6b,#06b6d4);box-shadow:0 10px 24px rgba(14,166,125,.22);letter-spacing:0}
.landing-nav-actions{display:flex;align-items:center;gap:8px}
.landing-icon-btn,.landing-login-btn,.landing-signup-btn{font-family:inherit;border:0;cursor:pointer;min-height:40px;border-radius:12px;font-weight:700;transition:.2s ease}
.landing-icon-btn{width:40px;background:var(--card);border:1px solid var(--border);color:var(--muted)}
.landing-login-btn{padding:0 16px;background:transparent;color:var(--text)}
.landing-signup-btn{padding:0 17px;color:#fff;background:linear-gradient(135deg,var(--primary),#06a89a);box-shadow:0 8px 20px rgba(14,166,125,.2)}
.landing-icon-btn:hover,.landing-login-btn:hover{border-color:var(--border-bright);color:var(--primary)}
.landing-signup-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(14,166,125,.26)}
.landing-hero{min-height:560px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:60px;padding:62px 18px 54px;position:relative}
.landing-hero-copy{max-width:620px;position:relative;z-index:2}
.landing-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:12px;font-weight:800;padding:7px 11px;border-radius:999px;background:var(--primary-soft);border:1px solid rgba(14,166,125,.14)}
.landing-live-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px rgba(14,166,125,.10)}
.landing-hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.22;letter-spacing:-2.5px;margin:20px 0 18px;font-weight:900}
.landing-hero h1 span{background:linear-gradient(100deg,var(--primary),#0891b2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.landing-hero-copy>p{font-size:17px;line-height:2;color:var(--text-secondary);max-width:570px;margin-bottom:28px}
.landing-search{height:66px;max-width:610px;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 18px;border-radius:19px;background:var(--card);border:1px solid var(--border);box-shadow:0 16px 45px rgba(5,40,30,.10)}
.landing-search-icon{font-size:29px;line-height:1;color:var(--muted);transform:rotate(-20deg)}
.landing-search input{border:0!important;box-shadow:none!important;background:transparent!important;margin:0!important;min-height:50px;padding:10px 2px!important;font-size:14px;flex:1;min-width:0}
.landing-search button{height:50px;padding:0 21px;border:0;border-radius:14px;background:var(--primary);color:#fff;font:700 14px inherit;cursor:pointer;white-space:nowrap}
.landing-quick-links{display:flex;gap:20px;margin-top:16px}
.landing-quick-links button{border:0;background:transparent;color:var(--muted);font:600 13px inherit;cursor:pointer;padding:4px}
.landing-quick-links button:hover{color:var(--primary)}
.landing-quick-links span{margin-inline-start:5px}
.landing-hero-visual{min-height:440px;position:relative;display:grid;place-items:center}
.landing-hero-visual:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(14,166,125,.18),rgba(14,166,125,0) 68%);filter:blur(3px)}
.landing-orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.75}.landing-orb-a{width:22px;height:22px;background:#34d399;top:16%;right:12%;box-shadow:0 0 25px #34d399}.landing-orb-b{width:12px;height:12px;background:#22d3ee;bottom:18%;left:12%;box-shadow:0 0 20px #22d3ee}
.landing-glass-card{background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid rgba(255,255,255,.45);box-shadow:0 24px 70px rgba(5,40,30,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.landing-card-main{width:min(350px,90%);padding:25px;border-radius:28px;position:relative;z-index:2;transform:rotate(-3deg);display:flex;flex-direction:column;gap:8px}
.landing-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.landing-avatar{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px;background:linear-gradient(135deg,#6366f1,#06b6d4)}.landing-verified{font-size:11px;color:var(--primary);font-weight:800;background:var(--primary-soft);padding:6px 9px;border-radius:999px}.landing-card-main strong{font-size:21px}.landing-card-muted{font-size:12px;color:var(--muted)}.landing-card-rating{display:flex;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}.landing-card-rating b{color:#d97706}
.landing-card-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:17px;font-size:12px}.landing-card-float b{display:block;font-size:12px}.landing-card-float small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.landing-card-float-a{top:17%;right:0}.landing-card-float-b{bottom:17%;left:0}.landing-mini-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:900}
.landing-trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--border);border-radius:22px;background:var(--border);overflow:hidden;box-shadow:var(--shadow-sm)}
.landing-trust-row>div{display:flex;align-items:center;gap:12px;padding:20px 22px;background:var(--card)}.landing-trust-row>div>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-weight:900}.landing-trust-row b{display:block;font-size:13px}.landing-trust-row small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.landing-section{padding:92px 8px 30px}.landing-section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}.landing-section-heading>div>span{color:var(--primary);font-size:12px;font-weight:800}.landing-section-heading h2{font-size:28px;margin-top:5px}.landing-section-heading>button{border:0;background:transparent;color:var(--primary);font:700 12px inherit;cursor:pointer;padding:7px}.landing-section-heading.centered{justify-content:center;text-align:center}.landing-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.landing-category-grid button{min-height:150px;text-align:right;border:1px solid var(--border);border-radius:20px;background:var(--card);padding:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;color:var(--text);font-family:inherit;box-shadow:0 8px 25px rgba(5,40,30,.05);transition:.22s ease}.landing-category-grid button:hover{transform:translateY(-4px);border-color:rgba(14,166,125,.28);box-shadow:0 18px 38px rgba(5,40,30,.10)}.landing-category-grid button>span{font-size:28px}.landing-category-grid b{font-size:15px}.landing-category-grid small{font-size:11px;color:var(--muted)}
.landing-how{padding:72px 8px 82px}.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.landing-steps article{position:relative;padding:28px;border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.landing-steps i{position:absolute;left:22px;top:18px;font-style:normal;font-size:11px;font-weight:900;color:var(--muted)}.landing-steps article>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--primary-soft);font-size:21px;margin-bottom:22px}.landing-steps h3{font-size:17px;margin-bottom:7px}.landing-steps p{font-size:12px;color:var(--muted);line-height:1.9}
.landing-final-cta{margin:0 8px 30px;padding:38px 42px;border-radius:28px;background:linear-gradient(135deg,#0b7f62,#087c91);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:25px;box-shadow:0 22px 50px rgba(8,124,145,.20)}.landing-final-cta .landing-eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.15);color:#fff}.landing-final-cta h2{color:#fff;font-size:25px;margin-top:10px;max-width:620px}.landing-final-cta button{border:0;background:#fff;color:#087c68;border-radius:14px;padding:14px 20px;font:800 13px inherit;white-space:nowrap;cursor:pointer}.landing-final-cta button span{margin-inline-start:7px}.landing-footer{display:flex;justify-content:space-between;padding:22px 10px;color:var(--muted);font-size:11px}.landing-footer span:first-child{font-weight:900;letter-spacing:2px;color:var(--primary)}
[data-theme="dark"] .landing-glass-card{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .landing-search{box-shadow:0 20px 50px rgba(0,0,0,.28)}
@media (max-width:800px){.public-landing{padding:10px 18px 24px}.landing-hero{grid-template-columns:1fr;gap:10px;padding:50px 4px 40px;min-height:auto}.landing-hero-copy{max-width:none}.landing-hero h1{font-size:clamp(38px,11vw,58px)}.landing-hero-visual{min-height:330px}.landing-trust-row{grid-template-columns:1fr}.landing-category-grid{grid-template-columns:repeat(2,1fr)}.landing-steps{grid-template-columns:1fr}.landing-final-cta{align-items:flex-start;flex-direction:column;padding:30px 25px}.landing-final-cta button{width:100%}}
@media (max-width:520px){.public-landing{padding-inline:14px}.landing-nav{height:54px}.landing-brand{font-size:18px}.landing-brand-mark{width:34px;height:34px}.landing-nav-actions{gap:4px}.landing-icon-btn{display:none}.landing-login-btn{padding-inline:10px;font-size:12px}.landing-signup-btn{padding-inline:12px;font-size:12px}.landing-hero{padding-top:36px}.landing-hero-copy>p{font-size:14px}.landing-search{height:60px;padding-left:13px}.landing-search button{height:46px;padding-inline:15px}.landing-search input{font-size:13px}.landing-card-main{width:285px;padding:20px}.landing-card-float{transform:scale(.88)}.landing-card-float-a{right:-2px}.landing-card-float-b{left:-2px}.landing-section{padding-top:62px}.landing-section-heading h2{font-size:23px}.landing-category-grid button{min-height:135px;padding:16px}.landing-final-cta h2{font-size:21px}.landing-footer{padding-inline:4px}}
@media (prefers-reduced-motion:reduce){.public-landing *{animation:none!important;transition:none!important}}
/* KEY App — Interior UI v2
   Visual-only layer. Does not alter API/data behavior. */
:root{
  --ui-bg:#f5f8f7;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8fbfa;
  --ui-line:rgba(15,23,42,.08);
  --ui-shadow:0 12px 40px rgba(15,23,42,.07);
  --ui-shadow-lg:0 24px 70px rgba(15,23,42,.10);
  --ui-primary:#087f68;
  --ui-primary-2:#0e9f83;
  --ui-cyan:#0891b2;
}

body{background:var(--ui-bg);}
body::before{opacity:.35;}
.app{max-width:1180px;min-height:100vh;background:transparent;padding-bottom:104px;}
.app:not(.public-mode){padding-inline:18px;}

/* ---------- authenticated top bar ---------- */
.status-bar{
  position:sticky;top:10px;margin:10px auto 18px;max-width:1144px;
  min-height:64px;padding:10px 14px 10px 18px;border:1px solid var(--ui-line);
  border-radius:20px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);box-shadow:var(--ui-shadow);z-index:80;
}
.status-bar-left{gap:8px;}
.status-bar-btn{height:42px;min-width:42px;border-radius:13px;background:var(--ui-surface);box-shadow:none;border-color:var(--ui-line);color:var(--text);}
.status-bar-btn:hover{border-color:rgba(8,127,104,.28);color:var(--ui-primary);box-shadow:0 8px 22px rgba(8,127,104,.10);}
.status-bar .key-badge{padding:8px 13px;border:0;background:linear-gradient(135deg,#087f68,#0b879d);color:#fff;text-shadow:none;box-shadow:0 7px 18px rgba(8,127,104,.18);}
.status-bar .coin-badge{border:0;box-shadow:none;padding:8px 12px;background:#fff7df;color:#9a6700;}

[data-theme="dark"] body{background:#080d0c;}
[data-theme="dark"] .status-bar{background:rgba(14,21,19,.88);border-color:rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.24);}
[data-theme="dark"] .status-bar-btn{background:#121b18;border-color:rgba(255,255,255,.08);color:#e7efec;}
[data-theme="dark"] .status-bar .coin-badge{background:rgba(245,158,11,.12);color:#f8d889;}

/* ---------- app shell ---------- */
#mainApp{max-width:1144px;margin:0 auto;}
#homeContent{padding:0 4px;}
.logo-area{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  text-align:right;padding:22px 8px 18px;border-bottom:1px solid var(--ui-line);margin-bottom:18px;
}
.logo-area .logo{font-size:34px;letter-spacing:4px;margin:0;text-align:right;filter:none;}
.logo-area #welcomeText{display:block!important;color:var(--muted);font-weight:600;}
.main-actions{padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;}

/* Generic content cards */
.main-actions > *, .result-area > *, .result-area .card, .result-area .panel, .result-area .section-card{
  border-radius:22px;
}
.intro-card,.info-card,.section-card,.panel,.card,.request-card,.profile-card,.expert-card,.wallet-card{
  border-color:var(--ui-line)!important;box-shadow:var(--ui-shadow);background:var(--ui-surface)!important;
}

/* Existing hero becomes premium dashboard hero */
.mag-hero{
  grid-column:1 / -1;margin:0 0 0;padding:32px 34px;min-height:210px;border:0;
  border-radius:28px;background:linear-gradient(135deg,#083f35 0%,#087f68 54%,#087f91 100%);
  box-shadow:0 24px 55px rgba(8,127,104,.18);overflow:hidden;
}
.mag-hero::after{content:"";position:absolute;inset:auto -8% -65% auto;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.08);}
.mag-hero-name{font-size:30px;letter-spacing:-.5px;}
.mag-hero-badge{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.18);color:#d7fff4;}

/* Existing action grids/cards */
.action-btn,.primary-btn,.secondary-btn,.btn-success,.btn-danger,.btn-warning,.btn-gold{
  min-height:46px;border-radius:14px;font-family:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.action-btn:hover,.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px);}
.primary-btn{box-shadow:0 8px 20px rgba(8,127,104,.16);}

/* Search/list grids */
.expert-grid,.teachers-grid,.experts-grid,.cards-grid,.request-grid,.category-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.expert-grid > *, .teachers-grid > *, .experts-grid > *, .cards-grid > *, .request-grid > *, .category-grid > *{min-width:0;}

/* Common card polish without touching generated HTML */
.result-area{max-width:1144px;margin:0 auto;padding:4px 8px 34px;}
.result-area h3{font-size:24px;letter-spacing:-.4px;margin:10px 0 18px;}
.result-area h4{font-size:17px;}
.result-area p{line-height:1.95;}
.result-area table{border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-surface);}
.result-area th{background:var(--ui-surface-2);font-weight:800;}
.result-area th,.result-area td{padding:12px 13px;border-bottom:1px solid var(--ui-line);}
.result-area tr:last-child td{border-bottom:0;}

/* Forms */
.field{margin-bottom:15px;}
.field input,.field textarea,.field select{border-radius:15px!important;border-color:var(--ui-line)!important;background:var(--ui-surface)!important;box-shadow:none!important;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(8,127,104,.55)!important;box-shadow:0 0 0 4px rgba(8,127,104,.08)!important;}

/* Bottom navigation: desktop rail, mobile bottom bar */
.bottom-nav{
  max-width:1144px;left:50%;bottom:14px;width:calc(100% - 28px);padding:7px;
  border:1px solid var(--ui-line);border-radius:22px;background:rgba(255,255,255,.92);
  box-shadow:0 18px 50px rgba(15,23,42,.13);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);gap:5px;
}
.bnav-item{min-height:54px;border-radius:16px;gap:4px;color:#71807b;}
.bnav-item:hover{background:#eef8f5;color:var(--ui-primary);}
.bnav-item.active{background:linear-gradient(135deg,rgba(8,127,104,.12),rgba(8,145,178,.08));color:var(--ui-primary);}
.bnav-item.active .bnav-icon{background:transparent;padding:4px 14px;}
.bnav-label{font-size:10.5px;}
[data-theme="dark"] .bottom-nav{background:rgba(13,20,18,.93);border-color:rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.4);}
[data-theme="dark"] .bnav-item:hover{background:rgba(16,185,129,.08);}

/* Auth screens remain centered and calm */
.auth-screen{max-width:620px;margin:0 auto;padding:34px 20px 70px;}
.auth-screen .logo{filter:none;}

@media (min-width:801px){
  .main-actions > .mag-hero{grid-column:span 8;}
  .main-actions > .home-slider{grid-column:span 4;}
}
@media (max-width:800px){
  .app:not(.public-mode){padding-inline:10px;}
  .status-bar{top:5px;margin:5px 0 12px;border-radius:18px;padding:9px 10px;}
  #mainApp{width:100%;}
  .logo-area{padding:12px 6px 15px;align-items:center;}
  .logo-area .logo{font-size:28px;}
  .main-actions{display:flex;flex-direction:column;gap:14px;}
  .mag-hero{padding:26px 23px;border-radius:24px;}
  .mag-hero-name{font-size:25px;}
  .result-area{padding-inline:2px;}
  .result-area h3{font-size:21px;}
  .expert-grid,.teachers-grid,.experts-grid,.cards-grid,.request-grid,.category-grid{grid-template-columns:1fr 1fr;}
  .bottom-nav{bottom:8px;width:calc(100% - 16px);border-radius:20px;}
}
@media (max-width:560px){
  .status-bar-left #statusBarUser{display:none;}
  .status-bar .logout-text{padding-inline:10px;}
  .coin-badge .coin-unit{display:none;}
  .expert-grid,.teachers-grid,.experts-grid,.cards-grid,.request-grid,.category-grid{grid-template-columns:1fr;}
  .result-area{padding-bottom:28px;}
  .bottom-nav{padding:5px;}
  .bnav-item{min-height:50px;padding:6px 1px;}
  .bnav-label{font-size:9.5px;}
}
/* KEY App — Interior UI v3
   Component-level visual refinement. No API/data behavior changes. */
:root{
  --ui-radius-xl:28px;
  --ui-radius-lg:22px;
  --ui-radius-md:16px;
  --ui-focus:rgba(8,127,104,.14);
}

/* Shared section rhythm */
.result-area{padding-top:10px;}
.result-area>h3:first-child{margin-top:2px;}
.result-area>h3,.result-area>h4{letter-spacing:-.3px;}
.profile-section{border:1px solid var(--ui-line)!important;border-radius:20px!important;background:var(--ui-surface)!important;box-shadow:0 8px 28px rgba(15,23,42,.045)!important;padding:18px!important;margin:14px 0!important;}
.profile-section>h4{display:flex;align-items:center;gap:8px;margin:0 0 14px!important;font-size:16px!important;font-weight:850!important;}

/* Expert / teacher cards */
.expert-card,.request-card,.profile-card{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;}
.expert-card:hover,.request-card:hover,.profile-card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(15,23,42,.10)!important;border-color:rgba(8,127,104,.18)!important;}
.expert-card:before,.profile-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ui-primary),var(--ui-cyan));opacity:.75;}
.expert-card .request-header,.request-card .request-header{align-items:center;gap:12px;}
.expert-card .request-header strong,.request-card .request-header strong{line-height:1.65;}

/* Tags / status pills */
.status,.fee-tag,.feature-tag,.level-tag,.coin-badge{border-radius:999px!important;font-weight:750!important;}
.status{padding:5px 10px!important;font-size:11px!important;border:1px solid transparent;}
.status-answered{background:rgba(16,185,129,.11)!important;color:#047857!important;border-color:rgba(16,185,129,.18)!important;}
.status-waiting{background:rgba(245,158,11,.12)!important;color:#9a6700!important;border-color:rgba(245,158,11,.2)!important;}
.status-closed{background:rgba(100,116,139,.11)!important;color:#475569!important;border-color:rgba(100,116,139,.16)!important;}

/* Wallet becomes a clear financial hierarchy */
.wallet-card{position:relative!important;overflow:hidden!important;padding:26px!important;border-radius:28px!important;background:linear-gradient(135deg,#073f35 0%,#087f68 58%,#0891b2 100%)!important;color:#fff!important;box-shadow:0 22px 55px rgba(8,127,104,.2)!important;}
.wallet-card:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-80px;bottom:-130px;background:rgba(255,255,255,.09);}
.wallet-card .wallet-balance{position:relative;z-index:1;font-size:34px!important;font-weight:900!important;letter-spacing:-1px;line-height:1.25;}
.wallet-card .wallet-balance small{display:block;color:rgba(255,255,255,.78)!important;font-size:11px!important;font-weight:650!important;letter-spacing:0;margin-top:8px;}
.wallet-card .num-animate{font-variant-numeric:tabular-nums;}

/* Request cards */
.request-card{padding:18px!important;border-radius:20px!important;}
.request-card .request-header{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--ui-line);}
.request-card .problem-text{font-size:13px;line-height:1.9;color:var(--muted);}

/* Public expert profile / hero-like profile cards */
.profile-card{padding:20px!important;border-radius:22px!important;}
.profile-card p:first-child{font-size:16px;}

/* Chat */
.chat-box{border:1px solid var(--ui-line)!important;border-radius:24px!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow-lg)!important;overflow:hidden!important;}
.chat-head{min-height:64px!important;padding:10px 14px!important;background:linear-gradient(135deg,#073f35,#087f68)!important;color:#fff!important;border-bottom:0!important;}
.chat-head .status-bar-btn{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important;}
.chat-msgs{background:linear-gradient(180deg,var(--ui-surface-2),var(--ui-surface))!important;padding:18px!important;}
.chat-input{padding:10px!important;background:var(--ui-surface)!important;border-top:1px solid var(--ui-line)!important;}
.chat-input input{border-radius:16px!important;min-height:46px!important;background:var(--ui-surface-2)!important;border:1px solid var(--ui-line)!important;}
.chat-send{width:44px!important;height:44px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;}

/* Tables and admin/data-heavy screens */
.result-area table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%;}
.result-area th{font-size:12px;letter-spacing:.2px;}
.result-area td{font-size:12.5px;}

/* Action hierarchy */
.primary-btn,.btn-success{background:linear-gradient(135deg,#087f68,#0a9277)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(8,127,104,.16)!important;}
.secondary-btn{background:var(--ui-surface)!important;color:var(--text)!important;border:1px solid var(--ui-line)!important;}
.primary-btn:focus-visible,.secondary-btn:focus-visible,.action-btn:focus-visible,.status-bar-btn:focus-visible,.bnav-item:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px;}

/* Better loading / empty-state breathing room */
.k-empty{max-width:560px;margin:0 auto;}
.k-skeleton{border-radius:16px!important;}

/* Desktop: use the wide canvas without making cards huge */
@media (min-width:1000px){
  .expert-grid,.teachers-grid,.experts-grid,.cards-grid,.request-grid,.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .result-area{padding-inline:0;}
}

/* Tablet */
@media (max-width:800px){
  .profile-section{padding:15px!important;border-radius:18px!important;}
  .wallet-card{padding:22px!important;border-radius:24px!important;}
  .wallet-card .wallet-balance{font-size:29px!important;}
  .chat-box{border-radius:20px!important;}
}

/* Mobile */
@media (max-width:560px){
  .result-area{padding-inline:0;}
  .result-area h3{margin-bottom:14px;}
  .expert-card,.request-card,.profile-card{border-radius:18px!important;}
  .wallet-card{padding:20px!important;}
  .wallet-card .wallet-balance{font-size:27px!important;}
  .request-card .request-header{align-items:flex-start;}
  .chat-msgs{padding:12px!important;}
  .chat-input{padding:8px!important;}
}

[data-theme="dark"] .expert-card:hover,[data-theme="dark"] .request-card:hover,[data-theme="dark"] .profile-card:hover{box-shadow:0 20px 50px rgba(0,0,0,.28)!important;}
[data-theme="dark"] .profile-section{box-shadow:0 10px 32px rgba(0,0,0,.16)!important;}
[data-theme="dark"] .status-answered{color:#6ee7b7!important;background:rgba(16,185,129,.12)!important;}
[data-theme="dark"] .status-waiting{color:#fcd34d!important;background:rgba(245,158,11,.12)!important;}
[data-theme="dark"] .status-closed{color:#cbd5e1!important;background:rgba(100,116,139,.14)!important;}
/* KEY App — UX v4
   Search · Expert profile rating · Step-by-step request · Pro chat · Wallet analytics
   Visual language follows ui-redesign-v2/v3 (flat cards, soft borders, green/cyan accent). */
:root{
  --kx-primary:var(--ui-primary,#087f68);
  --kx-primary-2:var(--ui-primary-2,#0e9f83);
  --kx-cyan:var(--ui-cyan,#0891b2);
  --kx-line:var(--ui-line,var(--border,rgba(15,23,42,.08)));
  --kx-surface:var(--ui-surface,var(--card,#fff));
  --kx-surface-2:var(--ui-surface-2,var(--card-2,#f8fbfa));
  --kx-in:#059669;
  --kx-out:#dc2626;
  --kx-gold:#d97706;
}
[hidden]{display:none!important;}
.kx-btn-reset{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;}

/* ============ 1) SEARCH & FILTER ============ */
.kx-search h3{margin-bottom:12px;}
.kx-searchbar{position:sticky;top:84px;z-index:5;display:flex;align-items:center;gap:8px;padding:8px;margin:0 0 10px;border:1px solid var(--kx-line);border-radius:18px;background:var(--kx-surface);box-shadow:0 8px 24px rgba(15,23,42,.05);}
.kx-searchbar:focus-within{border-color:rgba(8,127,104,.35);box-shadow:0 0 0 4px var(--ui-focus,rgba(8,127,104,.14));}
.kx-searchbar .kx-ic{display:grid;place-items:center;width:34px;height:34px;color:var(--muted);flex:0 0 auto;}
.kx-searchbar input[type=search]{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:8px 2px!important;margin:0!important;font-size:14.5px;min-height:38px;}
.kx-searchbar input[type=search]::-webkit-search-cancel-button{display:none;}
.kx-clear{width:28px;height:28px;border-radius:50%;background:var(--kx-surface-2)!important;color:var(--muted);display:grid;place-items:center;font-size:16px;line-height:1;flex:0 0 auto;}
.kx-filter-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:13px;border:1px solid var(--kx-line)!important;background:var(--kx-surface-2)!important;color:var(--text);font-weight:700;font-size:13px;flex:0 0 auto;}
.kx-filter-btn b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--kx-primary);color:#fff;font-size:11px;}
.kx-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none;}
.kx-chips::-webkit-scrollbar{display:none;}
.kx-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--kx-line)!important;background:var(--kx-surface)!important;color:var(--text);font-size:13px;font-weight:650;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;}
.kx-chip.on{background:rgba(8,127,104,.1)!important;border-color:rgba(8,127,104,.35)!important;color:var(--kx-primary);}
.kx-active{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.kx-active:empty{display:none;}
.kx-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--kx-surface-2);border:1px solid var(--kx-line);font-size:12px;color:var(--muted);}
.kx-tag button{width:18px;height:18px;border-radius:50%;background:rgba(100,116,139,.16)!important;color:var(--text);font-size:12px;line-height:1;display:grid;place-items:center;}
.kx-resbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;font-size:12.5px;color:var(--muted);}
.kx-resbar select{width:auto!important;min-width:0;max-width:60%;height:34px;padding:0 10px!important;margin:0!important;border-radius:11px!important;font-size:12.5px;}
.kx-list{display:grid;gap:12px;}
.kx-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px;border:1px solid var(--kx-line);border-radius:20px;background:var(--kx-surface);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;}
.kx-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(15,23,42,.09);border-color:rgba(8,127,104,.22);}
.kx-card.special{border-color:rgba(217,119,6,.35);background:linear-gradient(160deg,rgba(245,158,11,.08),var(--kx-surface));}
.kx-avatar{position:relative;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--kx-primary),var(--kx-cyan));flex:0 0 auto;}
.kx-avatar i{position:absolute;inset-inline-end:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#16a34a;border:3px solid var(--kx-surface);}
.kx-avatar i.off{background:#94a3b8;}
.kx-card-main{min-width:0;}
.kx-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.kx-name{font-weight:800;font-size:15px;line-height:1.6;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.kx-verified{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--kx-cyan);color:#fff;font-size:10px;}
.kx-rate{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;background:rgba(245,158,11,.12);color:#9a6700;font-weight:800;font-size:12.5px;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.kx-rate i{font-style:normal;color:#f59e0b;}
.kx-rate small{font-weight:600;opacity:.75;}
.kx-rate.kx-new{background:rgba(8,127,104,.1);color:var(--kx-primary);}
.kx-spec{margin:2px 0 6px;font-size:13px;color:var(--text);opacity:.88;}
.kx-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.kx-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:var(--kx-surface-2);border:1px solid var(--kx-line);font-size:11.5px;color:var(--muted);}
.kx-pill.gold{background:rgba(245,158,11,.12);color:#92400e;border-color:rgba(245,158,11,.3);font-weight:700;}
.kx-pill.fee{color:var(--kx-primary);font-weight:750;}
.kx-card-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:2px;}
.kx-card-actions button{flex:1;min-height:40px;margin:0!important;border-radius:13px!important;font-size:13px!important;}
.kx-empty{text-align:center;padding:34px 16px;border:1px dashed var(--kx-line);border-radius:20px;color:var(--muted);}
.kx-empty b{display:block;font-size:15px;color:var(--text);margin:8px 0 4px;}
.kx-empty button{margin-top:12px;}
.kx-pager{display:flex;justify-content:center;gap:6px;margin:16px 0 4px;}
.kx-pager button{min-width:38px;height:38px;border-radius:12px;border:1px solid var(--kx-line)!important;background:var(--kx-surface)!important;font-weight:700;}
.kx-pager button.on{background:var(--kx-primary)!important;color:#fff;border-color:transparent!important;}
.kx-pager button:disabled{opacity:.4;}
/* filter sheet */
.kx-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;animation:kxFade .18s ease;}
.kx-sheet{width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--kx-surface);border-radius:26px 26px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:kxUp .22s ease;}
.kx-sheet-grip{width:44px;height:5px;border-radius:9px;background:var(--kx-line);margin:0 auto 12px;}
.kx-sheet h4{margin:0 0 14px;font-size:17px;}
.kx-sheet label{display:block;margin:14px 0 6px;font-size:12.5px;font-weight:700;color:var(--muted);}
.kx-seg{display:flex;gap:6px;flex-wrap:wrap;}
.kx-seg button{flex:1;min-width:64px;height:40px;border-radius:12px;border:1px solid var(--kx-line)!important;background:var(--kx-surface-2)!important;font-weight:700;font-size:13px;}
.kx-seg button.on{background:rgba(8,127,104,.1)!important;border-color:rgba(8,127,104,.4)!important;color:var(--kx-primary);}
.kx-sheet-foot{display:flex;gap:10px;margin-top:20px;}
.kx-sheet-foot button{flex:1;margin:0!important;}
@keyframes kxFade{from{opacity:0}to{opacity:1}}
@keyframes kxUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes kxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:1000px){.kx-list{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ============ 2) EXPERT PROFILE: rating + sticky CTA ============ */
.kx-rating-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px;margin:14px 0;border:1px solid var(--kx-line);border-radius:22px;background:var(--kx-surface);box-shadow:0 8px 28px rgba(15,23,42,.045);}
.kx-score{text-align:center;min-width:92px;}
.kx-score b{display:block;font-size:40px;line-height:1.1;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums;}
.kx-score .kx-stars{color:#f59e0b;letter-spacing:2px;font-size:14px;margin:4px 0 2px;}
.kx-score small{color:var(--muted);font-size:11.5px;}
.kx-bars{display:grid;gap:6px;}
.kx-bar{display:grid;grid-template-columns:14px 1fr 26px;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.kx-bar span.t{height:7px;border-radius:9px;background:var(--kx-surface-2);overflow:hidden;border:1px solid var(--kx-line);}
.kx-bar span.t i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.kx-rating-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:13px;}
.kx-rating-link{grid-column:1/-1;margin:0!important;}
.kx-cta{position:sticky;bottom:86px;z-index:20;display:flex;align-items:center;gap:10px;padding:10px;margin:16px 0 0;border:1px solid var(--kx-line);border-radius:20px;background:color-mix(in srgb,var(--kx-surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(15,23,42,.14);}
.kx-cta-info{flex:0 0 auto;line-height:1.35;padding-inline:6px;}
.kx-cta-info small{display:block;color:var(--muted);font-size:11px;}
.kx-cta-info b{font-size:14px;font-variant-numeric:tabular-nums;}
.kx-cta button{margin:0!important;min-height:44px;border-radius:14px!important;}
.kx-cta .kx-cta-main{flex:1;}

/* ============ 3) STEP-BY-STEP REQUEST ============ */
.kx-wiz{margin-top:4px;}
.kx-progress{display:flex;align-items:flex-start;margin:6px 0 18px;}
.kx-pstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:11.5px;color:var(--muted);text-align:center;}
.kx-pstep:before{content:"";position:absolute;top:15px;inset-inline-start:-50%;width:100%;height:2px;background:var(--kx-line);z-index:0;}
.kx-pstep:first-child:before{display:none;}
.kx-pstep em{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;background:var(--kx-surface);border:2px solid var(--kx-line);transition:all .2s;}
.kx-pstep.done em{background:var(--kx-primary);border-color:var(--kx-primary);color:#fff;}
.kx-pstep.done:before,.kx-pstep.cur:before{background:var(--kx-primary);}
.kx-pstep.cur em{border-color:var(--kx-primary);color:var(--kx-primary);box-shadow:0 0 0 5px var(--ui-focus,rgba(8,127,104,.14));}
.kx-pstep.cur{color:var(--text);font-weight:700;}
.kx-step{display:none;animation:kxIn .22s ease;}
.kx-step.on{display:block;}
.kx-step-head h4{margin:0 0 4px;font-size:17px;}
.kx-step-head p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.8;}
.kx-step textarea{min-height:150px;resize:vertical;}
.kx-count{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin:-4px 2px 12px;}
.kx-tips{padding:12px 14px;border-radius:16px;background:var(--kx-surface-2);border:1px solid var(--kx-line);font-size:12.5px;line-height:1.9;color:var(--muted);margin-bottom:14px;}
.kx-tips b{color:var(--text);}
.kx-drop{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px dashed var(--kx-line);border-radius:18px;background:var(--kx-surface-2);cursor:pointer;margin:0!important;}
.kx-drop:hover{border-color:rgba(8,127,104,.4);}
.kx-drop input{display:none!important;}
.kx-drop .ic{width:44px;height:44px;border-radius:14px;background:rgba(8,127,104,.1);display:grid;place-items:center;font-size:20px;flex:0 0 auto;}
.kx-drop span.tx{font-size:13px;line-height:1.7;}
.kx-drop span.tx small{display:block;color:var(--muted);font-size:11.5px;}
.kx-prev-img{position:relative;margin-top:10px;display:inline-block;}
.kx-prev-img img{max-width:100%;max-height:190px;border-radius:16px;border:1px solid var(--kx-line);display:block;}
.kx-prev-img button{position:absolute;top:6px;inset-inline-end:6px;width:28px;height:28px;border-radius:50%;background:rgba(15,23,42,.7)!important;color:#fff;font-size:15px;display:grid;place-items:center;}
.kx-pick{display:grid;gap:10px;}
.kx-pick-search{margin:0 0 10px!important;}
.kx-opt{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid var(--kx-line);border-radius:18px;background:var(--kx-surface);cursor:pointer;transition:border-color .15s,background .15s;}
.kx-opt .kx-avatar{width:46px;height:46px;border-radius:15px;font-size:16px;}
.kx-opt .info{flex:1;min-width:0;line-height:1.55;}
.kx-opt .info b{display:block;font-size:14px;}
.kx-opt .info small{color:var(--muted);font-size:12px;}
.kx-opt .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--kx-line);display:grid;place-items:center;font-size:12px;color:transparent;flex:0 0 auto;}
.kx-opt.on{border-color:var(--kx-primary);background:rgba(8,127,104,.06);}
.kx-opt.on .tick{background:var(--kx-primary);border-color:var(--kx-primary);color:#fff;}
.kx-opt.any .kx-avatar{background:linear-gradient(135deg,#64748b,#94a3b8);}
.kx-review{border:1px solid var(--kx-line);border-radius:20px;background:var(--kx-surface);overflow:hidden;margin-bottom:14px;}
.kx-rv{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-bottom:1px solid var(--kx-line);}
.kx-rv:last-child{border-bottom:0;}
.kx-rv .k{flex:0 0 84px;font-size:12px;color:var(--muted);padding-top:2px;}
.kx-rv .v{flex:1;min-width:0;font-size:13.5px;line-height:1.8;word-break:break-word;}
.kx-rv .v img{max-width:120px;max-height:90px;border-radius:12px;display:block;margin-top:6px;}
.kx-rv .e{flex:0 0 auto;font-size:12px;color:var(--kx-primary);font-weight:700;}
.kx-wiz-foot{display:flex;gap:10px;margin-top:18px;}
.kx-wiz-foot button{flex:1;margin:0!important;min-height:48px;}
.kx-step>.primary-btn{width:100%;margin-top:4px!important;min-height:50px;}
.kx-shake{animation:kxShake .35s;}
@keyframes kxShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ============ 4) PRO CHAT ============ */
.kx-chat{position:relative;}
.kx-chat .kx-chat-head{display:flex!important;align-items:center;justify-content:flex-start!important;gap:10px;}
.kx-chat-head .kx-back{width:38px;height:38px;min-width:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:0 0 auto;}
.kx-chat-head .kx-avatar{width:42px;height:42px;border-radius:14px;font-size:15px;background:rgba(255,255,255,.18);}
.kx-chat-head .kx-avatar i{border-color:#0a5f4f;}
.kx-chat-who{flex:1;min-width:0;line-height:1.45;}
.kx-chat-who strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kx-chat-who span{font-size:11.5px;opacity:.85;}
.kx-chat-badge{flex:0 0 auto;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:11px;font-weight:700;}
.kx-chat-ctx{display:flex;gap:8px;align-items:baseline;padding:9px 14px;background:var(--kx-surface-2);border-bottom:1px solid var(--kx-line);font-size:12px;color:var(--muted);cursor:pointer;}
.kx-chat-ctx b{color:var(--text);flex:0 0 auto;}
.kx-chat-ctx span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kx-chat-ctx.open span{white-space:normal;}
.kx-chat .chat-msgs-pro{height:min(58vh,480px);}
.kx-composer{position:relative;display:flex!important;align-items:center;gap:8px;flex-wrap:nowrap!important;}
.kx-composer input#chatInput{flex:1;min-width:0!important;}
.kx-composer .kx-plus,.kx-composer .kx-mic,.kx-composer .kx-send{width:44px!important;height:44px!important;min-width:44px!important;border-radius:14px!important;display:grid!important;place-items:center;font-size:18px;flex:0 0 auto;margin:0!important;padding:0!important;}
.kx-composer .kx-plus{background:var(--kx-surface-2)!important;border:1px solid var(--kx-line)!important;color:var(--text);}
.kx-composer .kx-plus.open{background:rgba(8,127,104,.12)!important;color:var(--kx-primary);}
.kx-composer .kx-mic{background:var(--kx-surface-2)!important;border:1px solid var(--kx-line)!important;color:var(--text);}
.kx-composer .kx-mic.rec{background:#dc2626!important;color:#fff;border-color:transparent!important;animation:kxPulse 1.2s infinite;}
.kx-composer .kx-send{background:linear-gradient(135deg,#087f68,#0a9277)!important;color:#fff;}
.kx-composer .kx-send{display:none!important;}
.kx-composer.has-text .kx-send{display:grid!important;}
.kx-composer.has-text .kx-mic{display:none!important;}
@keyframes kxPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
.kx-attach-menu{position:absolute;inset-inline-start:10px;bottom:calc(100% + 8px);z-index:6;min-width:210px;padding:8px;border:1px solid var(--kx-line);border-radius:18px;background:var(--kx-surface);box-shadow:0 18px 48px rgba(15,23,42,.18);animation:kxIn .16s ease;}
.kx-attach-item{display:flex!important;align-items:center;gap:10px;width:100%;padding:10px;border-radius:12px;cursor:pointer;font-size:13.5px;font-weight:650;margin:0!important;color:var(--text);}
.kx-attach-item:hover{background:var(--kx-surface-2);}
.kx-attach-item .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;color:#fff;}
.kx-attach-item.img .ic{background:#0d9488;}.kx-attach-item.vid .ic{background:#2563eb;}.kx-attach-item.doc .ic{background:#d97706;}
.kx-attach-item input{display:none!important;}
.kx-attach-hint{padding:8px 10px 4px;margin:4px 0 0;border-top:1px solid var(--kx-line);font-size:11px!important;line-height:1.7;color:var(--muted);}
.kx-chat #voiceStatus{margin:0!important;padding:8px 14px!important;background:rgba(220,38,38,.08);color:#b91c1c;font-size:12.5px;font-weight:650;}
.kx-newpill{position:absolute;inset-inline-end:14px;bottom:86px;z-index:5;padding:8px 14px;border-radius:999px;background:var(--kx-primary)!important;color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 10px 26px rgba(8,127,104,.35);animation:kxIn .18s ease;}

/* ============ 5) WALLET: actions, chart, timeline ============ */
.kx-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0;}
.kx-actions button{display:flex!important;flex-direction:column;align-items:center;gap:8px;padding:12px 4px!important;margin:0!important;min-height:0!important;border-radius:18px!important;background:var(--kx-surface)!important;color:var(--text)!important;border:1px solid var(--kx-line)!important;box-shadow:none!important;font-size:12px!important;font-weight:700!important;}
.kx-actions button:hover{border-color:rgba(8,127,104,.3)!important;transform:translateY(-1px);}
.kx-act-ic{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:20px;background:rgba(8,127,104,.1);}
.kx-actions button:nth-child(2) .kx-act-ic{background:rgba(8,145,178,.12);}
.kx-actions button:nth-child(3) .kx-act-ic{background:rgba(124,58,237,.1);}
.kx-actions button:nth-child(4) .kx-act-ic{background:rgba(245,158,11,.14);}
.kx-panel{padding:16px;margin:14px 0;border:1px solid var(--kx-line);border-radius:22px;background:var(--kx-surface);box-shadow:0 8px 28px rgba(15,23,42,.045);}
.kx-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.kx-panel-head h4{margin:0;font-size:16px;font-weight:850;}
.kx-range{display:inline-flex;padding:3px;border-radius:12px;background:var(--kx-surface-2);border:1px solid var(--kx-line);}
.kx-range button{height:30px;padding:0 11px;border-radius:9px;font-size:12px;font-weight:700;color:var(--muted);background:transparent!important;border:0!important;}
.kx-range button.on{background:var(--kx-surface)!important;color:var(--kx-primary);box-shadow:0 2px 8px rgba(15,23,42,.08);}
.kx-sums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.kx-sum{padding:12px;border-radius:16px;background:var(--kx-surface-2);border:1px solid var(--kx-line);}
.kx-sum>small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;}
.kx-sum>small:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kx-in);}
.kx-sum.out>small:before{background:var(--kx-out);}
.kx-sum b{display:block;margin-top:4px;font-size:18px;font-weight:850;font-variant-numeric:tabular-nums;}
.kx-sum.in b{color:var(--kx-in);}.kx-sum.out b{color:var(--kx-out);}
.kx-sum b small{display:inline;font-size:11px;color:var(--muted);font-weight:600;}
.kx-readout{min-height:22px;font-size:12.5px;color:var(--muted);margin-bottom:4px;font-variant-numeric:tabular-nums;}
.kx-readout b{color:var(--text);font-size:14px;}
.kx-chart{position:relative;height:150px;touch-action:pan-y;direction:ltr;}
.kx-chart svg{width:100%;height:100%;display:block;overflow:visible;}
.kx-chart .area{fill:url(#kxGrad);}
.kx-chart .line{fill:none;stroke:var(--kx-primary);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.kx-chart .grid{stroke:var(--kx-line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4;}
.kx-chart .bar-in{fill:var(--kx-in);opacity:.85;}.kx-chart .bar-out{fill:var(--kx-out);opacity:.85;}
.kx-cursor{position:absolute;top:0;bottom:0;width:1px;background:var(--kx-primary);opacity:0;pointer-events:none;}
.kx-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--kx-primary);border:3px solid var(--kx-surface);box-shadow:0 2px 8px rgba(8,127,104,.4);pointer-events:none;}
.kx-chart-empty{display:grid;place-items:center;height:110px;color:var(--muted);font-size:13px;}
.kx-tl-filters{display:flex;gap:8px;margin-bottom:12px;}
.kx-tl-day{margin:14px 0 8px;font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.2px;}
.kx-tl{position:relative;display:grid;gap:10px;padding-inline-start:20px;}
.kx-tl:before{content:"";position:absolute;inset-block:6px;inset-inline-start:5px;width:2px;background:var(--kx-line);border-radius:2px;}
.kx-tl-item{position:relative;}
.kx-tl-item:before{content:"";position:absolute;inset-inline-start:-20px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--kx-surface);border:3px solid #94a3b8;}
.kx-tl-item.in:before{border-color:var(--kx-in);}.kx-tl-item.out:before{border-color:var(--kx-out);}
.kx-tl-item .tx-card{margin:0;}
.kx-more{width:100%;margin-top:12px!important;}

/* dark mode */
[data-theme="dark"] .kx-searchbar,[data-theme="dark"] .kx-card,[data-theme="dark"] .kx-panel,[data-theme="dark"] .kx-rating-card{box-shadow:0 10px 32px rgba(0,0,0,.2);}
[data-theme="dark"] .kx-rate{background:rgba(245,158,11,.14);color:#fcd34d;}
[data-theme="dark"] .kx-pill.gold{color:#fcd34d;}
[data-theme="dark"] .kx-backdrop{background:rgba(0,0,0,.6);}
[data-theme="dark"] .kx-cta{box-shadow:0 14px 40px rgba(0,0,0,.4);}

@media (max-width:560px){
  .kx-rating-card{grid-template-columns:1fr;gap:12px;}
  .kx-card{padding:12px;border-radius:18px;}
  .kx-avatar{width:48px;height:48px;border-radius:16px;font-size:16px;}
  .kx-filter-btn span.t{display:none;}
  .kx-cta{bottom:78px;}
  .kx-searchbar{top:76px;}
  .kx-actions{gap:8px;}
  .kx-rv .k{flex-basis:70px;}
}
@media (prefers-reduced-motion:reduce){
  .kx-step,.kx-backdrop,.kx-sheet,.kx-attach-menu,.kx-newpill,.kx-shake,.kx-mic.rec{animation:none!important;}
}
/* ============================================================
   KEY App — Final Visual System v31
   One visual language for landing, auth, dashboard, cards, chat
   ============================================================ */
:root{
  --brand:#087f68;
  --brand-2:#0b9b7c;
  --brand-3:#12b886;
  --brand-soft:rgba(8,127,104,.10);
  --brand-line:rgba(8,127,104,.20);
  --ink:#10231f;
  --muted-ink:#60736e;
  --line:rgba(16,35,31,.09);
  --surface:#fff;
  --surface-2:#f6faf8;
  --surface-3:#eef6f3;
  --page:#f3f8f6;
  --shadow-soft:0 8px 24px rgba(16,35,31,.07);
  --shadow-card:0 14px 38px rgba(16,35,31,.09);
  --shadow-brand:0 12px 28px rgba(8,127,104,.16);
  --focus:0 0 0 4px rgba(8,127,104,.13);
}
[data-theme="dark"]{
  --brand:#18b889;
  --brand-2:#25c99a;
  --brand-3:#4adeb0;
  --brand-soft:rgba(24,184,137,.13);
  --brand-line:rgba(74,222,176,.20);
  --ink:#ecf7f3;
  --muted-ink:#9ab4ac;
  --line:rgba(255,255,255,.075);
  --surface:#14211d;
  --surface-2:#101b18;
  --surface-3:#1a2b26;
  --page:#091310;
  --shadow-soft:0 8px 26px rgba(0,0,0,.22);
  --shadow-card:0 16px 44px rgba(0,0,0,.28);
  --shadow-brand:0 12px 30px rgba(24,184,137,.12);
  --focus:0 0 0 4px rgba(24,184,137,.16);
}

/* Base consistency */
html{background:var(--page);}
body{
  background:var(--page)!important;
  color:var(--ink)!important;
  letter-spacing:0!important;
}
body::before{opacity:.32;}
button,input,textarea,select{font-family:inherit;}
button{font-weight:650;}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:none;box-shadow:var(--focus)!important;}

/* Mobile-first app shell, with a more polished desktop presentation */
.app{
  max-width:560px!important;
  background:transparent!important;
}
.status-bar{
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 6px 22px rgba(16,35,31,.055)!important;
  backdrop-filter:blur(18px)!important;
}

/* Shared section rhythm */
.profile-section,.form-section,.intro-card,.profile-card,.request-card,.expert-card,.chat-box,.wallet-card,.result-area{
  border-color:var(--line)!important;
}
.profile-section,.form-section{
  background:var(--surface)!important;
  box-shadow:var(--shadow-soft)!important;
  border-radius:20px!important;
}
.intro-card{
  background:linear-gradient(145deg,var(--surface),var(--surface-2))!important;
  box-shadow:var(--shadow-soft)!important;
}
.profile-card,.request-card,.expert-card{
  background:var(--surface)!important;
  box-shadow:var(--shadow-soft)!important;
}
.profile-card:hover,.request-card:hover,.expert-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--shadow-card)!important;
}

/* Typography hierarchy */
.mag-section-title{margin:22px 2px 12px!important;}
.mag-section-title span{color:var(--brand)!important;font-weight:800!important;}
h1,h2,h3,h4{color:var(--ink)!important;}
.info-text,.muted,.subtitle{color:var(--muted-ink)!important;}

/* Inputs */
.field input,.field textarea,.field select,
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],textarea,select{
  background:var(--surface)!important;
  color:var(--ink)!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.field input:focus,.field textarea:focus,.field select:focus,
input:focus,textarea:focus,select:focus{
  border-color:var(--brand)!important;
  box-shadow:var(--focus)!important;
}

/* Buttons — one hierarchy */
.primary-btn,.btn-success,.action-btn.primary,.primary-action{
  background:linear-gradient(135deg,var(--brand),var(--brand-2))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:var(--shadow-brand)!important;
  border-radius:14px!important;
}
.primary-btn:hover,.btn-success:hover,.action-btn.primary:hover,.primary-action:hover{filter:brightness(1.035);transform:translateY(-1px);}
.secondary-btn,.ghost-btn,.action-btn.secondary{
  background:var(--surface)!important;
  color:var(--ink)!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
}
.danger-btn{border-radius:14px!important;}

/* Tags */
.status,.fee-tag,.feature-tag,.level-tag,.coin-badge{
  border-radius:999px!important;
  box-shadow:none!important;
}
.status-answered{color:#087f68!important;}

/* Wallet */
.wallet-card{
  background:linear-gradient(135deg,#075f50 0%,#087f68 58%,#0a8fa3 100%)!important;
  border:0!important;
  box-shadow:0 20px 48px rgba(8,127,104,.22)!important;
}

/* Navigation */
.bottom-nav,.bnav-wrap,.nav-bar{
  border-color:var(--line)!important;
  box-shadow:0 -8px 28px rgba(16,35,31,.08)!important;
  backdrop-filter:blur(18px)!important;
}
.bnav-item.active,.bottom-nav .active{color:var(--brand)!important;}
.bnav-item.active .bnav-icon{filter:drop-shadow(0 5px 10px rgba(8,127,104,.16));}

/* Chat */
.chat-box{box-shadow:var(--shadow-card)!important;}
.chat-head{background:linear-gradient(135deg,#075f50,#087f68)!important;}
.chat-msgs{background:linear-gradient(180deg,var(--surface-2),var(--surface))!important;}
.chat-input{background:var(--surface)!important;border-top:1px solid var(--line)!important;}

/* Landing */
.landing-nav,.landing-glass-card,.landing-section,.landing-hero,.landing-card-main,.landing-card-float{
  border-color:var(--line)!important;
}
.landing-glass-card{
  background:rgba(255,255,255,.78)!important;
  box-shadow:var(--shadow-soft)!important;
  backdrop-filter:blur(18px)!important;
}
[data-theme="dark"] .landing-glass-card{background:rgba(20,33,29,.82)!important;}
.landing-section-heading h2{color:var(--ink)!important;}
.landing-section-heading span{color:var(--brand)!important;}
.landing-card-main{box-shadow:var(--shadow-card)!important;}

/* Auth */
.auth-screen{padding-top:34px!important;}
.logo{filter:drop-shadow(0 8px 18px rgba(8,127,104,.16))!important;}
.role-card{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-soft)!important;
  border-radius:18px!important;
}
.role-card:has(input:checked){border-color:var(--brand)!important;box-shadow:var(--focus)!important;}

/* Tables / dense admin views */
.result-area table{border-collapse:separate!important;border-spacing:0!important;}
.result-area th{background:var(--surface-3)!important;color:var(--ink)!important;}
.result-area td{border-bottom:1px solid var(--line)!important;}

/* Empty/error states should look intentional */
.empty-state,.no-results,.error-box{border-radius:18px!important;}

/* Responsive polish */
@media (min-width:700px){
  body{padding:22px 0;}
  .app{min-height:calc(100vh - 44px)!important;border-radius:28px;overflow:hidden;box-shadow:0 18px 70px rgba(16,35,31,.10);}
  [data-theme="dark"] .app{box-shadow:0 18px 70px rgba(0,0,0,.35);}
}
@media (max-width:380px){
  .app{max-width:100%!important;}
  .status-bar{padding-inline:12px!important;}
  .auth-screen{padding-inline:16px!important;}
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
/* KEY App — Master Visual System v32
   Final consistency layer. Keep existing feature styles intact and use this file
   as the single visual authority for spacing, hierarchy, actions and responsive polish.
*/
:root{
  --ui-radius-sm:12px;
  --ui-radius-md:16px;
  --ui-radius-lg:20px;
  --ui-radius-xl:28px;
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:24px;
  --ui-space-6:32px;
  --ui-space-7:48px;
  --ui-brand:#087f68;
  --ui-brand-2:#0b9b7c;
  --ui-brand-soft:rgba(8,127,104,.10);
  --ui-border:rgba(16,35,31,.09);
  --ui-text:#10231f;
  --ui-muted:#60736e;
  --ui-surface:#fff;
  --ui-surface-2:#f6faf8;
  --ui-shadow:0 10px 30px rgba(16,35,31,.065);
  --ui-shadow-lg:0 18px 48px rgba(16,35,31,.105);
}
[data-theme="dark"]{
  --ui-border:rgba(255,255,255,.08);
  --ui-text:#ecf7f3;
  --ui-muted:#9ab4ac;
  --ui-surface:#14211d;
  --ui-surface-2:#101b18;
  --ui-shadow:0 12px 32px rgba(0,0,0,.20);
  --ui-shadow-lg:0 20px 52px rgba(0,0,0,.30);
}

/* Icon replacement: professional SVG icons instead of platform-dependent emoji glyphs. */
.k-icon-inline{display:inline-flex!important;align-items:center;justify-content:center;vertical-align:-.18em;width:1.12em;height:1.12em;line-height:1;flex:0 0 auto;color:currentColor}
.k-icon-inline svg{display:block;width:1em;height:1em;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
button>.k-icon-inline,button>.k-icon-inline:first-child{margin-inline-end:6px}
.landing-category-grid .k-icon-inline,.landing-steps .k-icon-inline{width:34px;height:34px;font-size:28px;margin:0 0 12px;color:var(--brand)}
.status-bar-btn .k-icon-inline,.landing-icon-btn .k-icon-inline{margin:0;width:19px;height:19px}

/* Global rhythm and typography */
.app{color:var(--ui-text)}
#mainApp{padding-bottom:92px}
#result{padding-inline:4px}
h1,h2,h3,h4{letter-spacing:-.015em}
h3{font-size:20px;line-height:1.45;margin:0 0 14px;font-weight:850}
h4{font-size:15px;line-height:1.5}
p{line-height:1.85}
.profile-section,.form-section,.intro-card,.profile-card,.request-card,.expert-card,.chat-box,.wallet-card,.result-area,.content-box{border-radius:var(--ui-radius-lg)!important}
.profile-section,.form-section,.profile-card,.request-card,.expert-card,.wallet-card,.result-area{box-shadow:var(--ui-shadow)!important}
.profile-section,.form-section{margin-bottom:14px!important}

/* Clear action hierarchy */
.primary-btn,.primary-action,.btn-success,.action-btn.primary{
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:14px!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.primary-btn:hover,.primary-action:hover,.btn-success:hover,.action-btn.primary:hover{transform:translateY(-1px)!important}
.secondary-btn,.ghost-btn,.action-btn.secondary{
  min-height:44px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  font-size:12.5px!important;
  font-weight:750!important;
}
.action-btn{min-height:40px!important;border-radius:12px!important;padding:0 13px!important}

/* Cards: consistent density and hover behavior */
.profile-card,.request-card,.expert-card{padding:16px!important}
.profile-card:hover,.request-card:hover,.expert-card:hover{transform:translateY(-2px)!important;box-shadow:var(--ui-shadow-lg)!important}
.intro-card{padding:16px 18px!important;border:1px solid var(--ui-border)!important}
.empty-state,.no-results,.error-box{padding:30px 18px!important;border:1px dashed var(--ui-border)!important;background:var(--ui-surface-2)!important;color:var(--ui-muted)!important}

/* Forms */
.field{margin-bottom:14px!important}
.field label{display:block;margin-bottom:7px;font-size:12px;font-weight:750;color:var(--ui-muted)}
.field input,.field textarea,.field select,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],textarea,select{
  min-height:46px!important;border-radius:14px!important;font-size:13px!important;
}
textarea{min-height:108px!important;resize:vertical}

/* Home / dashboard: make the next action obvious */
.mag-hero,.home-hero{border-radius:var(--ui-radius-xl)!important;overflow:hidden}
.mag-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 2px 12px!important}
.mag-section-title span{font-size:11px!important;letter-spacing:.02em}
.mag-tile{border-radius:18px!important;border:1px solid var(--ui-border)!important;box-shadow:var(--ui-shadow)!important}
.mag-tile:hover{transform:translateY(-2px)!important;box-shadow:var(--ui-shadow-lg)!important}

/* Search / expert discovery */
.kx-searchbar,.landing-search{border-radius:18px!important;box-shadow:0 12px 34px rgba(5,40,30,.08)!important}
.kx-card{border-radius:20px!important;box-shadow:var(--ui-shadow)!important}
.kx-card:hover{box-shadow:var(--ui-shadow-lg)!important}
.kx-cta{border-radius:18px!important}
.kx-actions{gap:10px!important}
.kx-actions button{border-radius:16px!important}

/* Make online/verified information readable as trust signals. */
.landing-live-dot{width:8px!important;height:8px!important}
.landing-verified,.landing-card-rating,.kx-pill{font-weight:750!important}

/* Chat: calm, focused conversation */
.chat-box,.kx-chat{overflow:hidden!important;border:1px solid var(--ui-border)!important}
.chat-head,.kx-chat-head{min-height:64px!important}
.chat-msgs,.chat-msgs-pro{scrollbar-width:thin}
.chat-input,.kx-composer{padding:10px!important}
.chat-input input,.kx-composer input{border-radius:14px!important}
.chat-send,.kx-composer .kx-plus,.kx-composer .kx-mic,.kx-composer .kx-send{border-radius:13px!important}

/* Wallet: emphasize balance, then actions, then history. */
.wallet-card{border-radius:24px!important}
.kx-panel{border-radius:20px!important}
.tx-item{border-bottom:1px solid var(--ui-border)!important}

/* Bottom navigation */
.bottom-nav,.bnav-wrap,.nav-bar{border-top:1px solid var(--ui-border)!important;box-shadow:0 -10px 30px rgba(16,35,31,.075)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.bnav-item{min-height:58px!important}
.bnav-item.active{font-weight:850!important}

/* Landing: stronger hierarchy, less decorative noise */
.public-landing{padding-bottom:36px!important}
.landing-hero{gap:54px!important}
.landing-hero h1{max-width:720px;font-size:clamp(38px,5.2vw,66px)!important}
.landing-hero-copy>p{max-width:600px;font-size:16px!important}
.landing-category-grid button{border-radius:18px!important;min-height:148px!important;padding:18px!important}
.landing-steps article{border-radius:20px!important}
.landing-final-cta{border-radius:24px!important}
.landing-search button{min-width:96px}

/* Feedback / notices */
.info-text{border-radius:14px}
.toast,.toast-message,.notification-toast{border-radius:14px!important;box-shadow:0 16px 42px rgba(16,35,31,.15)!important}

/* Tables / admin: readable, not cramped */
.result-area{overflow:auto}
.result-area table{min-width:100%;font-size:12px}
.result-area th,.result-area td{padding:11px 10px!important;vertical-align:middle}

/* Mobile: app-like spacing and reachable actions */
@media (max-width:699px){
  body{padding:0!important}
  .app{max-width:560px!important;border-radius:0!important;box-shadow:none!important}
  .status-bar{padding-inline:12px!important}
  #mainApp{padding-bottom:88px}
  #result{padding-inline:2px}
  .profile-section,.form-section{padding:16px!important}
  .mag-section-title{margin-top:22px!important}
  .primary-btn,.primary-action,.btn-success{min-height:48px!important}
  .landing-hero{padding-inline:4px!important}
  .landing-search{height:60px!important}
  .landing-search button{height:46px}
  .landing-category-grid{gap:10px!important}
  .landing-category-grid button{min-height:132px!important;padding:15px!important}
  .landing-steps{gap:12px!important}
  .landing-final-cta{margin-inline:4px!important}
}
@media (max-width:380px){
  .primary-btn,.primary-action,.btn-success{font-size:12.5px!important;padding-inline:14px!important}
  .landing-hero h1{font-size:36px!important}
  .landing-category-grid button{min-height:124px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== Articles hub: free / paid sections + FAB (v32.3) ===== */
.articles-hub-intro{margin-bottom:12px}
.articles-add-main{margin-bottom:14px}
.articles-section{
  margin:16px 0 22px;
  padding:12px;
  border-radius:var(--radius-sm,12px);
  background:var(--card,rgba(255,255,255,.6));
  border:1px solid var(--border,rgba(0,0,0,.06));
}
.articles-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border,rgba(0,0,0,.06));
}
.articles-section-head .articles-section-icon{font-size:22px;line-height:1}
.articles-section-head strong{display:block;font-size:15px}
.articles-section-count{
  display:block;
  font-size:12px;
  color:var(--muted,#5c8078);
  margin-top:2px;
}
.articles-section-head.free strong{color:var(--success,#0EA67D)}
.articles-section-head.paid strong{color:var(--gold,#d97706)}
.articles-section-empty{margin:8px 0 4px;text-align:center}
.article-author-link{
  color:var(--primary,#059669);
  text-decoration:none;
  border-bottom:1px dashed rgba(5,150,105,.45);
}
.article-author-link:hover{color:var(--primary-dark,#047857)}
.articles-fab-plus{
  position:fixed;
  left:18px;
  bottom:88px;
  z-index:40;
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#d97706,#f59e0b);
  color:#fff;
  font-size:32px;
  font-weight:700;
  line-height:1;
  box-shadow:0 8px 24px rgba(217,119,6,.45);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.articles-fab-plus:active{transform:scale(.94)}
[data-theme="dark"] .articles-section{
  background:var(--card,#14211D);
  border-color:var(--border,rgba(255,255,255,.06));
}