/* Ring a Translator — welcoming, international, very legible. Violet = you, burnt orange = them. */
:root{
  --bg:#F4F1FA;--card:#FFFFFF;--field:#F8F6FD;--ink:#1C1530;--ink2:#3A3052;--muted:#5A5070;
  --line:#E3DCF3;--line2:#C9BDF0;--line3:#EFEAF8;
  --violet:#5B3FD1;--violet-dk:#4A2FC0;--violet-tint:#EDE8FB;--violet-deep:#3A2C70;
  --them:#B4530A;--them-ink:#8A3C05;--them-tint:#FBE9DC;--them-deep:#5A2E10;
  --sun:#FFC93C;--sun-tint:#FFF4D1;--sun-ink:#4A3A00;
  --night:#1C1530;--night2:#2C2347;--night-ink:#F4F1FA;--night-muted:#D8D0EE;--night-dim:#B9AFD6;
  --green:#1F7A4D;--green-tint:#E2F4EA;--red:#D93B2B;--red-ink:#9B2C1E;
  --font:"Atkinson Hyperlegible","Noto Sans","Noto Sans Arabic","Noto Sans Bengali","Noto Sans Gurmukhi","Noto Sans Ethiopic",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 var(--font)}
[dir=rtl] body,[dir=rtl]{font-family:"Noto Sans Arabic","Atkinson Hyperlegible",system-ui,sans-serif;line-height:1.7}
a{color:var(--violet-dk)} a:hover{color:#2E1A8A}
input,textarea,select,button{font:inherit}
input::placeholder,textarea::placeholder{color:#6E6488}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)} .small{font-size:16px} .tiny{font-size:14px}
.flash-wrap{max-width:1160px;margin:0 auto;padding:12px 24px 0;display:flex;flex-direction:column;gap:8px}
.flash{background:var(--sun-tint);color:var(--sun-ink);border:2px solid #F2DD92;padding:12px 16px;border-radius:14px;font-weight:700}
.top{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:23px}
[dir=rtl] .brand svg{transform:scaleX(-1)}
.top nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:17px}
.top nav a{color:var(--ink2);text-decoration:none}
.btn-dark{color:#fff!important;background:var(--ink);padding:10px 18px;border-radius:12px;font-weight:700}
.lang-btn{min-height:42px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;background:#fff;border:2px solid var(--line);border-radius:12px;font-size:16px;font-weight:700;color:var(--ink)!important}
.foot{border-top:2px solid var(--line);margin-top:24px}
.foot-in{max-width:1160px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:16px}
.wrap{max-width:1160px;margin:0 auto;padding:24px}
.btn{min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;border-radius:16px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;font-size:19px;cursor:pointer;text-decoration:none}
.btn:hover{color:var(--ink);background:#FAF8FE}
.btn.violet{background:var(--violet);border-color:var(--violet);color:#fff} .btn.violet:hover{background:var(--violet-dk);color:#fff}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.wide{width:100%}
.btn.small{min-height:44px;font-size:16px;padding:0 16px;border-radius:12px}
.linkbtn{background:none;border:0;padding:0;color:var(--violet-dk);text-decoration:underline;cursor:pointer;font-size:15px}
.linkbtn.danger{color:var(--red-ink)}
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:22px}
/* home */
.picker{background:#fff;border:2px solid var(--line);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:16px}
.picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.picker-head h1{margin:0;font-size:30px}
.langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.lang{min-height:76px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:12px 18px;border-radius:18px;background:var(--field);border:2px solid var(--line);color:var(--ink);text-decoration:none;text-align:start}
.lang b{font-size:22px} .lang span{font-size:15px;color:var(--muted)}
.lang.on{background:var(--violet);border-color:var(--violet);color:#fff} .lang.on span{color:#E7E0FF}
.lang:hover{border-color:var(--violet)}
.hero{display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding:40px 0}
.hero h2{margin:0;font-size:clamp(38px,6vw,70px);line-height:1.04;letter-spacing:-1px}
[dir=rtl] .hero h2{letter-spacing:0;line-height:1.35}
.hero h2 span{color:var(--violet)}
.hero p{margin:20px 0 0;font-size:21px;color:var(--ink2);max-width:560px}
.cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.ring-pill{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px;background:var(--sun-tint);border-radius:16px}
.bubbles{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:10px}
.bub{max-width:86%;padding:12px 16px;border-radius:18px}
.bub small{display:block;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.bub.you{align-self:flex-start;background:var(--violet-tint);border-end-start-radius:6px} .bub.you small{color:var(--violet-dk)}
.bub.them{align-self:flex-end;background:var(--them-tint);border-end-end-radius:6px} .bub.them small{color:var(--them-ink)}
.bub.heard{background:#fff;border:2px dashed var(--line2);font-size:16px;color:var(--ink2);margin-top:-4px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.step{background:#fff;border:2px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:8px}
.step .n{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px}
.step h3{margin:0;font-size:21px} .step p{margin:0;color:var(--ink2)}
.know{background:var(--night);color:var(--night-ink);border-radius:26px;padding:28px 30px;display:flex;flex-wrap:wrap;gap:24px}
.know h2{margin:0 0 8px;font-size:24px} .know p{margin:0;color:var(--night-muted)}
.know .box{flex:1 1 300px;background:var(--night2);border-radius:18px;padding:18px 20px;color:var(--night-muted)}
/* phone-style pages */
.mobile{max-width:480px;margin:0 auto;padding:8px 18px 32px;display:flex;flex-direction:column;gap:16px;min-height:calc(100vh - 90px)}
.mobile h1{margin:0;font-size:28px;line-height:1.2}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:16px}
.field input,.field select,.field textarea{font-weight:400;font-size:19px;color:var(--ink);background:var(--field);border:2px solid var(--line2);border-radius:12px;padding:12px 14px}
.field input:focus,.field select:focus{outline:none;border-color:var(--violet)}
.field .help{font-weight:400;color:var(--muted);font-size:14px}
.field input.code{font-weight:700;font-size:26px;letter-spacing:8px;border-color:var(--violet)}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:16px}
.check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--violet);flex:0 0 auto}
.contact{min-height:64px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border:2px solid var(--line);border-radius:16px;color:var(--ink);width:100%;cursor:pointer;text-align:start}
.contact:hover{border-color:var(--violet)}
.contact .av{width:42px;height:42px;border-radius:50%;background:var(--violet-tint);color:var(--violet-dk);display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.contact .info{flex:1;min-width:0} .contact .info b{display:block} .contact .info span{font-size:15px;color:var(--muted)}
.contact .go{color:var(--violet-dk);font-weight:700;font-size:16px}
.choice2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
.choice2 legend{font-weight:700;font-size:16px;padding:0;margin-bottom:6px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{min-height:54px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--field);border:2px solid var(--line);font-weight:700;font-size:16px;text-align:center;padding:4px 8px}
.opt input:checked+span{background:var(--violet);border-color:var(--violet);color:#fff}
.opt input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}
/* live call (dark) */
body.night{background:var(--night);color:var(--night-ink)}
body.night a{color:#C9BDF0}
body.night .brand{color:var(--night-ink)}
body.night .flash{background:var(--night2);color:var(--night-ink);border-color:#3D3360}
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px}
.statusbar .ok{display:flex;align-items:center;gap:8px;color:#8BE3B4;font-weight:700}
.statusbar .ok i{width:9px;height:9px;border-radius:50%;background:#8BE3B4}
.statusbar .wait{color:var(--sun)} .statusbar .wait i{background:var(--sun)}
.sides{display:flex;gap:8px;font-size:14px}
.sides span{flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700}
.sides .y{background:var(--violet)} .sides .t{background:var(--them)}
.lines{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:calc(100vh - 360px);min-height:240px}
.ln{max-width:92%;display:flex;flex-direction:column;gap:4px;padding:10px 14px}
.ln small{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.ln .said{font-size:17px} .ln .heard{font-size:15px;color:var(--night-muted);border-top:1px solid rgba(255,255,255,.15);padding-top:6px}
.ln.you{align-self:flex-start;background:var(--violet-deep);border-radius:18px 18px 18px 6px} .ln.you small{color:#C9BDF0}
.ln.them,.ln.line{align-self:flex-end;background:var(--them-deep);border-radius:18px 18px 6px 18px} .ln.them small,.ln.line small{color:#FFC79E}
[dir=rtl] .ln.you{border-radius:18px 18px 6px 18px} [dir=rtl] .ln.them{border-radius:18px 18px 18px 6px}
.ln.system{align-self:center;max-width:100%;padding:4px 12px;background:transparent;color:var(--night-dim);font-size:14px;text-align:center}
.typing{align-self:center;display:flex;align-items:center;gap:8px;color:var(--night-muted);font-size:15px}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--sun);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.cmds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cmd{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--night2);color:var(--night-ink);border:0;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;padding:6px}
.cmd b{font-size:20px} .cmd:disabled{opacity:.45}
/* summary */
.agreed{background:var(--violet);color:#fff;border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.agreed small{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#E7E0FF}
.agreed b{font-size:20px;line-height:1.3}
.note{background:var(--sun-tint);color:var(--sun-ink);border-radius:16px;padding:12px 16px;font-size:15px}
.full .ln{max-width:100%}
.full .ln.you{background:var(--violet-tint);color:var(--ink)} .full .ln.you small{color:var(--violet-dk)}
.full .ln.them,.full .ln.line{background:var(--them-tint);color:var(--ink)} .full .ln.them small,.full .ln.line small{color:var(--them-ink)}
.full .ln .heard{color:var(--ink2);border-top-color:rgba(0,0,0,.1)}
.full .ln.system{color:var(--muted)}
.calllist{display:flex;flex-direction:column;gap:10px}
.callrow{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border:2px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}
/* ---------------- admin (always English, LTR) ---------------- */
.ad{min-height:100vh;display:flex;flex-wrap:wrap;font-size:16px;direction:ltr}
.ad-nav{flex:1 1 220px;max-width:100%;background:var(--night);color:var(--night-ink);padding:22px 16px;display:flex;flex-direction:column;gap:4px}
.ad-nav .brand{color:var(--night-ink);padding:0 8px 18px;font-size:17px}
.ad-nav .brand small{display:block;font-size:12px;color:var(--night-dim);font-weight:400}
.ad-nav a.item{min-height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:10px;color:var(--night-muted);text-decoration:none}
.ad-nav a.item.on{background:var(--night2);color:#fff;font-weight:700}
.ad-nav .grow{flex:1 1 auto}
.ad-nav a.quiet{min-height:40px;display:flex;align-items:center;padding:0 12px;color:var(--night-dim);text-decoration:none;font-size:14px}
.ad-main{flex:999 1 560px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:20px}
.ad-main.slim{max-width:980px}
.ad-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ad-head h1{margin:0;font-size:36px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{background:#fff;border:2px solid var(--line);border-radius:16px;padding:16px 18px;color:var(--muted);font-size:14px}
.stat b{display:block;font-size:30px;line-height:1.1;color:var(--ink)}
.box{background:#fff;border:2px solid var(--line);border-radius:20px;overflow:hidden}
.box h2{margin:0;padding:16px 20px;font-size:17px;border-bottom:2px solid var(--line3)}
.tablebox{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
.tablebox table{min-width:680px}
th{text-align:left;color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:12px 8px}
td{padding:12px 8px;border-top:2px solid var(--line3);vertical-align:top}
th:first-child,td:first-child{padding-left:20px} th:last-child,td:last-child{padding-right:20px}
.r{text-align:right}
.empty{padding:28px 20px;text-align:center;color:var(--muted)}
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--violet-tint);color:var(--violet-dk)}
.b-ok{background:var(--green-tint);color:#145C38} .b-mt{background:var(--sun-tint);color:#6B4E00} .b-no{background:var(--bg);color:var(--muted)}
.b-live{background:var(--green);color:#fff} .b-fail{background:#FBE3DF;color:var(--red-ink)}
.mini{min-height:36px;padding:0 12px;background:transparent;color:var(--violet-dk);border:2px solid var(--line2);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.mini.danger{color:var(--red-ink);border-color:#F0C4BA}
.form-sec{background:#fff;border:2px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
.form-sec h2{margin:0;font-size:19px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-sec .field input,.form-sec .field select,.form-sec .field textarea{font-size:16px;padding:10px 12px}
.ok-tag{font-size:13px;color:var(--green);font-weight:700} .bad-tag{font-size:13px;color:var(--red-ink);font-weight:700}
.hook{background:var(--field);border:2px dashed var(--line2);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--muted)}
.hook code{display:block;color:var(--violet-dk);font-size:14px;overflow-wrap:anywhere}
.preview{background:var(--violet-tint);border-radius:12px;padding:12px 14px;font-size:15px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form input,.inline-form select{min-height:42px;padding:0 10px;border:2px solid var(--line2);border-radius:10px;background:var(--field)}
.strings td textarea{width:100%;min-height:52px;font-size:15px;padding:8px 10px;border:2px solid var(--line2);border-radius:10px;background:var(--field)}
.login-box{max-width:440px;margin:60px auto;padding:0 16px}
.changelog h3{font-size:16px;margin:16px 0 6px;color:var(--violet-dk)}
@media (min-width:820px){.ad-nav{flex:0 0 240px;position:sticky;top:0;height:100vh;align-self:flex-start}}
@media (max-width:819px){.ad-nav{flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px}.ad-nav .brand{flex:1 1 100%;padding-bottom:6px}.ad-nav .grow{display:none}.ad-main{padding:20px 16px}}
@media (max-width:600px){.picker{padding:18px;border-radius:22px}.hero{padding:24px 0}.langs{grid-template-columns:repeat(2,minmax(0,1fr))}.lang b{font-size:19px}}

.lang-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:260px;margin-left:auto}