/* ================================================================
   ریموٹ ورک اسٹیشن — فون پہلے۔

   چھ انچ کی اسکرین پر پانچ چیزیں سماتی ہیں، اِس لیے یہاں بےرحمی سے
   ترتیب ہے۔ اجازت کی پٹی سب سے نیچے چپکی ہوئی ہے — وہی واحد فوری چیز
   ہے، اور انگوٹھا وہیں پہنچتا ہے۔

   رنگ اور شکل ریموٹ ورک کے اپنے ڈیزائن سے۔
   ================================================================ */

/* ================================================================
   یہ ایک سطر پوری ایپ کو دکھنے کے قابل بناتی ہے — اِسے کبھی نہ ہٹائیں۔

   صفحہ ہر چیز چھپانے اور دکھانے کے لیے HTML کا `hidden` خاصہ استعمال
   کرتا ہے (`el.hidden = true`)۔ مگر `hidden` کا `display:none` براؤزر
   کی **اپنی** طے شدہ شیٹ میں ہوتا ہے، اور وہ ہماری لکھی ہوئی کسی بھی
   سطر سے کمزور ہے۔ سو جس عنصر کے کلاس میں `display` لکھا ہو، اُس پر
   `hidden` کا کوئی اثر نہیں ہوتا۔

   اور اِس ایپ میں دس چھپنے والے عناصر میں سے **سات** ایسے ہی تھے:
   `.pair` (grid) · `.wrap` (flex) · `.sheet` (flex — یعنی «سیٹ اپ» اور
   «نیا کام» دونوں) · `.ask` (flex) · `.reasons` (grid) · `.confirm`
   (flex — دونوں تصدیق کی پٹیاں)۔

   نتیجہ خاموش نہیں تھا، بلکہ ایپ ہی ناقابلِ استعمال تھی: ملاپ کے بعد
   ایپ **نیچے کھل جاتی** مگر ملاپ کا صفحہ (`position:fixed; inset:0;
   z-index:60;` اور غیر شفاف پس منظر) پوری سکرین پر چڑھا رہتا۔ صارف
   کو یہی لگتا کہ ملاپ ناکام ہوا، سو وہ بار بار جوڑتا رہتا — اور ہر
   کوشش کھاتے میں ایک نئی ڈیوائس جوڑ دیتی۔

   یہ خرابی جانچوں سے نہیں پکڑی جا سکتی تھی: اِس پروجیکٹ کی ہر جانچ
   پائتھون اور HTTP کی سطح پر ہے، اور سرور اِس صورت میں بالکل درست جواب
   دے رہا ہوتا ہے۔ اِس لیے `tests/test_web_hidden.py` اب اِسی سطر کی
   موجودگی کی پہرہ داری کرتی ہے۔
   ================================================================ */
[hidden] { display: none !important; }

:root {
  --bg:#0b0d11; --surface:#12151b; --raised:#171b22; --hover:#1c212a;
  --line:#232935; --line-soft:#1b2029;
  --ink:#e9edf3; --ink-2:#b3bcca; --dim:#7c8695; --faint:#545d6b;
  --accent:#7c6cff; --accent-2:#a08fff; --accent-bg:rgba(124,108,255,.13);
  --ok:#3ddc97; --ok-bg:rgba(61,220,151,.12);
  --warn:#f5b544; --warn-bg:rgba(245,181,68,.12);
  --bad:#ff6b6b; --bad-bg:rgba(255,107,107,.12);
  --r-sm:7px; --r:11px; --r-lg:16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* اونچائی `100%` نہیں: iOS سفاری میں layout viewport براؤزر کی اُس پٹی کو
   شمار نہیں کرتا جو سکرول پر چھپتی اور واپس آتی ہے۔ نتیجہ خاموش ہوتا ہے —
   «بھیجو» اور «کام بند کرو» والی سطر براؤزر کی پٹی کے *نیچے* چلی جاتی ہے،
   نظر آتی ہے مگر دبتی نہیں۔ `100dvh` وہی ناپ ہے جو پٹی کے ساتھ بدلتا ہے۔
   `100vh` پہلے رہنے دیا ہے: جو پرانا براؤزر `dvh` نہیں سمجھتا وہ اُسے
   نظرانداز کر کے اِسی پر رہ جائے، ورنہ اونچائی بالکل ہی نہ ملے۔ */
html,body { margin:0; padding:0; height:100vh; height:100dvh;
             overscroll-behavior:none; }
body {
  background:var(--bg); color:var(--ink);
  /* «Noto Nastaliq Urdu» جان بوجھ کر پہلے ہے، مگر ایپ اُسے **کہیں سے
     منگاتی نہیں** — نہ کوئی `@font-face`، نہ کوئی فونٹ فائل (پالیسی: ایک
     ہی اصل، باہر سے کچھ نہیں)۔ سو یہ صرف اُس ڈیوائس پر لگتا ہے جس میں
     پہلے سے موجود ہو (اکثر ونڈوز کی مشین)؛ عام فون پر خاموشی سے اگلا
     نام لگ جاتا ہے یعنی نظام کا نسخ۔ اِسے ہٹایا نہیں کیونکہ جہاں موجود
     ہے وہاں پڑھنا واقعی بہتر ہوتا ہے — مگر یہ تبصرہ رہنے دیں تاکہ کوئی
     یہ نہ سمجھے کہ نستعلیق ہر جگہ آ رہا ہے۔ */
  font:15px/1.65 "Noto Nastaliq Urdu","Segoe UI","Jameel Noori Nastaleeq",
       system-ui,-apple-system,sans-serif;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------------------------------------------------------- ملاپ */

.pair { position:fixed; inset:0; display:grid; place-items:center;
        background:var(--bg); padding:24px; z-index:60; }
.pair-box { width:100%; max-width:380px; text-align:center; }
.pair-logo { width:56px; height:56px; margin:0 auto 18px; border-radius:14px;
             background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.pair h1 { font-size:20px; margin:0 0 10px; }
.pair p { color:var(--dim); font-size:13.5px; margin:0 0 20px; line-height:1.9; }
.pair input { width:100%; margin-bottom:10px; padding:14px 16px;
              background:var(--surface); border:1px solid var(--line);
              border-radius:var(--r); }
#pair-code { text-align:center; letter-spacing:.35em; font-size:22px;
             font-family:ui-monospace,Consolas,monospace; }
.big { width:100%; padding:15px; border-radius:var(--r);
       background:var(--accent); color:#fff; font-weight:700; font-size:16px; }
.big:active { background:var(--accent-2); }
.pair-msg { margin-top:14px; font-size:13px; min-height:20px; color:var(--bad); }
.pair-msg.ok { color:var(--ok); }

/* ---------------------------------------------------------- خاکہ */

/* اونچائی وہی `dvh` جو `body` پر ہے — `height:100%` والدین کی اونچائی نقل
   کرتا ہے، مگر iOS پر وہ نقل کبھی براؤزر کی پٹی سمیت ہوتی ہے۔ */
.wrap { display:flex; flex-direction:column; height:100vh; height:100dvh; }

.top { display:flex; align-items:center; gap:10px; padding:10px 14px;
       background:var(--surface); border-bottom:1px solid var(--line);
       padding-top:calc(10px + env(safe-area-inset-top,0px)); flex:none; }
.now { flex:1; display:flex; align-items:center; gap:9px; min-width:0;
       font-size:14px; }
.now #now-tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--faint);
       flex:none; }
.dot.run { background:var(--accent); animation:pulse 1.4s infinite; }
.dot.wait { background:var(--warn); animation:pulse .8s infinite; }
.dot.idle { background:var(--ok); }
.dot.bad { background:var(--bad); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.icon { width:38px; height:38px; border-radius:var(--r-sm);
       background:var(--raised); font-size:18px; flex:none; }
.icon:active { background:var(--hover); }

/* ------------------------------------------------- کاموں کی پٹی */

.tasks { display:flex; gap:8px; padding:10px 14px; overflow-x:auto; flex:none;
         scrollbar-width:none; }
.tasks::-webkit-scrollbar { display:none; }
.task { flex:none; min-width:130px; padding:9px 11px; border-radius:var(--r);
        background:var(--surface); border:1px solid var(--line); text-align:right; }
.task.on { border-color:var(--accent); background:var(--accent-bg); }
.task-top { display:flex; align-items:center; gap:6px; font-size:12.5px;
            font-weight:700; }
.task-sub { font-size:11px; color:var(--dim); margin-top:2px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar { height:3px; border-radius:2px; background:var(--line); margin-top:7px;
       overflow:hidden; }
/* `width:0` طے شدہ — چوڑائی `app.js` لگاتا ہے۔ اگر وہ سطر کسی دن نہ
   چلے تو پٹی خالی دکھے، پوری بھری ہوئی نہیں: خاموشی جھوٹ سے بہتر ہے۔ */
.bar i { display:block; height:100%; width:0; background:var(--accent); }
.bar i.warn { background:var(--warn); }
.bar i.bad { background:var(--bad); }
/* بند/مردہ کام کو فہرست سے ہٹانے کا نشان — صرف تب دکھتا ہے جب عمل مر چکا ہو۔ */
.task-x { margin-inline-start:auto; color:var(--faint); font-size:15px;
          padding:0 3px; }

/* --------------------------------------------- کارروائی کی فہرست */

/* `min-height:0` کے بغیر flex کا خانہ اپنے مواد سے چھوٹا نہیں ہوتا — اور
   تب کی بورڈ کھلنے پر نیچے کی پٹیاں سکرین سے باہر دھکیل دی جاتی ہیں۔
   سکڑنا اِسی خانے کا کام ہے: فہرست پھر بھی سکرول ہوتی ہے، مگر اجازت کے
   بٹن ہمیشہ نظر میں رہتے ہیں۔ */
.feed { flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 14px 12px;
        -webkit-overflow-scrolling:touch; }
.empty { color:var(--dim); text-align:center; padding:40px 20px; font-size:14px; }
.row { padding:9px 11px; margin-bottom:7px; border-radius:var(--r);
       background:var(--surface); border:1px solid var(--line-soft);
       font-size:13.5px; }
.row .k { font-size:11px; color:var(--faint); display:block; margin-bottom:3px; }
/* فون پر متن دو سطروں پر کاٹ دیا جاتا ہے — دبانے پر کھلتا ہے۔ */
.row .b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
          overflow:hidden; white-space:pre-wrap; word-break:break-word; }
.row.open .b { -webkit-line-clamp:unset; display:block; }
.row.tool { background:var(--raised); }
.row.tool .k { color:var(--accent-2); }
.row.mine { background:var(--accent-bg); border-color:transparent; }
.row.mine.sending { opacity:.5; }
.row.err { background:var(--bad-bg); border-color:transparent; }
.row.sys { background:transparent; border:none; color:var(--dim);
           font-size:12px; padding:4px 2px; margin-bottom:4px; }
.row.sub .k::after { content:" · ذیلی ایجنٹ"; color:var(--faint); }
.row .ms { color:var(--faint); font-size:11px; }

/* ------------------------------------------------- اجازت کی پٹی */

/* پیلی پٹی خود نہیں سکڑتی (`flex:none`)، مگر لامحدود بھی نہیں بڑھ سکتی:
   تفصیل لمبی ہو اور کی بورڈ بھی کھلا ہو تو پوری پٹی سکرین سے باہر نکل
   جاتی تھی — یعنی اجازت کے بٹن، جو اِس ایپ کی واحد فوری چیز ہیں، ناقابلِ
   دسترس۔ اب پٹی کی حد `52dvh` ہے، اندر کا لمبا حصہ (`.ask-more`) خود
   سکرول ہوتا ہے، اور بٹنوں کی سطر آخری چیز ہے جو کبھی دبتی ہے۔ */
.ask { flex:none; max-height:52dvh; display:flex; flex-direction:column;
       overflow:hidden;
       background:var(--warn-bg); border-top:2px solid var(--warn);
       padding:12px 14px 10px; }
.ask-head, .ask-line, .ask-btns, .reasons { flex:none; }
.ask-head { display:flex; justify-content:space-between; align-items:center;
            font-size:12px; margin-bottom:5px; }
.ask-tool { font-weight:700; color:var(--warn); }
.ask-left { color:var(--dim); font-size:11px; }
.ask-line { font-size:13.5px; word-break:break-word; margin-bottom:10px;
            display:-webkit-box; -webkit-line-clamp:3;
            -webkit-box-orient:vertical; overflow:hidden;
            font-family:ui-monospace,Consolas,monospace; direction:ltr;
            text-align:left; }
/* یہی خانہ سکڑتا ہے (`flex:1 1 auto` + `min-height:0`) اور اپنے اندر
   سکرول ہوتا ہے۔ پہلے حد `38vh` تھی — پٹی کے باقی حصے، `reasons` کی دو
   صفیں اور نیچے پرامپٹ کا خانہ ملا کر سکرین سے زیادہ بن جاتے تھے۔ */
.ask-more { font-size:12px; color:var(--ink-2); margin-bottom:10px;
            flex:1 1 auto; min-height:0; max-height:20dvh;
            overflow:auto; white-space:pre-wrap;
            direction:ltr; text-align:left;
            font-family:ui-monospace,Consolas,monospace; }

/* بٹنوں کی ترتیب — اِسے بدلنے سے پہلے یہ پڑھ لیں۔
   صفحہ `dir="rtl"` ہے، سو grid کا پہلا کالم **دائیں** ہوتا ہے یعنی
   انگوٹھے کی آرام والی جگہ۔ HTML میں ترتیب (انکار · وجہ · منظور) رہنے دی
   گئی ہے کیونکہ `app.js` اِنہی ids سے جڑا ہے؛ جگہ صرف یہاں سے بدلی ہے
   (`grid-template-areas`)، ترتیب DOM میں چھیڑے بغیر۔
   پہلے چوڑا کالم (1.2fr) «منظور» کے لیے رکھا گیا تھا مگر RTL کی وجہ سے
   وہ سب سے بائیں جا پڑتا تھا، اور «انکار» انگوٹھے کے نیچے آ جاتا تھا۔
   اب: دائیں سے «وجہ کے ساتھ» (بےضرر — غلطی سے دب جائے تو صرف ایک پٹی
   کھلتی ہے)، اُس کے ساتھ چوڑا «منظور»، اور سب سے بائیں «انکار»۔ یعنی
   منظور کو چوڑی جگہ ملی، مگر انگوٹھے کی اندھی ٹھوکر کسی فیصلے پر نہیں
   لگتی — نہ منظوری پر، نہ انکار پر۔ */
.ask-btns { display:grid; grid-template-columns:0.95fr 1.5fr 1fr;
            grid-template-areas:"why allow deny"; gap:8px; }
.why   { grid-area:why; }
.allow { grid-area:allow; }
.deny  { grid-area:deny; }
.ask-btns button { padding:16px 8px; border-radius:var(--r);
                   font-weight:700; font-size:15px; }
.deny { background:var(--bad); color:#fff; }
.why  { background:var(--raised); color:var(--ink-2); font-size:13px; }
.allow{ background:var(--ok); color:#04120c; }
.reasons { display:grid; grid-template-columns:1fr 1fr; gap:7px;
           margin-top:9px; }
.reasons button { padding:11px 8px; border-radius:var(--r-sm);
                  background:var(--raised); font-size:12.5px; }

/* ----------------------------------------------- پرامپٹ کا خانہ */

.say { flex:none; background:var(--surface); border-top:1px solid var(--line);
       padding:8px 14px calc(8px + var(--safe-b)); }
.quick { display:flex; gap:7px; overflow-x:auto; padding-bottom:8px;
         scrollbar-width:none; }
.quick::-webkit-scrollbar { display:none; }
.quick button { flex:none; padding:7px 13px; border-radius:999px;
                background:var(--raised); border:1px solid var(--line);
                font-size:12.5px; color:var(--ink-2); }
.say-row { display:flex; gap:8px; align-items:flex-end; }
#tx { flex:1; padding:11px 13px; background:var(--raised);
      border:1px solid var(--line); border-radius:var(--r); resize:none;
      /* پہلے `34vh` — کی بورڈ کھلا ہو تو یہ خانہ اکیلا آدھی سکرین لے لیتا
         تھا اور اجازت کے بٹن اوپر نکل جاتے تھے۔ `dvh` اصل بچی ہوئی
         اونچائی ناپتا ہے، اور حد بھی تنگ کر دی گئی ہے۔ */
      max-height:22dvh; line-height:1.7; }
/* پیلی پٹی کھلی ہو تو پرامپٹ کا خانہ مزید تنگ — دونوں چیزیں ایک ساتھ
   سکرین پر نہ سمانے کی صورت میں ترجیح اجازت کے بٹنوں کی ہے۔ */
.ask:not([hidden]) ~ .say #tx { max-height:14dvh; }
.send { padding:12px 18px; border-radius:var(--r); background:var(--accent);
        color:#fff; font-weight:700; flex:none; }
.send:disabled { opacity:.4; }
.say-tools { display:flex; gap:7px; margin-top:8px; }
.mini { flex:1; padding:9px; border-radius:var(--r-sm);
        background:var(--raised); font-size:12.5px; color:var(--ink-2); }
/* «کام بند کرو» اور «سب بند کرو» — رنگ سے ہی الگ، تاکہ «روکو» سے کبھی
   نہ گڈمڈ ہوں۔ */
.mini.danger { color:var(--bad); border:1px solid var(--bad);
               background:var(--bad-bg); }
/* رُکا ہوا بٹن دِکھنا بھی چاہیے۔ «کوڈ سکرین پر دکھاؤ» دس سیکنڈ بند رہتا
   ہے (سرور کی `SHOW_GAP` کے برابر) — بغیر اِس کے وہ زندہ لگتا اور دبانے
   پر کچھ نہ ہوتا۔ */
.mini:disabled { opacity:.45; }

/* تصدیق کی پٹی — وہی انداز جو «وجہ کے ساتھ» والی پٹی کا ہے: جگہ پر کھلتی
   ہے، الگ منظر نہیں۔ */
.confirm { display:flex; align-items:center; gap:7px; margin-top:8px; }
.confirm-tx { flex:1; font-size:12px; color:var(--ink-2); }
.confirm button { padding:10px 12px; border-radius:var(--r-sm);
                  font-size:12.5px; font-weight:700; flex:none; }
.confirm .no { background:var(--raised); color:var(--ink-2); }
.confirm .yes { background:var(--bad); color:#fff; }

/* ------------------------------------------------------- نیا کام */

.sheet { position:fixed; inset:0; background:rgba(0,0,0,.6);
         display:flex; align-items:flex-end; z-index:50; }
.sheet-box { width:100%; max-height:90dvh; overflow:auto; background:var(--surface);
             border-radius:var(--r-lg) var(--r-lg) 0 0; padding:18px 16px
             calc(18px + var(--safe-b)); }
.sheet-head { display:flex; justify-content:space-between; align-items:center;
              font-size:17px; font-weight:700; margin-bottom:16px; }
.sheet label { display:block; font-size:12px; color:var(--dim);
               margin:12px 0 5px; }
.sheet select { width:100%; padding:12px; background:var(--raised);
                border:1px solid var(--line); border-radius:var(--r); }
.sheet .big { margin-top:20px; }

.code { font-family:ui-monospace,Consolas,monospace; font-size:30px;
        letter-spacing:.3em; text-align:center; padding:16px;
        background:var(--raised); border:1px dashed var(--accent);
        border-radius:var(--r); color:var(--accent-2); }
.hint { font-size:12px; color:var(--dim); margin-top:8px; line-height:1.9; }
/* کمانڈ اور راستے — اردو متن کے بیچ میں، سو بائیں سے دائیں۔ */
.hint code { font-family:ui-monospace,Consolas,monospace; font-size:11.5px;
             color:var(--ink-2); direction:ltr; unicode-bidi:isolate; }
.mini.wide { width:100%; margin-top:10px; }
.devs { display:flex; flex-direction:column; gap:6px; }
.dev { display:flex; justify-content:space-between; align-items:center;
       gap:8px; padding:10px 12px; background:var(--raised);
       border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; }
.dev small { color:var(--dim); font-size:11px; }
.dev .x { color:var(--bad); padding:4px 10px; }
.dev .go { color:var(--accent-2); padding:4px 10px; font-size:12px; }
.pill { font-size:11px; padding:2px 8px; border-radius:999px; }
.pill.ok { background:var(--ok-bg); color:var(--ok); }
.pill.no { background:var(--bad-bg); color:var(--bad); }
.pill.warn { background:var(--warn-bg); color:var(--warn); }

/* ------------------------------------------------ اکاؤنٹ کی سطریں */

.accts { display:flex; flex-direction:column; gap:8px; }
.acct { padding:11px 12px; background:var(--raised);
        border:1px solid var(--line); border-radius:var(--r); }
.acct-head { display:flex; justify-content:space-between; align-items:center;
             gap:8px; flex-wrap:wrap; }
.acct-name { font-size:14px; }
.acct-pills { display:flex; gap:6px; flex-wrap:wrap; }
/* لاگ اِن باقی ہو تو یہی سطر کا اصل کام ہے — پورا چوڑا، انگوٹھے کے ناپ کا۔ */
.acct .big.acct-login { margin-top:10px; min-height:48px; padding:13px;
                        font-size:15px; }
.acct-tools { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.acct-tools .mini { flex:1; min-width:88px; min-height:44px; }
.acct .confirm { flex-wrap:wrap; }
.acct .confirm button { min-height:44px; }

/* -------------------------------------------- لاگ اِن کا پینل */

.login { margin-top:11px; padding:11px 12px; background:var(--surface);
         border:1px solid var(--line); border-radius:var(--r); }
.login.s-done { border-color:var(--ok); background:var(--ok-bg); }
.login.s-error { border-color:var(--bad); background:var(--bad-bg); }
.login-head { display:flex; align-items:flex-start; gap:8px; }
.login-line { flex:1; font-size:13px; color:var(--ink-2); line-height:1.9; }
.login.s-done .login-line { color:var(--ok); font-weight:700; }
.login.s-error .login-line { color:var(--bad); }
.spin { flex:none; width:14px; height:14px; margin-top:6px; border-radius:50%;
        border:2px solid var(--line); border-top-color:var(--accent);
        animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.login-code { display:flex; gap:8px; margin-top:10px; }
.login-code input { flex:1; min-height:48px; padding:12px 14px;
                    background:var(--raised); border:1px solid var(--line);
                    border-radius:var(--r); font-size:15px;
                    font-family:ui-monospace,Consolas,monospace;
                    text-align:left; }
.mini.paste { flex:none; min-height:48px; padding:0 14px;
              border:1px solid var(--line); }
.login .big { margin-top:10px; min-height:48px; }
.login-tools { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.login-tools .mini { flex:1; min-width:96px; min-height:44px; }

/* ملاپ کے صفحے پر کوڈ کا خانہ + «چسپاں کرو» ایک ہی سطر میں۔ */
.pair-row { display:flex; gap:8px; margin-bottom:10px; }
.pair-row #pair-code { flex:1; margin-bottom:0; }
.pair-row .mini.paste { background:var(--raised); color:var(--ink-2); }

/* ------------------------------------------------ مشین کے کام */

.setups { display:flex; flex-direction:column; gap:8px; }
.setup { padding:11px 12px; background:var(--raised);
         border:1px solid var(--line); border-radius:var(--r); }
.setup-head { display:flex; justify-content:space-between; align-items:flex-start;
              gap:10px; }
.setup-id { flex:1; min-width:0; }
.setup-title { font-size:14px; }
.setup-desc { font-size:12px; color:var(--dim); line-height:1.8; margin-top:2px; }
.setup-state { display:flex; align-items:center; gap:6px; flex:none;
               font-size:11.5px; color:var(--dim); }
.setup-msg { font-size:12px; color:var(--ink-2); margin-top:6px; }
.setup .hint { margin-top:6px; color:var(--warn); }
.setup-tools { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.setup-tools .mini { flex:1; min-width:96px; min-height:44px; }
.setup-tools .mini.go { background:var(--accent-bg); color:var(--accent-2);
                        border:1px solid var(--accent); font-weight:700; }
.setup-tools .mini:disabled { opacity:.45; }
/* سکرپٹ کا نوشتہ انگریزی ہے — بائیں سے دائیں اور یکساں چوڑائی۔ */
.setup-log { margin:9px 0 0; max-height:34vh; overflow:auto; padding:9px 11px;
             background:var(--surface); border:1px solid var(--line);
             border-radius:var(--r-sm); font-size:11.5px; white-space:pre-wrap;
             word-break:break-word; direction:ltr; text-align:left;
             font-family:ui-monospace,Consolas,monospace; color:var(--ink-2); }
/* کام نے فولڈر میں کیا بدلا — گٹ کا diff، سو بائیں سے دائیں اور یکساں چوڑائی۔ */
.diff { margin-top:8px; max-height:40vh; overflow:auto; padding:10px 12px;
        background:var(--raised); border:1px solid var(--line);
        border-radius:var(--r-sm); font-size:11.5px; white-space:pre-wrap;
        direction:ltr; text-align:left;
        font-family:ui-monospace,Consolas,monospace; }

/* ---------------------------------------------------------- اطلاع */

.toasts { position:fixed; left:0; right:0; bottom:calc(14px + var(--safe-b));
          display:flex; flex-direction:column; align-items:center; gap:7px;
          pointer-events:none; z-index:70; }
.toast { background:var(--raised); border:1px solid var(--line);
         padding:10px 16px; border-radius:999px; font-size:13px;
         box-shadow:0 8px 28px -8px rgba(0,0,0,.7); max-width:88vw; }
.toast.bad { border-color:var(--bad); color:var(--bad); }
.toast.ok  { border-color:var(--ok); color:var(--ok); }

/* ------------------------------------- چوڑی اسکرین (لیپ ٹاپ) */

@media (min-width:820px) {
  .wrap { max-width:860px; margin:0 auto; border-inline:1px solid var(--line); }
  .ask-btns button { padding:14px; }
  .row .b { -webkit-line-clamp:6; }
}


/* دو صفیں جو پہلے `style="…"` میں لکھی ہوئی تھیں۔
   CSP میں `style-src 'self'` سٹائل کی **خصوصیت** کو بھی روکتا ہے، سو اُنہیں
   یہاں لانا پڑا — ورنہ یا تو خانہ بگڑ جاتا، یا پالیسی میں `unsafe-inline`
   ڈالنا پڑتا اور پھر پالیسی کا آدھا فائدہ ختم۔ */
.gap-t { margin-top: 8px; }
.tin {
  flex: 1;
  padding: 11px 13px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ============================================ مشین بدلنے کی پٹی

   «آفس» · «گھر» — سب سے اوپر، اور صرف تب جب کوئی دوسری مشین فہرست میں
   ہو۔ سبز نشان = مشین جواب دے رہی ہے؛ سرمئی = بند یا راستہ نہیں۔
   فیصلہ سرور کرتا ہے (وجہ `rw/machines.py` کے سر پر، نکتہ ۳)۔ */

.mbar { display:flex; gap:7px; padding:9px 14px 0; overflow-x:auto;
        flex:none; scrollbar-width:none; }
.mbar::-webkit-scrollbar { display:none; }
.mach { flex:none; display:flex; align-items:center; gap:7px;
        padding:8px 13px; border-radius:999px; background:var(--raised);
        border:1px solid var(--line); font-size:12.5px; color:var(--ink-2);
        min-height:38px; }
.mach.on { border-color:var(--accent); background:var(--accent-bg);
           color:var(--ink); font-weight:700; }
.mach.off { opacity:.62; }
.mach-tx { white-space:nowrap; }

/* --------------------------------------------- سیٹ اپ: سرنگ کا خانہ */

.tun { padding:10px 12px; background:var(--raised);
       border:1px solid var(--line); border-radius:var(--r); }
.tun-head { display:flex; align-items:center; gap:8px; }
.tun-state { font-size:13.5px; }
.tun-ago { margin-inline-start:auto; font-size:11.5px; color:var(--dim); }
.tun-msg { font-size:12px; color:var(--ink-2); margin-top:6px; }
.tun-tools { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.tun-tools .mini { flex:1; min-width:104px; min-height:44px; }
.tun-tools .mini.go { background:var(--accent-bg); color:var(--accent-2);
                      border:1px solid var(--accent); font-weight:700; }
/* انگوٹھے کے لیے پورا خانہ دبنے والا ہو — صرف ننھا سا مربع نہیں۔ */
.tun-auto { display:flex; align-items:center; gap:8px; margin-top:10px;
            font-size:12.5px; color:var(--ink-2); min-height:40px; }
.tun-auto input { width:20px; height:20px; accent-color:var(--accent); }

/* ------------------------------------------- سیٹ اپ: مشینوں کا خانہ */

.machs { display:flex; flex-direction:column; gap:8px; }
.mach-row { padding:10px 12px; background:var(--raised);
            border:1px solid var(--line); border-radius:var(--r); }
.mach-head { display:flex; align-items:center; gap:8px; }
.mach-name { flex:1; font-size:13.5px; }
.mach-url { font-size:11.5px; color:var(--dim); margin-top:4px;
            direction:ltr; text-align:left; word-break:break-all; }
.mach-why { font-size:11.5px; color:var(--warn); margin-top:4px; }
.mach-row .x { color:var(--bad); padding:6px 10px; font-size:12px; }
.mach-tools { display:flex; gap:7px; margin-top:8px; flex-wrap:wrap;
              align-items:center; }
.mach-tools .mini { flex:1; min-width:90px; min-height:42px; }
/* پتے کی سطر «کاپی» کے بٹن کے ساتھ ایک ہی قطار میں — پتہ لمبا ہوتا ہے،
   سو جگہ اُسی کو ملے اور بٹن اپنی چوڑائی پر رہے۔ */
.mach-tools .mach-url { flex:1 1 60%; margin-top:0; }
.mach-tools .mach-url + .mini { flex:none; min-width:0; padding:0 14px; }
.mach-add { display:flex; gap:7px; flex-wrap:wrap; }
.mach-add input { flex:1 1 110px; min-width:0; min-height:44px;
                  padding:10px 12px; background:var(--raised);
                  border:1px solid var(--line); border-radius:var(--r);
                  font-size:13px; }
.mach-add input.ltr { direction:ltr; text-align:left;
                      font-family:ui-monospace,Consolas,monospace;
                      font-size:12px; }
.mach-add .send { flex:none; min-height:44px; }

/* ------------------------------------ سیٹ اپ: وی ایس کوڈ کا اکاؤنٹ */

.vsc { display:flex; flex-direction:column; gap:8px; }
.vsc-ide { padding:10px 12px; background:var(--raised);
           border:1px solid var(--line); border-radius:var(--r); }
.vsc-head { display:flex; align-items:center; gap:8px; }
.vsc-name { flex:1; font-size:13.5px; }
.vsc-path { font-size:11px; color:var(--faint); margin-top:4px;
            direction:ltr; text-align:left; word-break:break-all; }
.vsc-tools { display:flex; gap:7px; flex-wrap:wrap; }
.vsc-tools .mini { flex:1; min-width:120px; min-height:44px; }
.vsc-check { margin-top:2px; padding:10px 12px; background:var(--surface);
             border:1px solid var(--line); border-radius:var(--r);
             font-size:12px; line-height:1.9; }
.vsc-line { display:flex; align-items:baseline; gap:8px; }
.vsc-line b { font-weight:700; }
.vsc-line.hit { color:var(--ok); }
.vsc-when { margin-inline-start:auto; color:var(--dim); font-size:11px;
            white-space:nowrap; }