/* ═══════════════════════════════════════════════════════════════════════════
 *  v430 · متن و برچسب روی استوری — ظاهر 359 (v432: کاشی‌های ابزار و نماد خود هارتلی): دکمه‌های «Aa» و برچسب در صفحهٔ پیش از انتشار، لایه‌ها روی عکس،
 *  صفحهٔ نوشتن (#tx430) و سینی برچسب (#st430، همان شیت نیمه‌صفحهٔ 356/358 روی گوشی، کارت وسط روی دسکتاپ).
 *  هم‌خانوادهٔ 358: کاغذ #FBFAFD، جوهر #1b1029، اقدام = گرادیان صورتی←بنفش. بی @keyframes بی‌پایان، بی :has.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ ۱) صفحهٔ پیش از انتشار ═══════════════ */
#sc426{ touch-action:none }
.sc430-tools{ display:flex; gap:8px; margin-inline-end:8px }
.sc430-ib{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:#fff; color:#1b1029; cursor:pointer; box-shadow:0 10px 26px -10px rgba(0,0,0,.55); transition:transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.sc430-ib:active{ transform:scale(.92) }
.sc430-ib b{ font:900 17px/1 Vazirmatn, system-ui, sans-serif; letter-spacing:-.02em }
.sc430-ib svg{ width:21px; height:21px }
.sc430-ib:focus-visible{ outline:2.5px solid #fff; outline-offset:3px }
#sc426.busy .sc430-ib{ opacity:.5 }

.sc430-box{ position:absolute; inset:0; z-index:3; pointer-events:none }
.ly430{
  position:absolute; pointer-events:auto; touch-action:none; cursor:grab; transform-origin:50% 50%;
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; transition:opacity .15s, filter .15s;
}
.ly430:active{ cursor:grabbing }
.ly430:focus-visible{ outline:2px dashed rgba(255,255,255,.9); outline-offset:4px }
.ly430.bin{ opacity:.45; filter:saturate(.4) }
.ly430.hid{ opacity:0 }
#sc426.sub .sc430-box, #sc426.busy .sc430-box{ pointer-events:none }
#sc426.sub .sc430-box{ opacity:0 }
#sc426.busy .ly430{ pointer-events:none }
#sc426.o430 .sc426-top, #sc426.o430 .sc426-bot, #sc426.o430 .sc426-hint{ opacity:0; pointer-events:none }

/* ═══════════════ ۲) صفحهٔ نوشتن و منشن/هشتگ/مکان ═══════════════ */
#tx430{
  --c:#fff; --fg:#111; --nc:#fff; --fs:34px; --al:center;
  position:fixed; inset:0; z-index:10070; display:flex; flex-direction:column; color:#fff;
  background:rgba(12,8,22,.62); animation:tx430in .18s ease; font-family:Vazirmatn, system-ui, sans-serif;
}
#tx430.out{ opacity:0; transition:opacity .15s }
@keyframes tx430in{ from{ opacity:0 } }
.tx430-top{ display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 8px }
.tx430-sp{ flex:1 }
.tx430-b{
  height:40px; min-width:40px; padding:0 14px; display:grid; place-items:center; border:0; border-radius:99px;
  background:rgba(255,255,255,.18); color:#fff; font:800 14px/1 Vazirmatn, system-ui, sans-serif; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .12s, background-color .12s;
}
.tx430-b.al{ padding:0 }
.tx430-b svg{ width:20px; height:20px }
.tx430-b:active{ transform:scale(.94); background:rgba(255,255,255,.28) }
.tx430-ok{
  height:44px; padding:0 18px; display:flex; align-items:center; gap:6px; border:0; border-radius:99px; cursor:pointer;
  background:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%); color:#fff; font:900 14.5px/1 Vazirmatn, system-ui, sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(70,10,90,.24), 0 10px 22px -10px rgba(171,48,178,.75);
  transition:transform .12s;
}
.tx430-ok svg{ width:18px; height:18px; stroke-width:2.6 }
.tx430-ok:active{ transform:translateY(1px) scale(.97) }
.tx430-tt{ font-size:16px; font-weight:900 }
.tx430-cols{ display:flex; gap:12px; overflow-x:auto; padding:6px 16px 10px; scrollbar-width:none }
.tx430-cols::-webkit-scrollbar{ display:none }
.tx430-c{
  position:relative; flex:0 0 30px; width:30px; height:30px; padding:0; border:3px solid #fff; border-radius:50%;
  background:var(--c); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .12s;
}
.tx430-c::after{ content:""; position:absolute; inset:-9px }
.tx430-c.on{ transform:scale(1.22) }
.tx430-mid{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 24px 0 56px }
.tx430-in{
  width:100%; max-width:560px; max-height:55vh; margin:0; padding:.12em .42em; border:0; outline:0; resize:none; overflow:auto;
  background:transparent; color:var(--c); caret-color:#fff; text-align:var(--al); border-radius:calc(var(--fs) * .3);
  font:800 var(--fs)/1.3 Vazirmatn, system-ui, sans-serif; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.tx430-in::placeholder{ color:rgba(255,255,255,.55) }
#tx430.s0 .tx430-in{ text-shadow:0 2px 6px rgba(0,0,0,.4) }
#tx430.s1 .tx430-in{ background:var(--c); color:var(--fg); caret-color:var(--fg) }
#tx430.s1 .tx430-in::placeholder{ color:var(--fg); opacity:.55 }
#tx430.s2 .tx430-in{ color:var(--nc); text-shadow:0 0 .16em var(--c), 0 0 .5em var(--c), 0 0 .9em var(--c) }
#tx430.s3 .tx430-in{ background:rgba(0,0,0,.46); font-weight:600 }
#tx430.s4 .tx430-in{ color:var(--hc, #FF5C8A); font-weight:900; -webkit-text-stroke:.07em #fff; paint-order:stroke fill; text-shadow:0 2px 8px rgba(0,0,0,.3) }
/* اندازه: نوار عمودی سمت چپ */
.tx430-sz{
  position:absolute; left:-62px; top:50%; width:170px; height:28px; margin:0; transform:rotate(-90deg);
  accent-color:#fff; cursor:pointer; opacity:.92;
}
/* منشن / هشتگ / مکان: یک قرص سفید با پیشوند رنگی */
.tx430-pill{
  display:flex; align-items:center; gap:8px; max-width:min(92vw, 420px); padding:10px 18px; border-radius:16px;
  background:#fff; box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
}
.tx430-pre{
  flex:0 0 auto; display:grid; place-items:center; font:900 30px/1 Vazirmatn, system-ui, sans-serif; font-style:normal;
  background:linear-gradient(135deg, var(--g1, #F59E0B), var(--g2, #EC4899)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#tx430.at{ --g1:#F59E0B; --g2:#EC4899 }
#tx430.tag{ --g1:#7C3AED; --g2:#DB2777 }
#tx430.loc{ --g1:#8B5CF6; --g2:#D946EF }
#tx430.loc .tx430-pre{ color:#A855F7; background:none }
.tx430-pre svg{ width:28px; height:28px }
.tx430-one{
  flex:1; min-width:120px; height:40px; border:0; outline:0; background:none; color:#1b1029; caret-color:#7C3AED;
  font:800 26px/1 Vazirmatn, system-ui, sans-serif;
}
.tx430-one::placeholder{ color:#A39CB4 }
.tx430-b:focus-visible, .tx430-ok:focus-visible, .tx430-c:focus-visible{ outline:2.5px solid #fff; outline-offset:2px }
@media (min-width:600px){ .tx430-mid{ padding:0 48px 0 80px } .tx430-sz{ left:-40px } }

/* ═══════════════ ۳) سینی برچسب ═══════════════ */
#st430{
  --ink:#1b1029; --ink2:#3E3553; --mute:#6B6480; --paper:#FBFAFD; --fill:#F1EEF5; --fill2:#E6E1EE;
  position:fixed; inset:0; z-index:10052; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(246,244,250,.94); animation:tx430in .2s ease;
}
#st430.out{ opacity:0; transition:opacity .2s }
.st430-dim{ display:none }
.st430-p{
  position:relative; width:100%; max-width:520px; height:min(86vh, 760px); display:flex; flex-direction:column;
  padding:10px 0 env(safe-area-inset-bottom); border-radius:28px 28px 0 0; color:var(--ink); background:var(--paper);
  box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -8px 28px -12px rgba(27,16,41,.2);
}
.st430-grab{ display:block; flex:0 0 auto; width:36px; height:5px; margin:0 auto 10px; padding:0; border:0; border-radius:99px; background:#DAD5E2; cursor:default }
.st430-hd{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:2px 16px 12px; padding-inline-start:18px }
.st430-hd b{ display:flex; align-items:center; gap:11px; font-size:22px; font-weight:900; line-height:1.2 }
.st430-hd b svg{
  box-sizing:border-box; flex:0 0 auto; width:34px; height:34px; padding:7px; border-radius:11px; color:#fff;
  background:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px rgba(171,48,178,.8);
}
.st430-ib{ width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--fill); color:var(--ink); cursor:pointer; transition:transform .12s }
.st430-ib svg{ width:20px; height:20px }
.st430-ib:active{ transform:scale(.92); background:var(--fill2) }
.st430-list{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 14px 22px }
/* v432: کاشی‌های ابزار (چهارتایی، نشان گرادیانی بالای نام) — شکل خود هارتلی، نه ردیف قرص‌ها */
.st430-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:4px 0 6px }
.st430-tile{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 4px 10px; border:0; border-radius:20px; cursor:pointer;
  background:#fff; color:var(--ink); font:800 12.5px/1.2 Vazirmatn, system-ui, sans-serif;
  box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 8px 18px -12px rgba(27,16,41,.4); transition:transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.st430-tile i{
  width:46px; height:46px; display:grid; place-items:center; border-radius:16px; color:#fff; font:900 22px/1 Vazirmatn, system-ui, sans-serif; font-style:normal;
  background:linear-gradient(135deg, var(--g1, #DB2777), var(--g2, #7C3AED));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 16px -8px var(--g2, #7C3AED);
}
.st430-tile i svg{ width:22px; height:22px }
.st430-tile span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.st430-tile:active{ transform:scale(.95) }
.st430-h{ margin:18px 4px 8px; font-size:13px; font-weight:900; color:var(--mute) }
.st430-art{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; min-height:84px }
.st430-a, .st430-e{
  display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; border-radius:16px;
  -webkit-tap-highlight-color:transparent; transition:transform .12s, background-color .12s;
}
.st430-a{ height:88px }
.st430-a canvas{ pointer-events:none }
.st430-emo{ display:grid; grid-template-columns:repeat(6, 1fr); gap:2px }
.st430-e{ height:52px; font:34px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif }
.st430-a:active, .st430-e:active{ transform:scale(.9); background:var(--fill) }
.st430-tile:focus-visible, .st430-a:focus-visible, .st430-e:focus-visible, .st430-ib:focus-visible{ outline:2.5px solid var(--ink); outline-offset:2px }
@media (hover:hover){
  .st430-a:hover, .st430-e:hover{ background:var(--fill) }
  .st430-tile:hover{ background:#F7F5FA }
}
/* گوشی: شیت نیمه‌صفحه (کلاس .sh428 را sheet() ِ 356 می‌گذارد) */
@media (max-width:599.98px){
  #st430.sh428{ background:transparent; animation:none }
  #st430.sh428.out{ opacity:1 }
  #st430.sh428 .st430-dim{ display:block; position:absolute; inset:0; background:rgba(17,10,28,.5); opacity:0 }
  #st430.sh428 .st430-p{
    height:calc(100% - 44px - env(safe-area-inset-top, 0px)); padding-top:0; will-change:transform;
    box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -16px 40px -16px rgba(17,10,28,.5);
  }
  #st430.sh428 .st430-p::after{ content:""; position:absolute; left:0; right:0; top:100%; height:50vh; background:var(--paper); pointer-events:none }
  #st430.sh428 .st430-grab{ position:relative; width:100%; height:28px; margin:0; background:none; border-radius:28px 28px 0 0; touch-action:none; cursor:pointer }
  #st430.sh428 .st430-grab::before{ content:""; position:absolute; left:50%; top:10px; width:40px; height:5px; margin-left:-20px; border-radius:99px; background:#D5CFDF }
  #st430.sh428 .st430-hd{ touch-action:none }
}
@media (min-width:600px){
  #st430{ align-items:center }
  .st430-p{ border-radius:28px; height:min(80vh, 720px); box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 30px 70px -24px rgba(27,16,41,.35) }
  .st430-art{ grid-template-columns:repeat(5, 1fr) }
  .st430-emo{ grid-template-columns:repeat(8, 1fr) }
}
@media (prefers-reduced-motion:reduce){
  #tx430, #st430{ animation:none }
  .sc430-ib, .tx430-b, .tx430-ok, .tx430-c, .st430-tile, .st430-a, .st430-e, .st430-ib{ transition:none }
}