:root{--paper:#f6efe0;--ink:#26262b;--blue:#b9cbd6;--mute:#6b665c}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Tajawal,Tahoma,sans-serif;line-height:1.8;font-size:17px;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 0 0,var(--blue) 0,transparent 35%),radial-gradient(ellipse at 100% 100%,var(--blue) 0,transparent 30%)}
main{max-width:860px;margin:0 auto;padding:20px 16px 60px}
h1,h2{font-family:"Reem Kufi",Tajawal,sans-serif;margin:0}
h1{font-size:clamp(44px,12vw,80px);line-height:1.1}h2{font-size:28px;margin:40px 0 12px}
.tag{color:var(--mute)}
.chars{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.c{border:2px solid var(--ink);border-radius:6px 14px 8px 16px;padding:8px;background:#fffaf0}
.c svg{width:100%;height:140px}.c b{display:block}.c span{font-size:14px;color:var(--mute);line-height:1.5;display:block}
label{display:block;font-weight:700;margin-top:12px}
select,textarea,input{width:100%;font:inherit;padding:8px;border:2px solid var(--ink);border-radius:8px;background:#fffaf0;color:var(--ink)}
#out{direction:ltr;text-align:left;font-size:13px;min-height:190px}
button{font:inherit;font-weight:700;margin-top:10px;padding:10px 18px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:10px;cursor:pointer}
.sty{direction:ltr;text-align:left;font-size:13px;background:#fffaf0;border:2px dashed var(--ink);padding:8px;border-radius:8px}

[hidden]{display:none!important}
body.locked main{display:none}
#gate,#panel{position:fixed;inset:0;z-index:9000;background:var(--paper);display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px}
#panel{z-index:9500;align-items:flex-start}
.box{width:min(380px,100%);text-align:center}.box.wide{width:min(520px,100%);text-align:right}
.box h1{font-size:56px}.dots{font-size:22px;min-height:40px;letter-spacing:4px;border:2px solid var(--ink);border-radius:10px;background:#fffaf0;display:flex;align-items:center;justify-content:center;margin:8px 0}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
button.k{margin:0;padding:8px 0;font-size:22px;background:#fffaf0;color:var(--ink);border-radius:8px}
button.k.w2{grid-column:span 2}button.k.w3{grid-column:span 3;font-size:16px}
button.ghost{background:transparent;color:var(--ink);margin-inline-start:8px}
.msg{min-height:28px;font-weight:700;color:#b33}
input,textarea,select{-webkit-user-select:text;user-select:text}
body.shield{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.shield img,body.shield svg{pointer-events:none}
#shield{position:fixed;inset:0;z-index:99999;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px}
#wm{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='140'><text x='10' y='80' font-size='22' fill='black' transform='rotate(-25 100 70)'>الورقة ©</text></svg>")}
@media print{body *{display:none!important}}