:root{
  --bg:#1b1d23; --bg2:#23262e; --bg3:#2b2f39; --panel:#21242b; --panel2:#262a33;
  --line:#363b46; --line2:#434956; --text:#e7e9ee; --muted:#9aa1ad; --muted2:#6b7280;
  --accent:#d4a24c; --accent2:#e9c47a; --accent-d:#a87a2d;
  --blue:#4c9ed4; --danger:#d4605a; --ok:#5ec27a;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --r:8px; --r2:6px;
  --tool:54px; --top:46px; --status:30px; --panelw:300px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--text); overflow:hidden;
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13px; user-select:none; -webkit-user-select:none;
}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select{font-family:inherit}
.hidden{display:none !important}
.flex{flex:1}
.sep{width:1px;height:60%;background:var(--line);margin:0 6px;align-self:center}

#app{display:flex;flex-direction:column;height:100vh}

/* ---------- Top bar ---------- */
#topbar{
  height:var(--top);min-height:var(--top);display:flex;align-items:center;gap:14px;
  padding:0 12px;background:linear-gradient(180deg,#262a33,#1f222a);
  border-bottom:1px solid var(--line);z-index:30;
}
.brand{display:flex;align-items:center;gap:10px}
.logo svg{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.logo svg circle{fill:var(--accent);stroke:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:16px;font-weight:900;color:var(--accent2);letter-spacing:.5px}
.brand-text span{font-size:10px;color:var(--muted)}
.menu{display:flex;gap:2px}
.menu button{background:none;border:0;padding:7px 12px;border-radius:var(--r2);color:var(--muted);font-size:13px}
.menu button:hover{background:var(--bg3);color:var(--text)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.btn{background:var(--bg3);border:1px solid var(--line2);padding:7px 14px;border-radius:var(--r2);font-size:13px;transition:.12s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:#343a45;border-color:#4d5460}
.btn.ghost{background:none;border-color:transparent;padding:6px 10px;font-size:16px}
.btn.ghost:hover{background:var(--bg3)}
.btn.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#231a06;border-color:var(--accent-d);font-weight:700}
.btn.primary:hover{filter:brightness(1.07)}

/* ---------- Workspace ---------- */
#workspace{flex:1;display:flex;min-height:0}

/* Tools */
#tools{
  width:var(--tool);min-width:var(--tool);background:var(--bg2);border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;
}
.tool{width:40px;height:40px;border:1px solid transparent;background:none;border-radius:var(--r2);display:grid;place-items:center;color:var(--muted)}
.tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:var(--bg3);color:var(--text)}
.tool.active{background:var(--accent);color:#231a06;border-color:var(--accent-d)}
.tool.active svg{stroke:#231a06}
.tool-sep{width:26px;height:1px;background:var(--line);margin:4px 0}
.swatches{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;position:relative;height:48px;width:40px}
.swatch{position:absolute;width:26px;height:26px;border-radius:6px;border:2px solid #11131a;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.swatch span{position:absolute;inset:2px;border-radius:3px;display:block}
.swatch.fill{top:0;inset-inline-start:0;background:#0c0d11;z-index:2}
.swatch.fill span{background:#e7e9ee}
.swatch.stroke{bottom:0;inset-inline-end:0;background:#0c0d11;z-index:1}
.swatch.stroke span{background:transparent;border:3px solid #d4a24c}

/* Stage */
#stage{flex:1;position:relative;min-width:0;background:
  radial-gradient(circle at 50% 30%, #20232b, #16181d 80%);overflow:hidden}
#canvasWrap{position:absolute;inset:0}
#canvas{width:100%;height:100%;display:block;touch-action:none}
.hint{position:absolute;inset-inline-start:50%;bottom:14px;transform:translateX(50%);
  background:rgba(15,16,20,.85);border:1px solid var(--line);padding:6px 14px;border-radius:20px;
  font-size:12px;color:var(--muted);pointer-events:none;opacity:0;transition:.25s}
.hint.show{opacity:1}
.loading{position:absolute;inset-inline-end:16px;top:16px;display:flex;align-items:center;gap:8px;
  background:rgba(15,16,20,.85);padding:8px 14px;border-radius:20px;border:1px solid var(--line);font-size:12px}
.spinner{width:16px;height:16px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Panels */
#panels{width:var(--panelw);min-width:var(--panelw);background:var(--panel);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
#panels::-webkit-scrollbar{width:10px}
#panels::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid var(--panel)}
.panel{border-bottom:1px solid var(--line)}
.panel h3{margin:0;padding:10px 14px;font-size:12px;font-weight:700;color:var(--muted);
  letter-spacing:.4px;display:flex;align-items:center;gap:8px;background:var(--panel2)}
.panel h3 .count{margin-inline-start:auto;background:var(--bg3);color:var(--muted);
  border-radius:10px;padding:1px 8px;font-size:11px}
.panel h3.toggle{cursor:pointer}
.panel .chev{margin-inline-start:auto;transition:.2s;font-size:10px}
.collapsible:not(.open) .panel-body,.collapsible:not(.open) .panel-foot{display:none}
.collapsible:not(.open) .chev{transform:rotate(-90deg)}
.panel-body{padding:12px 14px}
.panel-foot{padding:0 14px 12px}
.empty{color:var(--muted2);font-size:12px;text-align:center;padding:18px 6px;line-height:1.7}

/* Property rows */
.prow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.prow label{width:62px;min-width:62px;color:var(--muted);font-size:12px}
.prow .grow{flex:1}
.field{background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:6px 8px;color:var(--text);font-size:13px;width:100%}
.field:focus{outline:none;border-color:var(--accent)}
textarea.field{resize:vertical;min-height:54px;line-height:1.9;font-size:16px}
select.field{cursor:pointer}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--line2);border-radius:3px;width:100%}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid #231a06;cursor:pointer}
.num{width:58px;min-width:58px;text-align:center}
.row-2{display:flex;gap:8px}
.row-2 .prow{flex:1;margin-bottom:0}
.mini{display:flex;align-items:center;gap:6px}
.colorbox{width:30px;height:26px;border-radius:6px;border:2px solid #11131a;cursor:pointer;flex-shrink:0}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{background:var(--bg3);border:1px solid var(--line2);border-radius:6px;padding:6px 10px;font-size:12px;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.chip:hover{background:#343a45}
.chip.warn{color:var(--danger)}
.chip.act{background:var(--accent);color:#231a06;border-color:var(--accent-d)}
.section-label{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px}

/* Layers */
.layers{padding:6px}
.layer{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;margin-bottom:2px;cursor:pointer}
.layer:hover{background:var(--bg3)}
.layer.sel{background:rgba(212,162,76,.16);outline:1px solid rgba(212,162,76,.4)}
.layer .lthumb{width:28px;height:28px;border-radius:5px;background:var(--bg);display:grid;place-items:center;flex-shrink:0;overflow:hidden;border:1px solid var(--line)}
.layer .lthumb svg{width:100%;height:100%}
.layer .lname{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .licon{width:22px;height:22px;border:0;background:none;color:var(--muted2);border-radius:4px;display:grid;place-items:center;font-size:13px}
.layer .licon:hover{background:var(--line);color:var(--text)}
.layer.locked{opacity:.6}

/* Fonts */
.fonts{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.fontitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.fontitem:hover{background:var(--bg3)}
.fontitem.sel{border-color:var(--accent);background:rgba(212,162,76,.12)}
.fontitem .fprev{font-size:20px;min-width:40px;text-align:center;color:var(--accent2)}
.fontitem .finfo{display:flex;flex-direction:column;line-height:1.25}
.fontitem .fname{font-size:13px}
.fontitem .fstyle{font-size:10px;color:var(--muted2)}
.fontitem .fbadge{margin-inline-start:auto;font-size:9px;color:var(--muted2);border:1px solid var(--line2);border-radius:4px;padding:1px 5px}
.fontitem .fbadge.custom{color:var(--ok);border-color:var(--ok)}

/* Ornaments */
.ornaments{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:260px;overflow:auto}
.orn{aspect-ratio:1;background:
  conic-gradient(#2c303a 90deg,#272b34 0 180deg,#2c303a 0 270deg,#272b34 0) ,#2a2e37;
  background-size:14px 14px;border:1px solid var(--line);border-radius:6px;
  display:grid;place-items:center;cursor:grab;padding:6px;transition:.12s}
.orn:hover{border-color:var(--accent);transform:translateY(-1px)}
.orn svg,.orn img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.orn svg{fill:var(--accent2);stroke:var(--accent2)}

/* Glyphs panel (letters / marks / symbols) */
.glyph-fonthead{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.glyph-fonthead span{font-size:11px;color:var(--muted2);white-space:nowrap}
.glyph-fontsel{flex:1;padding:5px 7px;font-size:12px}
.glyph-tabs{display:flex;gap:4px;margin-bottom:8px}
.gtab{flex:1;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;padding:5px;font-size:11px;color:var(--muted)}
.gtab:hover{background:#343a45;color:var(--text)}
.gtab.act{background:var(--accent);color:#231a06;border-color:var(--accent-d);font-weight:700}
.glyphs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-height:240px;overflow:auto}
.glyph{aspect-ratio:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;
  color:var(--text);font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer;
  padding:2px;overflow:hidden;transition:.12s}
.glyph:hover{border-color:var(--accent);background:var(--bg3);transform:translateY(-1px)}
.glyph.dotbtn{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px 4px;color:var(--accent2)}
.glyph.dotbtn .dotic{height:32px;display:flex;align-items:center}
.glyph.dotbtn .dotic svg{height:30px;width:auto;max-width:46px}
.glyph.dotbtn .dotlbl{font-size:10px;color:var(--muted)}

/* Flourishes (letter terminals) */
.flourishes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:300px;overflow:auto}
.flourish{height:46px;background:
  conic-gradient(#2c303a 90deg,#272b34 0 180deg,#2c303a 0 270deg,#272b34 0),#2a2e37;
  background-size:14px 14px;border:1px solid var(--line);border-radius:6px;
  display:grid;place-items:center;cursor:pointer;padding:6px;transition:.12s}
.flourish:hover{border-color:var(--accent);transform:translateY(-1px)}
.flourish svg{width:100%;height:100%;object-fit:contain;pointer-events:none}
.hint-foot{font-size:11px;color:var(--muted2);line-height:1.7;text-align:start}

.file-btn{display:block;text-align:center;background:var(--bg3);border:1px dashed var(--line2);
  border-radius:6px;padding:8px;font-size:12px;color:var(--muted);cursor:pointer;width:100%}
.file-btn:hover{border-color:var(--accent);color:var(--text)}

/* Status bar */
#statusbar{height:var(--status);min-height:var(--status);display:flex;align-items:center;gap:10px;
  padding:0 12px;background:var(--bg2);border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
#statusbar .sep{height:50%}
.zoomctl{display:flex;align-items:center;gap:2px}
.zoomctl button{width:22px;height:20px;background:var(--bg3);border:1px solid var(--line2);border-radius:4px;font-size:13px;line-height:1}
.zoomctl button:hover{background:#343a45}
#zoomVal{min-width:44px;text-align:center}

/* Floating menus */
.menu-pop{position:fixed;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;
  box-shadow:var(--shadow);padding:6px;z-index:200;min-width:200px}
.menu-pop button{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;
  padding:8px 12px;border-radius:6px;text-align:start;font-size:13px}
.menu-pop button:hover{background:var(--accent);color:#231a06}
.menu-pop .mk{margin-inline-start:auto;color:var(--muted2);font-size:11px}
.menu-pop button:hover .mk{color:#231a06}
.menu-pop hr{border:0;border-top:1px solid var(--line2);margin:5px 4px}

/* Color popover */
.color-pop{position:fixed;background:var(--bg3);border:1px solid var(--line2);border-radius:10px;
  box-shadow:var(--shadow);padding:12px;z-index:210;width:210px}
.color-pop input[type=color]{width:100%;height:36px;border:none;background:none;cursor:pointer;margin-bottom:8px}
.color-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--muted);font-size:12px}
.color-row input{flex:1}
.color-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.color-presets button{aspect-ratio:1;border-radius:4px;border:1px solid rgba(255,255,255,.15)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(8,9,12,.6);display:grid;place-items:center;z-index:300;backdrop-filter:blur(2px)}
.modal-card{background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--shadow);width:440px;max-width:92vw;overflow:hidden}
.modal-card h3{margin:0;padding:16px 18px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:15px}
.modal-body{padding:18px}
.modal-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:18px}

/* Canvas svg elements */
#canvas .artboard-shadow{fill:#000;opacity:.35}
#canvas .selbox{fill:none;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke}
#canvas .selbox.dashed{stroke-dasharray:4 3}
#canvas .handle{fill:#fff;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:nwse-resize}
#canvas .rot-handle{fill:var(--accent);stroke:#231a06;stroke-width:1.2;vector-effect:non-scaling-stroke;cursor:grab}
#canvas .node-anchor{fill:#fff;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:move}
#canvas .node-anchor.sel{fill:var(--blue)}
#canvas .node-ctrl{fill:var(--accent);stroke:var(--accent-d);stroke-width:1;vector-effect:non-scaling-stroke;cursor:move}
#canvas .node-line{stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7}
#canvas .node-path{fill:none;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke}
#canvas .kashida-handle{fill:var(--ok);stroke:#0c2415;stroke-width:1.2;vector-effect:non-scaling-stroke;cursor:ew-resize}
#canvas .warp-handle{fill:var(--accent2);stroke:#231a06;stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:move}
#canvas .warp-handle:hover{fill:#fff}
#canvas .obj-hit{fill:transparent;stroke:transparent}
#canvas text.measure{font-family:inherit}
/* Inline on-canvas text editor */
.inline-editor{position:absolute;z-index:60;display:flex;flex-direction:column;gap:7px;width:340px;
  background:rgba(28,31,38,.98);border:1px solid var(--accent);border-radius:12px;padding:10px;
  box-shadow:var(--shadow)}
.ie-fontlbl{font-size:11px;color:var(--muted)}
.ie-fonts{max-height:210px;overflow:auto;display:flex;flex-direction:column;gap:4px;
  border:1px solid var(--line2);border-radius:8px;padding:5px;background:var(--bg)}
.ie-fonts::-webkit-scrollbar{width:9px}
.ie-fonts::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid var(--bg)}
.ie-fc{display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:7px;cursor:pointer;
  border:1px solid transparent}
.ie-fc:hover{background:var(--bg3)}
.ie-fc.sel{border-color:var(--accent);background:rgba(212,162,76,.14)}
.ie-fc-prev{font-size:27px;line-height:1.45;color:var(--text);direction:rtl;text-align:right;
  min-height:30px;white-space:nowrap;overflow:hidden}
.ie-fc-name{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.ie-fc-name i{color:var(--muted2);font-style:normal}
.ie-title{font-size:11px;color:var(--muted);text-align:center}
.ie-input{width:100%;min-height:64px;resize:vertical;border:1px solid var(--line2);border-radius:8px;
  background:var(--bg);color:var(--text);font-size:24px;line-height:1.9;padding:8px 10px}
.ie-input:focus{outline:none;border-color:var(--accent)}
.ie-actions{display:flex;gap:6px}
.ie-save{flex:1;background:linear-gradient(180deg,var(--accent2),var(--accent));color:#231a06;
  border:1px solid var(--accent-d);border-radius:7px;padding:8px;font-weight:700;font-size:13px}
.ie-save:hover{filter:brightness(1.07)}
.ie-keep{background:var(--bg3);border:1px solid var(--line2);border-radius:7px;color:var(--text);padding:8px 10px;font-size:12px}
.ie-keep:hover{background:#343a45}
.ie-cancel{background:var(--bg3);border:1px solid var(--line2);border-radius:7px;color:var(--muted);padding:8px 11px}
.ie-cancel:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* Floating per-letter kashida slider */
.kashida-slider{position:absolute;z-index:60;width:190px;background:rgba(28,31,38,.97);
  border:1px solid var(--ok);border-radius:11px;padding:11px;box-shadow:var(--shadow)}
.ks-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px}
.ks-val{color:var(--ok);font-weight:800;font-size:14px}
.kashida-slider input[type=range]{width:100%}
.kashida-slider input[type=range]::-webkit-slider-thumb{background:var(--ok);border-color:#0c2415}
.ks-actions{display:flex;gap:6px;margin-top:10px;align-items:center}
.ks-step{width:30px;height:28px;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;color:var(--text);font-size:16px;line-height:1}
.ks-step:hover{background:#343a45}
.ks-done{flex:1;background:var(--ok);color:#0c2415;border:none;border-radius:6px;padding:7px;font-weight:700;font-size:12px}
.ks-done:hover{filter:brightness(1.08)}

.toast{position:fixed;bottom:46px;inset-inline-start:50%;transform:translateX(50%);background:var(--bg3);
  border:1px solid var(--line2);padding:10px 18px;border-radius:24px;box-shadow:var(--shadow);
  z-index:400;font-size:13px;opacity:0;transition:.25s}
.toast.show{opacity:1;transform:translateX(50%) translateY(-6px)}
.toast.ok{border-color:var(--ok)}
.toast.err{border-color:var(--danger)}

/* ---- HugeIcons UI icon set ---- */
.hgi{flex:none;display:inline-block;vertical-align:middle}
.btn .bi{display:inline-flex;align-items:center}
.btn.ghost.iconbtn{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px}
.zoomctl button{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.zoomctl button:hover{color:var(--text)}
.licon .hgi{width:15px;height:15px}
.layer.locked .licon[data-act="lock"]{color:var(--accent2)}
.chev{display:inline-flex;align-items:center}
.ie-cancel{display:inline-flex;align-items:center;justify-content:center}

.hgi.flip{transform:rotate(180deg)}