/* ============================================================
   قسم — سیستم طراحی مشترک
   بر پایه‌ی زبان بصری موکاپ تاییدشده‌ی صفحه چت
   ============================================================ */

:root{
  --bg:#FAF9F6; --bg-raised:#FFFFFF; --bg-sunk:#F1EFE9;
  --ink-900:#20201C; --ink-700:#514F47; --ink-500:#8A8778; --ink-300:#C7C4B7;
  --line:#E9E6DD;
  --accent:#A8783C; --accent-soft:#F2E9DB;
  --danger:#A8453C; --danger-soft:#F5E7E5;
  --success:#4B7A4E; --success-soft:#E9F0E9;
  --shadow-sm: 0 1px 2px rgba(32,32,28,.06);
  --shadow-md: 0 8px 24px rgba(32,32,28,.10);
  --shadow-lg: 0 20px 50px rgba(32,32,28,.16);
  --wm-overlay: rgba(250,249,246,.94);
}
[data-theme="dark"]{
  --bg:#1B1A17; --bg-raised:#24231F; --bg-sunk:#141311;
  --ink-900:#F2F0EA; --ink-700:#C9C6BB; --ink-500:#8F8C81; --ink-300:#4B493F;
  --line:#333129;
  --accent:#D4A15C; --accent-soft:#3A3122;
  --danger-soft:#3A2420; --success-soft:#20301F;
  --wm-overlay: rgba(27,26,23,.92);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Vazirmatn',Tahoma,sans-serif;
  background:#E7E4DC; display:flex; justify-content:center;
  color:var(--ink-900);
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- device frame (shared shell across app pages) ---------- */
.device{
  width:100%; max-width:430px; min-height:100vh;
  background-color:var(--bg);
  background-image:linear-gradient(var(--wm-overlay),var(--wm-overlay)), url('images/bg-portrait.webp');
  background-size:auto, cover;
  background-position:top center, top center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  display:flex; flex-direction:column;
  position:relative; overflow-x:hidden; transition:background-color .2s;
}
/* full-width marketing pages opt out of the device frame's width constraint only —
   the watermark background above still applies everywhere */
.device.wide{max-width:100%;}

header.app-header{
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:14px 16px 12px; border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:15;
}
.icon-btn{
  width:32px; height:32px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:var(--ink-500); flex-shrink:0; background:none; border:none;
}
.icon-btn:active{background:var(--bg-sunk);}
.icon-btn svg{width:18px; height:18px;}
.header-mid{flex:1; min-width:0;}
.header-mid .t1{font-size:14px; font-weight:600; color:var(--ink-900); white-space:nowrap;}
.header-mid .t2{font-size:10.5px; color:var(--ink-500); margin-top:1px;}
.header-actions{display:flex; gap:2px;}

#scroll{flex:1; overflow-y:auto; padding:18px 16px 90px;}
#inner{max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}

/* ---------- bottom tab bar ---------- */
.tabbar{
  position:sticky; bottom:0; left:0; right:0; flex-shrink:0;
  display:flex; background:var(--bg-raised); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index:15;
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; color:var(--ink-500); font-size:10px; border-radius:10px;
}
.tabbar a svg{width:19px; height:19px;}
.tabbar a.active{color:var(--accent);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:12px 18px; font-size:13px; font-weight:600;
  font-family:inherit;
}
.btn svg{width:15px; height:15px;}
.btn-primary{background:var(--ink-900); color:var(--bg);}
.btn-primary:active{opacity:.85;}
.btn-accent{background:var(--accent); color:#fff;}
.btn-outline{background:none; border:1px solid var(--line); color:var(--ink-900);}
.btn-ghost{background:var(--bg-sunk); color:var(--ink-700);}
.btn-danger{background:none; color:var(--danger); border:1px solid var(--danger-soft);}
.btn-block{width:100%;}
.btn-sm{padding:8px 12px; font-size:12px; border-radius:9px;}

/* ---------- جداکننده‌ی «یا» + دکمه‌ی ورود با گوگل (welcome/login/signup) ---------- */
.w-divider{display:flex; align-items:center; gap:12px; color:var(--ink-300); font-size:11.5px; margin:2px 0;}
.w-divider::before, .w-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.g-signin-wrap{display:flex; justify-content:center; width:100%;}
.g-signin-wrap #g_id_signin{width:100%; display:flex; justify-content:center;}

/* ---------- cards / sections ---------- */
.card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:16px;
}
.section-title{font-size:13px; font-weight:700; color:var(--ink-900); margin:0 0 2px;}
.section-sub{font-size:11.5px; color:var(--ink-500); margin:0 0 10px; line-height:1.8;}
.eyebrow{font-size:10.5px; color:var(--accent); font-weight:600; margin:0 0 4px;}

/* ---------- stat cards ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.stat-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:14px;
  padding:12px 8px; text-align:center;
}
.stat-card .num{font-size:17px; font-weight:700; color:var(--ink-900); line-height:1.3;}
.stat-card .label{font-size:9.5px; color:var(--ink-500); margin-top:2px; line-height:1.5;}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:11.5px; color:var(--ink-700); font-weight:600;}
.field input, .field textarea, .field select{
  border:1px solid var(--line); background:var(--bg-raised); border-radius:11px;
  padding:11px 13px; font-size:13px; color:var(--ink-900); font-family:inherit; outline:none;
  width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--accent);}
.field textarea{resize:vertical; min-height:90px; line-height:1.8;}
.field .hint-text{font-size:10.5px; color:var(--ink-500);}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}

/* ---------- badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600;
  padding:4px 10px; border-radius:20px;
}
.badge-accent{background:var(--accent-soft); color:var(--accent);}
.badge-success{background:var(--success-soft); color:var(--success);}
.badge-danger{background:var(--danger-soft); color:var(--danger);}
.badge-neutral{background:var(--bg-sunk); color:var(--ink-500);}

/* ---------- key display ---------- */
.key-box{
  background:var(--ink-900); color:var(--bg); border-radius:14px; padding:16px;
  font-family:monospace; font-size:14px; letter-spacing:.5px; text-align:center;
  direction:ltr; word-break:break-all;
}

/* ---------- list rows ---------- */
.list-row{
  display:flex; align-items:center; gap:11px; padding:12px 4px; border-bottom:1px solid var(--line);
}
.list-row:last-child{border-bottom:none;}
.list-row .ico{
  width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.list-row .ico svg{width:16px; height:16px;}
.list-row .txt{flex:1; min-width:0;}
.list-row .txt b{font-size:12.5px; color:var(--ink-900); display:block;}
.list-row .txt span{font-size:11px; color:var(--ink-500);}
.list-row .chev{width:14px; height:14px; color:var(--ink-300); flex-shrink:0;}

/* ---------- knowledge base search ---------- */
.search-bar{
  display:flex; align-items:center; gap:8px; background:var(--bg-raised); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px;
}
.search-bar svg{width:15px; height:15px; color:var(--ink-500); flex-shrink:0;}
.search-bar input{border:none; outline:none; background:none; flex:1; font-size:13px; color:var(--ink-900); font-family:inherit;}
.filter-chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;}
.filter-chip{
  flex-shrink:0; background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:7px 14px; font-size:11.5px; color:var(--ink-700); display:flex; align-items:center; gap:6px;
}
.filter-chip.active{background:var(--ink-900); color:var(--bg); border-color:var(--ink-900);}
.filter-chip svg{width:11px; height:11px;}

.doc-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.doc-card img{width:100%; height:120px; object-fit:cover; display:block; background:var(--bg-sunk);}
.doc-card .body{padding:13px 14px;}
.doc-card .meta{font-size:10.5px; color:var(--ink-500); margin-bottom:5px; display:flex; gap:8px; align-items:center;}
.doc-card h3{font-size:13.5px; margin:0 0 6px; color:var(--ink-900); line-height:1.7;}
.doc-card p{font-size:12px; color:var(--ink-700); line-height:1.9; margin:0 0 10px;}
.doc-card .foot{display:flex; align-items:center; justify-content:space-between;}
.result-count{font-size:11.5px; color:var(--ink-500); margin:2px 2px 4px;}

/* ---------- timeline ---------- */
.timeline{position:relative; padding-right:18px;}
.timeline::before{content:''; position:absolute; right:5px; top:4px; bottom:4px; width:1.5px; background:var(--line);}
.timeline-item{position:relative; padding-bottom:16px;}
.timeline-item::before{
  content:''; position:absolute; right:-18px; top:3px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg);
}
.timeline-item .yr{font-size:10.5px; color:var(--accent); font-weight:700; margin-bottom:2px;}
.timeline-item p{font-size:12px; color:var(--ink-700); line-height:1.85; margin:0;}

/* ---------- podcast player ---------- */
.player-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:20px; padding:22px 18px; text-align:center;}
.play-ring{
  width:96px; height:96px; border-radius:50%; margin:0 auto 16px; position:relative;
  background:linear-gradient(145deg,#B98A4D,#8C6530); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(168,120,60,.35);
}
.play-ring svg{width:30px; height:30px; color:#fff;}
.progress-bar{height:5px; background:var(--bg-sunk); border-radius:6px; position:relative; margin:14px 0 6px; cursor:pointer;}
.progress-bar .fill{position:absolute; top:0; right:0; height:100%; width:38%; background:var(--accent); border-radius:6px;}
.time-row{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-500);}
.equalizer{display:flex; align-items:flex-end; gap:2.5px; height:34px; justify-content:center; margin-top:16px;}
.equalizer span{width:3px; background:var(--accent-soft); border-radius:2px; height:6px;}
.equalizer.playing span{background:var(--accent); animation:eq 1s infinite ease-in-out;}
.equalizer span:nth-child(2n){animation-delay:.15s;}
.equalizer span:nth-child(3n){animation-delay:.3s;}
.equalizer span:nth-child(5n){animation-delay:.45s;}
@keyframes eq{0%,100%{height:6px;} 50%{height:30px;}}

/* ---------- tables (admin) ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:11.5px;}
.tbl th{text-align:right; color:var(--ink-500); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--line); font-size:10.5px;}
.tbl td{padding:9px 6px; border-bottom:1px solid var(--line); color:var(--ink-900);}
.tbl tr:last-child td{border-bottom:none;}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:4px; background:var(--bg-sunk); border-radius:11px; padding:3px;}
.tabs button{flex:1; border:none; background:none; padding:8px 6px; border-radius:9px; font-size:11.5px; color:var(--ink-500); font-family:inherit; font-weight:600;}
.tabs button.active{background:var(--bg-raised); color:var(--ink-900); box-shadow:var(--shadow-sm);}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--ink-900); color:var(--bg); padding:9px 16px; border-radius:10px; font-size:11.5px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80; white-space:nowrap;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- modal / sheet reused ---------- */
.backdrop{position:fixed; inset:0; background:rgba(20,20,18,.4); opacity:0; pointer-events:none; transition:opacity .22s; z-index:40;}
.any-open .backdrop{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; margin:0 auto; max-width:430px; background:var(--bg-raised);
  border-radius:20px 20px 0 0; transform:translateY(100%); transition:transform .28s cubic-bezier(.22,1,.36,1);
  z-index:50; max-height:78%; display:flex; flex-direction:column;
}
.sheet.open{transform:translateY(0);}
.sheet-handle{width:36px; height:4px; background:var(--line); border-radius:4px; margin:10px auto 4px;}
.sheet-head{display:flex; align-items:center; gap:10px; padding:8px 18px 12px; border-bottom:1px solid var(--line);}
.sheet-head b{font-size:13.5px; color:var(--ink-900); flex:1;}
.sheet-body{padding:14px 18px 24px; overflow-y:auto; font-size:12.5px; line-height:2; color:var(--ink-700);}

::-webkit-scrollbar{width:0;}

/* ---------- marketing / landing page (wide) ---------- */
.mkt-nav{
  position:sticky; top:0; z-index:20; background:rgba(250,249,246,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.mkt-nav .brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px;}
.mkt-nav .brand svg{width:20px; height:20px; color:var(--accent);}
.mkt-nav nav{display:flex; gap:22px; font-size:12.5px; color:var(--ink-700);}
.mkt-wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.mkt-hero{padding:64px 0 40px; text-align:center;}
.mkt-hero h1{font-size:clamp(28px,5vw,44px); line-height:1.5; margin:0 0 16px; font-weight:700;}
.mkt-hero p{font-size:15px; color:var(--ink-700); max-width:560px; margin:0 auto 26px; line-height:2;}
.mkt-cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.mkt-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px;}
.mkt-stats .s{text-align:center; padding:18px 8px; border-radius:16px; background:var(--bg-raised); border:1px solid var(--line);}
.mkt-stats .s .num{font-size:24px; font-weight:700; color:var(--accent);}
.mkt-stats .s .lbl{font-size:11.5px; color:var(--ink-500); margin-top:4px;}
.mkt-section{padding:56px 0;}
.mkt-section h2{font-size:24px; margin:0 0 8px; text-align:center;}
.mkt-section .sub{text-align:center; color:var(--ink-500); font-size:13px; margin:0 0 36px;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; padding:22px;}
.feature-card .ico{width:38px; height:38px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.feature-card .ico svg{width:18px; height:18px;}
.feature-card h3{font-size:14.5px; margin:0 0 8px;}
.feature-card p{font-size:12.5px; color:var(--ink-700); line-height:1.9; margin:0;}
.mkt-footer{border-top:1px solid var(--line); padding:36px 0; text-align:center; color:var(--ink-500); font-size:11.5px;}
.mkt-footer .links{display:flex; gap:18px; justify-content:center; margin-bottom:14px; flex-wrap:wrap;}
@media (max-width:800px){
  .mkt-nav nav{display:none;}
  .mkt-stats{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:1fr;}
}

/* ============================================================
   ارتقا — انیمیشن، مودال مرکزی، حالت تعامل، اسکلت بارگذاری
   ============================================================ */

/* --- ورود/خروج صفحه --- */
@keyframes pageIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.device{animation:pageIn .32s cubic-bezier(.22,1,.36,1);}
body.leaving .device{animation:pageOut .18s ease forwards;}
@keyframes pageOut{to{opacity:0; transform:translateY(-6px);}}

/* --- ورود تدریجی عناصر (stagger) --- */
@keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.card,.stat-card,.list-row,.doc-card,.feature-card,.timeline-item,.filter-chip,.mkt-stats .s{
  animation:riseIn .5s cubic-bezier(.22,1,.36,1) both;
}
#inner > *:nth-child(1){animation-delay:.02s;}
#inner > *:nth-child(2){animation-delay:.06s;}
#inner > *:nth-child(3){animation-delay:.10s;}
#inner > *:nth-child(4){animation-delay:.14s;}
#inner > *:nth-child(5){animation-delay:.18s;}
#inner > *:nth-child(n+6){animation-delay:.22s;}
.stat-grid .stat-card:nth-child(1){animation-delay:.04s;}
.stat-grid .stat-card:nth-child(2){animation-delay:.08s;}
.stat-grid .stat-card:nth-child(3){animation-delay:.12s;}
.list-row{animation-delay:calc(var(--i,0) * 0.045s);}
@media (prefers-reduced-motion:reduce){
  .device,.card,.stat-card,.list-row,.doc-card,.feature-card,.timeline-item,.filter-chip,.mkt-stats .s{animation:none !important;}
}

/* --- ریپل روی دکمه‌ها --- */
.btn,.icon-btn,.filter-chip,.tabbar a{position:relative; overflow:hidden;}
.ripple{position:absolute; border-radius:50%; transform:scale(0); background:currentColor; opacity:.28; pointer-events:none; animation:rippleAnim .55s ease-out forwards;}
@keyframes rippleAnim{to{transform:scale(2.6); opacity:0;}}

/* --- دکمه در حال بارگذاری --- */
.btn.is-loading{color:transparent !important; pointer-events:none; position:relative;}
.btn.is-loading::after{
  content:''; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .6s linear infinite;
}
.btn-outline.is-loading::after,.btn-ghost.is-loading::after{border-color:var(--ink-300); border-top-color:var(--ink-700);}
@keyframes spin{to{transform:rotate(360deg);}}

/* --- لرزش خطای فرم --- */
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both;}

/* --- حالت خطا/موفقیت فیلد --- */
.field.has-error input,.field.has-error textarea{border-color:var(--danger); background:var(--danger-soft);}
.field.has-error .err-msg{display:block;}
.field .err-msg{display:none; font-size:10.5px; color:var(--danger); margin-top:2px;}
.field.has-success input{border-color:var(--success);}
.field .field-ic{position:relative;}
.field .field-ic input{padding-left:38px;}
.field .field-ic svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-500);}

/* --- مودال مرکزی (dialog) --- */
.modal-back{position:fixed; inset:0; background:rgba(20,20,18,.45); opacity:0; pointer-events:none; transition:opacity .22s; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-back.open{opacity:1; pointer-events:auto;}
.modal-box{background:var(--bg-raised); border-radius:20px; max-width:360px; width:100%; padding:22px; transform:scale(.9) translateY(10px); opacity:0; transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .22s;}
.modal-back.open .modal-box{transform:scale(1) translateY(0); opacity:1;}
.modal-box .m-icon{width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;}
.modal-box .m-icon svg{width:24px; height:24px;}
.modal-box h3{font-size:15px; text-align:center; margin:0 0 8px;}
.modal-box p{font-size:12.5px; color:var(--ink-700); text-align:center; line-height:1.9; margin:0 0 18px;}
.modal-box .m-actions{display:flex; gap:8px;}
.modal-box .m-actions .btn{flex:1;}

/* --- خانه‌های کد یک‌بارمصرف (OTP) --- */
.otp-row{display:flex; gap:8px; direction:ltr; justify-content:center;}
.otp-row input{
  width:42px; height:50px; text-align:center; font-size:18px; font-weight:700; border-radius:12px;
  border:1.5px solid var(--line); background:var(--bg-raised); color:var(--ink-900); font-family:inherit; outline:none;
}
.otp-row input:focus{border-color:var(--accent);}

/* --- نشان موفقیت متحرک --- */
.check-circle{width:76px; height:76px; margin:0 auto 16px;}
.check-circle svg{width:100%; height:100%;}
.check-circle .c{fill:none; stroke:var(--success); stroke-width:2.5; stroke-dasharray:166; stroke-dashoffset:166; animation:drawCircle .5s ease forwards;}
.check-circle .t{fill:none; stroke:var(--success); stroke-width:3; stroke-dasharray:48; stroke-dashoffset:48; stroke-linecap:round; stroke-linejoin:round; animation:drawTick .35s .5s ease forwards;}
@keyframes drawCircle{to{stroke-dashoffset:0;}}
@keyframes drawTick{to{stroke-dashoffset:0;}}

/* --- اسکلت بارگذاری --- */
.skel{background:linear-gradient(90deg,var(--bg-sunk) 25%, var(--line) 37%, var(--bg-sunk) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px;}
@keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}

/* --- toast با آیکون --- */
.toast{display:flex; align-items:center; gap:8px;}
.toast svg{width:15px; height:15px; flex-shrink:0;}
.toast.toast-success{background:var(--success);}
.toast.toast-error{background:var(--danger);}

/* --- کلید اختصاصی: بلور امنیتی + ورود --- */
@keyframes keyReveal{from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);}}
.key-box.reveal{animation:keyReveal .4s cubic-bezier(.22,1,.36,1);}
.reveal-blur{filter:blur(6px); transition:filter .3s; user-select:none;}
.reveal-blur.shown{filter:blur(0); user-select:auto;}

/* --- ضربان نرم برای نکات مهم --- */
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,120,60,.35);} 50%{box-shadow:0 0 0 8px rgba(168,120,60,0);}}
.pulse-ring{animation:softPulse 2s infinite;}

/* --- نوار مراحل ثبت‌نام --- */
.step-track{display:flex; align-items:center; gap:6px; margin-bottom:20px;}
.step-track .seg{flex:1; height:4px; border-radius:4px; background:var(--line); overflow:hidden;}
.step-track .seg i{display:block; height:100%; width:0; background:var(--accent); transition:width .4s cubic-bezier(.22,1,.36,1);}
.step-track .seg.done i{width:100%;}
.step-track .seg.active i{width:55%;}

/* --- سوییچ کوچک --- */
.switch{position:relative; width:40px; height:23px; border-radius:20px; background:var(--line); flex-shrink:0; transition:background .2s; display:inline-block;}
.switch::after{content:''; position:absolute; top:2.5px; right:2.5px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.22,1,.36,1);}
.switch.on{background:var(--accent);}
.switch.on::after{transform:translateX(-17px);}

/* --- برند تصویری (لوگو) --- */
.brand-mark-img{width:100%; height:100%; object-fit:contain; border-radius:50%;}
.hero-mark.lg{width:64px; height:64px;}

/* ============================================================
   افزوده‌ها — روش‌های ورود/ثبت‌نام، ارتقای چت، دانش و پادکست
   ============================================================ */

/* --- کارت انتخاب روش ورود/ثبت‌نام --- */
.auth-methods{display:flex; flex-direction:column; gap:10px;}
.auth-method{
  display:flex; align-items:center; gap:12px; width:100%; text-align:right;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:14px;
  padding:13px 14px; font-family:inherit; color:var(--ink-900);
}
.auth-method:active{background:var(--bg-sunk);}
.auth-method .ico{width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.auth-method .ico svg{width:17px; height:17px;}
.auth-method .txt{flex:1; min-width:0;}
.auth-method .txt b{font-size:12.5px; display:block;}
.auth-method .txt span{font-size:10.5px; color:var(--ink-500);}
.auth-method .chev{width:14px; height:14px; color:var(--ink-300); flex-shrink:0;}
.auth-method.google .ico{background:#fff; border:1px solid var(--line);}
.auth-divider{display:flex; align-items:center; gap:10px; color:var(--ink-300); font-size:11px; margin:4px 0;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.back-link{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-500); margin-bottom:10px; background:none; border:none; font-family:inherit;}
.back-link svg{width:13px; height:13px;}

/* --- گیت عضویت (نیازمند ورود) --- */
.gate-wrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 24px; gap:14px;}
.gate-wrap .ico{width:56px; height:56px; border-radius:16px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}
.gate-wrap .ico svg{width:26px; height:26px;}
.gate-wrap h2{font-size:16px; margin:0;}
.gate-wrap p{font-size:12.5px; color:var(--ink-500); line-height:1.9; margin:0; max-width:280px;}
.gate-wrap .row{display:flex; gap:8px; width:100%; max-width:300px; margin-top:6px;}
.gate-wrap .row .btn{flex:1;}

/* --- نشان مدل / وضعیت روی صفحه چت --- */
.model-pill{display:flex; align-items:center; gap:5px; background:var(--bg-sunk); border:1px solid var(--line); border-radius:20px; padding:4px 10px 4px 6px; font-size:10.5px; color:var(--ink-700); width:fit-content; margin:2px auto 0;}
.model-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--success);}

/* --- پیوست‌های آماده‌ی ارسال در نوار ورودی --- */
.attach-preview{display:flex; gap:6px; flex-wrap:wrap; padding:0 4px 6px;}
.attach-chip{display:flex; align-items:center; gap:6px; background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; padding:5px 8px; font-size:10.5px; color:var(--ink-700); max-width:150px;}
.attach-chip svg{width:11px; height:11px; color:var(--accent); flex-shrink:0;}
.attach-chip span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.attach-chip b{cursor:pointer; color:var(--ink-300); font-weight:400; margin-right:2px;}

/* --- دکمه توقف پاسخ‌گویی --- */
.stop-row{display:flex; justify-content:center; padding:2px 0 8px;}
.stop-btn{display:flex; align-items:center; gap:6px; background:var(--bg-raised); border:1px solid var(--line); border-radius:20px; padding:7px 14px; font-size:11.5px; color:var(--ink-700); box-shadow:var(--shadow-sm);}
.stop-btn svg{width:11px; height:11px;}

/* --- عنوان قابل‌ویرایش گفتگو در نوار کناری --- */
.conv-item{cursor:pointer;}
.conv-item .conv-actions{display:none; gap:2px;}
.conv-item:hover .conv-actions, .conv-item.active .conv-actions{display:flex;}
.conv-actions button{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--ink-500); flex-shrink:0;}
.conv-actions button svg{width:11px; height:11px;}
.conv-item input.rename-input{flex:1; background:var(--bg); border:1px solid var(--accent); border-radius:6px; font-size:12px; font-family:inherit; color:var(--ink-900); padding:3px 6px;}

/* --- نشان‌گذاری/اشتراک‌گذاری سند در پایگاه دانش --- */
.doc-card .foot{gap:6px;}
.bk-btn{color:var(--ink-500); background:var(--bg-sunk);}
.bk-btn.saved{color:var(--accent); background:var(--accent-soft);}
.sort-row{display:flex; align-items:center; justify-content:space-between; margin:-4px 0 2px;}
.sort-row select{border:1px solid var(--line); background:var(--bg-raised); border-radius:9px; padding:6px 10px; font-size:11px; color:var(--ink-700); font-family:inherit;}

/* --- کنترل‌های پیشرفته‌ی پادکست --- */
.speed-row{display:flex; gap:6px; justify-content:center; margin-top:14px;}
.speed-chip{background:var(--bg-sunk); border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:11px; color:var(--ink-700);}
.speed-chip.active{background:var(--ink-900); color:var(--bg); border-color:var(--ink-900);}
.podcast-tools{display:flex; gap:8px; margin-top:14px;}
.podcast-tools .btn{flex:1;}
.transcript-box{margin-top:14px; max-height:0; overflow:hidden; transition:max-height .3s ease;}
.transcript-box.open{max-height:600px;}
.transcript-box .inner{padding:14px; font-size:12.5px; line-height:2.1; color:var(--ink-700);}
.transcript-box .inner .tline{margin-bottom:10px;}
.transcript-box .inner .tline b{color:var(--accent); font-weight:600; margin-left:6px; font-size:11px;}
.subscribe-row{display:flex; align-items:center; justify-content:space-between; margin-top:2px;}

/* ============================================================
   ارتقای نویگیشن — الگوی بصری کلود (هدر/فوتر ثابت + منو/زیرمنو/مودال از پایین)
   ============================================================ */

/* --- هدر مارکتینگ: ثابت (sticky) با بلور شیشه‌ای، مثل نوار بالای claude.ai --- */
.mkt-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
  padding:14px 0;
}
.mkt-nav.scrolled{border-bottom-color:var(--line); box-shadow:var(--shadow-sm);}
.mkt-nav nav a{padding:8px 4px; border-radius:8px; transition:color .15s;}
.mkt-nav nav a:hover{color:var(--ink-900);}

/* --- دکمه همبرگری (فقط موبایل) --- */
.menu-btn{display:none; width:34px; height:34px; border-radius:9px; align-items:center; justify-content:center; background:none; border:none; color:var(--ink-900); flex-shrink:0;}
.menu-btn svg{width:20px; height:20px;}
@media (max-width:760px){
  .menu-btn{display:flex;}
  /* رفع لرزش/پرش هدر مارکتینگ حین اسکرول در کروم اندروید: ترکیب backdrop-filter
     با position:sticky در برخی مرورگرهای موبایل باعث ری‌پینت ناپایدار می‌شود. */
  .mkt-nav{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg);}
}

/* --- دراپ‌داون سبک کلود: کارت گرد با سایه نرم، باز شونده با فید+اسکیل --- */
.dropdown{position:relative; display:inline-flex;}
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:6px; z-index:70;
  opacity:0; visibility:hidden; transform:scale(.94) translateY(-6px); transform-origin:top left;
  transition:opacity .16s ease, transform .16s cubic-bezier(.22,1,.36,1), visibility .16s;
}
.dropdown-menu.dd-right{left:auto; right:0; transform-origin:top right;}
.dropdown.open .dropdown-menu{opacity:1; visibility:visible; transform:scale(1) translateY(0);}
.dropdown-menu .dd-label{font-size:10.5px; color:var(--ink-300); font-weight:600; padding:9px 12px 4px;}
.dropdown-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right;
  padding:9px 11px; border-radius:11px; font-size:12.5px; color:var(--ink-900);
  background:none; border:none; font-family:inherit; position:relative;
}
.dropdown-item:hover, .dropdown-item:active{background:var(--bg-sunk);}
.dropdown-item svg{width:16px; height:16px; color:var(--ink-500); flex-shrink:0;}
.dropdown-item .arrow{width:12px; height:12px; color:var(--ink-300); margin-right:auto; transform:rotate(180deg);}
.dropdown-sep{height:1px; background:var(--line); margin:5px 4px;}

/* --- زیرمنوی تودرتو (submenu) که با هاور/کلیک به‌صورت فلای‌اوت باز می‌شود --- */
.has-sub{position:relative;}
.submenu{
  position:absolute; top:-6px; left:calc(100% + 8px); min-width:190px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:6px; z-index:80;
  opacity:0; visibility:hidden; transform:scale(.94); transform-origin:top left;
  transition:opacity .15s ease, transform .15s cubic-bezier(.22,1,.36,1), visibility .15s;
}
.has-sub.open .submenu{opacity:1; visibility:visible; transform:scale(1);}
@media (max-width:760px){
  .submenu{position:static; box-shadow:none; border:none; background:var(--bg-sunk); margin:2px 10px 4px; max-height:0; overflow:hidden; opacity:1; visibility:visible; transform:none; transition:max-height .2s ease; padding:0;}
  .has-sub.open .submenu{max-height:220px; padding:4px;}
  .has-sub > .dropdown-item .arrow{transform:rotate(90deg); transition:transform .2s;}
  .has-sub.open > .dropdown-item .arrow{transform:rotate(-90deg);}
}

/* --- منوی حساب کاربری در هدر برنامه (مثل منوی گوشه‌ی بالا در claude.ai) --- */
.acct-btn{width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:none; flex-shrink:0;}
.acct-menu{min-width:230px;}
.acct-head{display:flex; align-items:center; gap:10px; padding:8px 10px 10px;}
.acct-head .av{width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0;}
.acct-head b{font-size:12.5px; display:block;}
.acct-head span{font-size:10.5px; color:var(--ink-500);}

/* --- منوی موبایل تمام‌عرض که از پایین بالا می‌آید (bottom sheet) --- */
.mobile-menu-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:75;
  background:var(--bg-raised); border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg);
  padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%); transition:transform .3s cubic-bezier(.22,1,.36,1);
  max-height:82vh; overflow-y:auto;
}
.mobile-menu-sheet.open{transform:translateY(0);}
.mobile-menu-sheet .sheet-handle{width:36px; height:4px; border-radius:4px; background:var(--line); margin:0 auto 14px;}
.mobile-menu-sheet .mm-link{display:flex; align-items:center; gap:12px; padding:13px 6px; font-size:14px; color:var(--ink-900); border-bottom:1px solid var(--line);}
.mobile-menu-sheet .mm-link:last-of-type{border-bottom:none;}
.mobile-menu-sheet .mm-link svg{width:18px; height:18px; color:var(--ink-500);}
.mobile-menu-sheet .mm-actions{display:flex; gap:10px; margin-top:16px;}
.mobile-menu-sheet .mm-actions .btn{flex:1;}

/* --- نوار پایین ثابت برای صفحات مارکتینگ در موبایل (هم‌راستا با tabbar برنامه) --- */
.mkt-tabbar{display:none;}
@media (max-width:760px){
  .mkt-tabbar{
    display:flex; position:sticky; bottom:0; left:0; right:0; z-index:50;
    background:var(--bg-raised); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .mkt-tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; color:var(--ink-500); font-size:10px; border-radius:10px;}
  .mkt-tabbar a svg{width:19px; height:19px;}
  .mkt-tabbar a.active{color:var(--accent);}
  /* قبلاً این فاصله فقط با body.has-mkt-tabbar فعال می‌شد که هیچ‌جا اضافه نمی‌شد،
     در نتیجه نوار پایین ثابت روی آخرین بخش محتوا (فوتر) می‌افتاد. */
  #footer-spacer{display:block; height:66px;}
}

/* --- مودال گیت عضویت (ارسال پیام در چت) — شیت پایین‌روی جذاب --- */
.gate-sheet .gate-wrap{padding:26px 22px 8px;}
.gate-sheet .gate-wrap .ico{width:60px; height:60px; box-shadow:0 0 0 8px var(--accent-soft);}
.gate-sheet .gate-badges{display:flex; flex-direction:column; gap:9px; width:100%; max-width:300px; margin-top:4px;}
.gate-sheet .gate-badge{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-700); text-align:right;}
.gate-sheet .gate-badge svg{width:16px; height:16px; color:var(--success); flex-shrink:0;}

/* ============================================================
   QASAM DESIGN SYSTEM v5 — Unified mobile shell
   One visual language across chat, dashboard, knowledge, podcast,
   community, auth and marketing pages.
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.72);
  --glass-shadow:0 16px 42px rgba(55,44,29,.10);
}

html{background:#ded9cf;scroll-behavior:smooth;}
body{background:#ded9cf;min-height:100vh;}
.device{
  position:relative;isolation:isolate;min-height:100vh;
  background-color:#eeeae1;
  background-image:
    linear-gradient(180deg,rgba(250,249,246,.30) 0%,rgba(250,249,246,.47) 44%,rgba(250,249,246,.72) 100%),
    url('images/bg-portrait.webp');
  background-size:cover, min(100%, 860px);
  background-position:center, center bottom;
  background-repeat:no-repeat;
  background-attachment:scroll,scroll;
}
.device::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.22),transparent 42%);}

/* fixed app header */
header.app-header{
  position:fixed!important;top:10px;left:50%;transform:translateX(-50%);
  width:min(430px,calc(100% - 20px));z-index:100;
  margin:0;border:1px solid var(--glass-line)!important;border-radius:20px;
  background:rgba(255,255,255,.62)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 30px rgba(53,43,29,.09),inset 0 1px 0 rgba(255,255,255,.72);
}
#scroll{padding-top:86px!important;padding-bottom:92px!important;}

/* fixed app footer */
.tabbar{
  position:fixed!important;left:50%;right:auto;bottom:0;transform:translateX(-50%);
  width:min(430px,100vw);z-index:100;flex-shrink:0;
  border:1px solid rgba(255,255,255,.72);border-bottom:0;border-radius:22px 22px 0 0;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 -10px 32px rgba(53,43,29,.09),inset 0 1px 0 rgba(255,255,255,.85);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
}
.tabbar a{min-height:46px;transition:transform .16s,background .16s,color .16s;}
.tabbar a.active{background:rgba(242,233,219,.72);color:var(--accent);}
.tabbar a:active{transform:scale(.96);}

/* universal glass surfaces */
.card,.stat-card,.feature-card,.doc-card,.list-row,.pc-card,.pc-archive,.pc-empty{
  background:var(--glass)!important;border-color:var(--glass-line)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.70);
}
.card{border-radius:22px;}
.stat-card{border-radius:18px;}
.feature-card{border-radius:22px;}
.list-row{border-radius:16px;margin:4px 0;}
input,textarea,select{background:rgba(255,255,255,.66)!important;border-color:rgba(125,112,92,.16)!important;}
input:focus,textarea:focus,select:focus{background:rgba(255,255,255,.82)!important;box-shadow:0 0 0 3px rgba(168,120,60,.10);}
.btn-primary{box-shadow:0 10px 24px rgba(133,91,42,.16);}

/* marketing shell */
.mkt-nav{
  position:fixed!important;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.66)!important;border-bottom:1px solid rgba(255,255,255,.68)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 8px 28px rgba(53,43,29,.06);
}
.mkt-wrap{padding-top:84px;}
.mkt-hero{padding-top:44px;}
.mkt-stats .s,.feature-card{background:var(--glass)!important;}
.mkt-footer{background:rgba(255,255,255,.30);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top-color:rgba(255,255,255,.65);}
.mkt-tabbar{
  position:fixed!important;left:50%;right:auto;bottom:0;transform:translateX(-50%);
  width:min(430px,100vw);z-index:100;border-radius:22px 22px 0 0;
  background:rgba(255,255,255,.80)!important;border:1px solid rgba(255,255,255,.75);border-bottom:0;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 -10px 32px rgba(53,43,29,.09);
}

/* pre-auth pages get the same mobile footer */
.pre-auth-tabbar{display:none;}
@media(max-width:760px){
  .pre-auth-tabbar{
    display:flex;position:fixed;left:50%;bottom:0;transform:translateX(-50%);
    width:min(430px,100vw);z-index:100;
    background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.75);border-bottom:0;border-radius:22px 22px 0 0;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 -10px 32px rgba(53,43,29,.09);padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
  }
  .pre-auth-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;min-height:46px;color:var(--ink-500);font-size:10px;border-radius:12px;}
  .pre-auth-tabbar a.active{color:var(--accent);background:rgba(242,233,219,.72);}
  .pre-auth-tabbar svg{width:19px;height:19px;}
  body:has(.pre-auth-tabbar) #scroll{padding-bottom:94px!important;}
}

/* podcast previously had no bottom navigation */
.pc-page{padding-bottom:92px!important;}

/* admin becomes visually consistent without touching its JS/data layer */
.admin-panel .card,.admin-panel .stat-card{border-radius:20px;}
.main-tabs{background:rgba(255,255,255,.66)!important;border-color:rgba(255,255,255,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}

@media(max-width:760px){
  body{overflow-x:hidden;}
  .device{width:100%;max-width:430px;overflow:hidden;}
  .device.wide{max-width:430px;margin:0 auto;}
  .mkt-wrap{padding-left:14px;padding-right:14px;padding-top:78px;}
  .mkt-hero{padding-top:30px;}
  .mkt-section{padding:38px 0;}
  .mkt-stats{gap:9px!important;}
  .feature-grid{gap:12px!important;}
  .feature-card{padding:17px!important;}
  .mkt-footer{padding-bottom:88px;}
}
@media(min-width:761px){
  .device.wide{min-height:100vh;}
}

/* v5 viewport behavior: sticky on desktop, truly fixed on mobile */
@media(min-width:761px){
  header.app-header{position:sticky!important;top:0;left:auto;transform:none;width:100%;margin:0;border-radius:0;}
  #scroll{padding-top:18px!important;}
  .mkt-nav{position:sticky!important;top:0;left:auto;right:auto;}
  .mkt-wrap{padding-top:0;}
  .mkt-tabbar{position:sticky!important;left:auto;transform:none;width:100%;border-radius:0;}
}
@media(max-width:760px){
  .mkt-tabbar a.active{color:var(--accent);background:rgba(242,233,219,.72);border-radius:12px;}
  .mkt-nav .brand{font-size:16px;}
  .mkt-nav{padding-top:10px;padding-bottom:10px;}
}



/* Profile modal must appear above the open right sidebar/mobile menu. */
.modal-back {
  z-index:200!important;
}
.modal-back .modal-box {
  position:relative;
  z-index:201;
}


/* Definitive stacking order: backdrop < right sidebar < profile/account sheet < modal. */
.backdrop { z-index:100!important; }
.drawer { z-index:200!important; }
.mobile-menu-sheet { z-index:210!important; }
.sheet { z-index:300!important; }
.modal-back { z-index:400!important; }
.modal-back .modal-box { position:relative; z-index:401!important; }
/* QASAM 2.0 — application header search */
.search-head-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:var(--ink-soft,#4b4945);border:1px solid var(--line,#e3dfd8);background:var(--raised,#fff);flex:0 0 40px;transition:.15s}
.search-head-btn:hover{background:var(--soft,#f0ede8);color:var(--accent,#b68b5c);border-color:var(--accent-dim,#dacfbf)}
.search-head-btn svg{width:19px;height:19px}
@media(max-width:760px){.search-head-btn{width:36px;height:36px;flex-basis:36px;border-radius:11px}.search-head-btn svg{width:18px;height:18px}}