:root{
  --bg:#FCF9EC;--panel:#FFFFFF;--ink:#1E8459;--muted:#3E7D61;--faint:#7FA592;--line:#E6E1D0;
  --brand:#27A270;--brand-deep:#1E8459;--brand-soft:#DDF0E5;--coral:#C2412F;--coral-soft:#F8E1DA;
  --ar:"Almarai",system-ui,sans-serif;--display:"Readex Pro","Almarai",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{--bg:#0E1714;--panel:#13201B;--ink:#EEF4EF;--muted:#91A79C;--faint:#61766C;--line:#1F3029;--brand:#3CC48C;--brand-deep:#2FA674;--brand-soft:#173A2C;--coral:#FF8F7E;--coral-soft:#3A1F1A;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1714;--panel:#13201B;--ink:#EEF4EF;--muted:#91A79C;--faint:#61766C;--line:#1F3029;--brand:#3CC48C;--brand-deep:#2FA674;--brand-soft:#173A2C;--coral:#FF8F7E;--coral-soft:#3A1F1A;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--ar);line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);color:var(--brand);margin:0;line-height:1.25}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:.4rem}
.wrap{max-width:70rem;margin-inline:auto;padding-inline:20px}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.2rem}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:2.5rem;height:2.5rem}
.top nav{display:flex;gap:.4rem;align-items:center}
.top nav a{color:var(--muted);padding:.4rem .7rem;border-radius:.5rem}
.top nav a:hover{background:var(--brand-soft);color:var(--ink);text-decoration:none}

.shell{min-height:calc(100vh - 6rem);display:grid;place-items:start center;padding:clamp(1.5rem,6vw,4rem) 0 4rem}
.box{width:min(100%,27rem);background:var(--panel);border:1px solid var(--line);border-radius:1.2rem;padding:clamp(1.4rem,5vw,2.2rem)}
.box.wide{width:min(100%,44rem)}
.box h1{font-size:1.7rem;margin-bottom:.4rem}
.box > p.sub{color:var(--muted);margin:0 0 1.4rem}

.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line);border-radius:.8rem;padding:.25rem;margin-bottom:1.4rem}
.tabs button{border:0;background:transparent;font:700 .98rem var(--ar);color:var(--muted);padding:.65rem;border-radius:.6rem;cursor:pointer;transition:background .2s ease,color .2s ease}
.tabs button[aria-selected="true"]{background:var(--brand);color:#fff}

label{display:block;font-weight:700;font-size:.95rem;margin:0 0 .35rem;color:var(--ink)}
.field{margin-bottom:1rem}
input[type=email],input[type=password],input[type=text]{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:.7rem;padding:.8rem .95rem;color:var(--ink);font:1rem var(--ar)}
input[type=email],input[type=password]{direction:ltr;text-align:left}
input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.hint{color:var(--faint);font-size:.85rem;margin-top:.3rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.93rem;color:var(--muted);margin:.4rem 0 1.2rem}
.check input{margin-top:.35rem;accent-color:var(--brand);width:1.05rem;height:1.05rem;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;font:700 1rem var(--ar);border-radius:.7rem;padding:.85rem 1.2rem;border:1.5px solid transparent;cursor:pointer;background:var(--brand);color:#fff;transition:background .15s ease,transform .1s ease}
.btn:hover{background:var(--brand-deep);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand)}
.btn.danger{background:var(--coral);color:#fff}
.msg{min-height:1.4em;margin-top:.9rem;font-size:.93rem}
.msg.err{color:var(--coral)}
.msg.ok{color:var(--brand)}
.alt{text-align:center;margin-top:1.2rem;font-size:.93rem;color:var(--muted)}
[hidden]{display:none!important}

/* account */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:0 0 1.6rem}
.kv dt{color:var(--faint)}
.kv dd{margin:0;direction:ltr;text-align:right}
[dir="ltr"] .kv dd{text-align:left}
.top nav a[lang]{font-weight:700}
.labrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.labrow:last-child{border-bottom:1px solid var(--line)}
.bar{height:.5rem;background:var(--brand-soft);border-radius:99px;overflow:hidden;width:9rem}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.section{margin-top:2rem}
.section h2{font-size:1.2rem;margin-bottom:.6rem}
.row-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.row-btns .btn{width:auto}
.danger-zone{margin-top:2rem;border:1px solid var(--coral-soft);border-radius:1rem;padding:1.2rem}
.danger-zone h2{color:var(--coral)}

/* privacy */
.doc h2{font-size:1.2rem;margin:1.6rem 0 .4rem}
.doc p,.doc li{color:var(--muted)}
.doc ul{padding-inline-start:1.2rem}
.note{background:var(--brand-soft);border-radius:.8rem;padding:.9rem 1rem;color:var(--ink);font-size:.93rem}

/* entrance motion */
@media (prefers-reduced-motion:no-preference){
  .box{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}