@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Young+Serif&display=swap");
/* Lisan AI: shared look of the public pages (Login, Help, Terms, Privacy).
   Same dark + gold design as the home page (landing.html): same colours, fonts and top bar.
   A page opts in with <body class="site"> and <link rel="stylesheet" href="/site.css">. */
:root{
  --bg:#06080d; --bg2:#0a0e16; --card:#0e131d; --card2:#131a29;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#eef2f8; --body:#c4cddb; --muted:#a0abbd; --dim:#7d899d;
  --gold:#e6b85c; --gold2:#f6dc98; --cyan:#62c7ff;
  --fill:rgba(255,255,255,.04); --fill2:rgba(255,255,255,.09); --fill3:rgba(255,255,255,.12);
  --ok:#6ee7a0; --err:#ff8a80; --shadow:0 40px 120px -40px rgba(0,0,0,.9); --navbg:rgba(6,8,13,.82);
  --sans:"Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%;color-scheme:dark;background:#06080d}
body.site{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;position:relative}
body.site *{box-sizing:border-box}
body.site::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(900px 520px at 78% -10%,rgba(230,184,92,.14),transparent 60%),
  radial-gradient(800px 520px at 12% 0%,rgba(98,199,255,.11),transparent 60%)}
body.site :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
body.site a{color:var(--gold);text-decoration:none}
body.site a:hover{color:var(--gold2);text-decoration:underline}

/* top bar (same as the home page) */
.site-nav{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;background:var(--navbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-nav .in{max-width:1180px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:16px}
body.site .site-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
body.site .site-brand:hover{color:var(--text);text-decoration:none}
.site-brand img{width:30px;height:30px;border-radius:8px;display:block}
body.site .site-nav .back{margin-inline-start:auto;color:var(--muted);font-size:14.5px}
body.site .site-nav .back:hover{color:var(--text);text-decoration:none}

/* page body */
body.site .page{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:104px 24px 80px}
body.site h1{margin:0 0 6px;font-size:clamp(30px,4.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--text)}
body.site h2{margin:34px 0 14px;font-size:clamp(21px,2.6vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--text)}
body.site .sub,body.site .updated{color:var(--dim);margin:0 0 16px;font-size:15px}
body.site p,body.site li{color:var(--body)}
body.site strong{color:var(--text);font-weight:600}
body.site ul{padding-inline-start:22px}
body.site li{margin-bottom:6px}
body.site code{background:var(--fill3);padding:1px 6px;border-radius:6px;font-size:.92em}

/* legal pages (terms, privacy): plain sections */
body.site .doc h2{padding-bottom:8px;border-bottom:1px solid var(--line)}

/* help page */
body.site .langs{display:inline-flex;gap:0;margin:8px 0 22px;border:1px solid var(--line2);border-radius:10px;padding:3px;background:var(--fill)}
body.site .langs button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:7px;cursor:pointer;line-height:1.3}
body.site .langs button.on{background:var(--fill3);color:var(--text)}
body.site .page .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:0 0 14px;box-shadow:none}
body.site .page .card h3{margin:0 0 8px;color:var(--gold2);font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
body.site .page .card p,body.site .page .card li{color:var(--body);font-size:15px}
body.site .page .card ul{margin:6px 0 0}
body.site .rtl{direction:rtl;text-align:right}
body.site .rtl ul{padding-inline-start:22px}

/* Light version: used when the app itself is set to light (see /site.js). Same layout, light colours. */
html.light{
  color-scheme:light; background:#f6f7fb;
  --bg:#f6f7fb; --bg2:#ffffff; --card:#ffffff; --card2:#f1f3f8;
  --line:rgba(15,23,42,.10); --line2:rgba(15,23,42,.18);
  --text:#0f1623; --body:#334155; --muted:#5b6678; --dim:#5f6b80;
  --gold:#8f5c08; --gold2:#7c4f0c; --cyan:#0b7fb8;
  --fill:rgba(15,23,42,.04); --fill2:rgba(15,23,42,.08); --fill3:rgba(15,23,42,.09);
  --ok:#15803d; --err:#c62828; --shadow:0 30px 80px -40px rgba(15,23,42,.35); --navbg:rgba(255,255,255,.86);
}
html.light body.site::before{background:
  radial-gradient(900px 520px at 78% -10%,rgba(230,184,92,.16),transparent 60%),
  radial-gradient(800px 520px at 12% 0%,rgba(98,199,255,.14),transparent 60%)}

@media (max-width:600px){body.site .page{padding:92px 18px 64px}.site-nav .in{padding:0 18px}}

/* One interface language at a time. The choice is the same "lisan_lang" setting the home page and the app use; /site.js reads it,
   sets <html lang dir data-lang> and shows the .en or the .ar parts of a page. */
html[data-lang="ar"] .en{display:none!important}
html[data-lang="en"] .ar{display:none!important}
html[data-lang="ar"]{--sans:"IBM Plex Sans Arabic","Inter",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
html[data-lang="ar"] body.site{line-height:1.9}
html[data-lang="ar"] body.site h1,html[data-lang="ar"] body.site h2,html[data-lang="ar"] body.site h3{letter-spacing:0;line-height:1.4}
html[data-lang="ar"] body.site ul{padding-inline-start:22px}
.site-lang{display:inline-flex;border:1px solid var(--line2);border-radius:10px;padding:3px;background:var(--fill);margin-inline-start:auto}
.site-lang button,body.site .site-lang button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:6px 12px;margin:0;width:auto;display:inline-block;border-radius:7px;cursor:pointer;line-height:1.3;box-shadow:none;transform:none}
.site-lang button[aria-pressed="true"],body.site .site-lang button[aria-pressed="true"]{background:var(--fill3);color:var(--text)}
.site-lang + .back,.site-lang + .links{margin-inline-start:0!important}
body.site .site-nav .links{display:flex;gap:18px;align-items:center;font-size:14.5px;font-weight:600}
body.site .site-nav .links a{color:var(--muted)}
body.site .site-nav .links a:hover,body.site .site-nav .links a.active{color:var(--text);text-decoration:none}
@media (max-width:600px){.site-nav .in{gap:10px}body.site .site-nav .links{gap:12px;font-size:13.5px}.site-lang button,body.site .site-lang button{padding:6px 9px}}

/* Lisan AI, Studio design for the shared public pages (Login, Pricing, Help, Terms, Privacy).
   The server adds this file after site.css when Admin > Home Page Design is set to Studio (see landing_look.py).
   It only restyles: serif headings, mono labels, square corners, flat gold buttons, a fine grid instead of glows.
   Page files are not changed, so every rule here wins over a page's own <style> by starting with "body.site".
   Keep it in step with the Studio stylesheet of landing.html (same colours, fonts, corners). */
:root{
  --bg:#08090a; --bg2:#0c0e10; --card:#0d1012; --card2:#111417;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  --text:#ecebe6; --body:#c3c6cb; --muted:#a2a7ae; --dim:#7a8087;
  --gold:#e6b85c; --gold2:#f1cf86; --cyan:#79bfe3;
  --fill:rgba(255,255,255,.04); --fill2:rgba(255,255,255,.09); --fill3:rgba(255,255,255,.12);
  --shadow:none; --navbg:rgba(8,9,10,.94);
  --serif:"Young Serif","Amiri",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html{background:#08090a}
html.light{
  background:#f4f2ec;
  --bg:#f4f2ec; --bg2:#ffffff; --card:#ffffff; --card2:#f0ede5;
  --line:rgba(21,19,14,.12); --line2:rgba(21,19,14,.22);
  --text:#15130e; --body:#3a382f; --muted:#5a574c; --dim:#6b685c;
  --gold:#8a5a00; --gold2:#6f4700; --cyan:#0b6f9e;
  --fill:rgba(21,19,14,.04); --fill2:rgba(21,19,14,.08); --fill3:rgba(21,19,14,.09);
  --shadow:none; --navbg:rgba(244,242,236,.94);
}
html[data-lang="ar"]{--sans:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;--serif:"Amiri","Young Serif",Georgia,serif}

body.site{font-family:var(--sans)}
body.site::before{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px;background-color:transparent}
html.light body.site::before{background-image:linear-gradient(rgba(21,19,14,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,19,14,.05) 1px,transparent 1px)}

/* headings */
body.site h1,body.site h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08;text-wrap:balance}
html[data-lang="ar"] body.site h1,html[data-lang="ar"] body.site h2{font-weight:700;line-height:1.35;letter-spacing:0}
body.site h1{font-size:clamp(34px,5vw,52px)}
body.site h3{font-family:var(--sans)}
body.site .sub,body.site .updated{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
html[data-lang="ar"] body.site .sub,html[data-lang="ar"] body.site .updated{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none}
body.site code{border-radius:0;font-family:var(--mono)}
body.site :focus-visible{border-radius:0}

/* top bar */
body.site .site-brand{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.site-brand img{border-radius:4px}
body.site .site-nav .back,body.site .site-nav .links{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
body.site .site-nav .links a{font-size:12.5px}
html[data-lang="ar"] body.site .site-brand,html[data-lang="ar"] body.site .site-nav .back,html[data-lang="ar"] body.site .site-nav .links{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:14.5px}
html[data-lang="ar"] body.site .site-nav .links a{font-size:14.5px}
body.site .site-lang,body.site .langs{border-radius:0}
body.site .site-lang button,body.site .langs button{border-radius:0}
body.site .site-lang button[aria-pressed="true"],body.site .langs button.on{background:var(--gold);color:#150f02}
html.light body.site .site-lang button[aria-pressed="true"],html.light body.site .langs button.on{color:#fff}

/* help page cards, legal pages */
body.site .page .card{border-radius:0;background:var(--card)}
body.site .page .card h3{color:var(--gold);font-weight:600}
body.site .doc h2{border-bottom-color:var(--line2)}

/* login */
body.site .card{border-radius:0;box-shadow:none;border-color:var(--line2)}
body.site .card img{border-radius:6px}
body.site .card h1{font-size:30px}
body.site input{border-radius:0;font-family:var(--sans)}
body.site input:focus{border-color:var(--gold);box-shadow:none}
body.site button.social,body.site button.secondary,body.site button.primary{border-radius:0;font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
html[data-lang="ar"] body.site button.social,html[data-lang="ar"] body.site button.secondary,html[data-lang="ar"] body.site button.primary{font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none}
body.site .primary{background:var(--gold);color:#150f02;border-color:var(--gold);box-shadow:none}
html.light body.site .primary{color:#fff}
body.site .primary:hover{background:var(--gold2);transform:none;box-shadow:none}
body.site .terms-row input{accent-color:var(--gold)}

/* pricing */
body.site .plan-card{border-radius:0;font-family:var(--sans)}
body.site .plan-card:hover:not(:disabled){transform:none;box-shadow:none}
body.site .pbadge{background:var(--gold);color:#150f02;border-radius:0;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
html.light body.site .pbadge{color:#fff}
html[data-lang="ar"] body.site .pbadge{font-family:var(--sans);letter-spacing:0;text-transform:none}
body.site .pname{color:var(--gold);font-weight:700}
body.site .pprice{font-family:var(--serif);font-weight:400;color:var(--text)}
html[data-lang="ar"] body.site .pprice{font-weight:700}
body.site .p-foot img{border-radius:4px}

/* narrow screens: keep the top bar on one line */
@media (max-width:600px){
  body.site .site-brand{font-size:13px;letter-spacing:.04em;white-space:nowrap;gap:8px}
  body.site .site-nav .back,body.site .site-nav .links,body.site .site-nav .links a{font-size:11px;letter-spacing:.02em;white-space:nowrap}
  body.site .site-nav .links{gap:10px}
}