:root{--bg:#0f1419;--card:#1a212b;--line:#2a3441;--txt:#e8edf3;--mut:#8b98a8;--acc:#3b9eff}
@media (prefers-color-scheme: light){:root{--bg:#f4f6f9;--card:#fff;--line:#dde3ea;--txt:#16202b;--mut:#64707e}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.45 -apple-system,system-ui,sans-serif;
 padding-bottom:env(safe-area-inset-bottom)}
header{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--bg);
 border-bottom:1px solid var(--line);z-index:2}
header h1{font-size:18px;margin:0;flex:1}
#back{font-size:26px;line-height:1;background:none;border:0;color:var(--acc);padding:0 6px;cursor:pointer}
main{padding:12px 14px;max-width:640px;margin:0 auto}
.list{display:flex;flex-direction:column;gap:8px}
.btn{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:start;
 padding:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--txt);
 font:inherit;cursor:pointer}
.btn:active{background:var(--line)}
.btn small{color:var(--mut)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;justify-content:center;font-weight:600}
.note{color:var(--mut);font-size:14px;margin:6px 2px 12px}
pre{white-space:pre-wrap;direction:ltr;text-align:left;background:var(--card);border:1px solid var(--line);
 border-radius:12px;padding:12px;font:13px/1.5 ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.cmd{direction:ltr;text-align:left}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#222;color:#fff;
 padding:10px 16px;border-radius:20px;font-size:14px}

/* ---- shared ---- */
.btn .lbl{flex:1}
.btn .ico:empty{display:none}
.btn .ico{margin-inline-end:10px;font-size:20px}

/* ---- Theme B: light, aviation blue, left color bar ---- */
body.theme-b{--bg:#eef2f7;--card:#fff;--line:#d5dde8;--txt:#12213a;--mut:#5b6b82;--acc:#0b5fff}
body.theme-b header{background:#0b2a5b;border:0;color:#fff}
body.theme-b header h1{color:#fff;letter-spacing:.5px}
body.theme-b #back{color:#9fc2ff}
body.theme-b .btn{border-radius:6px;border:1px solid var(--line);border-inline-start:5px solid var(--acc);
 box-shadow:0 1px 2px rgba(10,30,60,.08);padding:16px 14px}
body.theme-b .btn small{background:#e8f0ff;color:#0b5fff;border-radius:10px;padding:2px 9px;font-weight:600}
body.theme-b .btn.primary{border-radius:6px;background:#0b5fff}
body.theme-b pre{background:#fff}

/* ---- Theme C: big 2-column tiles, uses Telegram colors when available ---- */
body.theme-c{--bg:var(--tg-theme-bg-color,#0e1116);--card:var(--tg-theme-secondary-bg-color,#1b2230);
 --txt:var(--tg-theme-text-color,#f1f5f9);--mut:var(--tg-theme-hint-color,#8b98a8);--acc:var(--tg-theme-button-color,#2ea6ff);--line:transparent}
body.theme-c header{border:0;background:var(--bg)}
body.theme-c .list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.theme-c .btn{flex-direction:column;justify-content:center;align-items:center;text-align:center;
 min-height:104px;border-radius:18px;gap:6px;padding:12px}
body.theme-c .btn .ico{margin:0;font-size:30px}
body.theme-c .btn .lbl{flex:0}
body.theme-c .btn small{font-size:12px}
body.theme-c .btn.primary{grid-column:1/-1;min-height:0;border-radius:16px;padding:16px}

/* ================= Theme iOS (default) ================= */
body.theme-ios{
 --bg:#f2f2f7;--card:#fff;--line:rgba(60,60,67,.18);--txt:#000;--mut:#6c6c70;--acc:#007aff;--press:#e5e5ea;
 font-family:-apple-system,"SF Pro Text","SF Pro Arabic",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
@media (prefers-color-scheme: dark){
 body.theme-ios{--bg:#000;--card:#1c1c1e;--line:rgba(84,84,88,.6);--txt:#fff;--mut:#98989f;--acc:#0a84ff;--press:#2c2c2e}}
body.theme-ios header{background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);
 backdrop-filter:saturate(180%) blur(20px);border:0;border-bottom:.5px solid var(--line);padding:10px 16px;min-height:52px}
body.theme-ios header h1{font-size:28px;font-weight:700;letter-spacing:-.3px}
body.theme-ios #back{display:flex;align-items:center;gap:2px;font:inherit;font-size:17px;color:var(--acc);
 min-height:44px;min-width:44px;padding:0 10px;border-radius:12px;transition:background .15s,transform .1s}
body.theme-ios #back span{font-size:30px;line-height:1;margin-top:-3px}
body.theme-ios #back:active{background:var(--press);transform:scale(.96)}
body.theme-ios main{padding:14px 16px 40px}
body.theme-ios .note{color:var(--mut);font-size:13px;text-transform:none;margin:4px 6px 8px}
/* inset grouped list */
body.theme-ios .list{gap:0;background:var(--card);border-radius:16px;overflow:hidden}
body.theme-ios .btn{background:var(--card);border:0;border-radius:0;min-height:60px;padding:12px 16px;gap:12px;
 border-bottom:.5px solid var(--line);position:relative;transition:background .12s,transform .12s;will-change:transform}
body.theme-ios .btn:last-child{border-bottom:0}
body.theme-ios .btn:active{background:var(--press);transform:scale(.985)}
body.theme-ios .btn .ico{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
 background:color-mix(in srgb,var(--acc) 14%,transparent);font-size:22px;margin:0;flex:none}
body.theme-ios .btn .lbl{font-size:17px;font-weight:500}
body.theme-ios .btn small{color:var(--mut);font-size:14px;display:flex;align-items:center;gap:6px}
body.theme-ios .btn small::after{content:"‹";font-size:22px;color:var(--mut);opacity:.6;margin-inline-start:2px}
body.theme-ios .btn.primary{margin-top:18px;border-radius:14px;min-height:56px;justify-content:center;font-size:17px;
 font-weight:600;background:var(--acc);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 35%,transparent)}
body.theme-ios .btn.primary:active{filter:brightness(.92);transform:scale(.97)}
body.theme-ios .btn.primary small::after{content:none}
body.theme-ios pre{border-radius:14px;border:0;background:var(--card);color:var(--txt);font-size:15px}
body.theme-ios #toast{background:rgba(40,40,44,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
 border-radius:14px;font-size:15px}

/* animations */
@keyframes pushIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.theme-ios #view.push{animation:pushIn .28s cubic-bezier(.22,.8,.3,1)}
body.theme-ios #view.pop{animation:popIn .28s cubic-bezier(.22,.8,.3,1)}
body.theme-ios .list .btn{animation:rise .35s cubic-bezier(.22,.8,.3,1) both}
body.theme-ios .list .btn:nth-child(1){animation-delay:.02s}body.theme-ios .list .btn:nth-child(2){animation-delay:.05s}
body.theme-ios .list .btn:nth-child(3){animation-delay:.08s}body.theme-ios .list .btn:nth-child(4){animation-delay:.11s}
body.theme-ios .list .btn:nth-child(5){animation-delay:.14s}body.theme-ios .list .btn:nth-child(6){animation-delay:.17s}
body.theme-ios .list .btn:nth-child(n+7){animation-delay:.2s}
@media (prefers-reduced-motion: reduce){body.theme-ios *{animation:none!important;transition:none!important}}
.lbl .sub{display:block;font-size:13px;font-weight:400;color:var(--mut);margin-top:2px;direction:ltr;text-align:start}
body.theme-ios .btn .lbl{display:block}
.lbl .sub{direction:rtl;unicode-bidi:isolate;text-align:start;font-size:14px}
body.theme-ios .btn small::after{opacity:.85}

.search{width:100%;font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
 background:var(--card);color:var(--txt);outline:none;margin-bottom:10px;-webkit-appearance:none}
.search:focus{border-color:var(--acc)}
body.theme-ios .search{border:0;background:color-mix(in srgb,var(--mut) 18%,transparent);border-radius:12px;min-height:44px}

.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.photos figure{margin:0}.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--card)}
.photos figcaption{font-size:12px;color:var(--mut);margin-top:3px;direction:ltr}