/* nasiq — shared tokens and components (landing + app). Logical properties throughout, so RTL and LTR both work. */
:root{
  --bg:#F7F3EF; --surface:#FFFFFF; --tile:#ECE6DF; --ink:#24191F; --muted:#6F6168; --line:#E7DED8;
  --pop:#FF4D7E; --pop-ink:#FFFFFF; --pop-soft:#FFE3EB; --lime:#DDF46C; --lime-ink:#24191F; --board:#DEDBD5;
  --font-display:"Lalezar","Readex Pro","Segoe UI",Tahoma,sans-serif;
  --font-body:"Readex Pro","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;
  --r-lg:22px; --r-md:14px; --gutter:max(16px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16111A; --surface:#211A24; --tile:#2C2430; --ink:#F7EFF3; --muted:#B4A6AE; --line:#362C38;
  --pop:#FF6A93; --pop-ink:#1A1015; --pop-soft:#3B1D29; --lime:#CDE65E; --lime-ink:#16111A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16111A; --surface:#211A24; --tile:#2C2430; --ink:#F7EFF3; --muted:#B4A6AE; --line:#362C38;
  --pop:#FF6A93; --pop-ink:#1A1015; --pop-soft:#3B1D29; --lime:#CDE65E; --lime-ink:#16111A; color-scheme:dark}
html[lang="en"]{ --font-display:"Lalezar","Readex Pro",system-ui,sans-serif }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.65;margin:0;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--pop);outline-offset:2px;border-radius:10px}
[hidden]{display:none!important}
html.i18n-wait body{visibility:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
mark{background:var(--lime);color:var(--lime-ink);padding:0 .22em;border-radius:8px;display:inline-block;transform:rotate(-2deg)}

/* wordmark */
.brand{font-family:"Lalezar","Readex Pro",sans-serif;font-size:1.9rem;line-height:1;color:var(--ink);display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;text-decoration:none}
.brand i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--pop);transform:translateY(-7px)}

/* buttons, pills, fields */
.btn{border:0;background:var(--pop);color:var(--pop-ink);border-radius:999px;padding:11px 20px;font-weight:700;font-size:.97rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.sm{padding:7px 14px;font-size:.88rem}
.btn.big{padding:14px 26px;font-size:1.08rem}
.btn svg{width:18px;height:18px;flex:none}
.pill{border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.pill b{background:var(--pop);color:var(--pop-ink);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:.72rem;padding:0 5px}
.locsel{appearance:none;-webkit-appearance:none;border:1.5px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237B6D74' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat;background-position:right 10px center;border-radius:999px;padding:5px 28px 5px 12px;font-size:.82rem;font-weight:600;max-width:150px}
[dir="rtl"] .locsel{background-position:left 10px center;padding:5px 12px 5px 28px}
input[type="email"],input[type="text"],textarea{border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-md);padding:11px 13px;width:100%;resize:vertical;min-width:0}
input[type="email"]{direction:ltr;text-align:start}
[dir="rtl"] input[type="email"]{text-align:right}
.note{font-size:.86rem;color:var(--muted)}
.note.err{color:var(--pop)}
.note.ok{color:var(--ink);font-weight:600}
.tagnew{font-family:var(--font-body);font-size:.7rem;font-weight:700;background:var(--lime);color:var(--lime-ink);border-radius:6px;padding:1px 7px;margin-inline-start:6px;vertical-align:middle}

/* consent banner */
.consent{position:fixed;inset-inline:12px;bottom:12px;z-index:60;max-width:520px;margin-inline:auto;background:var(--ink);color:var(--bg);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.88rem}
.consent-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.consent-row a{margin-inline-end:auto;color:var(--bg);opacity:.8;font-size:.82rem}
.consent .btn.line{color:var(--bg);border-color:var(--bg)}

/* bottom sheet (sign-in) */
.scrim{position:fixed;inset:0;background:rgba(20,10,16,.45);z-index:70;opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:71;background:var(--surface);border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:12px;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.9,.3,1);box-shadow:0 -10px 40px rgba(0,0,0,.18)}
.sheet.on{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:var(--line);align-self:center;margin-bottom:4px}
.sheet h3{font-size:1.45rem}
.sheet p{color:var(--muted);font-size:.92rem}
.sheet .stack{display:flex;flex-direction:column;gap:8px}
.sheet .btn{width:100%}
.sheet .g{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink)}
.sheet .row{display:flex;gap:8px}
.sheet .row .btn{width:auto}
.sheet .fine{font-size:.76rem;color:var(--muted);text-align:center}
.sheet .fine a{color:var(--muted)}
.sheet .thumb{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:16px;padding:8px}
.sheet .thumb img{width:56px;height:70px;border-radius:10px;object-fit:cover;background:var(--board)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:80;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;transition:.25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}