/* Loquela translation portal — the site's own look (src/website/assets/site.css:
   palette, mesh backdrop, glass, the mark, gradient buttons), carried over from
   the approved prototype docs/mockups/translation-portal/portal.html (I-056). */

:root{
  --indigo:#5452EB; --violet:#9E4DF0; --teal:#0099A6; --mint:#1FBF99;
  --orange:#FA852E; --coral:#F5576B; --gold:#FABF24;
  --ink:#1D1C2B; --muted:#5E5C75; --bg:#FBFBFE;
  --glass:rgba(255,255,255,0.58); --glass-border:rgba(255,255,255,0.75);
  --line:rgba(29,28,58,0.09); --grad:linear-gradient(135deg,var(--indigo),var(--violet));
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);-webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(58% 46% at 4% 0%,rgba(84,82,235,.22) 0%,rgba(84,82,235,0) 100%),
    radial-gradient(50% 42% at 52% -6%,rgba(158,77,240,.13) 0%,rgba(158,77,240,0) 100%),
    radial-gradient(52% 44% at 100% 2%,rgba(0,153,166,.16) 0%,rgba(0,153,166,0) 100%),
    radial-gradient(50% 40% at 0% 100%,rgba(250,133,46,.10) 0%,rgba(250,133,46,0) 100%),
    radial-gradient(52% 42% at 96% 100%,rgba(84,82,235,.12) 0%,rgba(84,82,235,0) 100%),
    var(--bg);
  background-attachment:fixed}
a{color:var(--indigo);text-decoration:none}
button{font-family:inherit}
.glass{background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 18px 44px rgba(29,28,58,.08)}
.mark{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(84,82,235,.35);flex:none}
.mark svg{width:100%;height:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:23px;
  font-size:15px;font-weight:600;background:var(--grad);color:#fff;border:none;cursor:pointer;
  box-shadow:0 10px 24px rgba(84,82,235,.30);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(84,82,235,.40)}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{color:var(--indigo);transform:none}
.btn.sm{height:36px;padding:0 14px;font-size:14px;border-radius:18px}
.btn.ok{background:linear-gradient(135deg,#1FBF99,#0099A6);box-shadow:0 8px 18px rgba(31,191,153,.3)}
.muted{color:var(--muted)}
.h{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0}
.eyebrow{font-size:13px;font-weight:600;color:var(--indigo);letter-spacing:.02em}


/* ---- shell ---- */
.top{position:sticky;top:0;z-index:20;padding:14px 20px 0}
.nav{display:flex;align-items:center;gap:16px;padding:9px 12px 9px 14px;border-radius:24px}
.word{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.word small{font-size:12px;font-weight:600;color:var(--indigo);background:rgba(84,82,235,.10);padding:3px 9px;border-radius:10px;letter-spacing:0}
.nav .mid{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.crumb{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--ink);font-weight:600}
.crumb a{cursor:pointer;color:var(--indigo)}.crumb a:hover{text-decoration:underline}
.ring{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.navlink{font-size:14px;font-weight:500;color:var(--ink);padding:8px 12px;border-radius:14px;cursor:pointer;background:none;border:none}
.navlink:hover,.navlink.on{background:rgba(84,82,235,.09);color:var(--indigo)}
.avatar{width:34px;height:34px;border-radius:17px;background:linear-gradient(135deg,#0099A6,#1FBF99);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.saved{font-size:12px;color:var(--mint);font-weight:600;white-space:nowrap}

.layout{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:20px;max-width:1320px;margin:0 auto}
.rail{border-radius:22px;padding:14px;align-self:start;position:sticky;top:92px}
.rail h4{margin:4px 8px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rail a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--ink);font-size:14.5px;cursor:pointer}
.rail a:hover{background:rgba(84,82,235,.07)}
.rail a.on{background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(84,82,235,.28)}
.rail a .c{margin-left:auto;font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
.st{width:9px;height:9px;border-radius:5px;flex:none}
.s-done{background:var(--mint)}.s-draft{background:var(--gold)}.s-none{background:#D6D4E6}.s-part{background:linear-gradient(90deg,var(--mint) 50%,#D6D4E6 50%)}
.rail a.on .st{box-shadow:0 0 0 2px #fff}
.main{min-width:0}
.layout.solo{grid-template-columns:1fr;max-width:900px}.layout.solo .rail{display:none!important}.layout.solo~* .menu-btn{display:none}
.card{border-radius:22px;padding:24px}
.menu-btn{display:none}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;padding:12px}
  .rail{display:none;position:fixed;inset:78px 12px auto 12px;z-index:30;max-height:70vh;overflow:auto}
  .rail.open{display:block}
  .menu-btn{display:inline-flex}
  .crumb{display:none}
  .hide-sm{display:none}
}

/* ---- screens ---- */
.screen{display:none}.screen.on{display:block}
.center{max-width:460px;margin:8vh auto;text-align:center}
.codebox{display:flex;gap:10px;justify-content:center;margin:22px 0}
.codebox input{width:50px;height:60px;border-radius:14px;border:1.5px solid var(--line);text-align:center;font-size:26px;font-weight:700;background:rgba(255,255,255,.8);font-family:inherit}
.codebox input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(84,82,235,.12)}

.sec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:18px}
.sec{border-radius:18px;padding:16px;cursor:pointer;transition:transform .15s}
.sec:hover{transform:translateY(-2px)}
.sec .t{font-weight:600;display:flex;align-items:center;gap:8px}
.bar{height:6px;border-radius:3px;background:rgba(29,28,58,.07);overflow:hidden;display:flex;margin:12px 0 6px}
.bar i{display:block;height:100%}

.step{display:grid;grid-template-columns:280px 1fr;gap:20px}
@media (max-width:1100px){.step{grid-template-columns:1fr}}
.phone{width:250px;margin:0 auto;height:470px;border:9px solid var(--ink);border-radius:36px;background:#fff;padding:30px 14px;font-size:12.5px;position:relative;box-shadow:0 20px 40px rgba(29,28,58,.15)}
.phone .ttl{font-weight:700;font-size:16px;margin-bottom:12px}
.phone .row{background:#F2F1FB;border-radius:12px;padding:10px;margin-bottom:8px;color:var(--muted)}
.phone .hl{outline:3px solid var(--orange);outline-offset:2px;background:#FFF3E8;color:var(--ink)}
.where{font-size:13px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}
.en{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:6px 0 4px;line-height:1.35}
.tok{display:inline-block;background:rgba(84,82,235,.12);color:var(--indigo);font-weight:700;padding:0 7px;border-radius:7px;font-size:.92em}
.ph{border-radius:14px;background:rgba(84,82,235,.06);padding:12px 14px;margin:14px 0;font-size:14px;line-height:1.5}
.ph .x{display:flex;gap:10px;align-items:baseline;margin-top:6px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;margin:9px 0;cursor:pointer;background:rgba(255,255,255,.75);transition:border-color .15s}
.opt:hover{border-color:rgba(84,82,235,.4)}
.opt.sel{border-color:var(--indigo);background:#F6F5FF;box-shadow:0 0 0 4px rgba(84,82,235,.08)}
.opt .k{width:28px;height:28px;border-radius:9px;background:rgba(84,82,235,.1);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;font-size:14px}
.opt.sel .k{background:var(--grad);color:#fff}
.opt .s{font-size:12px;color:var(--muted);margin-top:2px}
textarea{width:100%;min-height:80px;border:1.5px solid var(--line);border-radius:14px;padding:12px;font:inherit;font-size:16px;resize:vertical;background:#fff}
textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(84,82,235,.1)}
.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.tools button{min-width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:17px;cursor:pointer;padding:0 8px}
.tools button.tokb{font-size:13px;font-weight:700;color:var(--indigo);background:rgba(84,82,235,.08);border-color:transparent}
.tools .sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.checks{list-style:none;padding:0;margin:8px 0 0;font-size:14px}
.checks li{padding:3px 0}
.pass::before{content:"✓  ";color:var(--mint);font-weight:800}
.fail{color:#C0283F}.fail::before{content:"✕  ";font-weight:800}
.warn{color:#8A5A00}.warn::before{content:"!  ";font-weight:800}
.actionbar{position:sticky;bottom:70px;margin-top:18px;border-radius:22px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.actionbar .grow{flex:1;font-size:13px;color:var(--muted);text-align:center}
.kbd{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:#fff}
.help{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:10px;background:rgba(84,82,235,.1);color:var(--indigo);font-size:12px;font-weight:800;cursor:help;margin-left:6px;position:relative;vertical-align:middle}
.help:hover::after{content:attr(data-tip);position:absolute;left:26px;top:-8px;width:260px;background:var(--ink);color:#fff;font-weight:400;font-size:13px;line-height:1.45;padding:9px 11px;border-radius:10px;z-index:40;text-align:left}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
del{color:#C0283F;background:#FDE8EB;text-decoration:none;border-radius:4px;padding:0 2px}
ins{color:#0B7A60;background:#E2F6F0;text-decoration:none;border-radius:4px;padding:0 2px}
.pill{font-size:12px;font-weight:600;border-radius:10px;padding:3px 9px;white-space:nowrap}
.p-i{background:rgba(84,82,235,.1);color:var(--indigo)}.p-t{background:rgba(0,153,166,.1);color:#007C87}
.p-g{background:rgba(250,191,36,.18);color:#8A5A00}.p-m{background:rgba(31,191,153,.14);color:#0B7A60}.p-x{background:rgba(29,28,58,.06);color:var(--muted)}
.board{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:12px;overflow-x:auto}
.col h5{margin:0 0 10px;font-size:13px;display:flex;justify-content:space-between;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tile{border-radius:16px;padding:12px;margin-bottom:10px;font-size:14px;background:rgba(255,255,255,.8);border:1px solid var(--line)}
.tile .m{font-size:12px;color:var(--muted);margin-top:4px}
.tile.hot{border-color:var(--orange);box-shadow:0 0 0 3px rgba(250,133,46,.12)}
.tile.ready{border-color:var(--mint)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.stat{border-radius:18px;padding:16px}
.stat b{font-size:26px;letter-spacing:-.02em;display:block}
.stat span{font-size:13px;color:var(--muted)}
.row2{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.layout.wide{max-width:1500px}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));border-radius:22px;overflow-x:auto;padding:0}
.lane{padding:14px 12px 16px;border-right:1px solid var(--line);min-height:460px;border-top:4px solid var(--c)}
.lane:last-child{border-right:none}
.lane h5{margin:2px 4px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.lane h5 span{background:rgba(29,28,58,.07);border-radius:9px;padding:1px 8px;font-size:12px;color:var(--muted)}
.kc{background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:14px;padding:11px 12px;margin-bottom:10px;font-size:14px;box-shadow:0 4px 12px rgba(29,28,58,.05)}
.kc .kt{font-weight:600}
.kc .m{font-size:12.5px;color:var(--muted);margin-top:3px}
.kc .pk{font-size:12.5px;margin-top:6px;padding:4px 8px;border-radius:8px;background:rgba(84,82,235,.06)}
.kc .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.kc .ka{margin-top:8px}
.kc.hot{box-shadow:0 0 0 3px rgba(250,133,46,.18)}
.kc .bar{margin:8px 0 4px}
.warn-t{color:#8A5A00!important}
.empty{font-size:13px;color:var(--muted);text-align:center;padding:24px 0;border:1.5px dashed var(--line);border-radius:14px}
.vb{display:flex;justify-content:space-between;font-size:12.5px;margin-top:5px;padding:4px 8px;border-radius:8px;background:rgba(31,191,153,.08)}.vb span{color:var(--muted)}
.fl{margin:20px 0 8px;font-weight:600;display:flex;align-items:center;gap:8px}
.fl .n{width:22px;height:22px;border-radius:11px;background:var(--grad);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.inp{width:100%;height:46px;border-radius:14px;border:1.5px solid var(--line);padding:0 14px;font:inherit;background:#fff}
.who{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:8px;background:#fff;cursor:pointer}
.who.sel{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(84,82,235,.08)}
.newt{border-radius:16px;padding:14px;margin-top:4px}
.lchip{border:1.5px solid var(--line);border-radius:12px;padding:4px 10px;font-size:13px;background:#fff;cursor:pointer}
.lchip.on{border-color:var(--indigo);background:rgba(84,82,235,.08);color:var(--indigo);font-weight:600}
.mailprev{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;font-size:14.5px;line-height:1.55}
@media (max-width:900px){.mailgrid{grid-template-columns:1fr!important}}

/* ---- added for the live site ---- */
.flash{border-radius:14px;padding:12px 16px;margin:0 0 14px;font-size:14.5px}
.flash.ok{background:rgba(31,191,153,.12);color:#0B6B55}
.flash.err{background:rgba(245,87,107,.12);color:#A3182E}
.field{margin:14px 0}
.field label{display:block;font-weight:600;margin-bottom:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
form.inline{display:inline}
.qr{background:#fff;border-radius:16px;padding:12px;display:inline-block}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.recovery{display:grid;grid-template-columns:repeat(2,auto);gap:6px 18px;font-size:16px}
.small{font-size:13px}
.rtl{direction:rtl;text-align:right}
footer.site{max-width:1320px;margin:10px auto 40px;padding:0 20px;font-size:12.5px;color:var(--muted)}

/* ---- a button that has been pressed and is waiting (busy.js) ---- */
.btn.busy{opacity:.85;cursor:progress;transform:none}
.spin{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:spin .7s linear infinite;vertical-align:-2px;margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ---- the header strip is solid, so the page scrolls BEHIND it, not under
   a see-through bar (Gelu, 2026-09-24: "the body scroll goes under the menu") ---- */
.top{background:var(--bg);padding-bottom:12px;box-shadow:0 8px 16px -12px rgba(29,28,58,.18)}
.top .nav{background:#fff}
.rail{top:104px}

/* ---- loading feedback (busy.js) ---- */
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:var(--grad);
  box-shadow:0 0 8px rgba(84,82,235,.5);opacity:0;transition:opacity .2s}
#loadbar.on{opacity:1;animation:loadbar 8s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes loadbar{0%{width:0}15%{width:45%}50%{width:75%}100%{width:92%}}
html.is-busy, html.is-busy *{cursor:progress !important}
.going{opacity:.55;transition:opacity .15s}
a.sec.going, .kc.going, .opt.going{opacity:.55;transform:none}
@media (prefers-reduced-motion:reduce){#loadbar.on{animation-duration:16s}}

/* ---- the admin pages use the whole screen (Gelu, 2026-09-24: "make use of the
   entire screen !! i dont want to be forced to scroll the kanban") ---- */
.layout.wide{max-width:none;grid-template-columns:210px minmax(0,1fr);gap:16px;padding:16px 20px}
.kanban{grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:visible}
.lane{min-width:0;padding:12px 9px 14px}
.lane h5{font-size:11.5px;gap:6px}
.kc{font-size:13.5px;overflow-wrap:anywhere}
.kc .btn.sm{padding:0 10px;font-size:13px;white-space:normal;height:auto;min-height:32px}
/* On a narrow screen the lanes stack in pairs instead of scrolling sideways. */
@media (max-width:1100px){ .kanban, #board{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .lane{border-right:none;border-bottom:1px solid var(--line)} }
@media (max-width:640px){ .kanban, #board{grid-template-columns:1fr !important} }
.layout:not(.solo){max-width:none}

/* ---- what the app shows today, beside the picture (step page) ---- */
.nowbox{margin:14px auto 0;max-width:280px;border:1.5px solid rgba(31,191,153,.45);background:rgba(31,191,153,.07);border-radius:14px;padding:10px 12px;font-size:14px}
.nowlabel{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0B6B55}
.nowlabel.mine{color:var(--indigo);margin-top:10px}
.nowtext{margin-top:3px;line-height:1.45}
.nowtext.mine{color:var(--indigo)}
.nowpill{display:inline-block;font-size:11.5px;font-weight:700;color:#0B6B55;background:rgba(31,191,153,.12);border-radius:8px;padding:1px 7px}
.alldone{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  border:1.5px solid rgba(31,191,153,.5);background:rgba(31,191,153,.08);font-size:15px}
#next.ok{background:linear-gradient(135deg,#1FBF99,#0099A6);box-shadow:0 8px 18px rgba(31,191,153,.3)}