/* پوستهٔ ادیتور — دارکِ تلگرام، فارسی و راست‌چین. */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:#17191C; color:#fff;
  font-family:"Vazirmatn",-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif; direction:rtl}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
a{color:#62A0FF}
.stage{position:sticky; top:0; z-index:20; background:#0E0F11; border-bottom:1px solid #26292E;
  padding:10px 0 8px; display:flex; flex-direction:column; align-items:center; gap:8px}
.frame{position:relative; overflow:hidden; border-radius:26px; box-shadow:0 8px 28px rgba(0,0,0,.5)}
.frame > .phone{transform-origin:top right; position:absolute; top:0; right:0}
.stagebar{display:flex; gap:8px; align-items:center; font-size:13px; color:#8A9099}
.zoom{display:flex; gap:6px}
.chip{background:#23262B; color:#C9CFD6; border:0; border-radius:14px; padding:5px 12px; font:inherit; font-size:13px}
.chip.on{background:#3E9BFF; color:#fff}

.tabs{display:flex; gap:6px; padding:10px 12px 4px; position:sticky; top:0; z-index:10; background:#17191C}
.tabs button{flex:1; background:#23262B; color:#C9CFD6; border:0; border-radius:12px; padding:10px 0;
  font:inherit; font-size:14px; font-weight:600}
.tabs button.on{background:#3E9BFF; color:#fff}
.panel{padding:8px 12px 16px; display:none} .panel.on{display:block}

.card{background:#1E2126; border:1px solid #282C32; border-radius:14px; padding:10px 12px; margin-bottom:10px}
.card h3{margin:0 0 8px; font-size:14px; color:#9AA2AC; font-weight:600}
.f{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #24272C}
.f:last-child{border-bottom:0}
.f label{flex:0 0 108px; font-size:14px; color:#B9C0C8}
.f input[type=text],.f input[type=number],.f select,.f textarea{
  flex:1; min-width:0; background:#121417; color:#fff; border:1px solid #2C3037; border-radius:10px;
  padding:9px 10px; font:inherit; font-size:15px}
.f textarea{resize:vertical; min-height:64px; line-height:1.6}
.f input[type=color]{width:44px; height:32px; background:none; border:1px solid #2C3037; border-radius:8px; padding:2px}
.f input[type=range]{flex:1; accent-color:#3E9BFF}
.sw{position:relative; width:50px; height:30px; background:#3A3F46; border-radius:15px; transition:.15s; flex:none}
.sw.on{background:#3E9BFF}
.sw::after{content:""; position:absolute; top:3px; right:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition:.15s}
.sw.on::after{transform:translateX(-20px)}
.hint{font-size:12px; color:#7C838C; margin:-2px 0 6px}

.msglist{display:flex; flex-direction:column; gap:6px}
.mi{display:flex; align-items:center; gap:8px; background:#1E2126; border:1px solid #282C32;
  border-radius:12px; padding:8px 10px}
.mi.sel{border-color:#3E9BFF}
.mi .side{font-size:11px; color:#8A9099; flex:none; width:26px; text-align:center}
.mi .txt{flex:1; min-width:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mi .t{font-size:12px; color:#7C838C; flex:none}
.mi .act{display:flex; gap:2px}
.mi .act button{background:#262A30; border:0; color:#C9CFD6; border-radius:8px; width:30px; height:30px; font-size:15px}
.add{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px}
.add button{background:#23262B; border:0; color:#DCE2E8; border-radius:12px; padding:11px 0; font:inherit; font-size:13px}

.bottom{position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#0E0F11; border-top:1px solid #26292E}
.bottom button{flex:1; border:0; border-radius:14px; padding:13px 0; font:inherit; font-size:15px; font-weight:700}
.b1{background:#3E9BFF; color:#fff} .b2{background:#23262B; color:#DCE2E8}

.sheet{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55); display:none; align-items:flex-end}
.sheet.on{display:flex}
.sheet .box{width:100%; max-height:88vh; overflow:auto; background:#1A1D21; border-radius:18px 18px 0 0;
  padding:12px 12px calc(20px + env(safe-area-inset-bottom))}
.sheet h2{margin:2px 0 10px; font-size:16px}
.sheet .close{position:absolute; left:14px; top:-38px; background:#23262B; border:0; color:#fff;
  width:34px; height:34px; border-radius:50%; font-size:18px}
.thumbs{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.thumbs .th{position:relative; width:58px; height:58px; border-radius:8px; overflow:hidden; background:#121417}
.thumbs .th img{width:100%; height:100%; object-fit:cover}
.thumbs .th button{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.65); color:#fff; border:0; font-size:11px; line-height:1}
.toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); background:#2B2F36; color:#fff;
  padding:10px 16px; border-radius:20px; font-size:14px; z-index:60; opacity:0; transition:.2s; pointer-events:none}
.toast.on{opacity:1}
.scenes{display:flex; flex-direction:column; gap:6px}
.scene{display:flex; align-items:center; gap:8px; background:#1E2126; border:1px solid #282C32;
  border-radius:12px; padding:10px}
.scene .n{flex:1; font-size:14px}
.scene .d{font-size:11px; color:#7C838C}
.out img{width:100%; border-radius:14px; display:block}