/* صانع الأزرار — بشكل مشروعات دفتري: ذهبي على كحلي */
@font-face{font-family:Amiri;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/amiri-700.woff) format("woff")}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#070b2e;color:#f4ecd8;font-family:-apple-system,"SF Arabic",Tahoma,sans-serif;overscroll-behavior:none}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 25%,#1c2a78 0%,#0d1450 45%,#070b2e 100%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(45deg,#d4af37 1px,transparent 1px),linear-gradient(-45deg,#d4af37 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
button{font-family:inherit;color:inherit;cursor:pointer}
#app{height:100%}
.scr{display:none;flex-direction:column;min-height:100%;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 14px);max-width:560px;margin:0 auto}
.scr.on{display:flex}
.top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rb{width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,#26338a,#141c5c);border:2px solid #c9a227;display:flex;align-items:center;justify-content:center;color:#f2c94c;font-size:22px;flex:none;box-shadow:0 4px 0 #050824;padding:0}
.rb.ghost{visibility:hidden}
.ttl{flex:1;text-align:center;font-family:Amiri,serif;font-size:30px;color:#ffd02e;text-shadow:0 2px 0 #6b4a00;margin:0;font-weight:700}
.gold{background:linear-gradient(180deg,#ffe27a,#f2b705 60%,#c98a00);color:#2a1800;border:1px solid #8a5a00;border-radius:22px;font-weight:800;box-shadow:0 5px 0 #6b4a00}
.gold:active{transform:translateY(3px);box-shadow:0 2px 0 #6b4a00}
.card{background:rgba(12,16,52,.82);border:1.5px solid #c9a227;border-radius:18px;padding:12px}
.grow{flex:1;display:flex;min-height:200px}
textarea{flex:1;width:100%;resize:none;border:0;background:transparent;color:#f4ecd8;font:16px/1.65 -apple-system,Tahoma,sans-serif;outline:0}
textarea::placeholder{color:#8e8aa8}
.lbl{font-size:13px;color:#cfc6ad;margin:0 4px 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips:empty{margin:6px 0}
.chip{background:#141c5c;border:1px solid #4a5ab0;border-radius:14px;padding:7px 10px;font-size:13px;display:flex;gap:6px;align-items:center;max-width:100%}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr}
.chip button{background:none;border:0;color:#ff8a8a;font-size:15px;padding:0 2px}
.row2{display:flex;gap:10px}
.btn{flex:1;min-height:48px;border-radius:16px;border:1.5px solid #c9a227;background:linear-gradient(180deg,#26338a,#141c5c);color:#f4ecd8;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;text-align:center}
.btn.dim{opacity:.45}
.btn.wide{flex:none;width:100%;margin-top:14px}
.btn.red{border-color:#ef4444;color:#ffb4b4}
.make{height:58px;font-size:21px;margin-top:14px;font-family:Amiri,serif;width:100%}
.foot{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.foot button{background:rgba(12,16,52,.8);border:1px solid #4a5ab0;border-radius:12px;padding:7px 10px;font-size:13px;color:#cfc6ad}
.sum{font-size:14.5px;line-height:1.7;margin-bottom:10px}
.src{display:inline-flex;gap:4px;align-items:center;font-size:12px;border-radius:10px;padding:1px 8px;margin:2px 0 2px 4px;border:1px solid}
.s-mem{border-color:#6ee7a0;color:#6ee7a0}.s-ai{border-color:#8fc7ff;color:#8fc7ff}.s-rule{border-color:#f3d77a;color:#f3d77a}.s-off{border-color:#ff9a9a;color:#ff9a9a}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.pb{position:relative;min-height:96px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;text-align:center;padding:8px 4px;border:1px solid rgba(0,0,0,.4);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 5px 0 rgba(0,0,0,.45)}
.pb .ic{width:40px;height:40px;border-radius:50%;background:rgba(5,8,36,.85);border:2px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:#ffe27a}
.pb .ic svg{width:22px;height:22px}
.pb .nm{line-height:1.25;word-break:break-word}
.pb.sel{outline:3px solid #fff;outline-offset:2px}
.pb .q{position:absolute;top:6px;inset-inline-start:8px;background:#f5a524;color:#2a1800;border-radius:9px;font-size:11px;padding:0 6px;text-shadow:none}
.bhead{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.bhead .nm{flex:1;border:2px solid #c9a227;border-radius:16px;background:#14141e;text-align:center;padding:9px;font-family:Amiri,serif;font-size:20px;color:#ffd02e}
.bhead button{width:44px;height:44px;border-radius:14px;border:1.5px solid #c9a227;background:#141c5c;font-size:18px}
.rows{display:flex;flex-direction:column;gap:7px}
.tit{border:2px solid #c9a227;border-radius:16px;background:#14141e;text-align:center;padding:9px 34px;font-family:Amiri,serif;font-size:19px;color:#ffd02e;position:relative}
.tit:before{content:"▼";position:absolute;left:14px;top:12px;font-size:12px;color:#ffd02e}
.pr{display:flex;border:1.5px solid #3fa7a7;border-radius:14px;overflow:hidden;background:#0e1446;font-size:14px;min-height:44px}
.pr .k{width:36%;background:#1a2160;display:flex;align-items:center;justify-content:center;font-weight:700;padding:6px;text-align:center;word-break:break-word}
.pr .v{flex:1;display:flex;align-items:center;gap:7px;padding:6px 9px;min-width:0}
.pr .v span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;flex:1}
.ty{flex:none;width:28px;height:28px;border-radius:50%;background:#141c5c;border:1px solid #c9a227;display:flex;align-items:center;justify-content:center;font-size:13px;padding:0}
.pr.q{border-color:#f5a524}
.qm{color:#f5a524;font-size:12px;flex:none}
.hint{font-size:12px;color:#cfc6ad;text-align:center;margin:10px 0}
.okc{text-align:center;padding:18px 12px}
.okc .big{font-size:56px}
.okc h2{font-family:Amiri,serif;color:#ffd02e;font-size:28px;margin:6px 0}
.okc p{margin:4px 0;color:#cfc6ad;font-size:14px}
.warn{color:#ffb4b4!important}
.steps{margin-top:14px}.steps ol{font-size:14px;line-height:1.9;margin:0;padding-inline-start:20px}
.learn{display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.6;margin-top:14px}
.learn .ic{font-size:28px}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(3,5,20,.65);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sh-c{width:100%;max-width:560px;max-height:88vh;overflow:auto;background:#0d1450;border:1.5px solid #c9a227;border-bottom:0;border-radius:24px 24px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom) + 18px)}
.sh-c h3{margin:0 0 10px;color:#ffd02e;font-family:Amiri,serif;font-size:22px;text-align:center}
.sh-c p{font-size:14px;line-height:1.7;margin:6px 0;color:#cfc6ad}
.sh-c label{display:block;font-size:13px;color:#cfc6ad;margin:10px 4px 4px}
.sh-c input,.sh-c textarea{width:100%;border-radius:12px;border:1.5px solid rgba(201,162,39,.7);background:#070b2e;color:#fff;font-size:16px;padding:11px 12px;font-family:inherit;unicode-bidi:plaintext}
.sh-c textarea{min-height:120px;resize:vertical}
.sh-c .btn,.sh-c .gold{width:100%;margin-top:10px;min-height:50px;font-size:16px}
.types,.icons,.colors{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.types button{flex:1 0 28%;min-height:42px;border-radius:12px;border:1.5px solid #4a5ab0;background:#141c5c;font-size:14px}
.types button.on,.icons button.on{border-color:#ffd02e;background:#2a2f7a;color:#ffd02e}
.icons button{width:46px;height:46px;border-radius:12px;border:1.5px solid #4a5ab0;background:#141c5c;color:#ffe27a;display:flex;align-items:center;justify-content:center;padding:0}
.icons svg{width:22px;height:22px}
.colors button{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.colors button.on{border-color:#fff;outline:2px solid #ffd02e}
.stat{display:flex;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(201,162,39,.25);font-size:14px}
.stat b{font-weight:700}.ok-c{color:#6ee7a0}.bad-c{color:#ff8a8a}
.rec{font-family:ui-monospace,Menlo,monospace;font-size:22px;letter-spacing:2px;text-align:center;color:#ffd02e;background:#070b2e;border:1.5px dashed #c9a227;border-radius:12px;padding:12px;margin:10px 0;direction:ltr}
.qi{display:flex;gap:8px;align-items:center;border:1px solid #4a5ab0;border-radius:12px;padding:8px;margin:6px 0;font-size:13px}
.qi span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qi button{border-radius:10px;border:1px solid #c9a227;background:#141c5c;padding:6px 10px;font-size:13px}
.busy{position:fixed;inset:0;z-index:60;background:rgba(3,5,20,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.busy[hidden]{display:none}
.busy p{color:#ffd02e;font-family:Amiri,serif;font-size:22px;margin:0}
.spin{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,208,46,.25);border-top-color:#ffd02e;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;transition:.3s;z-index:70;background:#141c5c;border:1.5px solid #c9a227;border-radius:16px;padding:10px 16px;font-size:14px;max-width:90%;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}