body.sizer{background:var(--wine);color:var(--ivory);min-height:100vh}
.sz-top{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top,0px)) 5vw 12px}
.sz-top img{height:34px;display:block}
.sz{max-width:560px;margin:0 auto;padding:8px 5vw calc(32px + env(safe-area-inset-bottom,0px))}
.sz-step{display:grid;gap:16px;text-align:center}
.sz h1{font-size:clamp(1.7rem,6vw,2.4rem);color:var(--ivory)}
.sz h2{font-size:1.5rem;color:var(--gold)}
.sz .lead{margin:0 auto}
.sz .btn{border:0;cursor:pointer;font:inherit;font-weight:500;background:var(--gold);color:var(--wine);justify-self:center;min-width:220px}
.sz-link{background:none;border:0;color:var(--gold);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px;justify-self:center}
.sz-hint{color:var(--gold2);font-size:.95rem}
.sz-hint b{color:var(--gold)}
.sz-saved{color:var(--gold2)}
.sz-warn{background:#a3332a;color:#fff;border-radius:12px;padding:10px 14px;text-align:center;margin-bottom:12px}
.sz-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.sz-tabs button{font:inherit;color:var(--gold);background:transparent;border:1px solid rgba(245,246,206,.35);border-radius:30px;padding:7px 16px;cursor:pointer}
.sz-tabs button[aria-pressed=true]{background:var(--gold);color:var(--wine)}
.sz-stage{display:grid;place-items:center;min-height:200px;padding:10px 0;overflow:hidden}
.sz-cardref,.sz-coinref{border:1.5px solid var(--gold);background:rgba(245,246,206,.06)}
/* البطاقة بتنعاير بعرضها بس (٥٤ مم)، فبنعرض الجزء الفوقاني منها والتحت مفتوح */
.sz-cardref{border-bottom:0;border-end-start-radius:0!important;border-end-end-radius:0!important;-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.sz-dock{position:sticky;bottom:0;display:grid;gap:10px;padding:14px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--wine) 22%)}
.sz-ring{border:1.5px solid var(--gold);border-radius:50%;position:relative}
.sz-ring::before,.sz-ring::after{content:"";position:absolute;background:rgba(245,246,206,.35)}
.sz-ring::before{inset-block:30%;inset-inline-start:50%;width:1px}
.sz-ring::after{inset-inline:30%;top:50%;height:1px}
.sz-adjust{display:flex;align-items:center;gap:12px}
.sz-adjust input[type=range]{flex:1;accent-color:var(--gold)}
.sz-adjust-small{justify-content:center}
.sz-fine{width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,246,206,.45);background:rgba(245,246,206,.08);color:var(--gold);font-size:1.4rem;line-height:1;cursor:pointer;flex:0 0 auto}
.sz-live{color:var(--gold);font-weight:500;min-height:1.6em;margin:0}
.sz-choice{all:unset;cursor:pointer;display:grid;gap:4px;padding:18px;border-radius:16px;background:var(--velvet);box-shadow:0 0 0 1px rgba(245,246,206,.25)}
.sz-choice:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sz-choice b{font-family:'Aref Ruqaa',serif;font-size:1.25rem;color:var(--gold)}
.sz-choice span{color:var(--gold2);font-size:.9rem}
/* المسطرة: شرطة كل مم، أطول كل ٥ مم، وأطول كل سنتي، كلها محسوبة من معايرة الشاشة (--mm) */
.sz-ruler-wrap{position:relative;margin:0 auto;width:220px;touch-action:none;cursor:ns-resize}
.sz-ruler{--mm:6px;position:relative;border-inline-start:2px solid var(--gold);
 background:
  repeating-linear-gradient(to bottom,var(--gold) 0 1px,transparent 1px calc(var(--mm) * 10)) right top/34px 100% no-repeat,
  repeating-linear-gradient(to bottom,var(--gold) 0 1px,transparent 1px calc(var(--mm) * 5)) right top/22px 100% no-repeat,
  repeating-linear-gradient(to bottom,rgba(245,246,206,.6) 0 1px,transparent 1px var(--mm)) right top/12px 100% no-repeat}
.sz-ruler span{position:absolute;inset-inline-start:40px;translate:0 -50%;font-size:.75rem;color:var(--gold2)}
.sz-handle{position:absolute;inset-inline:0;height:0;border-top:2px solid var(--gold);pointer-events:none}
.sz-handle::after{content:"";position:absolute;inset-inline-end:0;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.sz-handle:focus-visible::after{outline:2px solid var(--ivory);outline-offset:2px}
.sz-result{display:grid;gap:6px;background:var(--velvet);border-radius:18px;padding:22px}
.sz-result b{font-family:'Aref Ruqaa',serif;font-size:2.6rem;color:var(--gold);line-height:1.3}
.sz-result span{color:var(--gold2)}
.sz-tips{text-align:start;display:grid;gap:6px;padding-inline-start:1.2em;margin:0}
.sz-promise{background:rgba(245,246,206,.08);border-radius:14px;padding:12px 14px;color:var(--gold);font-size:.95rem;margin:0}