:root{--bg:#f3f2f7;--surface:#fff;--surface-2:#f7f6fb;--border:#e4e2ec;--text:#1d1b26;--muted:#6e6a7c;--accent:#7c3aed;--accent-soft:#efe7ff;--accent-text:#fff;--danger:#d6336c;--ok:#2b8a3e;--warn-bg:#fff4e5;--warn-text:#8a4b00;--canvas-bg:#e6e4ee;--radius:10px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:system-ui,Segoe UI,Noto Sans Telugu,sans-serif;font-size:14px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}input:not([type]),input[type=text],input[type=number],select,textarea{border:1px solid var(--border);background:var(--surface);border-radius:8px;outline:none;width:100%;padding:7px 9px}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}textarea{resize:vertical;line-height:1.5}code{background:var(--surface-2);border-radius:4px;padding:1px 4px;font-size:12px}.app{grid-template:"top top top top"58px"rail panel canvas inspector"1fr/76px 330px 1fr 310px;height:100vh;display:grid;overflow:hidden}.topbar{color:#fff;background:linear-gradient(90deg,#2a1b5c,#5b2ab8);grid-area:top;align-items:center;gap:16px;padding:0 16px;display:flex}.brand{align-items:center;gap:10px;min-width:250px;display:flex}.brand img{width:38px;height:38px}.brand div{flex-direction:column;line-height:1.15;display:flex}.brand b{font-size:16px}.brand span{opacity:.9;font-family:Caveat,cursive;font-size:17px}.top-tools{flex:1;justify-content:center;align-items:center;gap:4px;display:flex}.topbar .icon-btn{color:#fff}.topbar .icon-btn:hover:not(:disabled){background:#ffffff26}.divider{background:#ffffff4d;width:1px;height:22px;margin:0 8px}.zoom{color:#fff;background:#ffffff1f;border:0;border-radius:6px;min-width:58px;padding:5px 8px}.top-right{justify-content:flex-end;min-width:250px;display:flex}.menu-wrap{position:relative}.menu{z-index:20;background:var(--surface);width:270px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:6px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 32px #140a322e}.menu button{text-align:left;background:0 0;border:0;border-radius:7px;justify-content:space-between;width:100%;padding:9px 10px;display:flex}.menu button:hover{background:var(--accent-soft)}.menu button span{color:var(--muted);font-size:12px}.rail{background:#1e1640;flex-direction:column;grid-area:rail;gap:4px;padding:10px 6px;display:flex}.rail button{color:#b9b2d6;background:0 0;border:0;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:10px 0;font-size:11px;display:flex}.rail button:hover{color:#fff;background:#ffffff12}.rail button.on{color:#fff;background:#ffffff24}.panel,.inspector{background:var(--surface);min-height:0;overflow-y:auto}.panel{border-right:1px solid var(--border);grid-area:panel}.inspector{border-left:1px solid var(--border);flex-direction:column;grid-area:inspector;display:flex}.panel-body{padding:14px 16px 24px}.section{border-bottom:1px solid var(--border);flex-direction:column;gap:10px;padding:12px 0;display:flex}.section:last-child{border-bottom:0}.section-head{justify-content:space-between;align-items:center;display:flex}.section h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-size:12px;font-weight:650}.row{align-items:flex-end;gap:8px;display:flex}.row>*{flex:1;min-width:0}.field{flex-direction:column;gap:4px;min-width:0;display:flex}.field-label{color:var(--muted);font-size:12px}.hint{color:var(--muted);margin:0;font-size:12px;line-height:1.45}.muted{color:var(--muted)}.small{margin:0;font-size:12px;line-height:1.45}.error,.warn,.ok,.note{border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.4}.error{color:var(--danger);background:#ffe8ef}.warn{background:var(--warn-bg);color:var(--warn-text)}.ok{color:var(--ok);background:#e6f6ea}.note{background:var(--accent-soft);flex-direction:column;gap:8px;display:flex}.btn{border:1px solid var(--border);background:var(--surface);white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-weight:550;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.topbar .btn.primary{color:#3b1d8f;background:#fff;border-color:#fff}.btn.primary:hover:not(:disabled){filter:brightness(1.08);color:var(--accent-text)}.topbar .btn.primary:hover{color:#3b1d8f}.btn.block{width:100%}.btn.small{padding:5px 8px;font-size:12px}.icon-btn{width:32px;height:32px;color:var(--text);background:0 0;border:0;border-radius:7px;place-items:center;padding:0;display:inline-grid}.icon-btn:hover:not(:disabled){background:var(--surface-2)}.icon-btn.danger:hover{color:var(--danger)}.segmented{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;gap:2px;padding:3px;display:flex}.segmented button{white-space:nowrap;background:0 0;border:0;border-radius:6px;flex:1;padding:6px 4px;font-size:13px}.segmented button.on{background:var(--surface);color:var(--accent);font-weight:650;box-shadow:0 1px 3px #0000001f}.toggle{cursor:pointer;align-items:center;gap:9px;font-size:13px;display:flex}.toggle input{display:none}.toggle .track{background:#cfcbdb;border-radius:9px;flex:none;width:32px;height:18px;transition:background .15s;position:relative}.toggle .track:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:2px;left:2px}.toggle input:checked+.track{background:var(--accent)}.toggle input:checked+.track:after{transform:translate(14px)}.slider{align-items:center;gap:8px;display:flex}.slider input{accent-color:var(--accent);flex:1}.slider span{text-align:right;min-width:42px;color:var(--muted);font-size:12px}.num{position:relative}.num span{color:var(--muted);font-size:12px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.color-input{grid-template-columns:38px 1fr;gap:6px;display:grid}.color-input input[type=color]{border:1px solid var(--border);background:var(--surface);border-radius:8px;width:38px;height:34px;padding:2px}.color-input .hex{font-family:ui-monospace,monospace;font-size:13px}.swatches{flex-wrap:wrap;grid-column:1/-1;gap:5px;display:flex}.swatch{border:1px solid #00000026;border-radius:50%;width:20px;height:20px;padding:0}.swatch:hover{transform:scale(1.15)}.search{gap:6px;display:flex}.verse-preview{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);min-height:70px;max-height:200px;padding:12px;overflow-y:auto}.verse-preview .ref{color:#2e6b3f;margin-bottom:6px;font-family:Ramabhadra,sans-serif}.verse-preview .txt{white-space:pre-wrap;font-family:Mandali,Noto Sans Telugu,sans-serif;font-size:15px;line-height:1.6}.tpl-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.tpl-img{aspect-ratio:1;background-position:50%;background-size:cover;border:2px solid #0000;border-radius:10px;width:100%;padding:0;display:block;position:relative;overflow:hidden;box-shadow:0 1px 4px #0000001f}.tpl.active .tpl-img{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.tpl-img:hover{transform:translateY(-1px)}.tpl-box{flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute}.tpl-box i{opacity:.8;border-radius:2px;width:75%;height:4px;display:block}.tpl-box i:first-child{width:35%;height:3px}.tpl-badge{color:#fff;background:#b41e1ed9;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;line-height:1.3;position:absolute;bottom:4px;left:4px}.tpl-name{justify-content:space-between;align-items:center;padding:4px 2px 0;font-size:12px;display:flex}.tpl-name span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tpl-name .icon-btn{width:24px;height:24px}.shape-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.shape-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:9px;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;font-size:11px;display:flex}.shape-btn svg{fill:#8b7fb8}.shape-btn:hover{border-color:var(--accent);color:var(--accent)}.shape-btn:hover svg{fill:var(--accent)}.text-preset{border:1px solid var(--border);background:var(--surface-2);text-align:left;border-radius:9px;width:100%;padding:10px 12px}.text-preset:hover{border-color:var(--accent)}.brand-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.brand-btn{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;flex-direction:column;justify-content:space-between;align-items:center;gap:6px;min-height:104px;padding:10px 6px;font-size:12px;display:flex}.brand-btn:hover:not(:disabled){border-color:var(--accent)}.brand-btn img{width:54px;height:54px}.wm-sample{color:#555;text-align:center;flex:1;place-items:center;font-family:Caveat,cursive;font-size:19px;display:grid}.inspector .panel-body{flex:1}.inspector-title{align-items:center;gap:8px;margin-bottom:8px;display:flex}.inspector-title .name{border-color:#0000;padding-left:4px;font-weight:650}.inspector-title .name:hover{border-color:var(--border)}.badge{background:var(--accent-soft);color:var(--accent);border-radius:20px;flex:none;padding:3px 8px;font-size:11px;font-weight:650}.actions{border-bottom:1px solid var(--border);justify-content:space-between;padding-bottom:6px;display:flex}.markup .toolbar{border:1px solid var(--border);background:var(--surface-2);border-bottom:0;border-radius:8px 8px 0 0;flex-wrap:wrap;align-items:center;gap:2px;padding:4px;display:flex}.markup .toolbar button{background:0 0;border:0;border-radius:6px;min-width:28px;height:28px;padding:0 5px;font-size:13px}.markup .toolbar button:hover{background:var(--surface)}.markup .toolbar input[type=color]{background:0 0;border:0;width:20px;height:22px;padding:0}.markup .sep{background:var(--border);width:1px;height:18px;margin:0 3px}.color-a{border-bottom:3px solid;font-weight:700;line-height:1}.hl{border-radius:3px;padding:0 3px}.swatches.quick{border:1px solid var(--border);background:var(--surface-2);border-bottom:0;padding:6px}.markup textarea{border-radius:0 0 8px 8px;font-family:Mandali,Noto Sans Telugu,system-ui,sans-serif;font-size:15px}.markup .hint{margin-top:6px}.layers{border-top:1px solid var(--border);background:var(--surface-2);padding:12px 16px 16px}.layers .section-head{margin-bottom:6px}.layers h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-size:12px}.layer{cursor:pointer;border-radius:7px;align-items:center;gap:2px;padding:2px 4px 2px 10px;display:flex}.layer:hover{background:var(--surface)}.layer.sel{background:var(--accent-soft);color:var(--accent)}.layer.dim .layer-name{opacity:.45}.layer-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.layer .icon-btn{width:26px;height:26px;color:var(--muted)}.canvas-area{background:var(--canvas-bg);background-image:radial-gradient(circle,#0000000f 1px,#0000 1px);background-size:18px 18px;grid-area:canvas;min-width:0;min-height:0;position:relative}.canvas-scroll{place-items:center;padding:24px;display:grid;position:absolute;inset:0;overflow:auto}.canvas-frame{background:#fff;box-shadow:0 10px 40px #1e144638}.batch-overlay,.toast{color:#fff;background:#1e1640;border-radius:20px;padding:9px 16px;font-size:13px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #0003}.batch-overlay{top:14px}.toast{bottom:18px}.check-list{grid-template-columns:1fr 1fr;gap:6px;font-size:13px;display:grid}.check-list label{align-items:center;gap:6px;display:flex}.progress{flex-direction:column;gap:8px;margin-top:12px;display:flex}.bar{background:var(--surface-2);border-radius:4px;height:8px;overflow:hidden}.bar span{background:var(--accent);height:100%;transition:width .2s;display:block}.design-list{grid-template-columns:1fr 1fr;gap:10px;display:grid}.design-thumb{aspect-ratio:1;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;width:100%;padding:0;display:block;overflow:hidden}.design-thumb img{object-fit:cover;width:100%;height:100%}.design-meta{justify-content:space-between;align-items:center;padding-top:3px;font-size:12px;display:flex}.font-row{background:var(--surface-2);border-radius:7px;justify-content:space-between;align-items:center;margin-top:6px;padding:6px 8px;font-size:16px;display:flex}.ctx-menu{z-index:50;width:230px;position:fixed;top:auto;right:auto}.menu hr{border:0;border-top:1px solid var(--border);margin:4px 6px}.ctx-align,.align-row{justify-content:space-between;gap:2px;display:flex}.ctx-align button{flex:1;justify-content:center!important;padding:7px 0!important}.markup .toolbar button:disabled{opacity:.35}.help-card{z-index:30;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);cursor:pointer;gap:6px;width:340px;padding:14px 16px;font-size:13px;display:grid;position:absolute;top:16px;right:16px;box-shadow:0 12px 32px #140a322e}.help-card div{align-items:baseline;gap:10px;display:flex}.help-card kbd{color:var(--accent);flex:0 0 132px;font-family:inherit;font-size:12px;font-weight:600}.chips{flex-wrap:wrap;gap:6px;margin:8px 0 10px;display:flex}.chips button{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:4px 10px;font-size:12px}.chips button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}.brand-btn img.pastor-thumb{width:auto;height:54px}.date-sample{letter-spacing:.04em;color:var(--text);font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;line-height:54px}.date-preview{background:var(--surface-2);text-align:center;border-radius:8px;margin-bottom:8px;padding:10px;font-weight:700}.footer-btn{grid-column:1/-1}.footer-sample{height:54px;color:var(--text);justify-content:center;align-items:center;gap:6px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;display:flex}.footer-sample .globe{border:2px solid;border-radius:50%;width:13px;height:13px}.footer-sample .yt{clip-path:none;background:red;border-radius:4px;width:18px;height:13px;margin-left:10px}.header-sample{flex-direction:column;align-items:center;gap:3px;padding:6px 0 2px;display:flex}.header-sample b{background:linear-gradient(#e9c46a,#a8741a);color:#0000;-webkit-background-clip:text;background-clip:text;font-family:Playfair Display,serif;font-size:17px}.header-sample i{background:linear-gradient(90deg,#0000,#c9962e,#0000);width:60px;height:2px}.header-sample small{letter-spacing:.12em;color:var(--muted);font-family:Montserrat,sans-serif;font-size:10px;font-weight:700}.style-btn{justify-content:flex-start;gap:10px}.style-btn .gold{background:linear-gradient(#f3d27a,#c9962e);color:#0000;-webkit-background-clip:text;background-clip:text;font-family:Noto Sans Telugu,sans-serif;font-size:18px;font-weight:700}@media (width<=1100px){.app{grid-template:"top top top"58px"rail panel canvas"1fr"rail panel inspector"320px/64px 290px 1fr}.brand,.top-right{min-width:0}.brand div{display:none}}.sheet{display:contents}@media (width<=720px){.app{grid-template:"top"50px"canvas"minmax(120px,1fr)"sheet""rail"58px/minmax(0,1fr);height:100dvh;overflow:hidden}.topbar{gap:6px;padding:0 8px}.brand{min-width:0}.brand img{width:30px;height:30px}.brand div,.top-tools .icon-btn[title^=Zoom],.top-tools .icon-btn[title^=Keyboard],.top-tools .divider{display:none}.top-tools{gap:2px}.top-right .btn{padding:7px 10px}.menu{width:min(270px,100vw - 16px)}.sheet{background:var(--surface);z-index:5;border-radius:16px 16px 0 0;flex-direction:column;grid-area:sheet;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden;box-shadow:0 -6px 24px #140a322e}.sheet-handle{cursor:grab;touch-action:none;flex:none;place-items:center;height:34px;display:grid}.sheet-handle span{background:var(--border);border-radius:3px;width:44px;height:5px}.sheet .panel,.sheet .inspector{-webkit-overflow-scrolling:touch;border:0;flex:1}.sheet .inspector,.sheet.sheet-edit .panel{display:none}.sheet.sheet-edit .inspector{display:flex}.panel-body{padding:4px 14px 20px}.canvas-scroll{padding:8px}.rail{min-width:0;padding:4px 2px calc(4px + env(safe-area-inset-bottom));flex-direction:row;gap:0;overflow-x:auto}.rail button{flex:1;min-width:52px;padding:4px 0;font-size:10px}.tpl-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}input,select,textarea{font-size:16px}.help-card{display:none}}
