/* day / night theme + language menu + RTL. Loaded after style.css. */
:root{--soft:#f1f5f9;--text2:#475569;--hover:#e2e8f0}
html[data-theme=dark]{
  --bg:#0b1220;--card:#131c2e;--soft:#1b263b;--text:#e5e7eb;--text2:#cbd5e1;--muted:#94a3b8;--line:#243049;--line2:#334155;--hover:#243049;
  --out:#005c4b;--in:#1f2c34;--g-soft:rgba(37,211,102,.16);--shadow:0 10px 15px -3px rgba(0,0,0,.45),0 4px 6px -4px rgba(0,0,0,.4);
  color-scheme:dark;
}
html[data-theme=dark] #auth{background:linear-gradient(135deg,#06131a,#0b1220 50%,#0d1b2e)}
html[data-theme=dark] #side{background:linear-gradient(#0f172a,#0b1220)}
html[data-theme=dark] #page{background:linear-gradient(to bottom right,#0b1220,#0f172a 50%,#0b1220)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:var(--soft)}
html[data-theme=dark] button.ghost{background:var(--soft);color:var(--text2)}
html[data-theme=dark] a{color:#2dd4bf}
html[data-theme=dark] .lc-chip:hover{background:var(--hover)}
html[data-theme=dark] .apn.ok{background:#052e1a;border-color:#14532d;color:#86efac}
html[data-theme=dark] .apn.info{background:#0c1f3d;border-color:#1e3a8a;color:#93c5fd}
html[data-theme=dark] .apn.warn{background:#3a2a05;border-color:#78350f;color:#fcd34d}
html[data-theme=dark] #toast{background:#334155}
#top .tbtn{background:transparent;padding:8px;border-radius:8px;color:#fff}#top .tbtn:hover{background:rgba(255,255,255,.15);filter:none}
.langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60;text-align:left}
.langmenu a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--text2);cursor:pointer;text-decoration:none;font-size:14px}
.langmenu a:hover{background:var(--soft)}.langmenu a.on{background:var(--g-soft);color:var(--text);font-weight:600}
.langmenu a small{font-size:11px;color:var(--muted);width:22px;font-weight:700}.langmenu a .ck{margin-left:auto;color:var(--g2)}
html[dir=rtl] .langmenu{right:auto;left:0;text-align:right}html[dir=rtl] .langmenu a .ck{margin-left:0;margin-right:auto}
html[dir=rtl] #side{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] #user>button{border-left:0;border-right:1px solid rgba(255,255,255,.25);padding:0 14px 0 0;text-align:left}
html[dir=rtl] #shell{margin-left:0;margin-right:256px}html[dir=rtl] body.side-collapsed #shell{margin-right:0}
html[dir=rtl] body.side-collapsed #side{transform:translateX(100%)}
@media(max-width:1023px){html[dir=rtl] #shell{margin-right:0}html[dir=rtl] #side{transform:translateX(100%)}html[dir=rtl] body.side-open #side{transform:none}}
/* template create/edit: the form scrolls inside the dialog, the phone preview stays in place */
.modal.tplm{height:calc(100vh - 40px);max-height:800px;margin:0 auto;align-self:center}
.modal.tplm .form{overflow-y:auto;overscroll-behavior:contain}
.modal.tplm .side{overflow:hidden}
@media(max-width:820px){.modal.tplm{height:auto;max-height:none;margin:20px 0;align-self:flex-start}.modal.tplm .form{overflow:visible}}