:root{
  --ink:#0b2a21;--ink-2:#12382d;
  --bg:#f8f5ee;--surface:#ffffff;--surface-2:#f3eee3;--border:#e8e0d0;
  --text:#132a23;--muted:#5f6f69;--accent:#c9793f;--accent-2:#e39a5e;--accent-soft:#fbeee2;
  --ok:#2f7a5d;--ok-soft:#e3f1ea;--warn:#b7791f;--warn-soft:#fbf0dc;--bad:#b4442f;--bad-soft:#f8e4df;--info:#8a6a2b;--info-soft:#f5ecd9;
  --sidebar:#ffffff;--sidebar-active:#fbeee2;--rail:#0b2a21;--hero:#0b2a21;--hero-2:#134a38;--hero-text:#f8f5ee;
  --shadow:0 1px 2px rgba(11,42,33,.04),0 10px 30px rgba(11,42,33,.06);
  --r:22px;--font-body:"Rubik",system-ui,sans-serif;--font-head:"Lora",Georgia,serif;
}
:root[data-theme="dark"]{
  --bg:#0a1f19;--surface:#10291f;--surface-2:#163428;--border:#244536;
  --text:#edf3ef;--muted:#9db3a8;--accent:#e39a5e;--accent-2:#f0b27c;--accent-soft:#33392a;
  --ok:#6cc59f;--ok-soft:#173a2a;--warn:#e3b35c;--warn-soft:#3b3a2a;--bad:#ec8a73;--bad-soft:#3d2f30;--info:#e0c07f;--info-soft:#3a3322;
  --sidebar:#0e261d;--sidebar-active:#2b3a2a;--rail:#07170f;--hero:#081a13;--hero-2:#12402f;--shadow:none;
}
:root[lang="ar"]{--font-body:"Cairo",system-ui,sans-serif;--font-head:"Cairo",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
svg.lucide{width:18px;height:18px;stroke-width:1.75;flex:none}
h1,h2,h3{font-family:var(--font-head);font-weight:600;margin:0;line-height:1.25}
:root[lang="ar"] h1,:root[lang="ar"] h2{font-weight:700}
.muted{color:var(--muted)}.small{font-size:12.5px}.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.hide{display:none!important}

/* ---------- buttons, badges, inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 20px;border:1px solid transparent;cursor:pointer;font-weight:600;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 28%,transparent);transition:filter .15s,transform .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text);box-shadow:none}
.btn.dark{background:var(--ink);color:#fff;box-shadow:none}
.btn.light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.btn.sm{padding:6px 13px;font-size:13px}.btn.lg{padding:14px 26px;font-size:15px}
.btn.block{width:100%}
.btn svg{width:16px;height:16px}
.link{background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:0;display:inline-flex;gap:6px;align-items:center}
.iconbtn{width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative;flex:none}
.iconbtn .dot{position:absolute;top:8px;inset-inline-end:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pill{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.bad{background:var(--bad-soft);color:var(--bad)}.badge.info{background:var(--info-soft);color:var(--info)}.badge.mute{background:var(--surface-2);color:var(--muted)}
.badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge svg{width:12px;height:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.input{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);outline:none;width:100%;font-weight:400;font-size:14px}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select.input{cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer;background:var(--surface);font-size:13px;display:inline-flex;gap:6px;align-items:center}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:999px;width:max-content;max-width:100%;overflow:auto}
.tabs button{border:0;background:transparent;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;color:var(--muted);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* ---------- logos ---------- */
.logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent-2),#9a5a26);color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px;font-family:Arial,sans-serif;box-shadow:0 6px 16px rgba(201,121,63,.3);flex:none}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.brand b{font-size:19px;font-family:var(--font-head)}
.plogo{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;flex:none;position:relative}
.plogo img{width:70%;height:70%;object-fit:contain}
.plogo .mono{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.plogo.lg{width:64px;height:64px;border-radius:18px}
.plogo.sm{width:32px;height:32px;border-radius:10px;font-size:12px}

/* ---------- public site ---------- */
.pub-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:14px max(20px,calc((100vw - 1200px)/2));background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.pub-nav .links{display:flex;gap:20px;flex:1}
.pub-nav .links a{color:var(--text);font-weight:600;font-size:14px}
.pub-nav .links a:hover{color:var(--accent)}
.pub-nav .tools{display:flex;gap:8px;align-items:center}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.p-hero{position:relative;overflow:hidden;background:radial-gradient(90% 120% at 100% 0%,var(--hero-2),transparent 60%),linear-gradient(160deg,var(--hero),#0e3629);color:var(--hero-text);border-radius:0 0 40px 40px;padding:70px 0 90px}
.p-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.p-hero h1{font-size:clamp(34px,5vw,58px);margin:14px 0 16px}
.p-hero h1 em{font-style:normal;color:var(--accent-2)}
.p-hero p{color:#c3d3cb;font-size:17px;max-width:560px;margin:0}
.p-hero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.p-hero .trust{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;color:#c3d3cb;font-size:13px}
.p-hero .trust b{display:block;color:#fff;font-size:22px;font-family:var(--font-head)}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(227,154,94,.28),transparent 65%);inset-inline-end:-120px;top:-160px;pointer-events:none}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--accent-2);text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
:root[lang="ar"] .eyebrow{letter-spacing:0;font-size:13px}
.p-hero .eyebrow{background:rgba(255,255,255,.08);padding:6px 12px;border-radius:999px}
.p-sec{padding:80px 0 0}
.p-sec .head{text-align:center;max-width:640px;margin:0 auto 36px}
.p-sec .head h2{font-size:clamp(26px,3.4vw,38px);margin:8px 0}
.p-sec .head p{color:var(--muted);margin:0}
.strip{margin-top:-46px;position:relative;z-index:2}
.strip .card{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:18px 24px}
.strip .pl{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps .card{position:relative}
.steps .n{font-family:var(--font-head);font-size:40px;color:var(--accent);opacity:.35;position:absolute;top:10px;inset-inline-end:18px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);margin:10px 0 0}
.cta-band{background:linear-gradient(135deg,var(--hero),var(--hero-2));color:#fff;border-radius:28px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band h2{font-size:30px}
.cta-band p{color:#c3d3cb;margin:6px 0 0}
footer.pub{margin-top:80px;background:var(--ink);color:#b9cbc2;padding:50px 0 30px}
footer.pub .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer.pub h4{color:#fff;margin:0 0 12px}
footer.pub a{color:#b9cbc2;display:block;padding:3px 0;cursor:pointer}
footer.pub a:hover{color:var(--accent-2)}
.testi .card p{font-size:15px}
.pay-logos{display:flex;gap:8px;flex-wrap:wrap}
.pay-logos span{border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-weight:700;font-size:12px;background:var(--surface)}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:68px 244px 1fr;min-height:100vh}
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;position:sticky;top:0;height:100vh}
.rail button{width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:#b7c9bf;display:grid;place-items:center;cursor:pointer;position:relative}
.rail button:hover{background:rgba(255,255,255,.06);color:#fff}
.rail button.active{background:#16382b;color:var(--accent-2)}
.rail button.active::before{content:"";position:absolute;inset-inline-start:-12px;top:50%;border:5px solid transparent;border-inline-start-color:var(--accent-2);transform:translateY(-50%)}
.rail .sp{flex:1}
.rail .logo-mark{margin-bottom:10px;cursor:pointer}
.side{background:var(--sidebar);border-inline-end:1px solid var(--border);padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.side .who{display:flex;gap:10px;align-items:center;padding:4px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:8px}
.side .who b{display:block}
.grp{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;padding:14px 8px 6px}
:root[lang="ar"] .grp{letter-spacing:0;font-size:12px}
.nav{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;cursor:pointer;color:var(--text);text-align:start;position:relative}
.nav:hover{background:var(--surface-2)}
.nav.active{background:var(--sidebar-active);color:var(--accent);font-weight:600}
.nav.active::before{content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
.nav .end{margin-inline-start:auto}
main.m{min-width:0}
.top{display:flex;align-items:center;gap:10px;padding:14px 32px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--muted)}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:0}
.top .sp{flex:1}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;flex:none;font-size:13px}
.avatar.sm{width:28px;height:28px;font-size:11px}
.page{padding:24px 32px 60px;max-width:1360px}
.menu-btn{display:none}
.bottom-nav{display:none}

/* ---------- common blocks ---------- */
.hero{background:radial-gradient(120% 140% at 100% 0%,var(--hero-2) 0%,transparent 55%),linear-gradient(135deg,var(--hero),#0f3b2d);color:var(--hero-text);border-radius:28px;padding:36px 32px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-end:-60px;top:-80px;width:340px;height:340px;background:radial-gradient(circle,rgba(227,154,94,.3),transparent 65%);pointer-events:none}
.hero h1{font-size:30px;margin:10px 0 6px;position:relative;z-index:1}
.hero p{color:#c3d3cb;margin:0;max-width:620px;position:relative;z-index:1}
.hero .actions{display:flex;gap:10px;margin-top:18px;position:relative;z-index:1;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.section{margin-top:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;min-width:0}
.card.hov:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,42,33,.1);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:20px}
.stat{display:flex;gap:14px;align-items:flex-start}
.ic{width:42px;height:42px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.stat .lbl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
:root[lang="ar"] .stat .lbl{letter-spacing:0;font-size:13px}
.stat .val{font-family:var(--font-head);font-size:27px;line-height:1.25;font-weight:600}
.stat .sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.stat .sub svg{width:13px;height:13px;color:var(--ok)}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600}.row .s{font-size:12.5px;color:var(--muted)}
.row.click{cursor:pointer;border-radius:12px;padding-inline:8px;margin-inline:-8px}
.row.click:hover{background:var(--surface-2)}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:start;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover td{background:var(--surface-2)}
.tbl{overflow:auto}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 14px}
.toolbar .sp{flex:1}
.bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px}
.bars div{flex:1;background:var(--accent-soft);border-radius:8px 8px 4px 4px;position:relative;transition:.2s}
.bars div:hover,.bars div.hi{background:var(--accent)}
.bars span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--muted)}
.progress{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:8px}
.empty{text-align:center;padding:40px;color:var(--muted)}

/* service cards */
.svc{display:flex;flex-direction:column;gap:10px}
.svc .top-l{display:flex;gap:12px;align-items:center}
.svc .price{font-family:var(--font-head);font-size:21px;font-weight:600;margin-top:auto}
.svc .price small{font-size:12px;color:var(--muted);font-family:var(--font-body);font-weight:400}

/* journey */
.journey{display:flex;margin:16px 0 6px}
.journey div{flex:1;text-align:center;font-size:11.5px;color:var(--muted);position:relative;padding-top:28px}
.journey div::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--border);z-index:1;box-sizing:border-box}
.journey div::after{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:var(--border)}
.journey div:first-child::after{inset-inline-start:50%}.journey div:last-child::after{inset-inline-end:50%}
.journey div.done{color:var(--text);font-weight:600}
.journey div.done::before{background:var(--accent);border-color:var(--accent)}
.journey div.done::after{background:var(--accent)}
.journey div.cur::before{box-shadow:0 0 0 5px var(--accent-soft)}

/* ---------- desk (tickets) ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:14px;overflow:auto;padding-bottom:8px}
.col{background:var(--surface-2);border-radius:18px;padding:12px;min-height:320px}
.col.over{outline:2px dashed var(--accent)}
.col h3{font-family:var(--font-body);font-size:13px;display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.tk{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:10px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.tk:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,42,33,.1);border-color:var(--accent)}
.tk .id{font-size:11.5px;color:var(--muted);font-family:ui-monospace,monospace}
.tk .ti{font-weight:600;margin:6px 0 8px}
.tk .meta{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.tk .meta .avatar{margin-inline-start:auto}
.sla{height:4px;border-radius:4px;background:var(--border);overflow:hidden;margin-top:10px}
.sla i{display:block;height:100%;background:var(--ok)}.sla i.warn{background:var(--warn)}.sla i.bad{background:var(--bad)}
.tk-page{display:grid;grid-template-columns:290px 1fr 310px;gap:16px;align-items:start}
.tk-queue{padding:10px;position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto}
.tk-queue .q{display:block;width:100%;text-align:start;border:0;background:transparent;border-radius:12px;padding:10px;cursor:pointer;border-inline-start:3px solid transparent}
.tk-queue .q:hover{background:var(--surface-2)}
.tk-queue .q.on{background:var(--sidebar-active);border-inline-start-color:var(--accent)}
.tk-props{position:sticky;top:84px}
.prop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.prop:first-of-type{border-top:0}
.prop>span:first-child{color:var(--muted)}
.prop select{max-width:170px;padding:6px 10px}
.thread{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.msg{display:flex;gap:10px;max-width:88%}
.msg .b{background:var(--surface-2);border-radius:16px;padding:12px 14px}
.msg .n{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;gap:8px;align-items:center}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .b{background:var(--accent-soft)}
.msg.note .b{background:var(--warn-soft);border:1px dashed color-mix(in srgb,var(--warn) 40%,transparent)}
.msg.sys{align-self:center;max-width:100%}
.msg.sys .b{background:transparent;color:var(--muted);font-size:12.5px;padding:2px;display:flex;gap:6px;align-items:center}
.composer{border:1px solid var(--border);border-radius:18px;margin-top:18px;overflow:hidden;background:var(--surface)}
.composer.note{border-color:var(--warn);background:var(--warn-soft)}
.composer textarea{border:0;outline:0;background:transparent;width:100%;padding:14px;resize:vertical;min-height:80px}
.composer .bar{display:flex;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--border);flex-wrap:wrap}
.composer .bar .sp{flex:1}
.attach{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:10px;font-size:13px}

/* ---------- meeting room ---------- */
.room{display:grid;grid-template-columns:1fr 320px;gap:16px}
.stage{background:#07170f;border-radius:24px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:440px;position:relative}
.tile{background:linear-gradient(135deg,#12402f,#0b2a21);border-radius:18px;display:grid;place-items:center;position:relative;color:#fff;min-height:200px}
.tile .avatar{width:84px;height:84px;font-size:26px;background:rgba(227,154,94,.2);color:var(--accent-2)}
.tile .nm{position:absolute;bottom:10px;inset-inline-start:12px;background:rgba(0,0,0,.35);padding:3px 10px;border-radius:999px;font-size:12px}
.tile.speaking{box-shadow:0 0 0 3px var(--accent-2)}
.ctrls{display:flex;gap:10px;justify-content:center;margin-top:14px}
.ctrls button{width:48px;height:48px;border-radius:50%;border:0;background:var(--surface-2);cursor:pointer;display:grid;place-items:center;color:var(--text)}
.ctrls button.off{background:var(--bad-soft);color:var(--bad)}
.ctrls button.end{background:var(--bad);color:#fff;width:64px;border-radius:999px}
.chatbox{display:flex;flex-direction:column;height:520px}
.chatbox .thread{flex:1;overflow:auto;padding-inline-end:4px}
.chatbox .msg{max-width:100%}

/* ---------- invoice ---------- */
.inv{max-width:720px}
.qr{width:96px;height:96px;background:repeating-conic-gradient(var(--text) 0 25%,transparent 0 50%) 0 0/12px 12px;border-radius:6px;border:6px solid var(--surface);outline:1px solid var(--border)}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;background:rgba(7,23,15,.55);z-index:40;display:none;backdrop-filter:blur(2px)}
.scrim.show{display:block}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);opacity:0;width:min(520px,calc(100% - 28px));max-height:90vh;overflow:auto;background:var(--surface);border-radius:26px;padding:26px;z-index:41;display:none;transition:.2s}
.modal.show{display:block;opacity:1;transform:translate(-50%,-50%)}
.otp{display:flex;gap:10px;justify-content:center;direction:ltr;margin:18px 0}
.otp input{width:52px;height:58px;text-align:center;font-size:22px;font-weight:700;border-radius:14px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;opacity:0;transition:.25s;z-index:60;display:flex;gap:8px;align-items:center;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%)}
.phone-wrap{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(7,23,15,.7);backdrop-filter:blur(4px)}
.phone-wrap.show{display:grid}
.phone-frame{width:390px;height:min(820px,92vh);border-radius:54px;background:#050d09;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative}
.phone-frame::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:110px;height:28px;border-radius:20px;background:#050d09;z-index:2}
.phone-frame iframe{width:100%;height:100%;border:0;border-radius:42px;background:var(--bg)}
.phone-close{position:absolute;top:20px;inset-inline-end:20px}
.mini-phone{background:var(--surface);color:var(--text);border-radius:34px;padding:12px;width:300px;margin:auto;box-shadow:0 30px 70px rgba(0,0,0,.4);border:8px solid #050d09;position:relative;z-index:1}
.mini-phone .scr{border-radius:22px;background:var(--bg);padding:14px;min-height:420px}

/* ---------- pricing ---------- */
.lock{max-width:420px;margin:80px auto;text-align:center}
.lock .ic{width:64px;height:64px;border-radius:20px;margin:0 auto 16px}
.lock .ic svg{width:28px;height:28px}
.bucket{border-radius:24px}
.bucket-h{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.line{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--border);align-items:flex-start}
.line:first-of-type{border-top:0}
.line .d{font-size:12.5px;color:var(--muted)}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:12px;cursor:pointer;margin-top:8px;transition:.15s}
.opt:hover{border-color:var(--accent)}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt input{accent-color:var(--accent);margin-top:4px}
.opt .grow{flex:1}
.opt .pr{text-align:end;font-weight:700;white-space:nowrap}
.opt .pr small{display:block;font-weight:400;color:var(--muted)}
.sumbox{position:sticky;top:24px}
.tline{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);gap:10px}
.tline.big{font-family:var(--font-head);font-size:22px;border:0;padding-top:14px;font-weight:700}
.tline.sub{font-size:12.5px;color:var(--muted)}
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.split div{background:var(--surface-2);border-radius:12px;padding:10px;text-align:center;font-size:12px}
.split b{display:block;font-size:14px}
.sig{border:1.5px dashed var(--border);border-radius:14px;background:#fff;width:100%;height:130px;touch-action:none;cursor:crosshair}
.approved{border:2px solid var(--ok);color:var(--ok);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;background:var(--ok-soft)}

/* ---------- responsive ---------- */
@media (max-width:1200px){.tk-page{grid-template-columns:1fr 300px}.tk-queue{display:none}}
@media (max-width:1100px){.g4,.steps{grid-template-columns:repeat(2,1fr)}.g21,.g12,.room{grid-template-columns:1fr}.g3{grid-template-columns:repeat(2,1fr)}.p-hero .wrap{grid-template-columns:1fr}.mini-phone{display:none}footer.pub .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.pub-nav .links{display:none}.tk-page{grid-template-columns:1fr}.tk-props{position:static}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:270px;z-index:42;transform:translateX(-105%);transition:.25s;height:100%}
  :root[dir="rtl"] .side{transform:translateX(105%)}
  .side.show{transform:none!important}
  .menu-btn{display:grid}
  .top{padding:10px 16px}.page{padding:16px 16px 96px}
  .search{display:none}
  .g2,.g3,.g4,.steps{grid-template-columns:1fr}
  .hero{padding:26px 20px;border-radius:22px}.hero h1{font-size:24px}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);z-index:30;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bottom-nav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);padding:6px 0;cursor:pointer}
  .bottom-nav button.active{color:var(--accent);font-weight:700}
  .stage{grid-template-columns:1fr;min-height:0}
  .tile{min-height:160px}
  .p-hero{padding:44px 0 80px;border-radius:0 0 28px 28px}
  .cta-band{padding:28px}
  footer.pub .wrap{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(4,82vw);scroll-snap-type:x mandatory}.col{scroll-snap-align:start}
  .top .hide-m,.pub-nav .hide-m{display:none}
  .split{grid-template-columns:1fr}
}
@media print{.rail,.side,.top,.no-print,.bottom-nav,.pub-nav{display:none!important}.app{display:block}.card{box-shadow:none;break-inside:avoid}.page{padding:0}}
@media (max-width:820px){.grid.g4{grid-template-columns:1fr 1fr;gap:10px}.g4 .stat{flex-direction:column;gap:8px;padding:16px}.g4 .stat .val{font-size:21px}.g4 .ic{width:36px;height:36px}}
/* platform logos — modern tiles */
.plogo{background:#fff;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);box-shadow:0 1px 2px rgba(11,42,33,.05),0 6px 16px rgba(11,42,33,.06);transition:transform .2s}
.plogo img{position:relative;z-index:1;opacity:0;transition:opacity .25s;width:72%;height:72%;object-fit:contain}
.plogo img.ok{opacity:1}
.plogo img.ok~.mono,.plogo:has(img.ok) .mono{display:none}
.plogo .mono{background:linear-gradient(145deg,color-mix(in srgb,var(--c) 88%,#fff),var(--c));color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.05em;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.plogo .mono::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 55%)}
.card.hov:hover .plogo,.strip .pl:hover .plogo{transform:translateY(-2px) scale(1.04)}
.strip .card{gap:18px;padding:20px 26px}
.strip .pl{padding:6px 10px 6px 14px;border-radius:16px;transition:background .2s}
.strip .pl:hover{background:var(--surface-2)}
:root[data-theme="dark"] .plogo{background:#f4f1ea}
.strip .card{justify-content:center}
/* modern scrollbars, follow light/dark theme */
:root{--sb-thumb:color-mix(in srgb,var(--accent) 45%,var(--border));--sb-thumb-h:var(--accent)}
:root[data-theme="dark"]{--sb-thumb:color-mix(in srgb,var(--accent) 35%,var(--surface-2))}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-button,::-webkit-scrollbar-corner{display:none;background:transparent}
.rail::-webkit-scrollbar,.side::-webkit-scrollbar{width:6px}
/* payment brand logos */
.pay-logos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pay-ic{height:30px;width:auto;border-radius:6px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);display:block}
.opt .pay-ic{height:26px}
footer.pub .pay-ic{height:28px}
.pay-ic[src*="stcpay"],.pay-ic[src*="sadad"]{padding:5px 8px;box-sizing:border-box}
/* ratings */
.stars{color:var(--border);letter-spacing:1px;white-space:nowrap}
.stars .on{color:#e3a33c}
.stars.input{font-size:30px;cursor:pointer;user-select:none}
.stars.input span:hover{color:#e3a33c}
tr.sel td{background:var(--accent-soft)}
/* payments timeline */
.timeline-pay{display:flex;flex-direction:column;gap:10px}
.tp{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:16px}
.tp-n{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.steps-row div{background:var(--surface-2);border-radius:14px;padding:12px;font-size:12.5px;text-align:center}
.steps-row span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;margin:0 auto 6px}
@media (max-width:820px){.steps-row{grid-template-columns:1fr 1fr}}
.grid>*{min-width:0}
.tbl td{white-space:nowrap}