/* ------------------------------------------------------------- no zoom ----
   A double tap used to zoom these pages, and once zoomed the layout stayed
   panned — half the screen off the edge and the merchant dragging it back.
   Same defect the till had; same fix, in the one stylesheet all thirteen
   pages load.

   `touch-action:manipulation` is what actually stops the double tap and
   leaves ordinary taps and scrolling alone. `text-size-adjust` stops iOS
   inflating the type when the phone is turned. The viewport meta on each page
   carries `user-scalable=no`, which Safari honours once the app is installed
   to the home screen. The pinch guard lives in assets/loy.js. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===========================================================================
   Loyana merchant app — auth, activation, dashboard shell.

   Deliberately standalone rather than importing the marketing site's
   site.css: that file carries the landing page's hero, carousels and device
   mockups, none of which this app uses. The design tokens below are copied
   from it so the two still look like one product.
   =========================================================================== */

/* THE GLASS SYSTEM (5 Sep 2026).

   The surfaces are the ones iOS 26 draws: a pale grouped ground with two faint
   colour blooms fixed behind it, and every panel a rounded sheet of glass
   sitting on that ground — a soft white body, a hairline of light along its
   edge, a shadow that is wide and faint rather than tight and dark. Nothing
   here is a flat box with a grey border any more.

   The blur is spent where it earns its keep: the side bar, the phone pill, the
   bottom sheet and the menus, which float OVER content. Cards do not blur —
   they sit on a near-static ground, and a page of forty blurred cards is what
   makes a cheap Android phone stutter. */
:root{
  --page:#F3F4F8; --white:#FFFFFF; --soft:#F2F2F6; --gray:#ECEDF2; --line:#E3E4EA;
  --ink:#0A0A0C; --ink2:#4B4B52; --ink3:#8A8A93;
  --red:#FA294F; --brand:#7B1226;
  --ok:#0E7A4F; --warn:#B4780A;
  --r:24px;
  /* iOS's own fill colour for inputs and chips: a grey that stays grey on any
     tint because it is black at 8%, not a painted #F7F7F8. */
  --focusbg:#FFFFFF;
  --fill:rgba(120,120,128,.10);
  --fill2:rgba(120,120,128,.16);
  --glass:rgba(255,255,255,.72);
  --edge:rgba(255,255,255,.85);
  --hair:rgba(20,20,30,.07);
  --sh:0 1px 1px rgba(10,10,20,.03),0 12px 32px -14px rgba(10,10,30,.16);
  --sh-lift:0 2px 3px rgba(10,10,20,.04),0 22px 44px -16px rgba(10,10,30,.24);
  --ease:cubic-bezier(.32,.72,0,1);
  color-scheme: light;
}

*{margin:0;padding:0;box-sizing:border-box}

/* Android paints a blue box over whatever you tap. It looks like a selection
   the user did not make, and there is no way to style it — only to turn it
   off and let our own :active states do the job. */
*{-webkit-tap-highlight-color:transparent}
a,button,label,.item,.sw,.ic,.a{-webkit-touch-callout:none}

/* No painted scrollbar anywhere, on any device. Scrolling still works exactly
   as before — wheel, trackpad swipe, touch drag, keyboard — only the bar is
   gone. A grey rail down the side of a card is the one piece of the browser's
   own chrome that never matches anything around it. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

body{
  background:var(--page);
  font-family:'Tajawal',system-ui,sans-serif;
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
/* Two blooms fixed behind the page, so the glass has something to refract:
   the brand red at 9% up the leading corner, a cool grey-blue down the other.
   Fixed, so they do not scroll with the cards; printed never — the QR poster
   is on this stylesheet too. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 44% at 88% -6%,rgba(250,41,79,.10),transparent 70%),
    radial-gradient(46% 40% at 4% 100%,rgba(96,120,170,.13),transparent 70%),
    radial-gradient(38% 34% at 55% 60%,rgba(255,255,255,.7),transparent 70%);
}
html[dir=ltr] body::before{
  background:
    radial-gradient(52% 44% at 12% -6%,rgba(250,41,79,.10),transparent 70%),
    radial-gradient(46% 40% at 96% 100%,rgba(96,120,170,.13),transparent 70%),
    radial-gradient(38% 34% at 45% 60%,rgba(255,255,255,.7),transparent 70%);
}
@media print{ body::before{display:none} }

/* One surface, used by every panel: a glass sheet with a hairline of light
   inside its edge and a faint hairline of shadow outside it. */
.card,.sec,.stat,.banner,.sheet-card,.sel-panel,.langmenu{
  background:var(--glass);
  border:1px solid var(--edge);
  box-shadow:0 0 0 1px var(--hair),var(--sh);
}

.lat{font-family:'Poppins',sans-serif;direction:ltr;display:inline-block}

/* Links carry their own colour and weight instead of a browser underline —
   an underlined word in the middle of Arabic prose cuts the line in half and
   reads like unstyled markup. The underline comes back on hover, so the
   affordance is still there for anyone hunting for it. */
a{color:var(--red);font-weight:500;text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* The rule above is for links inside sentences. Anything that is a link only
   because it navigates — the wordmark, a tab, a button — keeps its own look;
   an underline appearing under a logo on hover is exactly the cheap effect the
   restyle was meant to remove. Listed after so it wins on equal specificity. */
.brand:hover,.btn:hover,.inline-btn:hover,.linkbtn:hover,.tabs a:hover{text-decoration:none}

/* --- centred single-card layout, used by every signed-out page ----------- */
.shell{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px;
}

.card{
  width:100%;max-width:440px;
  border-radius:28px;
  padding:36px 32px;
}
.card.wide{max-width:560px}

.brand{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-bottom:26px;text-decoration:none;
}
/* Colour on hover, never an underline — the underline was the cheap part.
   Guarded by a hover query so it does not stick on a phone: a touch device
   fires :hover on tap and then leaves it applied until you tap elsewhere,
   which reads as the logo randomly changing colour. */
.brand .name{transition:color .2s}
@media (hover:hover){ .brand:hover .name{color:var(--red)} }
.brand svg{width:32px;height:32px;flex-shrink:0}
.brand .name{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:23px;
  letter-spacing:-.5px;line-height:1;color:var(--ink);
}

/* THE LOGO IS NOT TEXT, so it must not mirror with the page.

   The markup is wordmark-then-mark, which reads correctly right-to-left: the
   mark lands on the left. Left-to-right it swung to the right, and the same
   brand was being drawn two ways depending on the language. `order` puts it
   back without touching the direction of the row it sits in. */
html[dir=ltr] .brand svg{order:1}
html[dir=ltr] .brand .name{order:2}

h1{font-size:1.45rem;font-weight:800;letter-spacing:-.5px;line-height:1.35;margin-bottom:7px}
.sub{color:var(--ink2);font-size:.94rem;font-weight:300;line-height:1.65;margin-bottom:24px}

/* --- form --------------------------------------------------------------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:.85rem;font-weight:500;color:var(--ink2);margin-bottom:6px}
.field input,.field select,.field .sel-btn{
  width:100%;
  background:var(--fill);
  border:1.5px solid transparent;
  border-radius:14px;
  padding:11px 14px;
  /* 1rem, NOT .97rem. Below 16px iOS Safari zooms the page the moment a
     field takes focus — the second cause of the same "the screen jumps"
     complaint, and the one touch-action does not touch. .97rem computed to
     15.52px and every login on an iPhone lurched. The 0.03rem this gives
     back is invisible; the zoom was not. */
  font-family:'Tajawal',sans-serif;font-size:1rem;font-weight:400;
  color:var(--ink);outline:0;
  transition:border-color .22s,background .22s,box-shadow .22s;
}
.field input::placeholder{color:var(--ink3);font-weight:300}

/* A select inherited the box above but kept the operating system's own arrow
   and metrics, so it sat a few pixels short of the inputs beside it and drew a
   grey system triangle in a form that has none. appearance:none takes all of
   that away — and the arrow with it, hence the chevron as a background image,
   on the left because these pages are RTL. */
.field select,.field .sel-btn{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;line-height:1.42;padding-inline-end:38px;   /* 1.5 sat 1px taller than the inputs */
  text-align:start;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23767676' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;background-size:11px 8px;
}
/* The chevron sits at the END of the box: left in Arabic, right in English
   and Chinese. It was pinned left, so on an LTR page the text ran over it. */
html[dir=ltr] .field select,html[dir=ltr] .field .sel-btn{background-position:right 14px center}
/* background-color, not the background shorthand: the shorthand would wipe the
   chevron the moment the field took focus. */
.field input:focus,.field select:focus,.field .sel-btn:focus{
  border-color:var(--red);background-color:var(--focusbg);
  box-shadow:0 0 0 4px rgba(250,41,79,.12);
}
.field select.ph,.field .sel-btn.ph{color:var(--ink3)}
.field input.bad{border-color:var(--red)}
.field select.bad{border-color:var(--red)}

/* --- the dropdown we draw ourselves -------------------------------------
   The native <select> stays here, invisible, holding the value. Only the
   button and the panel are ours. */
.sel{position:relative}
.sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.sel-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-btn.num{font-family:'Poppins',sans-serif}
.sel.open .sel-btn{border-color:var(--red);background-color:var(--focusbg);box-shadow:0 0 0 4px rgba(250,41,79,.12)}
.sel.open .sel-btn{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.4 6 1.6 11 6.4' fill='none' stroke='%230A0A0A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.sel-panel{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);
  box-shadow:0 0 0 1px var(--hair),var(--sh-lift);
  padding:6px;max-height:264px;overflow-y:auto;display:none;
}
.sel.open .sel-panel{display:block}
.sel.up .sel-panel{top:auto;bottom:calc(100% + 6px)}
.sel-opt{
  padding:10px 12px;border-radius:10px;font-size:.95rem;font-weight:400;
  color:var(--ink);cursor:pointer;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sel-opt:hover{background:var(--fill)}
.sel-opt.on{background:var(--ink);color:#fff;font-weight:700}
.sel-opt[lang=en]{font-family:'Poppins',sans-serif;direction:ltr;text-align:right}
.field .hint{font-size:.78rem;color:var(--ink3);margin-top:5px;font-weight:300}

/* Email and password are latin no matter what the page direction is. */
.field input[type=email],.field input[type=password]{direction:ltr;text-align:left}

/* The `hidden` attribute has to beat a stylesheet.

   The browser's own [hidden]{display:none} is an ordinary low-priority rule,
   so ANY explicit display in here wins over it silently. `.row2` below is
   display:grid, and the earn-rate row in Settings that is `hidden` for the
   wrong card mode stayed on screen because of exactly that — a merchant on
   «نقاط ثابتة لكل زيارة» was still shown the by-amount boxes. */
[hidden]{display:none !important}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Two fields side by side line up row by row — label with label, box with
   box, hint with hint — even when one label wraps to two lines and the other
   does not. The English form did exactly that («Start reminding how many
   stamps before?» against «Repeat every how many days?») and the two boxes
   sat a line apart. Subgrid hands the three rows to the parent; a browser
   without it ignores the line and gets the old layout, nothing worse. */
/* row-gap:0 — a subgrid inherits the parent's 12px gap between ITS rows too,
   which put daylight between every label and its box. */
.row2 > .field{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;row-gap:0}
.row2 > .field > label{align-self:end}
/* what used to be type=number: digits, left to right, in the number face */
input[data-num]{font-family:'Poppins',sans-serif;direction:ltr;text-align:start}
/* A pair whose second half is hidden — the earn-rate box only some card modes
   have — would otherwise leave the survivor at half width beside a gap. */
.row2.one{grid-template-columns:1fr}
@media (max-width:420px){.row2{grid-template-columns:1fr}}

.btn{
  width:100%;
  background:var(--ink);color:#fff;
  border:0;border-radius:100px;
  padding:13px 22px;
  font-family:'Tajawal',sans-serif;font-weight:700;font-size:.98rem;
  cursor:pointer;
  /* a lit top edge and a soft drop: the button is a raised capsule */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -10px rgba(10,10,20,.5);
  transition:transform .3s var(--ease),opacity .25s,box-shadow .3s var(--ease);
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 26px -10px rgba(10,10,20,.5)}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:.12s}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--glass);color:var(--ink);border:1px solid var(--edge);
  box-shadow:0 0 0 1px var(--hair),0 6px 16px -10px rgba(10,10,20,.18)}

.alt{text-align:center;margin-top:18px;font-size:.9rem;color:var(--ink2);font-weight:300}
.alt a{font-weight:500}

/* --- messages ----------------------------------------------------------- */
.msg{
  border-radius:16px;padding:11px 14px;margin-bottom:16px;
  font-size:.9rem;font-weight:500;line-height:1.6;display:none;
}
.msg.show{display:block}
.msg.err{background:rgba(250,41,79,.09);color:#96122E;border:1px solid rgba(250,41,79,.18)}
.msg.ok {background:rgba(14,122,79,.09);color:#0B5F3E;border:1px solid rgba(14,122,79,.18)}

/* --- activation --------------------------------------------------------- */
.code-in{
  width:100%;
  background:var(--fill);border:1.5px solid transparent;border-radius:16px;
  padding:15px 16px;
  font-family:'Poppins',monospace;direction:ltr;text-align:center;
  font-size:1.22rem;font-weight:600;letter-spacing:2px;
  color:var(--ink);outline:0;text-transform:uppercase;
  transition:border-color .22s,background .22s;
}
.code-in::placeholder{letter-spacing:1px;font-weight:400;color:var(--ink3)}
.code-in:focus{border-color:var(--red);background:var(--focusbg);box-shadow:0 0 0 4px rgba(250,41,79,.12)}
.code-in.bad{border-color:var(--red)}

.buy{
  margin-top:22px;padding-top:20px;border-top:1.5px solid var(--line);
  font-size:.88rem;color:var(--ink2);font-weight:300;line-height:1.75;
}
.buy b{font-weight:700;color:var(--ink)}
.buy .wa{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  background:var(--ink);color:#fff;border-radius:100px;padding:9px 18px;
  font-size:.88rem;font-weight:700;text-decoration:none;
}
.buy .wa:hover{color:#fff;transform:translateY(-2px)}
.buy .wa svg{width:16px;height:16px;fill:currentColor}

/* --- signed-in chrome --------------------------------------------------- */
/* A quiet action that is not important enough to be a filled button, but is
   still a button — so it gets a shape rather than an underline. */
.linkbtn{
  background:var(--fill);border:1px solid transparent;border-radius:100px;
  color:var(--ink2);cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:.84rem;font-weight:500;
  padding:6px 14px;text-decoration:none;
  transition:background .2s,color .2s;
}
.linkbtn:hover{color:var(--ink);background:var(--fill2)}
/* the light/dark switch: one icon, no words, same height as the pills */
.linkbtn.themebtn{display:inline-grid;place-items:center;width:33px;height:33px;padding:0}
/* The row the signed-out cards hang the language and theme buttons on. It
   had no rule at all, so the two sat welded together and a pixel apart in
   height; a flex row with a gap is what the side bar already gives them. */
.langrow{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.linkbtn.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* The language picker: a button, and a small menu under it.

   It replaced a row of three pills. Three pills cost three times the width in
   a header that already holds a shop name and a sign-out link, and they grow
   with every language added; a button costs one button's width for ever. */
.langpick{position:relative;display:inline-block}
.langpick .lang{display:inline-flex;align-items:center;gap:5px;padding:6px 11px}
.langpick .lang svg{width:11px;height:11px;opacity:.6;transition:transform .2s}
.langpick .lang[aria-expanded=true] svg{transform:rotate(180deg)}
/* Anchored by its END, not its start: the picker sits near the end of a nav
   bar, and a menu that grows outward from there runs off the screen — it
   did, by 24px at 352px wide. Growing inward it cannot. */
.langmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;
  min-width:132px;padding:5px;border-radius:16px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);
  box-shadow:0 0 0 1px var(--hair),var(--sh-lift);
  display:flex;flex-direction:column;gap:2px}
.langmenu[hidden]{display:none}
.langmenu button{appearance:none;background:none;border:0;border-radius:8px;cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:.85rem;font-weight:500;color:var(--ink2);
  padding:7px 10px;text-align:start;line-height:1.5}
.langmenu button:hover{background:var(--fill);color:var(--ink)}
.langmenu button.on{background:var(--ink);color:#fff;cursor:default}

/* Chinese has no glyphs in Tajawal or Poppins — not one. Without a stack that
   names a CJK face the browser falls back to whatever it likes, which on a
   desktop is often a serif that matches nothing else on the page and on an
   older Android is boxes. Noto Sans SC is asked for first and the platform
   faces after it, so the page still reads if the webfont never arrives.
   Scoped to the language: an Arabic or English page loads none of this. */
html[lang=zh] body,
html[lang=zh] .linkbtn,
html[lang=zh] .btn,
html[lang=zh] input,
html[lang=zh] select,
html[lang=zh] textarea{
  font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',
              'Source Han Sans SC','Noto Sans CJK SC',sans-serif;
}
/* Chinese sets tighter than Arabic at the same size and a headline set in it
   reads cramped with Tajawal's letter-spacing still applied. */
html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3{letter-spacing:0}

.page{max-width:940px;margin:0 auto;padding:28px 22px 60px}
@media (min-width:900px){ .page{padding-top:36px} }

.banner{
  border-radius:var(--r);
  padding:20px 22px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.banner .lab{font-size:.82rem;color:var(--ink3);font-weight:500;margin-bottom:2px}
.banner .val{font-size:1.15rem;font-weight:800;letter-spacing:-.3px}
.banner.soon{border-style:dashed;color:var(--ink2);display:block;font-weight:300}
.banner.warn{background:rgba(255,248,234,.9);border-color:#F3E3BC}

.pill{
  display:inline-block;border-radius:100px;padding:5px 13px;
  font-size:.8rem;font-weight:700;
}
.pill.on {background:rgba(14,122,79,.11);color:#0B5F3E}
.pill.off{background:rgba(250,41,79,.11);color:#96122E}

/* --- the side bar + expiry strip ------------------------------------------

   Nine sections used to be a row of tabs that scrolled sideways: on anything
   narrower than a desk the last four sat off the edge, and a merchant had to
   already know they existed to go looking for them. Down the side they are all
   visible at once, and the bar does not move when the page does.

   A PANEL THAT FLOATS, not a strip welded to the edge — the same shape as the
   cards it sits beside, so the app reads as one set of surfaces rather than a
   rail with a page next to it.

   THE NUMBERS BELOW ARE MEASURED OFF THE REFERENCE, not chosen. His screen
   renders at 1.49 device pixels to the CSS pixel, so the panel that is 344px
   wide in the screenshot is 231 here, its 63.5px row pitch is 43, its 30px
   margin is 20 and its 28px corner is 19. Do not "tidy" them.

   `inset-inline-start` and not `left`: the bar belongs on the side the reader
   starts from, which is the right in Arabic and the left in English and
   Chinese. One property, both directions, and nothing to remember. */
.side{
  position:fixed;inset-block:20px;inset-inline-start:20px;width:232px;z-index:30;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid var(--edge);border-radius:28px;
  box-shadow:0 0 0 1px var(--hair),0 24px 60px -30px rgba(10,10,30,.28);
  display:flex;flex-direction:column;overflow:hidden;
}
.side .brand{margin:0;padding:18px 16px 12px;justify-content:flex-start}
.side .brand svg{width:26px;height:26px}
.side .brand .name{font-size:19px}

/* The rows are the reference's, measured: a 34px pill, an 8px gap, 43px of
   pitch, and the pill inset 12px from the panel's edge. The list scrolls rather than clipping if a screen is too short
   for all nine — a section you cannot reach is a section that does not exist,
   and twice already one has gone missing off the bottom. */
/* 22px in from the panel's edge, not 12: the capsule behind the current row
   ran nearly edge to edge and the owner found it too wide («عريض أكثر من
   اللازم», 5 Sep 2026). It now sits inside the lockup's own margin. */
.snav{flex:1;overflow-y:auto;padding:4px 22px 12px;display:flex;flex-direction:column;gap:8px}
.snav::-webkit-scrollbar{display:none}
.snav a{
  display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:14px;
  font-size:.92rem;font-weight:500;line-height:1.3;color:var(--ink2);
  text-decoration:none;transition:background .18s,color .18s,box-shadow .18s;
}
.snav a svg{
  width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75;
}
.snav a:hover{background:var(--fill);color:var(--ink)}
/* The current section is a quiet grey capsule — the owner's choice after a
   raised white one (lost on the glass) and a red tint (rejected: «لا تجعله
   باللون الأحمر»). The fill token is grey in both themes, so one rule does. */
.snav a.on{background:var(--fill2);color:var(--ink);font-weight:700}
/* the icon alone turns red — the capsule stays grey, the label stays ink */
.snav a.on svg{opacity:1;stroke:var(--red)}

/* The language and the sign-out sit under the lockup: both are things you do
   to the SESSION, not to the shop, so they belong with the mark rather than
   down among the shop's own sections. */
.srow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 16px 12px}

/* The shop's name, and only that. The owner's name was under it and told the
   person reading it who they already are. */
.sfoot{padding:12px 16px;border-top:1px solid var(--hair)}
.sfoot .who b{display:block;color:var(--ink);font-weight:700;font-size:.88rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The page keeps its own centred column inside whatever is left.

   THE OFFSET IS NOT ON <body>. It was, and it moved the login, signup, reset
   and activate pages too — they have no side bar, so their card sat 264px off
   centre with nothing in the gap.

   `.app` marks the nine pages that do have one, and it sits on the wrapper
   rather than on `.page` itself: `.page` is a 940px column that centres inside
   whatever it is given, so padding IT would eat the column instead of moving
   it. The subscription card centres in the same space, which is how the two
   line up. */
@media (min-width:900px){ .app{padding-inline-start:264px} }

/* The sheet furniture does not exist on a desk. */
.scrim,.sheettab,.sheetx{display:none}

/* UNDER 900px THE PANEL IS A BOTTOM SHEET.

   It used to reflow into a row of tabs that scrolled sideways, which put the
   last four sections off the edge of the screen — the exact failure the side
   bar was built to end, reintroduced one breakpoint down. So the panel stays a
   panel. It waits below the fold and slides up when the pill is tapped.

   A phone is held at the bottom. The thing you tap to navigate belongs where
   the thumb already is, not in a header two thirds of a screen away. */
@media (max-width:899px){
  body{padding-block-end:84px}

  /* The reference insets its sheet 12.5% of the screen from each side — it
     floats, it is not a full-bleed drawer. Measured off his phone screenshot
     at 1.44 device pixels to the CSS pixel: 71px of margin on a 393px screen. */
  .side{
    inset:auto 11% 14px;width:auto;max-block-size:76dvh;border-radius:30px;
    z-index:60;background:rgba(255,255,255,.8);
    box-shadow:0 0 0 1px var(--hair),0 -14px 54px -16px rgba(10,10,30,.36);
    transform:translateY(calc(100% + 24px));
    transition:transform .38s var(--ease);
  }
  body.menuon .side{transform:none}

  /* The grab bar. It is the one thing that says "this pulls up" before you
     have touched it. */
  .side::before{
    content:'';position:absolute;inset-block-start:9px;inset-inline:0;
    margin-inline:auto;width:38px;height:5px;border-radius:99px;background:rgba(60,60,67,.22);
  }
  .side .brand{padding:22px 18px 12px}

  .sheetx{
    display:grid;place-items:center;position:absolute;inset-block-start:18px;
    inset-inline-end:14px;width:32px;height:32px;border-radius:50%;
    background:var(--fill);border:0;color:var(--ink2);cursor:pointer;
  }
  .sheetx svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round}

  .snav{padding:2px 12px 12px}
  .sfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .sfoot .who b{font-size:.9rem}

  /* THE PILL. Centred, floating, and the only navigation on screen until it
     is tapped. `inset-inline:0` plus `margin-inline:auto` centres it in both
     directions without caring which one the page is in. */
  /* `display:block` here would beat the `hidden` attribute's own display:none
     and leave the scrim permanently over the page, so the open state drives it
     and `hidden` is only ever a hint to assistive tech. */
  body.menuon .scrim{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(17,17,24,.28);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  /* The pill is the one piece of glass that is always over content, so it is
     the one that blurs the most. */
  .sheettab{
    display:flex;align-items:center;gap:10px;direction:ltr;
    position:fixed;inset-inline:0;inset-block-end:16px;margin-inline:auto;
    width:max-content;z-index:50;padding:10px 20px 10px 16px;border-radius:999px;
    background:rgba(255,255,255,.66);
    -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
    border:1px solid var(--edge);color:var(--ink);
    box-shadow:0 0 0 1px var(--hair),0 14px 40px -14px rgba(10,10,30,.42);cursor:pointer;
    transition:transform .38s var(--ease),opacity .25s;
  }
  .sheettab:active{transform:scale(.96)}
  body.menuon .sheettab{opacity:0;pointer-events:none}
  .sheettab .burger,.sheettab .chev{
    width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  }
  /* The mark carries its own stroke and colour inline; leave it alone. */
  .sheettab > svg:not(.burger):not(.chev){width:22px;height:22px;flex-shrink:0}
  .sheettab .pillname{
    font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;
    letter-spacing:-.4px;line-height:1;
  }
}

/* THE SUBSCRIPTION WARNING IS A CARD, not a browser bar.

   It was built for the old full-width header: welded to the top edge, square,
   bleeding the whole way across, centred text and an underlined link. Against
   a page that is now nothing but floating rounded cards it read as something
   the browser had put there rather than something the app was saying.

   The width is `100% - 44px` capped at 896 so it lines up exactly with the
   cards below it — .page is a 940 column with 22px of padding, and 940-44 is
   896. If either number moves, this one moves with it. */
.expiry{
  box-sizing:border-box;width:calc(100% - 44px);max-width:896px;margin:22px auto 0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(255,248,234,.9);border:1px solid #F3E3BC;border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(180,120,10,.06),var(--sh);
  padding:13px 18px;color:#7A5406;font-size:.88rem;font-weight:500;
}
.expiry b{font-weight:500}
/* The renewal is the one thing to DO here, so it is a button and not a word
   with a line under it. `margin-inline-start:auto` puts it at the far end in
   Arabic and in English without naming a side. */
.expiry a{
  margin-inline-start:auto;background:#7A5406;color:#FFF8EA;
  border-radius:100px;padding:7px 15px;font-size:.84rem;font-weight:700;
  text-decoration:none;white-space:nowrap;transition:background .2s;
}
.expiry a:hover{background:#4E3504}

/* An action written inside a sentence. Reads as a control, not as a word with
   a line under it. */
.inline-btn{
  display:inline-block;background:var(--ink);color:#fff;
  border-radius:100px;padding:4px 13px;margin:0 2px;
  font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.inline-btn:hover{color:#fff;text-decoration:none;transform:translateY(-1px)}
.inline-btn.soft{background:var(--fill);color:var(--ink);border:1px solid transparent}
.inline-btn.soft:hover{color:var(--ink);background:var(--fill2)}

/* --- section blocks ------------------------------------------------------ */
.sec{
  border-radius:var(--r);
  padding:24px;margin-bottom:16px;
}
.sec > h2{
  font-size:1.12rem;font-weight:800;letter-spacing:-.3px;margin-bottom:4px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.sec > .note{font-size:.86rem;color:var(--ink3);font-weight:300;margin-bottom:16px}

.tools{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.tools input{
  flex:1;min-width:180px;background:var(--fill);border:1.5px solid transparent;
  border-radius:14px;padding:10px 14px;font-family:'Tajawal',sans-serif;
  font-size:1rem;color:var(--ink);outline:0;   /* 16px — see the note above */
  transition:border-color .22s,background .22s,box-shadow .22s;
}
.tools input:focus{border-color:var(--red);background:var(--focusbg);box-shadow:0 0 0 4px rgba(250,41,79,.12)}

.btn.sm{width:auto;padding:10px 20px;font-size:.9rem}
.btn.sm.ghost{color:var(--ink)}

/* --- stat row ------------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{
  border-radius:var(--r);padding:20px 20px 18px;
}
.stat .n{font-size:2.1rem;font-weight:600;letter-spacing:-1.4px;line-height:1.1;font-family:'Poppins',sans-serif}
.stat .k{font-size:.86rem;color:var(--ink2);font-weight:500;margin-top:4px}

/* The sales figures. Four numbers on one row on a desk, two by two on a phone —
   they are read together, so they are not four separate tiles. */
.sales{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px 18px}
.sales .n{font-size:1.55rem;font-weight:600;letter-spacing:-.8px;line-height:1.2;
  font-family:'Poppins',sans-serif}
.sales .k{font-size:.82rem;color:var(--ink3);font-weight:500;margin-top:2px}

/* --- list ---------------------------------------------------------------- */
.list{display:flex;flex-direction:column;gap:0}
/* Rows in an inset group: a hairline between neighbours, none at the ends,
   and the whole row lights up as a rounded fill under the finger. */
.item{
  position:relative;
  display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:16px;
  background:none;border:0;width:100%;text-align:right;cursor:pointer;
  font-family:'Tajawal',sans-serif;color:var(--ink);transition:background .18s;
}
.item + .item::before{content:'';position:absolute;inset-block-start:0;inset-inline:14px;
  height:1px;background:var(--hair)}
.item:hover{background:var(--fill)}
.item:hover::before,.item:hover + .item::before{opacity:0}
.item .nm{flex:1;min-width:0}
.item .nm b{display:block;font-weight:700;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .nm span{font-size:.85rem;color:var(--ink3);font-weight:300;direction:ltr;display:block;text-align:right}
.item .ct{
  flex-shrink:0;background:var(--fill2);border-radius:100px;padding:5px 13px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.86rem;
}
.item .ct.hot{background:rgba(250,41,79,.12);color:#96122E}
/* When someone was last in. The whole point of a customer list is telling a
   drifting regular from a new face, and a stamp count alone cannot: 7 stamps
   is a good customer this week and a lost one last spring. */
.item .last{flex-shrink:0;font-size:.84rem;font-weight:500;color:var(--ink2);
  min-width:82px;text-align:start}
.item .last.cold{color:var(--ink3);font-weight:300}
.item .last.today{color:#0B6B3C}
.lhead{display:flex;align-items:center;gap:14px;padding:0 14px 8px;
  font-size:.76rem;font-weight:500;color:var(--ink3);letter-spacing:.4px}
.lhead .h-ct{flex-shrink:0;width:52px;text-align:center}
.lhead .h-nm{flex:1;min-width:0}
.lhead .h-last{flex-shrink:0;min-width:82px;text-align:start}
@media (max-width:430px){
  .item .last,.lhead .h-last{min-width:64px;font-size:.78rem}
  .item{gap:10px}.lhead{gap:10px}
}

/* --- a choice of two ------------------------------------------------------
   Gender is two values, so it is two buttons and not a dropdown: one tap
   instead of three, which is what a counter needs. Sized to match .field
   input exactly so the form still reads as one column of controls. */
.field .gen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gen button{
  background:var(--fill);border:1.5px solid transparent;border-radius:14px;
  padding:12px 14px;font-family:'Tajawal',sans-serif;font-size:.98rem;font-weight:500;
  color:var(--ink2);cursor:pointer;outline:0;
}
.gen button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.field .gen.bad button{border-color:var(--red)}

/* --- filter chips --------------------------------------------------------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chips button{
  background:var(--fill);border:1.5px solid transparent;border-radius:100px;padding:7px 15px;
  font-family:'Tajawal',sans-serif;font-size:.86rem;font-weight:500;color:var(--ink2);
  cursor:pointer;outline:0;
}
.chips button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.chips button b{font-family:'Poppins',sans-serif;font-weight:600;margin-inline-start:6px;opacity:.75}

/* A customer whose gender or birthday is missing — every row enrolled before
   the fields existed. Grey, small, and only where it helps someone fill it. */
.item .gtag{flex-shrink:0;font-size:.8rem;font-weight:500;color:var(--ink3)}
.item .gtag.miss{color:var(--red);font-weight:700}

.empty{text-align:center;color:var(--ink3);font-weight:300;padding:32px 10px;font-size:.93rem;line-height:1.8}

/* --- stamp meter --------------------------------------------------------- */
.meter{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0}
.dot{
  width:20px;height:20px;border-radius:50%;
  background:var(--fill2);border:1.5px solid transparent;
}
.dot.on{background:var(--red);border-color:var(--red)}
.dot.mile{border-color:var(--ink);border-width:2.5px}

/* Points mode: one bar instead of the dots. A card of a thousand points would
   otherwise put a thousand spans on the page — and tell the merchant nothing
   that the bar does not. Fills from the right, the direction the card reads. */
.meter.bar{display:block;position:relative;height:24px;border-radius:100px;
  background:var(--fill2);border:1.5px solid transparent;overflow:hidden}
.meter.bar i{position:absolute;inset:0 0 0 auto;background:var(--red);border-radius:100px}
.meter.bar u{position:absolute;top:50%;width:10px;height:10px;margin:-5px -5px 0 0;
  border-radius:50%;background:var(--line)}
.meter.bar u.on{background:var(--ink)}

.mrow{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid var(--hair);
}
.mrow:first-of-type{border-top:0}
.mrow .at{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;
  background:var(--fill2);color:var(--ink3);
}
.mrow.reached .at{background:var(--ink);color:#fff}
.mrow.taken   .at{background:#E9F7F0;color:#0B5F3E}
.mrow .txt{flex:1;min-width:0}
.mrow .txt b{display:block;font-weight:700;font-size:.95rem}
.mrow .txt span{font-size:.83rem;color:var(--ink3);font-weight:300}

/* --- modal --------------------------------------------------------------- */
.sheet{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(17,17,24,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.sheet.open{display:flex}
/* Stop the page behind scrolling under an open sheet — on a phone, dragging
   the customer card would otherwise scroll the list instead. */
body:has(.sheet.open){overflow:hidden}
.sheet-card{
  background:rgba(255,255,255,.94);border-radius:28px;padding:26px 24px;
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  width:100%;max-width:440px;max-height:88dvh;overflow:auto;
  box-shadow:0 0 0 1px var(--hair),0 30px 80px -30px rgba(10,10,30,.45);
}
.sheet-card h3{font-size:1.15rem;font-weight:800;letter-spacing:-.3px;margin-bottom:16px}
.sheet-x{float:left;background:none;border:0;cursor:pointer;color:var(--ink3);font-size:1.5rem;line-height:1;padding:0 4px}
/* the close X belongs in the far corner, whichever side that is */
html[dir=ltr] .sheet-x{float:right}
.sheet-x:hover{color:var(--red)}

/* --- number boxes and switches ------------------------------------------ */
/* No stepper arrows on any number box. They are a desktop control that
   nobody at a counter uses, and the owner asked for them gone everywhere. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* THE SWITCH. A checkbox drawn as the iOS toggle: a grey track, a white knob
   with a soft shadow, and green when on — green because every phone in the
   country already reads that colour as "on". The knob starts at the inline
   start and slides the way the page reads, so it is right on an Arabic
   page and left on an English one without a second rule. */
input.tog{
  -webkit-appearance:none;appearance:none;margin:0;flex-shrink:0;
  width:51px;height:31px;border-radius:999px;position:relative;cursor:pointer;
  background:rgba(120,120,128,.26);outline:0;
  transition:background .25s var(--ease);
}
input.tog::after{
  content:'';position:absolute;top:2px;inset-inline-start:2px;
  width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.08);
  transition:transform .25s var(--ease);
}
input.tog:checked{background:#34C759}
input.tog:checked::after{transform:translateX(20px)}
html[dir=rtl] input.tog:checked::after{transform:translateX(-20px)}
input.tog:active::after{width:31px}
html[dir=rtl] input.tog:active::after{margin-inline-start:-4px}
input.tog:focus-visible{box-shadow:0 0 0 4px rgba(52,199,89,.25)}

/* The row a switch lives in: the words at the start, the switch at the end,
   the whole row tappable. */
.togrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;font-size:.95rem;font-weight:700;color:var(--ink);
}

/* Hidden until the guard decides where this visitor belongs — stops the
   dashboard flashing on screen before a redirect to the login page. */
[data-guard]{visibility:hidden}
[data-guard=ready]{visibility:visible}

/* ===========================================================================
   DARK (5 Sep 2026). Black, not grey — «يكون باللون الأسود» — the way iOS
   does it: a pure black ground, panels lifted off it in #1C1C1E, the same
   glass rules as the light theme with the tokens swapped. Chosen with the
   moon/sun button (assets/theme.js), remembered per device in localStorage,
   and stamped on <html> by the pre-paint script in every page's head so a
   dark page never flashes light on the way in.

   Everything below is a token swap or a colour that had been written out in
   full for the light page. Nothing structural changes.
   =========================================================================== */
html[data-theme=dark]{
  color-scheme:dark;
  --page:#000000; --white:#1C1C1E; --soft:#2C2C2E; --gray:#2C2C2E; --line:#3A3A3C;
  --ink:#F5F5F7; --ink2:#C7C7CC; --ink3:#8E8E93;
  --focusbg:#2C2C2E;
  --fill:rgba(120,120,128,.26); --fill2:rgba(120,120,128,.40);
  --glass:rgba(28,28,30,.78); --edge:rgba(255,255,255,.09); --hair:rgba(255,255,255,.07);
  --sh:0 1px 1px rgba(0,0,0,.4),0 12px 32px -14px rgba(0,0,0,.7);
  --sh-lift:0 2px 3px rgba(0,0,0,.5),0 22px 44px -16px rgba(0,0,0,.8);
}
/* the blooms glow a little more on black; the white one goes */
html[data-theme=dark] body::before{
  background:
    radial-gradient(52% 44% at 88% -6%,rgba(250,41,79,.20),transparent 70%),
    radial-gradient(46% 40% at 4% 100%,rgba(96,120,170,.18),transparent 70%);
}
html[data-theme=dark][dir=ltr] body::before{
  background:
    radial-gradient(52% 44% at 12% -6%,rgba(250,41,79,.20),transparent 70%),
    radial-gradient(46% 40% at 96% 100%,rgba(96,120,170,.18),transparent 70%);
}
/* the ink is light now, so whatever sits ON an ink fill turns black */
html[data-theme=dark] :is(.btn:not(.ghost),.chips button.on,.gen button.on,.sel-opt.on,
  .langmenu button.on,.mrow.reached .at,.inline-btn:not(.soft),.buy .wa,.fchip.on,
  .ptrig .tally:not(.zero),.role button.on,.meter.bar u.on){color:#000}
/* on its own line: a pseudo-element inside :is() is silently dropped, which is
   how the numbered steps on the QR page kept white digits on a white disc */
html[data-theme=dark] .steps li::before{color:#000}
html[data-theme=dark] .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -10px rgba(0,0,0,.7)}
html[data-theme=dark] .btn:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px -10px rgba(0,0,0,.7)}
html[data-theme=dark] .inline-btn:hover{color:#000}
html[data-theme=dark] .buy .wa:hover{color:#000}
/* the glass that floats over content */
html[data-theme=dark] .side{background:rgba(28,28,30,.74)}
html[data-theme=dark] :is(.sel-panel,.langmenu){background:rgba(44,44,46,.92)}
html[data-theme=dark] .sheet{background:rgba(0,0,0,.6)}
html[data-theme=dark] .sheet-card{background:rgba(28,28,30,.97)}
@media (max-width:899px){
  html[data-theme=dark] .side{background:rgba(28,28,30,.9)}
  html[data-theme=dark] .side::before{background:rgba(255,255,255,.22)}
  html[data-theme=dark] .sheettab{background:rgba(28,28,30,.78)}
  html[data-theme=dark] body.menuon .scrim{background:rgba(0,0,0,.55)}
}
/* tints that were dark-on-pale become light-on-dark */
html[data-theme=dark] :is(.msg.err,.pill.off,.item .ct.hot,.item .gtag.miss){color:#FF8A9C}
html[data-theme=dark] :is(.msg.ok,.pill.on,.item .last.today,.mrow.taken .at){color:#6EE39A}
html[data-theme=dark] .mrow.taken .at{background:rgba(14,122,79,.24)}
html[data-theme=dark] :is(.expiry,.banner.warn){background:rgba(180,120,10,.18);border-color:rgba(255,200,90,.16);color:#F7CB6E}
html[data-theme=dark] .expiry a{background:#F7CB6E;color:#3A2600}
html[data-theme=dark] .expiry a:hover{background:#FFDB8F}
/* the small glass tiles the sections draw for themselves */
html[data-theme=dark] :is(a.qa,.a,.steps div,.tri div){background:rgba(44,44,46,.62)}
html[data-theme=dark] a.qa:hover{background:#2C2C2E}
html[data-theme=dark] .a.on{background:#2C2C2E}
html[data-theme=dark] .tri div.owe{background:rgba(14,122,79,.2);border-color:rgba(14,122,79,.3)}
html[data-theme=dark] .tri div.owe b{color:#6EE39A}
html[data-theme=dark] .reftally{background:rgba(14,122,79,.2);border-color:rgba(14,122,79,.3);color:#6EE39A}
html[data-theme=dark] .pill.soon{background:rgba(255,179,32,.2);color:#F7CB6E}
html[data-theme=dark] .pill.wait{background:var(--fill);color:var(--ink3);box-shadow:none}
/* the notify picker and its lock-screen preview */
html[data-theme=dark] :is(.ptrig[aria-expanded="true"],.ppanel){background:#1C1C1E}
html[data-theme=dark] .ptop{background:rgba(120,120,128,.12)}
html[data-theme=dark] .prow.on{background:rgba(250,41,79,.14)}
html[data-theme=dark] .prow input{background:#2C2C2E;border-color:rgba(255,255,255,.28)}
html[data-theme=dark] .notif{background:rgba(58,58,60,.92);color:#fff}
/* the design studio */
/* not the colour row's swatch: that one IS the colour, in both themes */
html[data-theme=dark] :is(.icnow .big:not(.tint),.ic.on){background:#2C2C2E}
html[data-theme=dark] .sw.on{box-shadow:0 0 0 2px #1C1C1E inset,0 2px 6px -2px rgba(0,0,0,.5)}
html[data-theme=dark] :is(input[type=color],.sw button){border-color:#3A3A3C}
html[data-theme=dark] input.tog{background:rgba(120,120,128,.34)}
html[data-theme=dark] input.tog:checked{background:#30D158}