/* Touch Creative owner panel. Calm teal, white cards, RTL. */
:root{
  --bg:#eef5f4;--surface:#fff;--ink:#12302f;--muted:#5f7472;--line:#e1eae9;--line-2:#edf3f2;
  --brand:#0f3d4a;--brand-2:#0b2f39;--accent:#2fae9d;--accent-2:#45c8b8;--accent-soft:#e3f5f2;
  --red:#c4453a;--red-soft:#fbe9e7;--amber:#a86a00;--amber-soft:#fdf1dc;
  --r:16px;--r-sm:12px;
  --shadow:0 1px 2px rgba(15,61,74,.05),0 10px 28px -14px rgba(15,61,74,.18);
  --shadow-hi:0 2px 4px rgba(15,61,74,.06),0 16px 36px -16px rgba(15,61,74,.26);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.65 "Almarai","Cairo",Tahoma,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
h1,h2,h3{margin:0;line-height:1.35}
h1{font-size:22px;font-weight:700}h2{font-size:20px}h3{font-size:16px;font-weight:600}
.mut{color:var(--muted)}.sm{font-size:13px}.red{color:var(--red)!important}.d-block{display:block}
.num{font-variant-numeric:tabular-nums}.ltr{direction:ltr;text-align:right}
.ic{flex:none;display:block}

/* ---------- calm page background ---------- */
body.panel{background:#eef5f4}
body.panel::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 88% -6%,rgba(47,174,157,.17),transparent 70%),
    radial-gradient(560px 460px at 2% 104%,rgba(15,61,74,.09),transparent 70%),
    radial-gradient(460px 320px at 45% 55%,rgba(110,200,188,.07),transparent 70%),
    radial-gradient(rgba(15,61,74,.055) 1px,transparent 1.3px) 0 0/22px 22px,
    linear-gradient(180deg,#f5faf9,#eaf2f1)}

/* ---------- shell ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;padding:22px 14px 16px;color:#fff;overflow-y:auto;
  background:radial-gradient(260px 200px at 80% 0,rgba(69,200,184,.20),transparent 70%),linear-gradient(180deg,#0f3d4a 0%,#0c3440 55%,#0a2d37 100%)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{border-radius:10px;flex:none}
.brand b{display:block;font-size:15.5px;letter-spacing:.2px}.brand small{opacity:.7;font-size:12px}
.side nav{display:grid;gap:3px}
.side nav a{color:#cfe3e0;text-decoration:none;padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:11px;font-size:14.5px;transition:background .2s,color .2s}
.side nav a .ic{opacity:.85}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:var(--accent);color:#05302a;font-weight:600;box-shadow:0 6px 16px -8px rgba(47,174,157,.8)}
.side nav a.on .ic{opacity:1}
.side nav i{font-style:normal;margin-inline-start:auto;background:#e0574b;color:#fff;border-radius:99px;font-size:11px;font-weight:600;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center}
.side nav a.on i{background:#05302a;color:#fff}
.side__foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.who{display:flex;align-items:center;gap:9px;min-width:0;flex:1;color:#fff;text-decoration:none}
.who__av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(69,200,184,.22);color:#bff0e8;font-weight:700;flex:none}
.who__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;line-height:1.3}
.who__n small{display:block;opacity:.6;font-size:11.5px}
.out{display:inline-flex;align-items:center;gap:6px;color:#a9c7c3;font-size:13px;text-decoration:none;padding:7px 9px;border-radius:10px}
.out:hover{background:rgba(255,255,255,.07);color:#fff}

.main{padding:24px 28px 40px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start}
.main > *{min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.top__t{min-width:0}
.top__hi{margin:0 0 2px;color:var(--muted);font-size:13.5px}

/* ---------- buttons, messages ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 15px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s,box-shadow .2s,transform .1s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 14px -8px rgba(15,61,74,.7)}
.btn.pri:hover{background:#0b3542}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn--sm{padding:6px 10px;font-size:13px}
.btn--lg{padding:12px 16px;font-size:15.5px;font-weight:600;width:100%}
.btn:focus-visible,.lnk:focus-visible,.side a:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lnk{background:none;border:0;color:var(--brand);font:inherit;font-size:13px;cursor:pointer;padding:0}

.flash{margin:0;padding:11px 15px;border-radius:var(--r-sm);background:var(--accent-soft);color:#155e54;border:1px solid #c9ebe5}
.flash.err{background:var(--red-soft);color:var(--red);border-color:#f3cfca}
.note{background:var(--amber-soft);color:var(--amber);padding:9px 13px;border-radius:var(--r-sm);margin:0 0 8px}

/* ---------- KPI cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.k3c{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.k3{grid-template-columns:minmax(0,380px)}
.kpis:empty{display:none}
.kpi--teal{--t:#1f9a8a;--ts:#dff4f0}.kpi--amber{--t:#b97a06;--ts:#fdf0d8}.kpi--red{--t:#c4453a;--ts:#fbe7e4}
.kpi--blue{--t:#2f6fd0;--ts:#e6eefc}.kpi--violet{--t:#7651c4;--ts:#efe9fb}.kpi--green{--t:#1e8a5a;--ts:#e0f3e8}
.kpi{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);min-width:0;
  background:radial-gradient(160px 110px at 100% 0,var(--ts,#eef5f4),transparent 72%),var(--surface)}
.kpi__ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--ts,var(--accent-soft));color:var(--t,var(--accent))}
.kpi__t{display:grid;gap:1px;min-width:0}
.kpi small{color:var(--muted);font-size:13px}
.kpi b{font-size:26px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi b.sm{font-size:17px;line-height:1.45}
.kpi span,.kpi a{font-size:12.5px}

/* ---------- panels ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid2:empty{display:none}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pnl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;box-shadow:var(--shadow)}
.pnl__h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pnl__h a:not(.btn){font-size:13px;text-decoration:none;color:var(--accent);font-weight:600}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.head h2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.head p{margin:4px 0 0}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acts.end{align-self:end}
.acts-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.note-pnl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.note-pnl span:not(.kpi__ic){flex:1;color:var(--muted);min-width:200px}
.welcome{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:radial-gradient(420px 200px at 100% 0,rgba(47,174,157,.16),transparent 70%),var(--surface)}
.welcome p{margin:4px 0 0}
.tile{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.tile:hover{border-color:var(--accent);box-shadow:var(--shadow-hi)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

.empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:22px 8px;color:var(--muted)}
.empty p{margin:0;max-width:340px}
.empty__ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{text-align:start;font-weight:600;color:var(--muted);font-size:12.5px;padding:9px 12px;background:#f5f9f8;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child{border-start-start-radius:10px}.tbl th:last-child{border-start-end-radius:10px}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:#f7fbfa}
.tbl tr:last-child td{border-bottom:0}
.tbl td small{display:block;font-size:12px}
.tbl a{text-decoration:none}

.bd{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--accent-soft);color:#17695e;white-space:nowrap;line-height:1.7}
.bd--active{background:#e0f3e8;color:#1b7a50}
.bd--soon{background:var(--amber-soft);color:var(--amber)}
.bd--expired,.bd--cancelled{background:var(--red-soft);color:var(--red)}
.bd--suspended{background:#eceff1;color:#55626b}
.bd--trial{background:#e8eefc;color:#2f55b5}

/* ---------- charts ---------- */
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;height:210px;padding-top:6px}
.bar{display:grid;grid-template-rows:auto 1fr auto;height:100%;text-align:center;gap:6px;min-width:0}
.bar__track{display:flex;align-items:flex-end;justify-content:center;border-radius:12px;background:linear-gradient(180deg,rgba(15,61,74,.02),rgba(15,61,74,.045))}
.bar i{display:block;width:100%;max-width:46px;border-radius:10px 10px 5px 5px;background:linear-gradient(180deg,var(--accent-2),#1f8f81);min-height:4px;transform-origin:bottom;animation:grow .7s var(--ease) both;transition:filter .2s}
.bar:hover i{filter:brightness(1.08) saturate(1.1)}
.bar__v{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .2s}
.bar:hover .bar__v{color:var(--ink);font-weight:600}
.bar small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars__note{margin:8px 0 0;text-align:center}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.split{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.split li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:14px;align-items:center}
.split b{font-variant-numeric:tabular-nums}.split b small{font-weight:400}
.split i{grid-column:1/-1;height:8px;border-radius:9px;background:var(--line-2);overflow:hidden}
.split em{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#1f8f81,var(--accent-2))}

.dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.dl div{min-width:0}.dl .full{grid-column:1/-1}
.dl dt{color:var(--muted);font-size:12.5px}.dl dd{margin:0;overflow-wrap:anywhere}

/* ---------- forms ---------- */
.frm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.frm3{grid-template-columns:repeat(3,minmax(0,1fr))}
.frm1{grid-template-columns:minmax(0,1fr)}
.frm .full,.frm h3{grid-column:1/-1}
.frm h3{margin-top:4px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.frm h3:first-of-type{margin-top:0}
.frm label{display:grid;gap:5px;font-size:13px;color:var(--muted);min-width:0;align-content:start}
.frm p{margin:0}
input,select,textarea{font:inherit;font-size:15px;color:var(--ink);background:#fbfdfd;border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s,background .2s}
textarea{resize:vertical;line-height:1.7}
input:hover,select:hover,textarea:hover{border-color:#cfdedc}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,174,157,.18);background:#fff}
input[readonly]{background:#f3f7f6;color:var(--muted)}
.sub{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfdfd}
.sub:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,174,157,.18)}
.sub input{border:0;border-radius:0;box-shadow:none!important}.sub em{font-style:normal;color:var(--muted);padding:0 10px;white-space:nowrap}
.chks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:flex!important;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;color:var(--ink)!important;font-size:14px!important;cursor:pointer;background:#fbfdfd}
.chk:has(input:checked){background:var(--accent-soft);border-color:#bfe6df}
.chk input{width:auto;accent-color:var(--accent)}
.chk--inline{align-self:end}
.perms{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px 10px;margin:0;display:grid;gap:10px;min-width:0}
.perms legend{padding:0 6px;font-size:13px;color:var(--muted)}
.perms[disabled]{opacity:.5}
.calc{margin:0;background:#f3f8f7;padding:11px 13px;border-radius:var(--r-sm)}
.filters{display:flex;gap:8px;flex-wrap:wrap}.filters input{flex:1;min-width:180px}.filters select{width:auto;max-width:100%}
details.mini{position:relative;min-width:0}details.mini summary{list-style:none}details.mini summary::-webkit-details-marker{display:none}
details.mini[open] .frm{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#f6faf9;width:min(520px,calc(100vw - 80px))}
.tpl{white-space:pre-wrap;background:#f5f9f8;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;font:inherit;margin:8px 0 0}
.danger{text-align:center}

/* ---------- packages and payment methods ---------- */
.pkg-form,.pay-form{display:grid;gap:18px;min-width:0}
.pkg__h,.gw__h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.pkg__h h3{border:0;padding:0;margin:0}
.pkg__price{margin-inline-start:auto;font-size:18px;color:var(--brand);white-space:nowrap}
.pkg__price small{font-size:12px;color:var(--muted);font-weight:400}
.gw__n{display:grid;gap:3px;justify-items:start}
.gw__n h3{border:0;padding:0;margin:0}
.gw__logo{width:64px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;flex:none;overflow:hidden;color:var(--muted);font-size:11px}
.gw__logo img{max-width:48px;max-height:24px;display:block}
.gw__logo--tabby{background:#3bffc1;border-color:#3bffc1}
.sw{margin-inline-start:auto;display:inline-flex!important;align-items:center;gap:8px;cursor:pointer;color:var(--ink)!important;position:relative}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw__t{width:42px;height:24px;border-radius:99px;background:#cfdcda;position:relative;transition:background .2s;flex:none}
.sw__t::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start .2s var(--ease)}
.sw input:checked + .sw__t{background:var(--accent)}
.sw input:checked + .sw__t::after{inset-inline-start:21px}
.sw input:focus-visible + .sw__t{outline:2px solid var(--accent);outline-offset:2px}
.sw__l{font-size:13px}

/* ---------- entrance (stagger fade-up) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.main > *{animation:rise .5s var(--ease) both}
.main > :nth-child(2){animation-delay:.04s}.main > :nth-child(3){animation-delay:.08s}.main > :nth-child(4){animation-delay:.12s}
.main > :nth-child(5){animation-delay:.16s}.main > :nth-child(6){animation-delay:.2s}.main > :nth-child(n+7){animation-delay:.24s}
.kpis > .kpi{animation:rise .5s var(--ease) both}
.kpis > :nth-child(2){animation-delay:.05s}.kpis > :nth-child(3){animation-delay:.1s}.kpis > :nth-child(4){animation-delay:.15s}
.kpis > :nth-child(5){animation-delay:.2s}.kpis > :nth-child(6){animation-delay:.25s}

/* ---------- sign-in and first run ---------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px 16px;background:#0b2f39;position:relative;overflow-x:hidden}
.auth__bg{position:fixed;inset:0;overflow:hidden;z-index:0;
  background:radial-gradient(1100px 700px at 50% 118%,#15544f,transparent 62%),linear-gradient(160deg,#0f3d4a 0%,#0c3541 50%,#0a2b35 100%)}
.auth__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 0,transparent 75%)}
.auth__bg i{position:absolute;border-radius:50%;width:62vmax;height:62vmax;will-change:transform;
  background:radial-gradient(circle,rgba(47,174,157,.42) 0,rgba(47,174,157,0) 62%);animation:drift 28s ease-in-out infinite alternate}
.auth__bg i:nth-child(1){top:-24vmax;right:-18vmax}
.auth__bg i:nth-child(2){bottom:-28vmax;left:-22vmax;background:radial-gradient(circle,rgba(69,200,184,.30) 0,rgba(69,200,184,0) 62%);animation-duration:34s;animation-delay:-9s}
.auth__bg i:nth-child(3){top:28%;left:30%;width:42vmax;height:42vmax;background:radial-gradient(circle,rgba(242,248,249,.09) 0,rgba(242,248,249,0) 60%);animation-duration:40s;animation-delay:-4s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vmax,4vmax,0) scale(1.08)}100%{transform:translate3d(-4vmax,7vmax,0) scale(.95)}}
.auth__card{position:relative;z-index:1;width:100%;max-width:412px;display:grid;gap:18px;padding:30px 28px 20px;border-radius:22px;
  background:rgba(255,255,255,.97);box-shadow:0 30px 70px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35);animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.auth__card .brand b{color:var(--brand);font-size:16.5px}.auth__card .brand small{color:var(--muted);opacity:1}
.auth__hi{display:grid;gap:4px}
.auth__greet{margin:0;display:flex;align-items:center;gap:8px;color:#1f8f81;font-weight:600;font-size:14.5px}
.auth__greet::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(47,174,157,.18)}
.auth__card h1{font-size:23px}.auth__card p{margin:0}
.auth__card .frm{gap:14px}
.auth__card input{padding:11px 13px}
.auth__foot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);padding-top:14px;border-top:1px solid var(--line-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .app{grid-template-columns:220px minmax(0,1fr)}
  .main{padding:20px 18px 36px}
  .kpis,.kpis.k4,.kpis.k3c{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .frm3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .full-hide{display:none}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:5;height:auto;padding:10px 12px 8px;gap:8px;flex-direction:row;flex-wrap:wrap;align-items:center;overflow:visible;
    box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
  .side .brand{flex:1}
  .side .brand img{width:30px;height:30px}
  .side .brand small{display:none}
  .side__foot{order:2;margin:0;padding:0;border:0;flex:none}
  .who__n{display:none}
  .who__av{width:30px;height:30px;font-size:13px}
  .out span{display:none}
  .side nav{order:3;width:100%;display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;scroll-snap-type:x proximity;padding:2px 0 2px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
  .side nav::-webkit-scrollbar{display:none}
  .side nav a{flex:none;padding:7px 12px;font-size:13.5px;white-space:nowrap;gap:7px;border-radius:99px;background:rgba(255,255,255,.06);scroll-snap-align:start}
  .side nav a:first-child{margin-inline-start:6px}.side nav a:last-child{margin-inline-end:6px}
  .side nav a .ic{width:16px;height:16px}
  .main{padding:16px 12px 32px;gap:14px}
  .top h1{font-size:19px}
  .top .btn{padding:8px 12px}
  .kpis,.kpis.k4,.kpis.k3c{gap:10px}
  .kpi{padding:13px;gap:10px;flex-direction:column}
  .kpi__ic{width:36px;height:36px;border-radius:11px}
  .kpi b{font-size:20px}
  .kpi b.sm{font-size:15px}
  .pnl{padding:14px}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .frm,.frm3,.dl{grid-template-columns:minmax(0,1fr)}
  .bars{gap:6px;height:180px}
  .tbl-wrap{overflow:visible;margin:0;padding:0}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;margin-bottom:10px;background:#fff}
  .tbl tbody tr:hover{background:#fff}
  .tbl td{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);text-align:start}
  .tbl td:last-child{border-bottom:0}
  .tbl td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:12.5px;flex:none}
  .tbl td > *{text-align:left}
  .tbl td small{text-align:left}
  details.mini[open] .frm{width:auto;min-width:0}
  details.mini{width:100%}
  .pkg__price{margin-inline-start:0}
  .auth__card{padding:24px 20px 18px;border-radius:20px}
}
@media (max-width:380px){
  .kpis,.kpis.k4,.kpis.k3c{grid-template-columns:minmax(0,1fr)}
  .kpi{flex-direction:row}
}

/* headings and numbers in Cairo, like the marketing site; content width capped so wide screens stay tidy */
h1,h2,h3,.kpi b,.brand b,.btn,.side nav a,.bd,.tbl th,.num{font-family:"Cairo","Almarai",Tahoma,system-ui,sans-serif}
h1,h2,h3{font-weight:700;letter-spacing:0}
.kpi b{font-weight:800}
.main{width:100%;max-width:1320px;margin-inline:auto}

/* ---------- base price, discount codes ---------- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pkg__was{font-size:13px;color:var(--muted);font-weight:500;margin-inline-end:6px;text-decoration-color:rgba(196,69,58,.7)}
.code-chip{display:inline-block;font:600 13px/1.6 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.5px;padding:2px 9px;border-radius:8px;background:#eef6f5;border:1px dashed #b9dcd6;color:var(--brand)}
input.up{text-transform:uppercase;letter-spacing:.5px}
.sw--field{margin:0;align-self:end;padding:9px 0}
.chk[aria-disabled="true"]{opacity:.45;pointer-events:none}
.tbl .acts{gap:6px;flex-wrap:nowrap;justify-content:flex-end}
.tbl .acts form{margin:0}
@media (max-width:420px){ .pair{grid-template-columns:minmax(0,1fr)} }

/* income by payment method */
.paysplit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.paysplit__i{display:grid;gap:4px;padding:14px;border-radius:14px;background:#f5f9f8;border:1px solid var(--line);min-width:0}
.paysplit__i small{color:var(--muted);font-size:12.5px}.paysplit__i b{font-family:Cairo,Almarai,sans-serif;font-size:20px;font-weight:800}.paysplit__i em{font-style:normal;color:var(--muted);font-size:12px}
.paysplit__lg{display:flex;gap:6px;align-items:center;height:28px}.paysplit__lg img{height:20px;width:auto}
.paysplit__lg--tabby,.paysplit__lg--tamara{width:max-content;padding:0 12px;border-radius:999px}
.paysplit__lg--tabby{background:#3bffc1}.paysplit__lg--tabby img,.paysplit__lg--tamara img{height:14px}
.paysplit__lg--tamara{background:linear-gradient(110deg,#fde27a,#f7b98f 40%,#f39ab8 70%,#a982d6)}
.paysplit__i--all{background:linear-gradient(135deg,#0f3d4a,#14524f);color:#fff;border-color:transparent}.paysplit__i--all small,.paysplit__i--all em{color:#bfe6df}
@media (max-width:1000px){.paysplit{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* payment logos: bigger and clear, Tamara on its original colourful badge */
.gw__logo{width:96px;height:52px;border-radius:14px}
.gw__logo img{max-width:76px;max-height:30px;height:auto;width:auto}
.gw__logo--visa img,.gw__logo--applepay img{max-height:none;height:44px;max-width:80px}
.gw__logo--mada img{max-height:34px}
.gw__logo--tabby,.gw__logo--tamara{border-radius:999px;border-color:transparent}
.gw__logo--tamara{background:radial-gradient(60% 90% at 8% 10%,#fde27a 0%,transparent 70%),radial-gradient(55% 90% at 10% 100%,#b6e6ff 0%,transparent 70%),radial-gradient(60% 80% at 92% 8%,#f08a6c 0%,transparent 70%),radial-gradient(60% 90% at 95% 100%,#a982d6 0%,transparent 70%),radial-gradient(50% 80% at 55% 100%,#f39ab8 0%,transparent 75%),#f7b98f}
.gw__logo--tamara img,.gw__logo--tabby img{max-height:20px}
.paysplit__lg img{height:24px}
.paysplit__lg img[alt="Visa"],.paysplit__lg img[alt="Apple Pay"]{height:34px}
.paysplit__lg--tabby,.paysplit__lg--tamara{height:32px;padding:0 14px}
.paysplit__lg--tamara{background:radial-gradient(60% 90% at 8% 10%,#fde27a 0%,transparent 70%),radial-gradient(60% 80% at 92% 8%,#f08a6c 0%,transparent 70%),radial-gradient(60% 90% at 95% 100%,#a982d6 0%,transparent 70%),#f7b98f}
.paysplit__lg--tabby img,.paysplit__lg--tamara img{height:16px}

/* customer project ideas */
.ideas{display:grid;gap:14px}
.idea{display:grid;gap:10px}
.idea--new{border-color:var(--accent);box-shadow:0 0 0 3px rgb(47 174 157 / .12)}
.idea__h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.idea__h h3{display:flex;gap:8px;align-items:center}
.idea__t{margin:0;line-height:1.9;white-space:normal;background:#f5f9f8;border-radius:12px;padding:12px 14px}

/* invoices */
.inv-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.inv-stat{display:grid;gap:4px}.inv-stat span{color:var(--muted,#64748b);font-size:13px}.inv-stat b{font-size:20px}