:root{--a1:#2f6bff;--a2:#8b5cf6;--bg:#eef2fb;--tx:#1b1f3b;--gl:rgba(255,255,255,.65);--bd:rgba(255,255,255,.85);--sh:0 8px 32px rgba(60,70,140,.16);--r:20px}
:root[data-theme=dark]{--bg:#0d0f1f;--tx:#eaeaff;--gl:rgba(32,34,64,.6);--bd:rgba(255,255,255,.12);--sh:0 8px 32px rgba(0,0,0,.5)}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:Vazirmatn,Inter,system-ui,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg i{position:absolute;width:45vmax;height:45vmax;border-radius:50%;filter:blur(80px);opacity:.45;background:linear-gradient(135deg,var(--a1),var(--a2));animation:fl 14s ease-in-out infinite alternate}
.bg i:nth-child(1){top:-15%;left:-10%}.bg i:nth-child(2){bottom:-20%;right:-10%;background:linear-gradient(135deg,var(--a2),#ff7ad9);animation-delay:-5s}.bg i:nth-child(3){top:40%;left:40%;width:25vmax;height:25vmax;opacity:.25;animation-delay:-9s}
@keyframes fl{to{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes up{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(10px)}}
.glass{background:var(--gl);backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);border:1px solid var(--bd);box-shadow:var(--sh);border-radius:var(--r)}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--bd);background:var(--gl);border-radius:12px;padding:8px 12px;min-height:40px;transition:.18s;white-space:nowrap}
button:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(80,90,255,.25)}
button:active{transform:scale(.94)}
button:hover:not(.pri),.tabs .on{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
select,input:not([type=color]):not([type=file]):not([type=range]){background:var(--gl);border:1px solid var(--bd);border-radius:12px;padding:8px 10px;min-height:40px}
.pri{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-weight:700;border:0}
#welcome{max-width:560px;margin:8vh auto 0;padding:40px 28px;text-align:center;width:calc(100% - 32px);animation:up .7s}
#welcome.out{opacity:0;transform:scale(.95);transition:.35s}
.logo{width:84px;height:84px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;font:800 48px Inter;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 12px 30px rgba(80,90,255,.45);animation:pop .8s .2s both}
h1{font:800 clamp(38px,8vw,60px) Inter}h1 span,.brand span{background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
#welcome p{margin:10px 0 24px;font-weight:700}
.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.devices button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 6px;border-radius:var(--r);font-weight:700;animation:up .6s both}
.devices button:nth-child(2){animation-delay:.1s}.devices button:nth-child(3){animation-delay:.2s}
svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app{display:flex;flex-direction:column;height:100dvh;padding:10px;gap:10px;animation:up .6s}
#app[hidden]{display:none}
.top{display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap}
.brand{font:800 22px Inter}
#docName{flex:1 1 140px;min-width:0;font-weight:700}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.ribbon{padding:8px}
.tabs{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.tabs button{border-radius:10px;min-height:34px;font-weight:700}
.panel{display:none;gap:8px;align-items:center;flex-wrap:wrap;padding:4px}
.panel.on{display:flex;animation:pop .3s}
.panel>*,.grp{flex:none}
.grp{display:flex;gap:4px;align-items:center;padding-inline-end:8px;border-inline-end:1px solid var(--bd)}
#fk,#fe{width:150px}#fs{width:64px;text-align:center}
.clr{position:relative;display:grid;place-items:center;min-height:40px;min-width:40px;padding:0 10px;border-radius:12px;border:1px solid var(--bd);background:var(--gl);font-weight:800;cursor:pointer}
.clr input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.rg input{width:120px;accent-color:var(--a2)}
.stage{flex:1;overflow:auto;overflow-x:hidden;padding:6px 0 30px}
#pages{--w:210;--h:297;--pd:8;display:flex;flex-direction:column;align-items:center;gap:22px;counter-reset:pg;transform-origin:top center}
.pg{width:min(100%,calc(var(--w)*1mm));aspect-ratio:var(--w)/var(--h);background:var(--pg,#fff);color:var(--pt,#111);padding:calc(var(--pd)*1%);border-radius:6px;box-shadow:var(--sh);outline:none;font-size:18px;line-height:1.8;position:relative;overflow:visible;counter-increment:pg;animation:pop .4s;flex:none}
.pg::before{content:var(--wmt,'');position:absolute;inset:0;display:grid;place-items:center;font:800 min(14vw,110px) Inter,sans-serif;color:var(--wm,#7a7aff);opacity:.12;transform:rotate(-30deg);pointer-events:none;white-space:nowrap}
.nums .pg::after{content:counter(pg);position:absolute;bottom:2%;right:4%;font:14px Inter;color:#777}
.pg table{border-collapse:collapse;width:100%;margin:10px 0}.pg td{border:1px solid #888;padding:8px;min-width:40px}
.pg img{max-width:100%;border-radius:8px}
.sg{display:flex;align-items:flex-end;gap:12px;font-size:14px;margin-bottom:14px;padding-bottom:6px;border-bottom:1px dashed #999;user-select:none}
.sg .ln{flex:1;height:54px;border-bottom:1px solid #555;cursor:pointer;display:grid;place-items:end center}.sg img{max-height:50px}
.status{display:flex;justify-content:space-between;padding:6px 16px;font-size:13px}
dialog{margin:auto;padding:24px;width:min(94vw,520px);max-height:88vh;overflow:auto;color:var(--tx);display:none;flex-direction:column;gap:14px;border-radius:var(--r)}
dialog[open]{display:flex;animation:pop .35s}dialog::backdrop{background:rgba(10,10,30,.45);backdrop-filter:blur(5px)}
dialog label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
dialog input[type=color]{width:56px;height:38px;border:0;background:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.card{padding:14px 8px;min-height:90px;display:grid;place-items:center;text-align:center;font-weight:700;font-size:13px;animation:up .4s both}
.card.fr{background:#fff;color:#333}
#cv{background:#fff;border-radius:12px;width:100%;touch-action:none;border:1px solid var(--bd)}
.row{display:flex;gap:8px}.row button{flex:1}
.soc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc a{display:flex;align-items:center;gap:8px;padding:12px;border-radius:14px;text-decoration:none;color:var(--tx);border:1px solid var(--bd);background:var(--gl);font:700 14px Inter;transition:.2s}
.soc a svg{width:24px;height:24px;color:var(--c)}.soc a:hover{transform:translateY(-3px);border-color:var(--c)}
[data-device=tablet] #app{padding:14px;max-width:1100px;margin:auto;width:100%}
[data-device=tablet] button,[data-device=tablet] select{min-height:48px}
[data-device=mobile] #app{padding:6px;gap:6px}
[data-device=mobile] .brand,[data-device=mobile] .status{display:none}
[data-device=mobile] .ribbon{order:3;border-radius:20px}
[data-device=mobile] .tabs{margin:0 0 6px}[data-device=mobile] .panel.on{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}[data-device=mobile] .top{padding:6px 8px}[data-device=mobile] .acts{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}[data-device=mobile] #docName{flex-basis:100%}[data-device=mobile] #fk,[data-device=mobile] #fe{width:130px}
[data-device=mobile] .stage{order:2}
[data-device=mobile] .pg{font-size:15px;padding:calc(var(--pd)*.7%)}
[data-device=mobile] button,[data-device=mobile] .clr{min-height:46px;min-width:46px}
@media print{body *{visibility:hidden}.stage,.stage *{visibility:visible}.stage{position:absolute;inset:0;padding:0;overflow:visible}#pages{gap:0;zoom:1!important}.pg{width:calc(var(--w)*1mm);height:calc(var(--h)*1mm);box-shadow:none;border-radius:0;page-break-after:always;animation:none;overflow:hidden}}

.pg p{margin:0 0 var(--ps,.4em)}
.pg>*:not(.fm):not(.hf){position:relative}
.fm{position:absolute;inset:var(--fmi,0);pointer-events:none;background:var(--fbg,none);border:var(--fbd,none)}
.fm::before{content:'';position:absolute;inset:var(--fio,10px);border:var(--fib,none)}
.hf{position:absolute;left:0;right:0;text-align:center;font:13px Vazirmatn,Inter;color:#777;pointer-events:none;user-select:none}.hf.h{top:2.2%}.hf.f{bottom:2.2%}
.pg blockquote{border-inline-start:4px solid #8b5cf6;padding:6px 14px;margin:8px 0;background:rgba(139,92,246,.08);font-style:italic}
.pg pre{background:#f1f3f9;padding:12px;border-radius:8px;font:14px/1.5 'Courier Prime',monospace;direction:ltr;text-align:left;white-space:pre-wrap}
.card.fr{position:relative;background:#fff;overflow:hidden;color:#333}
#ruler{display:none;margin:0 auto 10px;width:min(100%,calc(var(--w,210)*1mm));height:22px;border-radius:6px;background:linear-gradient(90deg,rgba(47,107,255,.3) calc(var(--pd,8)*1%),transparent 0,transparent calc(100% - var(--pd,8)*1%),rgba(47,107,255,.3) 0),repeating-linear-gradient(90deg,var(--tx) 0 1px,transparent 1px 10mm),var(--gl);border:1px solid var(--bd)}
.rl #ruler{display:block}
#mG{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.dr{display:flex;gap:6px;margin-bottom:6px}.dr button:first-child{flex:1;text-align:start}

/* ===== mobile & tablet: Canva-style bottom bar + sheet ===== */
html{-webkit-text-size-adjust:100%}
button,.clr{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#bMenu{display:none}
.tabs small{font-size:12px;margin-inline-start:4px}
[data-device=mobile] #bMenu{display:inline-block}
[data-device=mobile] .acts button:not(#bPdf):not(#bMenu){display:none}
[data-device=mobile] .top{flex-wrap:nowrap;gap:6px}
[data-device=mobile] #docName{flex:1 1 auto;min-width:0}
[data-device=mobile] .acts{width:auto;overflow:visible;flex-wrap:nowrap}
[data-device=mobile] .acts button{min-width:44px}
[data-device=mobile] .stage,[data-device=tablet] .stage{padding-bottom:16px}
[data-device=mobile] .ribbon,[data-device=tablet] .ribbon{position:relative;order:3;padding:6px;border-radius:22px}
[data-device=mobile] .tabs,[data-device=tablet] .tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;overflow:visible}
[data-device=mobile] .tabs button,[data-device=tablet] .tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px;min-height:56px;border-radius:16px;padding:6px 2px}
[data-device=mobile] .tabs small,[data-device=tablet] .tabs small{margin:0;font-size:12px;font-weight:700}
[data-device=mobile] .panel.on,[data-device=tablet] .panel.on{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:20;max-height:50dvh;overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;padding:12px;border-radius:22px;background:var(--gl);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);border:1px solid var(--bd);box-shadow:0 -10px 40px rgba(40,40,120,.28);animation:sheet .3s}
@keyframes sheet{from{opacity:0;transform:translateY(30px)}}
[data-device=mobile] .grp,[data-device=tablet] .grp{display:contents}
[data-device=mobile] .panel>select,[data-device=tablet] .panel>select,[data-device=mobile] .panel>.rg,[data-device=tablet] .panel>.rg{grid-column:1/-1;width:100%}
[data-device=mobile] .rg input,[data-device=tablet] .rg input{width:70%}
[data-device=mobile] .panel button,[data-device=tablet] .panel button,[data-device=mobile] .panel .clr,[data-device=tablet] .panel .clr{white-space:normal;font-size:14px;min-height:54px;padding:6px 4px;text-align:center;line-height:1.3}
[data-device=mobile] .panel #fs,[data-device=tablet] .panel #fs{width:100%;min-height:54px;font-size:18px}
[data-device=mobile] .panel #fk,[data-device=mobile] .panel #fe,[data-device=tablet] .panel #fk,[data-device=tablet] .panel #fe{width:100%}
[data-device=mobile] input,[data-device=mobile] select,[data-device=tablet] input,[data-device=tablet] select{font-size:16px}
[data-device=mobile] .pg{font-size:16px}
[data-device=mobile] dialog,[data-device=tablet] dialog{max-height:82dvh;margin:auto auto 12px}
[data-device=tablet] #app{max-width:900px}
[data-device=tablet] .panel.on{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

/* ===== speed ===== */
.bg i{display:none}
.bg{background:radial-gradient(60vmax 60vmax at 0% 0%,rgba(47,107,255,.28),transparent 60%),radial-gradient(55vmax 55vmax at 100% 100%,rgba(139,92,246,.28),transparent 60%)}
.glass{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-device=mobile] .glass,[data-device=tablet] .glass{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pg{content-visibility:auto;contain-intrinsic-size:auto 1100px}
@media print{.pg{content-visibility:visible!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== fix: tool sheet must stay above the pages ===== */
.top{position:relative;z-index:40}
.ribbon{position:relative;z-index:50}
.stage{position:relative;z-index:1}
[data-device=mobile] .panel.on,[data-device=tablet] .panel.on{z-index:60}

/* ===== v6: solid sheets (glass inside glass shows the page behind) ===== */
:root{--sheet:rgba(255,255,255,.98)}
:root[data-theme=dark]{--sheet:rgba(24,26,52,.98)}
[data-device=mobile] .panel.on,[data-device=tablet] .panel.on{background:var(--sheet);backdrop-filter:none;-webkit-backdrop-filter:none}
dialog.glass{background:var(--sheet)}
#dMenu h3::after,#dAbout h3::after{content:" · v6";font-size:12px;opacity:.6}