:root{
    --ink:#1a3fb0; --ink-dark:#12246e; --red:#d81f2a; --hl:#fdf35a;
    --paper:#fbfaf0; --line:#bcd3e8; --margin:#e79aa0;
    --fs:23px; --lh:40px; --wordsp:0px; --lettersp:0px; --penw:0px; --slant:0;
    --doodle:#1a3fb0;
    --mt:72px; --mr:52px; --mb:70px; --ml:92px; --hoff:34px; --foff:30px;
    --rule-top:78px;
    --hmain-size:24px; --hsub-size:16px; --hmain-color:#12246e; --hsub-color:#444444;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:#20242b;color:#e8eaed;height:100vh;overflow:hidden}
  .app{display:flex;flex-direction:column;height:100vh}

  .ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;background:#171a20;border-bottom:1px solid #2c313b;position:relative;z-index:85}
  .rbtn.on{background:#2f6bff;border-color:#2f6bff;color:#fff}
  .brand{font-size:15px;font-weight:700;margin-right:6px;white-space:nowrap}
  .brand span{color:#8ab4ff}
  .grp{display:flex;align-items:center;gap:4px}
  .div{width:1px;height:24px;background:#333b47;margin:0 4px}
  .spacer{flex:1}
  .rbtn{background:#252b35;border:1px solid #333b47;color:#dfe3ea;border-radius:6px;padding:6px 9px;font-size:12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
  .rbtn:hover{background:#2f3744;border-color:#4a5566}
  .rbtn.hl{color:#1a1a1a;background:var(--hl);border-color:var(--hl)}
  .rbtn.rd{color:var(--red);font-weight:700}
  .seg{display:flex;border:1px solid #333b47;border-radius:6px;overflow:hidden}
  .seg button{background:#252b35;border:0;color:#cdd3dd;padding:6px 11px;font-size:12px;cursor:pointer}
  .seg button.active{background:#2f6bff;color:#fff}
  .rbtn.primary{background:#2f6bff;border-color:#2f6bff;color:#fff;font-weight:600}
  .rbtn.primary:hover{filter:brightness(1.1);background:#2f6bff}
  .doodle-wrap{position:relative}
  .pop{position:absolute;top:calc(100% + 6px);left:0;background:#20252e;border:1px solid #333b47;border-radius:8px;padding:8px;display:none;grid-template-columns:repeat(7,1fr);gap:5px;z-index:60;box-shadow:0 8px 30px rgba(0,0,0,.5);width:300px;max-height:280px;overflow:auto}
  .pop.open{display:grid}
  .pop button{padding:4px;background:#0e1116;border:1px solid #2c313b;border-radius:6px;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .pop button:hover{border-color:#8ab4ff}
  .colorpop{grid-template-columns:repeat(5,30px);width:auto}
  .colorpop button{width:30px;height:30px;aspect-ratio:auto;background:var(--sw);border:2px solid #333b47;border-radius:6px;padding:0}
  .colorpop button:hover{border-color:#fff}
  .pop svg{width:24px;height:24px;stroke:#cdd3dd;fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;color:#cdd3dd}

  /* document tabs */
  .doctabs{display:flex;align-items:center;gap:4px;padding:5px 10px;background:#12151b;border-bottom:1px solid #2c313b;overflow-x:auto}
  .doctab{display:flex;align-items:center;gap:6px;background:#20252e;border:1px solid #2c313b;border-radius:6px 6px 0 0;padding:5px 8px 5px 11px;font-size:12px;color:#cdd3dd;white-space:nowrap;cursor:pointer;max-width:200px}
  .doctab.active{background:#2f6bff;color:#fff;border-color:#2f6bff}
  .doctab .nm{overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .doctab .x{background:transparent;border:0;color:inherit;opacity:.6;cursor:pointer;font-size:12px;padding:0 2px;border-radius:3px}
  .doctab .x:hover{opacity:1;background:rgba(255,255,255,.15)}
  .doctab-add{background:#252b35;border:1px solid #333b47;color:#8ab4ff;border-radius:6px;padding:5px 11px;font-size:12px;cursor:pointer;white-space:nowrap}
  .doctab-add:hover{background:#2f3744}
  .savedot{margin-left:auto;font-size:11px;color:#6ac07f;white-space:nowrap;padding-left:10px}

  /* watermark */
  .watermark{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;color:var(--wm-color);opacity:var(--wm-op)}
  .watermark span{font-family:'Kalam',cursive;font-weight:700;font-size:var(--wm-size);white-space:nowrap;display:inline-block;transform:rotate(var(--wm-rot))}
  .watermark.wm-center{display:flex;align-items:center;justify-content:center}
  .watermark.wm-top{display:flex;align-items:flex-start;justify-content:center;padding-top:120px}
  .watermark.wm-bottom{display:flex;align-items:flex-end;justify-content:center;padding-bottom:120px}
  .watermark.wm-tiled{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:40px 60px;padding:60px}
  .watermark img{display:block;transform:rotate(var(--wm-rot))}

  /* footer contact bar */
  .contactbar{position:absolute;left:var(--ml);right:var(--mr);bottom:calc(var(--foff) + 24px);z-index:4;display:flex;gap:16px;align-items:center;justify-content:center;font-size:13px;color:var(--ink);flex-wrap:wrap}
  .contactbar a.cws{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
  .contactbar .cnum{display:inline-flex;align-items:center;gap:4px}
  .contactbar .ccall{display:inline-flex;align-items:center;gap:5px;background:var(--call-color);color:#fff;border-radius:14px;
    padding:3px 11px;font-size:12px;font-weight:600;line-height:1.5;text-decoration:none;border:0;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .imglink{font-size:11px !important}

  .work{flex:1;display:flex;min-height:0}
  .editorPane,.previewPane{min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
  .work[data-view=split] .editorPane{flex:1;border-right:1px solid #2c313b}
  .work[data-view=split] .previewPane{flex:1.15}
  .work[data-view=editor] .previewPane{display:none}
  .work[data-view=editor] .editorPane{flex:1}
  .work[data-view=preview] .editorPane{display:none}
  .work[data-view=preview] .previewPane{flex:1}
  /* editor-only view me pagination measure karne ke liye preview ko offscreen layout do
     (display:none me scrollHeight=0 aata tha → page count hamesha 1 — credits + PDF galat) */
  .work.measure .previewPane{display:flex!important;position:fixed;left:-12000px;top:0;width:920px;height:800px;visibility:hidden;pointer-events:none}

  .paneHead{display:flex;align-items:center;gap:10px;padding:6px 14px;background:#12151b;border-bottom:1px solid #2c313b;font-size:12px;color:#9aa0ab}
  .paneHead code{background:#0e1116;padding:1px 4px;border-radius:3px}
  .paneHead select{background:#0e1116;color:#dfe3ea;border:1px solid #2c313b;border-radius:5px;padding:3px}
  .mini{background:#252b35;border:1px solid #333b47;color:#dfe3ea;border-radius:5px;padding:3px 8px;cursor:pointer;font-size:12px}
  .mini:hover{background:#2f3744}
  textarea#src{flex:1;width:100%;border:0;resize:none;background:#0e1116;color:#e6e9ee;padding:22px 26px;
    font-family:ui-monospace,Consolas,monospace;font-size:16px;line-height:1.75;outline:none}
  .stage{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;align-items:center;gap:22px;background:#20242b}
  #zoomwrap{position:relative}
  #pages{display:flex;flex-direction:column;align-items:center;gap:22px;width:794px;transform-origin:top left}

  .page{width:794px;height:1123px;flex:none;background:var(--paper);position:relative;overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.5);font-family:'Kalam',cursive;color:var(--ink);
    font-size:var(--fs);line-height:var(--lh);letter-spacing:var(--lettersp);word-spacing:var(--wordsp)}
  .page .content{position:relative;z-index:2;padding:var(--mt) var(--mr) var(--mb) var(--ml);-webkit-text-stroke:var(--penw) var(--ink)}
  .page .grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
  .page .overlay{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
  .hf{position:absolute;left:var(--ml);right:var(--mr);z-index:4;font-size:16px;color:var(--ink);opacity:.85}
  .hf-header{top:var(--hoff);opacity:1;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:baseline;column-gap:10px}
  .hcell-left{text-align:left}.hcell-center{text-align:center}.hcell-right{text-align:right}
  .hdr-main{font-family:'Kalam',cursive;font-weight:700;font-size:var(--hmain-size);color:var(--hmain-color);line-height:1.2}
  .hdr-sub{font-family:'Kalam',cursive;font-size:var(--hsub-size);color:var(--hsub-color);line-height:1.2}
  /* register-style top horizontal line (pairs with the left red margin line) */
  .reg-topline{position:absolute;left:0;right:0;top:calc(var(--mt) - 10px);border-top:2px solid var(--margin);z-index:3;display:none}
  body.header-line-on .reg-topline{display:block}
  /* plain header band: paper-colored mask hides ruled lines above the writing area (red margin lines stay on top) */
  .header-mask{position:absolute;top:0;left:0;right:0;height:calc(var(--mt) - 10px);background:var(--paper);z-index:2;display:none}
  body.header-plain .header-mask{display:block}
  .hf-footer{bottom:var(--foff);text-align:var(--foot-align,center)}
  .attrib{position:absolute;left:var(--ml);right:var(--mr);bottom:max(6px,calc(var(--foff) - 16px));z-index:4;font-size:11px;color:var(--ink);opacity:.5;text-align:center}

  /* margin guides + drag handles (Word-like) */
  .guides{position:absolute;inset:0;z-index:1;pointer-events:none;display:none}
  .page.guides-on .guides{display:block}
  .guides .gbox{position:absolute;top:var(--mt);bottom:var(--mb);left:var(--ml);right:var(--mr);border:1px dashed rgba(106,160,216,.55)}
  .mhandle{position:absolute;left:50%;transform:translateX(-50%);width:64px;height:14px;background:#2f6bff;border-radius:4px;
    cursor:ns-resize;z-index:9;opacity:.85;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;user-select:none}
  .mhandle:hover{opacity:1}
  .mhandle.top{top:calc(var(--mt) - 7px)}
  .mhandle.bot{bottom:calc(var(--mb) - 7px)}

  .paper-ruled{background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% var(--lh);background-position:0 var(--rule-top)}
  .paper-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:100% var(--lh),var(--lh) 100%;background-position:0 var(--rule-top),52px 0}
  .paper-blank{background-image:none}
  .paper-vintage{--paper:#f3e9c9;--line:#cdbd8f;background-color:#f3e9c9;background-image:linear-gradient(#d9c79a 1px,transparent 1px);background-size:100% var(--lh);background-position:0 var(--rule-top)}
  .paper-dark{--paper:#22303a;background-color:#22303a;background-image:linear-gradient(#3c505c 1px,transparent 1px);background-size:100% var(--lh);background-position:0 var(--rule-top)}
  /* ruled-line alignment mode: snap headings to the line grid */
  body.align-ruled .h1,body.align-ruled .h2{line-height:var(--lh);margin:0}
  /* keep doodles from inflating the line box (which caused text to drift down) */
  body.align-ruled .doodle{height:calc(var(--lh) - 6px);width:calc(var(--lh) - 6px);vertical-align:middle}
  .page.margin-on::before{content:"";position:absolute;left:calc(var(--ml) - 28px);top:0;bottom:0;width:2px;background:var(--margin);z-index:3}
  .page.margin-on::after{content:"";position:absolute;left:calc(var(--ml) - 33px);top:0;bottom:0;width:1px;background:var(--margin);opacity:.5;z-index:3}

  .h1{font-size:calc(var(--fs) + 7px);font-weight:700;color:var(--ink-dark);line-height:calc(var(--lh) + 4px);margin:4px 0}
  .h2{font-weight:700;font-size:calc(var(--fs) + 2px);line-height:calc(var(--lh) + 2px)}
  .bullet{padding-left:26px;position:relative}
  .bullet .dot{position:absolute;left:2px;color:var(--ink);font-weight:700}
  .arrow-line{padding-left:40px}
  .blank{height:var(--lh)}
  .line{min-height:var(--lh)}
  .imgblock{margin:10px 0;text-align:center}
  .imgblock img{max-width:100%;border-radius:2px}
  .hl{background:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;padding:0 2px;border-radius:1px}
  .circle{padding:0 6px;color:var(--ink-dark);font-weight:700}
  .red{color:var(--red);font-weight:700}
  .tc{font-weight:700}
  body.no-rough .uline{text-decoration:underline;text-decoration-thickness:2px}
  .w{display:inline-block}
  .doodle{display:inline-block;width:36px;height:36px;vertical-align:-8px;margin:0 5px;stroke:var(--doodle);color:var(--doodle);fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .doodle text{fill:var(--doodle);stroke:none}
  body.pencil .doodle{stroke:#4a4a4a;color:#4a4a4a;stroke-width:3.4;opacity:.9;filter:url(#pencilF)}
  body.pencil .doodle text{fill:#4a4a4a}
  body.no-rough .circle{position:relative}
  body.no-rough .circle::after{content:"";position:absolute;inset:-4px -2px;border:2.5px solid var(--red);border-radius:50%;transform:rotate(-4deg)}

  .drawer{position:fixed;top:0;left:0;height:100vh;width:min(760px,94vw);background:#171a20;border-right:1px solid #2c313b;box-shadow:12px 0 40px rgba(0,0,0,.4);transform:translateX(-105%);transition:transform .22s ease;z-index:80;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
  .drawer.open{transform:none}
  .drawer .dhead{display:flex;align-items:center;justify-content:space-between}
  .drawer h2{font-size:16px;margin:0}
  .drawer .dclose{background:#252b35;border:1px solid #333b47;color:#dfe3ea;border-radius:6px;padding:6px 12px;cursor:pointer;font-size:13px}
  .drawer .dclose:hover{background:#2f3744}
  .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-content:start}
  .dgrid details{align-self:start}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
  .scrim.open{opacity:1;pointer-events:auto}
  details{background:#20252e;border:1px solid #2c313b;border-radius:8px;overflow:hidden}
  details>summary{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:600;color:#cdd3dd;list-style:none;user-select:none}
  details>summary::-webkit-details-marker{display:none}
  details>summary::before{content:"▸ ";color:#8ab4ff}
  details[open]>summary::before{content:"▾ "}
  .bodyd{padding:10px 12px;display:flex;flex-direction:column;gap:9px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  label.ctl{font-size:11px;display:flex;flex-direction:column;gap:3px;color:#aab0bb}
  select,input[type=range],input[type=text],input[type=color]{background:#0e1116;color:#dfe3ea;border:1px solid #2c313b;border-radius:6px;padding:5px;width:100%}
  input[type=range]{padding:2px}input[type=color]{height:30px;padding:2px}
  .chk{display:flex;align-items:center;gap:6px;font-size:12px;color:#aab0bb}
  .drawer button.b{background:#2c313b;color:#fff;border:0;border-radius:8px;padding:9px;font-size:12px;font-weight:600;cursor:pointer;width:100%}
  .drawer button.b:hover{filter:brightness(1.15)}
  .hint{font-size:11px;line-height:1.6;color:#9aa0ab}
  .hint code{background:#0e1116;padding:1px 5px;border-radius:4px;color:#ffd479}
  .status{font-size:12px;color:#8ab4ff;min-height:15px}
  select#zoom{width:auto;display:inline-block}
  .imglist{display:flex;flex-direction:column;gap:10px}
  .imgrow2{background:#0e1116;border:1px solid #2c313b;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:7px}
  .imghead{display:flex;justify-content:space-between;align-items:center;font-size:11px}
  .imghead .del{background:#3a2226;color:#ff9aa0;border:0;border-radius:5px;padding:3px 8px;cursor:pointer;font-size:11px}
  .stylestrip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .scell{position:relative;aspect-ratio:1.5;border:2px solid #2c313b;border-radius:6px;background:#181c22 center/cover no-repeat;cursor:pointer;overflow:hidden}
  .scell:hover{border-color:#4a5566}
  .scell.sel{border-color:#2f6bff;box-shadow:0 0 0 2px rgba(47,107,255,.35)}
  /* in-preview image editing */
  .imgblock{position:relative;text-align:left}
  .imgwrap{position:relative;display:inline-block;line-height:0}
  .imgwrap.sel{outline:2px dashed #2f6bff;outline-offset:3px}
  .imgblock img{cursor:move}
  .imgblock img.blend{mix-blend-mode:multiply}
  /* free-position images: page par kahin bhi, text ke upar ya neeche */
  .freeimg{position:absolute;display:inline-block;line-height:0}
  .freeimg.above{z-index:5}
  .freeimg.below{z-index:1}
  .freeimg img{cursor:move;max-width:none;border-radius:2px}
  .freeimg.sel{outline:2px dashed #e8930c;outline-offset:3px}
  .rz-handle{position:absolute;width:16px;height:16px;background:#2f6bff;border:2px solid #fff;border-radius:3px;right:-9px;bottom:-9px;cursor:nwse-resize;z-index:12}
  .img-tb{position:absolute;top:-40px;left:50%;transform:translateX(-50%);display:flex;gap:3px;background:#12151b;border:1px solid #333b47;border-radius:7px;padding:3px;z-index:13;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.5)}
  .img-tb button{background:#252b35;border:0;color:#dfe3ea;border-radius:4px;padding:4px 7px;font-size:13px;cursor:pointer;line-height:1}
  .img-tb button:hover{background:#2f6bff}
  .scell .lbl{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:9px;text-align:center;padding:1px 0}

  /* ZIP export modal */
  .zipwrap{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:120;display:flex;align-items:center;justify-content:center}
  .zipwrap[hidden]{display:none}
  .zipmodal{background:#171a20;border:1px solid #2c313b;border-radius:12px;padding:18px;width:min(480px,92vw);max-height:80vh;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .zipmodal h3{margin:0;font-size:15px}
  .ziplist{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:60px}
  .ziprow{display:flex;align-items:center;gap:8px;background:#20252e;border:1px solid #2c313b;border-radius:7px;padding:7px 10px;font-size:13px;cursor:pointer}
  .ziprow:hover{border-color:#4a5566}
  .ziprow .zn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ziprow .zd{font-size:11px;color:#9aa0ab}
  .zipfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .zipfoot .status{flex:1}
  /* image right-click context menu */
  .ctxmenu{position:fixed;display:none;z-index:130;background:#171a20;border:1px solid #333b47;border-radius:8px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.55);min-width:150px}
  .ctxmenu .ct{font-size:10px;color:#9aa0ab;padding:3px 8px;text-transform:uppercase;letter-spacing:.5px}
  .ctxmenu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:#dfe3ea;padding:6px 10px;border-radius:5px;font-size:12.5px;cursor:pointer}
  .ctxmenu button:hover{background:#2f6bff;color:#fff}
  .ctxmenu button.on{color:#8ab4ff;font-weight:700}
  .ctxmenu .ctrow{display:flex;gap:3px;padding:0 6px 4px}
  .ctxmenu .ctrow button{flex:1;text-align:center;padding:4px 4px}
  /* login gate + wallet + credit popup */
  .gate{position:fixed;inset:0;background:#12151b;z-index:200;display:flex;align-items:center;justify-content:center}
  .gate[hidden]{display:none}
  .gatebox{background:#171a20;border:1px solid #2c313b;border-radius:14px;padding:28px;width:min(360px,92vw);display:flex;flex-direction:column;gap:12px}
  .gatebox h2{margin:0;font-size:18px}
  .gatebox p{margin:0;font-size:12.5px;color:#9aa0ab;line-height:1.6}
  .gatebox input{background:#0e1116;color:#e8eaed;border:1px solid #2c313b;border-radius:8px;padding:11px;font-size:14px}
  .gatebox .err{color:#ff8f93;font-size:12.5px;min-height:16px}
  .wbadge{display:inline-flex;align-items:center;gap:6px;background:#1d2822;border:1px solid #2c4436;color:#5bd08a;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
  .wbadge:hover{filter:brightness(1.2)}
  #credWrap{z-index:140}   /* credit confirmation hamesha sabse upar */
  .credrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 2px;border-bottom:1px solid #20252e}
  .credrow b.neg{color:#ff8f93}.credrow b.pos{color:#5bd08a}
  .bigcost{font-size:26px;font-weight:800;text-align:center;padding:8px 0;color:#ffc861}

  @media print{body{background:#fff;overflow:visible;height:auto}.ribbon,.editorPane,.paneHead,.drawer,.scrim,.mhandle{display:none!important}
    .app,.work,.previewPane,.stage{display:block;height:auto;overflow:visible}.stage{padding:0;gap:0}
    #pages{transform:none!important;width:auto}.page{box-shadow:none;page-break-after:always}.page.guides-on .guides{display:none}}