*{box-sizing:border-box;margin:0}
:root{--bg:#0B0B0E;--panel:rgba(255,255,255,.045);--line:rgba(255,255,255,.10);--soft:rgba(255,255,255,.06);--text:#F4F4F6;--dim:rgba(255,255,255,.55);--blue:#FFFFFF}
html,body{background:linear-gradient(180deg,#232428,#0B0B0E) fixed;color:var(--text);font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;font-size:15px}
[hidden]{display:none!important}
a{color:inherit}
.login{max-width:360px;margin:16vh auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;display:grid;gap:14px}
.login h1{font-size:22px}
.err{color:#ff9aa5;min-height:20px;font-size:14px}
.side{position:fixed;right:0;top:0;bottom:0;width:230px;background:rgba(0,0,0,.25);border-left:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;margin-bottom:30px}
.brand img{height:34px;width:auto}
.brand i{width:36px;height:36px;border-radius:10px;border:1.5px dashed #555c6e;display:grid;place-items:center;font-style:normal;color:#7a8296}
.nav a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;color:#a9afbd;margin-bottom:4px;text-decoration:none}
.nav a.on{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.nav a span{width:18px;text-align:center}
.out{margin-top:auto;color:var(--dim);cursor:pointer;padding:10px 14px}
.main{margin-right:230px;padding:26px 34px;min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.top h1{font-size:24px;font-weight:600}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;border:1px solid #2c3242;background:#1b1f28;color:#dfe3ec;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{border-color:#47506a}
.btn.p{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.16));border-color:rgba(255,255,255,.85);color:#fff}
.btn.r{background:#3a1d22;border-color:#6a2b33;color:#ffb3b3}
.btn.s{padding:5px 10px;font-size:12.5px;font-weight:400}
.btn:disabled{opacity:.5;cursor:default}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.card small{color:var(--dim);font-size:13px}.card b{display:block;font-size:30px;font-weight:600;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.up{color:#6fd38f;font-size:12px}.mut{color:var(--dim);font-size:12.5px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.panel h3{font-size:15px;font-weight:600;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{color:var(--dim);font-weight:400;text-align:right;padding:10px;border-bottom:1px solid var(--line);font-size:12.5px;white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--soft);vertical-align:middle}
.code{direction:ltr;unicode-bidi:embed;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;white-space:nowrap}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;white-space:nowrap}
.ok{background:#173524;color:#7fe0a0}.off{background:#2a2d36;color:#9aa1b2}.new{background:rgba(255,255,255,.12);color:#fff}
.tg{display:inline-block;width:34px;height:19px;border-radius:10px;background:#363b49;position:relative;vertical-align:middle;cursor:pointer;border:0}
.tg::after{content:"";position:absolute;top:2.5px;right:3px;width:14px;height:14px;border-radius:7px;background:#9aa1b2;transition:.15s}
.tg.on{background:#F4F4F6}.tg.on::after{right:17px;background:#0B0B0E}
input,select,textarea{background:rgba(0,0,0,.35);border:1px solid #2c3242;color:var(--text);border-radius:9px;padding:9px 12px;font:inherit;font-size:14px}
input[type=file]{padding:7px}
.search{width:300px;max-width:100%}
.seg{display:inline-flex;background:rgba(0,0,0,.35);border:1px solid #2c3242;border-radius:10px;padding:3px;flex-wrap:wrap}
.seg button{padding:6px 14px;border-radius:8px;color:#a9afbd;background:none;border:0;font:inherit;cursor:pointer}
.seg button.on{background:rgba(255,255,255,.18);color:#fff}
.lab{color:var(--dim);font-size:13px;margin:14px 0 6px}
.bars{direction:ltr;display:flex;align-items:flex-end;gap:4px;height:160px}
.bars i{flex:1;background:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,.35));border-radius:3px 3px 0 0;min-height:2px;position:relative}
.bars i:hover::after{content:attr(data-n);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;font-style:normal;color:#fff;background:#000;padding:1px 5px;border-radius:4px}
.meter{height:6px;background:var(--line);border-radius:3px;margin:4px 0 10px}.meter div{height:100%;background:#F4F4F6;border-radius:3px}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:5}
.modal{background:#1B1C20;border:1px solid #2c3242;border-radius:16px;padding:26px 28px;width:min(620px,92vw);max-height:90vh;overflow:auto}
.modal h2{font-size:20px;font-weight:600;margin-bottom:6px}
.done{margin-top:18px;padding:14px;border-radius:12px;background:#132a1d;border:1px solid #24553a;color:#9fe3b7}
#toast{position:fixed;bottom:22px;left:22px;background:#232a3a;border:1px solid #3a4256;padding:12px 18px;border-radius:12px;z-index:9}
.print{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.drop{border:1.5px dashed #3a4256;border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center;color:#7a8296;font-size:13px}
.drop img{width:86px;height:54px;object-fit:cover;border-radius:5px;background:#0f1218}
.sheets{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.sheets canvas{background:#fff;border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:100%}
.menu{position:relative;display:inline-block}
.menu>div{position:absolute;left:0;top:100%;background:#1b1f28;border:1px solid #2c3242;border-radius:10px;padding:6px;z-index:3;min-width:160px}
.menu>div a{display:block;padding:8px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.menu>div a:hover{background:#232a3a}
.pager{display:flex;gap:8px;align-items:center;margin-top:12px;color:var(--dim)}
@media (max-width:900px){.side{position:static;width:auto;border:0}.main{margin:0;padding:18px}.grid2,.print{grid-template-columns:1fr}}

/* team panel */
.who{margin-top:auto;padding:12px 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.badge{margin-right:auto;background:#ff5a5a;color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-style:normal}
.dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:#5a5f6c;margin-left:6px;vertical-align:middle}
.dot.on{background:#6fd38f;box-shadow:0 0 8px #6fd38f}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.grid2>*,.grid3>*,.main{min-width:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}.kv span{color:var(--dim)}
.timeline{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;margin-top:10px}
.timeline>div{padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.035);font-size:13.5px}
.timeline>div.new{border-right:3px solid #ff9a5a}.timeline p{margin-top:4px}
.perms{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13.5px}.perms label{display:flex;gap:8px;align-items:center}
table.click tr[data-code]{cursor:pointer}table.click tr[data-code]:hover td{background:rgba(255,255,255,.04)}
a.card{text-decoration:none;color:inherit}
pre.trace{direction:ltr;text-align:left;white-space:pre-wrap;font-size:12px;max-height:60vh;overflow:auto;background:rgba(0,0,0,.4);padding:12px;border-radius:10px}
textarea{font:inherit;font-size:14px}

/* sales pages */
.pe{display:grid;grid-template-columns:1fr 410px;gap:18px;align-items:start}
.pe-prev{position:sticky;top:20px}
.pe-prev iframe{width:390px;height:780px;max-height:82vh;border:1px solid var(--line);border-radius:26px;background:#0B0B0E}
.blk{padding:14px 16px}
.blk-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.blk .drop img{width:120px;height:auto;max-height:120px;object-fit:contain}
.faq-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;margin-top:8px;align-items:start}
@media (max-width:1200px){.pe{grid-template-columns:1fr}.pe-prev{position:static}}
.hscroll{overflow-x:auto}.hscroll table{min-width:980px}
.adimg{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:10px;border:1.5px dashed #3a4256;cursor:pointer;color:#7a8296;overflow:hidden;vertical-align:middle}
.adimg img{width:100%;height:100%;object-fit:contain}

/* speed and simpler work */
.navh{color:var(--dim);font-size:11.5px;letter-spacing:.04em;margin:14px 14px 6px}
.nav .navh:first-child{margin-top:0}
.qs{width:100%;margin:0 0 14px;font-size:13.5px}
.side{overflow-y:auto}
.saved{font-size:13px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--dim);white-space:nowrap}
.saved.ok{color:#7fe0a0}.saved.busy{color:#fff}.saved.err{color:#ff9aa5;background:#3a1d22}
input.bad{border-color:#a8434f}
.tasks{display:grid;gap:10px}
.task{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);text-decoration:none}
.task:hover{border-color:rgba(255,255,255,.4)}
.task b{font-size:26px;font-weight:600;min-width:48px;text-align:center;font-variant-numeric:tabular-nums}
.task span{flex:1;display:flex;flex-direction:column;gap:2px}
.task small{color:var(--dim);font-size:12.5px}
.task i{font-style:normal;color:var(--dim)}
details.more{position:relative;display:inline-block}
details.more summary{list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more>div{position:absolute;top:calc(100% + 6px);right:0;z-index:3;background:#1b1f28;border:1px solid #2c3242;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:190px}
@media (max-width:900px){
  .side{position:sticky;top:0;z-index:4;padding:10px 12px;background:#141519;border-bottom:1px solid var(--line)}
  .brand,.navh{display:none}
  .who{flex-direction:row;align-items:center;gap:8px;border:0;padding:8px 0 0;margin:0}
  .who .row{margin:0!important}
  .qs{margin:0 0 8px}
  .nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .nav a{white-space:nowrap;margin:0;padding:8px 12px;font-size:14px}
  .panel{overflow-x:auto}
  .grid3{grid-template-columns:1fr}
  .search{width:100%}
}
.hscroll.fit table{min-width:0}.hscroll.fit{max-width:100%}

/* ---- layout v2: easier to read and to find things ---- */
:root{--dim:rgba(255,255,255,.64);--warn:#ffcf7a;--bad:#ff8f9b;--good:#7fe0a0}
html,body{font-size:15px;line-height:1.55}
.side{width:236px;padding:20px 14px}
.main{margin-right:236px;padding:24px 32px 60px;max-width:1500px}
.nav a{padding:9px 12px;margin-bottom:2px;font-size:14.5px;position:relative}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a.on::before{content:"";position:absolute;right:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:#fff}
.top{margin-bottom:18px;align-items:flex-start}
.top h1{font-size:23px;line-height:1.3}
.sub{color:var(--dim);font-size:13.5px;margin-top:4px;max-width:720px}
.top>.row,.top>div:last-child{align-self:center}
/* numbers: compact tiles in one line */
.cards{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.card{padding:14px 16px;border-radius:12px}
.card small{font-size:12.5px}
.card b{font-size:25px;margin:4px 0 0}
.card span{display:block;margin-top:2px}
/* panels */
.panel{padding:16px 18px;border-radius:12px}
.panel h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.panel h3 .mut{font-weight:400}
/* tables: a clear header, a highlighted row, actions kept on one line */
table{font-size:14px}
th{background:rgba(255,255,255,.035);color:var(--dim);font-size:12.5px;padding:9px 10px;position:sticky;top:0;z-index:1}
th:first-child{border-radius:0 8px 8px 0}th:last-child{border-radius:8px 0 0 8px}
td{padding:11px 10px}
tr:hover td{background:rgba(255,255,255,.025)}
td .mut,.cell2{display:block;margin-top:2px}
td.act{white-space:nowrap;text-align:left}
td.act .btn{margin-inline-start:4px}
td.nw,.nw{white-space:nowrap}
/* states: green good, amber soon, red needs action, grey off */
.pill{font-weight:500}
.pill.warn{background:#3a2f17;color:var(--warn)}
.pill.bad{background:#3a1d22;color:var(--bad)}
/* tabs inside a page */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;color:var(--dim);font:inherit;font-size:14.5px;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs button.on{color:#fff;border-bottom-color:#fff}
.tabs button:hover{color:#fff}
[data-tab][hidden]{display:none!important}
/* the customer at a glance */
.glance{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:8px;font-size:13.5px;color:var(--dim)}
.glance b{color:var(--text);font-weight:500}
@media (max-width:900px){.side{width:auto;padding:10px 12px}.main{margin:0;padding:16px 14px 50px;max-width:none}.nav a.on::before{display:none}.top h1{font-size:20px}}
.narrow{max-width:820px}.narrow textarea{min-height:110px}
/* a wide table scrolls inside its panel instead of pushing the page sideways */
.panel{overflow-x:auto}
.panel:has(details.more){overflow:visible}
.one{display:flex;justify-content:center}.one canvas{width:min(100%,520px);height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ---- v3: simpler and steadier ----
   One button system: same height everywhere, one strong button per place (white), quiet ones around it, red kept for
   delete and set apart. Icons always come with their words. Fields have their label above them, never only a hint. */
:root{--r:10px;--h:38px;--hs:32px;--field:rgba(0,0,0,.32);--edge:rgba(255,255,255,.14)}
.btn{height:var(--h);padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:500;gap:7px;border:1px solid var(--edge);background:rgba(255,255,255,.06);color:var(--text);white-space:nowrap;justify-content:center;transition:background .12s,border-color .12s}
.btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
.btn.p{background:#F4F4F6;border-color:#F4F4F6;color:#0B0B0E;font-weight:600}
.btn.p:hover{background:#fff}
.btn.r{background:rgba(255,90,90,.10);border-color:rgba(255,120,120,.38);color:#ff9d9d}
.btn.r:hover{background:rgba(255,90,90,.2)}
.btn.rr{background:#d84a4a;border-color:#d84a4a;color:#fff;font-weight:600}
.btn.rr:hover{background:#e65a5a}
.btn.g{background:none;border-color:transparent;color:var(--dim)}
.btn.g:hover{color:#fff;background:rgba(255,255,255,.06)}
.btn.s{height:var(--hs);padding:0 12px;font-size:13px;font-weight:500}
.btn.i{width:var(--hs);padding:0;height:var(--hs)}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:2px}
input,select{height:var(--h);padding:0 12px;border-radius:var(--r);background:var(--field);border-color:var(--edge)}
textarea{padding:10px 12px;border-radius:var(--r);background:var(--field);border-color:var(--edge)}
input[type=color]{padding:3px}
.lab{font-size:13px;color:var(--dim);margin:14px 0 6px;font-weight:500}
.modal .row:last-child{margin-top:20px}
#toast{display:flex;align-items:center;gap:14px;background:#26272d;border:1px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.45)}
#toast .btn{height:30px}

/* the code page: the code first and big, who it belongs to, then all actions in one steady bar */
.back{display:inline-block;color:var(--dim);text-decoration:none;font-size:13.5px;margin-bottom:10px}
.back:hover{color:#fff}
.idcard{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;padding:22px 24px;margin-bottom:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--edge);border-radius:16px}
.idcard .k{font-size:12.5px;color:var(--dim);margin-bottom:4px}
.bigcode{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bigcode b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:34px;font-weight:700;letter-spacing:.06em;direction:ltr;unicode-bidi:embed;line-height:1.1}
.idwho{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px;font-size:14.5px}
.idwho .nm{font-size:17px;font-weight:600}
.idwho .ph{direction:ltr;unicode-bidi:embed;color:var(--dim)}
.idcard .contact{display:flex;flex-direction:column;gap:8px;min-width:210px}
.idcard .contact .k{margin:0}
.actbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;margin-bottom:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.actbar .sp{flex:1}
.warnbox{margin:14px 0 4px;padding:14px 16px;border-radius:12px;background:rgba(255,90,90,.09);border:1px solid rgba(255,120,120,.35);color:#ffc2c2;line-height:1.75}
.warnbox b{color:#fff}
.okbox{margin:14px 0 4px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim)}
td.act{width:1%}
td.act .btn.i{color:var(--dim)}
td.act .btn.i:hover{color:#ff9d9d;border-color:rgba(255,120,120,.38)}
@media (max-width:900px){.bigcode b{font-size:26px}.idcard{padding:16px}.idcard .contact{min-width:0;width:100%}}

/* messages: the template tiles and the TV preview (sizes in --u, a 960-wide TV screen like FOOR Theme's) */
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tpl{display:flex;flex-direction:column;gap:4px;text-align:right;padding:10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font:inherit;cursor:pointer}
.tpl:hover{border-color:rgba(255,255,255,.3)}
.tpl.on{border-color:#fff;box-shadow:0 0 0 1px #fff;background:rgba(255,255,255,.07)}
.tpl b{font-size:14px;margin-top:6px}.tpl small{color:var(--dim);font-size:12px}
.msg-edit{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.15fr);gap:24px;margin-top:6px;align-items:start}
@media (max-width:1100px){.msg-edit{grid-template-columns:1fr}}
.tvp{--u:calc(100cqw / 960);container-type:inline-size;position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:radial-gradient(60% 50% at 85% 0%,rgba(255,255,255,.08),transparent),linear-gradient(180deg,#232428,#0B0B0E);border:1px solid var(--line)}
.tvp.big{border-radius:14px;border:6px solid #000;box-shadow:0 0 0 1px var(--line),0 14px 40px rgba(0,0,0,.5)}
.tvp-home{position:absolute;inset:0;padding:16% 6% 0;display:flex;align-items:flex-start;gap:2.4%;opacity:.55}
.tvp-home i{flex:1;aspect-ratio:16/10;border-radius:8%;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12)}
.tvp-msg{position:absolute;left:50%;bottom:calc(var(--u)*40);transform:translateX(-50%);max-width:calc(var(--u)*620);width:max-content;
  padding:calc(var(--u)*16) calc(var(--u)*28);border-radius:calc(var(--u)*30);text-align:center;color:#fff;line-height:1.45;
  background:linear-gradient(135deg,rgba(60,62,70,.94),rgba(26,27,32,.94));border:max(1px,calc(var(--u)*1.5)) solid rgba(255,255,255,.34)}
.tvp-msg b{display:block;font-size:calc(var(--u)*19);font-weight:600;margin-bottom:calc(var(--u)*4)}
.tvp-msg span{display:block;font-size:calc(var(--u)*17);color:rgba(255,255,255,.88);white-space:pre-line}
.tvp-msg.offer,.tvp-msg.greet{border-color:rgba(232,194,122,.75)}.tvp-msg.offer b,.tvp-msg.greet b{color:#E8C27A}
.tvp-msg.alert{border-color:rgba(255,180,90,.75)}.tvp-msg.alert b{color:#FFB45A}
.tvp-msg.greet{bottom:auto;top:50%;transform:translate(-50%,-50%);max-width:calc(var(--u)*700);padding:calc(var(--u)*28) calc(var(--u)*40)}
.tvp-msg.greet b{font-size:calc(var(--u)*26)}.tvp-msg.greet span{font-size:calc(var(--u)*19)}
.pill.tp-info{background:rgba(255,255,255,.1);color:#fff}.pill.tp-offer,.pill.tp-greet{background:rgba(232,194,122,.14);color:#E8C27A}.pill.tp-alert{background:rgba(255,180,90,.14);color:#FFB45A}