/* ===== Fonts (Cairo, SIL OFL 1.1) ===== */
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../assets/fonts/cairo-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(../assets/fonts/cairo-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../assets/fonts/cairo-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(../assets/fonts/cairo-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../assets/fonts/cairo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(../assets/fonts/cairo-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../assets/fonts/cairo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(../assets/fonts/cairo-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Tokens ===== */
:root{
  --bg:#0b0b0d;
  --bg-2:#121215;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.08);
  --line-gold:rgba(212,175,55,.28);
  --text:#f4f0e6;
  --muted:#9b968b;
  --gold:#d4af37;
  --gold-1:#f7e7b0;
  --gold-3:#9c7a22;
  --gold-grad:linear-gradient(135deg,#f7e7b0 0%,#d9b44a 42%,#b48a28 100%);
  --green:#5fd39b;
  --red:#ff6b62;
  --radius:20px;
  --radius-sm:14px;
  --ease:cubic-bezier(.32,.72,0,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;color:var(--text);
  font-family:Cairo,-apple-system,"SF Arabic","Geeza Pro",system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  background:
    radial-gradient(120% 60% at 100% -10%,rgba(212,175,55,.13),transparent 60%),
    radial-gradient(90% 50% at -10% 110%,rgba(212,175,55,.07),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
body.is-locked .app,body.is-modal{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ===== Layout ===== */
.app{max-width:680px;margin:0 auto;padding:calc(var(--safe-t) + 8px) calc(16px + var(--safe-r)) calc(var(--tabbar-h) + var(--safe-b) + 28px) calc(16px + var(--safe-l))}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 4px}
.shop-id{display:flex;align-items:center;gap:10px;min-width:0}
.shop-logo{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px var(--line-gold),0 6px 18px rgba(0,0,0,.5)}
.shop-id__text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.shop-id__name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-id__sub{font-size:12px;color:var(--muted)}
.demo-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;color:#1a1405;background:var(--gold-grad)}
.large-title{font-size:34px;font-weight:800;letter-spacing:-.3px;margin:10px 2px 14px;line-height:1.2}

.view{display:none}
.view.is-active{display:block;animation:viewIn .42s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--radius-sm);font-weight:700;font-size:16px;transition:transform .18s var(--ease),filter .18s,background .2s;user-select:none;-webkit-user-select:none;white-space:nowrap}
.btn:active{transform:scale(.97);filter:brightness(.92)}
.btn--gold{color:#17120a;background:var(--gold-grad);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 24px -8px rgba(212,175,55,.55)}
.btn--glass{background:var(--surface-2);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn--ghost{color:var(--gold);background:transparent;border:1px solid var(--line-gold)}
.btn--danger{color:var(--red);background:rgba(255,107,98,.1);border:1px solid rgba(255,107,98,.3);width:100%}
.btn--xl{width:100%;min-height:58px;font-size:18px;border-radius:18px;margin:4px 0 14px}
.btn--sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:12px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text);background:var(--surface);border:1px solid var(--line);transition:transform .15s}
.icon-btn:active{transform:scale(.92)}
.icon-btn--danger{color:var(--red)}
.link-btn{color:var(--gold);font-size:17px;font-weight:600;min-height:44px;padding:0 4px}
.link-btn--strong{font-weight:800}

/* ===== Stats ===== */
.stat-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat,.kpi{padding:14px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.stat__label,.kpi span{display:block;font-size:12.5px;color:var(--muted)}
.stat__value{display:block;font-size:22px;font-weight:800;margin-top:2px}

/* ===== Search & chips ===== */
.search{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);color:var(--muted);transition:border-color .2s}
.search:focus-within{border-color:var(--line-gold)}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--text)}
.search input::placeholder{color:#6f6b62}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.chips{display:flex;gap:8px;margin-top:10px}
.chips--scroll{overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-inline:-16px;padding-inline:16px}
.chips--scroll::-webkit-scrollbar{display:none}
.chips--scroll:empty{display:none}
.chip{flex:none;height:36px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);transition:all .2s var(--ease)}
.chip.is-on{color:#17120a;background:var(--gold-grad);border-color:transparent}

/* ===== Lists & cards ===== */
.list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.card{position:relative;padding:14px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(212,175,55,.35),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.list > .card{animation:cardIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.card__head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:10px}

.item{display:grid;grid-template-columns:72px 1fr;gap:12px}
.item__thumb{width:72px;height:72px;border-radius:16px;overflow:hidden;background:#1a1916;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line) inset}
.item__thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.item__thumb img.is-loaded{opacity:1}
.item__mono{font-size:26px;font-weight:800;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.item__main{min-width:0}
.item__title{font-size:17px;font-weight:700;line-height:1.3;margin:0;direction:ltr;text-align:right;unicode-bidi:plaintext}
.item__sub{font-size:13px;color:var(--muted);margin-top:2px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.badge{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.badge--new{color:var(--gold-1);border-color:var(--line-gold);background:rgba(212,175,55,.1)}
.badge--batt-low{color:#ffb35c}
.badge--demo{color:#1a1405;background:var(--gold-grad);border-color:transparent}
.item__foot{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding-top:12px;margin-top:2px;border-top:1px solid var(--line)}
.item__price{margin-inline-end:auto;line-height:1.2}
.item__price strong{display:block;font-size:20px;font-weight:800;color:var(--gold-1)}
.item__price small{font-size:12px;color:var(--muted)}
.item__foot .btn--gold{min-height:42px;padding:0 22px;border-radius:12px}

.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{width:56px;height:56px;stroke:var(--gold);stroke-width:1.2;fill:none;margin:0 auto 10px;opacity:.8}
.empty strong{display:block;color:var(--text);font-size:18px;margin-bottom:4px}
.empty .btn{margin-top:16px}

/* ===== Sales ===== */
.segmented{display:flex;padding:3px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.segmented button{flex:1;min-height:38px;border-radius:10px;font-size:14px;font-weight:700;color:var(--muted);transition:all .25s var(--ease)}
.segmented button.is-on{color:#17120a;background:var(--gold-grad);box-shadow:0 4px 12px -4px rgba(212,175,55,.5)}
.segmented--wrap{flex-wrap:wrap;gap:3px}
.segmented--wrap button{flex:1 1 40%}
.segmented--mini button{min-height:32px;padding:0 14px;font-size:13px;white-space:nowrap}
.month-pick{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-weight:700}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.kpi:first-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.kpi strong{display:block;font-size:21px;font-weight:800}
.kpi--gold{border-color:var(--line-gold);background:linear-gradient(160deg,rgba(212,175,55,.16),rgba(212,175,55,.03))}
.kpi--gold strong{color:var(--gold-1)}
.bars{display:flex;align-items:flex-end;gap:5px;height:110px}
.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.bars i{display:block;width:100%;min-height:3px;border-radius:6px 6px 3px 3px;background:var(--gold-grad);opacity:.85;transform-origin:bottom;animation:barIn .7s var(--ease) both}
.bars i.is-zero{background:rgba(255,255,255,.08)}
.bars span{font-size:10px;color:var(--muted)}
@keyframes barIn{from{transform:scaleY(0)}}
.sale{display:flex;flex-direction:column;gap:6px}
.sale__top{display:flex;justify-content:space-between;gap:10px}
.sale__title{font-weight:700;direction:ltr;text-align:right;unicode-bidi:plaintext}
.sale__meta{font-size:12.5px;color:var(--muted)}
.sale__amount{text-align:left;line-height:1.25;flex:none}
.sale__amount strong{display:block;font-size:17px;color:var(--gold-1)}
.sale__amount small{font-size:12px;color:var(--green)}
.sale__amount small.is-neg{color:var(--red)}
.sale__actions{display:flex;gap:8px;margin-top:6px}
.sale__actions .btn{flex:1;min-height:38px;font-size:14px}

/* ===== Settings ===== */
.group{padding:16px;margin-bottom:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.group__title{font-size:13px;font-weight:700;color:var(--gold);margin:0;letter-spacing:.2px}
.group--danger{border-color:rgba(255,107,98,.2)}
.hint{margin:0;font-size:13.5px;color:var(--muted)}
.logo-edit{display:flex;align-items:center;gap:14px}
.logo-edit img{width:84px;height:84px;border-radius:22px;object-fit:cover;box-shadow:0 0 0 1px var(--line-gold)}
.logo-edit__actions{display:flex;flex-direction:column;gap:8px}
.row-setting{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row-setting small{display:block;color:var(--muted);font-size:13px}
.version{text-align:center;font-size:12px;color:#5f5b53;margin:18px 0 0}

/* ===== Forms ===== */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.field > span{font-size:13px;font-weight:600;color:var(--muted);padding-inline-start:2px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--line);outline:0;font-size:16px;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.field textarea{resize:none;line-height:1.6}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:18px 21px,13px 21px;background-size:5px 5px;background-repeat:no-repeat;padding-left:30px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--line-gold);background:rgba(212,175,55,.05)}
.field input::placeholder,.field textarea::placeholder{color:#64605a}
.field.is-invalid input{border-color:var(--red)}
.field--price input{font-size:26px;font-weight:800;text-align:center;color:var(--gold-1);min-height:60px}
.field-row{display:flex;gap:10px}
.form-error{margin:0;color:var(--red);font-size:14px;font-weight:600}

.photo-pick{position:relative;display:grid;place-items:center;height:150px;border-radius:var(--radius);border:1.5px dashed var(--line-gold);background:rgba(212,175,55,.04);overflow:hidden;cursor:pointer}
.photo-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-pick__empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--gold);font-size:14px;font-weight:600}
.photo-pick__empty .ico{width:30px;height:30px}
.photo-pick__clear{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ===== Tabbar ===== */
.tabbar{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:6px calc(10px + var(--safe-r)) calc(6px + var(--safe-b)) calc(10px + var(--safe-l));background:rgba(14,14,16,.72);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--line)}
.tabbar button{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--tabbar-h);justify-content:center;font-size:11.5px;font-weight:600;color:#7d796f;transition:color .2s}
.tabbar button .ico{width:25px;height:25px;transition:transform .3s var(--ease)}
.tabbar button.is-on{color:var(--gold)}
.tabbar button.is-on .ico{transform:translateY(-1px) scale(1.06)}

/* ===== Sheets ===== */
.sheet{position:fixed;inset:0;z-index:40}
.sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s var(--ease);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-width:680px;margin:0 auto;max-height:calc(100dvh - var(--safe-t) - 18px);display:flex;flex-direction:column;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#1b1a18,#111113 40%);border:1px solid var(--line);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6);transform:translateY(100%);transition:transform .45s var(--ease)}
.sheet.is-open .sheet__backdrop{opacity:1}
.sheet.is-open .sheet__panel{transform:none}
.sheet__grip{width:38px;height:5px;border-radius:9px;background:rgba(255,255,255,.2);margin:8px auto 0;flex:none}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px;flex:none;border-bottom:1px solid var(--line)}
.sheet__head h2{font-size:17px;font-weight:800;margin:0}
.sheet__head-spacer{width:52px}
.sheet__body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 16px calc(20px + var(--safe-b));display:flex;flex-direction:column;gap:14px}
.sell-summary{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--radius-sm);background:rgba(212,175,55,.07);border:1px solid var(--line-gold)}
.sell-summary .item__thumb{width:56px;height:56px;border-radius:14px}
.sell-summary strong{display:block;direction:ltr;text-align:right;unicode-bidi:plaintext}
.sell-summary small{color:var(--muted);font-size:13px}

/* ===== Alert ===== */
.alert{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(0,0,0,.5);padding:24px;animation:fade .2s}
.alert__box{width:min(300px,100%);border-radius:18px;background:rgba(36,35,33,.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);text-align:center;overflow:hidden;animation:pop .3s var(--ease)}
.alert__box h3{margin:18px 16px 4px;font-size:17px}
.alert__box p{margin:0 16px 16px;font-size:14px;color:#c9c4b8}
.alert__btns{display:flex;border-top:1px solid rgba(255,255,255,.1)}
.alert__btns button{flex:1;min-height:46px;font-size:17px;color:var(--gold)}
.alert__btns button+button{border-inline-start:1px solid rgba(255,255,255,.1);font-weight:700}
.alert__btns button.is-danger{color:var(--red)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(1.12)}}

/* ===== Toast ===== */
.toast{position:fixed;z-index:80;left:50%;top:calc(var(--safe-t) + 12px);transform:translate(-50%,calc(-100% - 60px));opacity:0;padding:10px 18px;border-radius:99px;background:rgba(30,29,27,.92);border:1px solid var(--line-gold);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:14px;font-weight:700;white-space:nowrap;transition:transform .45s var(--ease);pointer-events:none}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ===== Auth ===== */
body.is-locked .app,body.is-locked .tabbar{visibility:hidden}
.auth{position:fixed;inset:0;z-index:70;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 24px) 20px calc(var(--safe-b) + 24px);background:radial-gradient(110% 55% at 50% -5%,rgba(212,175,55,.2),transparent 70%),radial-gradient(80% 40% at 50% 110%,rgba(212,175,55,.08),transparent 70%),var(--bg);animation:fade .3s}
.auth__card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;animation:authIn .6s var(--ease)}
@keyframes authIn{from{opacity:0;transform:translateY(16px)}}
.auth__logo{width:88px;height:88px;border-radius:24px;margin:0 auto 4px;box-shadow:0 0 0 1px var(--line-gold),0 18px 50px -12px rgba(212,175,55,.45)}
.auth__title{margin:0;text-align:center;font-size:26px;font-weight:800}
.auth__sub{margin:-6px 0 6px;text-align:center;font-size:14px;color:var(--muted)}
.auth__reset .auth__sub{text-align:start;margin:0}
.auth__card .btn--xl{margin:6px 0 0}
.auth__forgot{align-self:center;font-size:15px}
.auth__card.is-shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.pass{position:relative;display:block}
.pass input{padding-left:48px}
.pass__toggle{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;color:var(--muted)}
.pass__toggle.is-on{color:var(--gold)}
.btn:disabled{opacity:.45;pointer-events:none}

/* ===== Invoice view ===== */
.invoice-view{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#151517;animation:fade .25s}
.invoice-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 4px) 16px 8px;border-bottom:1px solid var(--line);background:rgba(20,20,22,.9)}
.invoice-stage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:18px 0 24px}
.paper-wrap{margin:0 auto;transform-origin:top center}
.invoice-actions{display:flex;gap:10px;padding:12px 16px calc(12px + var(--safe-b));border-top:1px solid var(--line);background:rgba(20,20,22,.95)}
.invoice-actions .btn{flex:1}

/* Paper (also used for print) */
.paper{background:#fff;color:#141414;font-family:Cairo,"Geeza Pro",sans-serif;direction:rtl;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.paper--a4{width:210mm;min-height:297mm;padding:16mm 15mm 14mm;display:flex;flex-direction:column;font-size:13.5px}
.paper--receipt{width:80mm;padding:5mm 4mm 6mm;font-size:11.5px}
.inv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid #b8932e}
.inv-brand{display:flex;align-items:center;gap:14px}
.inv-brand img{width:70px;height:70px;object-fit:contain;border-radius:14px}
.inv-brand h1{margin:0;font-size:24px;font-weight:800;line-height:1.2}
.inv-brand p{margin:2px 0 0;color:#555;font-size:12.5px}
.inv-title{text-align:left}
.inv-title h2{margin:0;font-size:22px;font-weight:800;color:#8a6a17}
.inv-title p{margin:2px 0 0;font-size:12.5px;color:#444}
.inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.inv-box{border:1px solid #e3dccb;border-radius:10px;padding:10px 12px;background:#fcfaf5}
.inv-box h3{margin:0 0 4px;font-size:11.5px;color:#8a6a17;font-weight:700}
.inv-box p{margin:0;font-weight:600}
.inv-table{width:100%;border-collapse:collapse;margin-top:4px}
.inv-table th,.inv-table td{padding:8px 10px;border-bottom:1px solid #ece6d8;text-align:right;vertical-align:top}
.inv-table th{width:32%;color:#666;font-weight:600;background:#faf7ef}
.inv-table td{font-weight:700}
.inv-table .ltr{direction:ltr;unicode-bidi:isolate;text-align:right}
.inv-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;border-radius:12px;border:2px solid #b8932e;background:#fdf9ee}
.inv-total span{font-size:14px;font-weight:700;color:#6b5312}
.inv-total strong{font-size:24px;font-weight:800;color:#141414}
.inv-warranty{margin-top:14px;padding:10px 12px;border-inline-start:3px solid #b8932e;background:#fbf8f0;font-size:12.5px;white-space:pre-line}
.inv-warranty b{display:block;color:#8a6a17;margin-bottom:2px}
.inv-sign{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:auto;padding-top:22px}
.inv-sign div{height:110px;border:1.5px dashed #c9bc98;border-radius:12px;padding:8px;font-size:12px;color:#8a7a52;text-align:center}
.inv-foot{margin-top:14px;text-align:center;font-size:11.5px;color:#777}
.paper--receipt .inv-head{flex-direction:column;text-align:center;gap:6px;padding-bottom:8px;border-bottom:1px dashed #555}
.paper--receipt .inv-brand{flex-direction:column;gap:4px}
.paper--receipt .inv-brand img{width:46px;height:46px}
.paper--receipt .inv-brand h1{font-size:16px}
.paper--receipt .inv-brand p{font-size:10.5px}
.paper--receipt .inv-title{text-align:center}
.paper--receipt .inv-title h2{font-size:14px}
.paper--receipt .inv-title p{font-size:10.5px}
.paper--receipt .inv-meta{grid-template-columns:1fr;gap:4px;margin:8px 0}
.paper--receipt .inv-box{border:0;padding:0;background:none;display:flex;justify-content:space-between;gap:6px}
.paper--receipt .inv-box h3{margin:0;font-size:10.5px}
.paper--receipt .inv-table th,.paper--receipt .inv-table td{padding:4px 2px;border-bottom:1px dotted #bbb}
.paper--receipt .inv-table th{background:none;width:38%}
.paper--receipt .inv-total{border-radius:6px;padding:8px 10px;border-width:1.5px}
.paper--receipt .inv-total strong{font-size:17px}
.paper--receipt .inv-warranty{font-size:10.5px;padding:6px 8px}
.paper--receipt .inv-sign{grid-template-columns:1fr 1fr;padding-top:10px}
.paper--receipt .inv-sign div{height:70px;font-size:10px}
.paper--receipt .inv-sign div:last-child{display:none}

/* ===== Print ===== */
@media print{
  html,body{background:#fff!important}
  body > *:not(#invoiceView){display:none!important}
  .invoice-view{position:static;display:block!important;background:#fff;animation:none}
  .invoice-bar,.invoice-actions{display:none!important}
  .invoice-stage{overflow:visible;padding:0}
  .paper-wrap{transform:none!important;width:auto!important;height:auto!important;margin:0}
  .paper{box-shadow:none;transform:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .paper--a4{width:auto;min-height:calc(297mm - 2px);padding:12mm 12mm 10mm}
  .paper--receipt{width:72mm;padding:0}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (min-width:600px){.large-title{font-size:38px}}