/* ================= fonts ================= */
@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url(fonts/Vazirmatn-Regular.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(fonts/Vazirmatn-Medium.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;src:url(fonts/Vazirmatn-Bold.woff2) format("woff2")}

/* ================= base ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:Vazirmatn,Tahoma,Arial,sans-serif;background:#20252b;color:#eee;overscroll-behavior:none}
button,select,input{font-family:inherit}
.hidden{display:none!important}
.app{position:fixed;inset:0;display:flex;flex-direction:column;direction:ltr;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ================= top bar ================= */
.top{height:48px;flex:none;background:#252a30;border-bottom:1px solid #111820;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;z-index:30}
.brand{font-weight:700;font-size:15px;white-space:nowrap;direction:rtl}
.menus{display:flex;gap:2px;direction:rtl;overflow-x:auto;scrollbar-width:none;min-width:0}
.menus::-webkit-scrollbar{display:none}
.top button,.menus button{background:transparent;border:0;color:#d8dde2;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;white-space:nowrap}
.top button:hover,.menus button:hover,.menus button.open{background:#353c44}
.top button:disabled{opacity:.35;cursor:default}
.spacer{flex:1}
.top select{background:#1c2126;color:#eee;border:1px solid #454d55;border-radius:5px;padding:5px;font-size:12px}
.top .ic{font-size:17px;padding:5px 9px}

/* ================= options bar ================= */
.options{min-height:44px;flex:none;background:#2d333a;border-bottom:1px solid #151a20;display:flex;align-items:center;gap:12px;padding:4px 10px;flex-wrap:wrap;position:relative;z-index:20;direction:rtl}
.opt{display:flex;align-items:center;gap:6px;color:#cbd1d7;font-size:12px;white-space:nowrap}
.opt input[type=number],.opt select{background:#1f2429;color:#eee;border:1px solid #4a535c;border-radius:4px;padding:4px 6px;font-size:12px}
.opt input[type=range]{width:90px;accent-color:#3d9be9}
.opt.dim{opacity:.35;pointer-events:none}
.opt label{display:flex;align-items:center;gap:5px;cursor:pointer}
.opt b{color:#fff}

/* ================= layout ================= */
.main{flex:1;min-height:0;display:flex;direction:ltr;position:relative}
.left{width:58px;flex:none;background:#2a3036;border-right:1px solid #151a20;display:flex;flex-direction:column;align-items:center;padding:6px 4px;gap:3px;overflow-y:auto;scrollbar-width:thin;direction:rtl;z-index:15}
.tool{width:46px;height:42px;flex:none;border:0;background:transparent;color:#e8edf1;border-radius:6px;font-size:19px;cursor:pointer;position:relative;line-height:1;padding:2px 0}
.tool small{display:block;font-size:9px;color:#aeb6bd;margin-top:2px}
.tool:hover{background:#39414a}
.tool.active{background:#1769aa;box-shadow:inset 0 0 0 1px #53a8e8}
.tool.active small{color:#dbeeff}
.tool.quick-check{color:#4fe078}.tool.quick-x{color:#ff5d5d}.tool.quick-star{color:#ffe14a}.tool.quick-bang{color:#ffbd45}
.divider{width:36px;flex:none;border-top:1px solid #4a5158;margin:4px 0}
@media (max-height:760px){.tool{height:36px;font-size:17px}.tool small{display:none}}

.workspace{flex:1;min-width:0;position:relative;background:#15191d;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.workspace canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{touch-action:none}
.notice{position:absolute;left:12px;bottom:10px;background:rgba(0,0,0,.45);padding:5px 10px;border-radius:5px;font-size:11px;color:#cbd3d8;pointer-events:none;direction:rtl;transition:opacity .6s}
.notice.gone{opacity:0}
.dropzone{position:absolute;inset:10px;border:3px dashed #53a8e8;border-radius:12px;background:rgba(23,105,170,.25);display:none;align-items:center;justify-content:center;font-size:22px;color:#fff;pointer-events:none;direction:rtl}
.dropzone.show{display:flex}

#textEditor{position:absolute;display:none;min-width:40px;min-height:1.5em;padding:2px 6px;margin:0;outline:2px dashed #53a8e8;background:rgba(0,0,0,.25);color:#fff;white-space:pre;line-height:1.5;unicode-bidi:plaintext;text-align:start;z-index:6;caret-color:#53a8e8;font-family:Vazirmatn,Tahoma,Arial,sans-serif;user-select:text;-webkit-user-select:text;touch-action:auto;transform-origin:0 0}

/* ================= right panel ================= */
.right{width:310px;flex:none;background:#292f35;border-left:1px solid #151a20;display:flex;flex-direction:column;direction:rtl;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;z-index:15}
.panel{border-bottom:1px solid #171c21;flex:none}
.panel.grow{flex:1;min-height:220px;display:flex;flex-direction:column}
.tabs{height:36px;display:flex;align-items:center;background:#252a30;flex:none}
.tab{padding:9px 13px;color:#aeb6bd;font-size:12px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:#fff}
.tab.active{color:#fff;border-bottom-color:#3d9be9}
.panel-body{padding:10px;font-size:12px}
.panel.grow .panel-body{flex:1;min-height:0;overflow:auto}
.tabpane{display:none}.tabpane.active{display:block}
.color-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.swatch{width:26px;height:26px;border:1px solid #69727b;border-radius:4px;cursor:pointer;flex:none}
.swatch:hover{outline:2px solid #53a8e8}
.swatch.sel{outline:2px solid #fff}
.color-input{width:42px;height:30px;padding:0;border:1px solid #69727b;border-radius:4px;background:none;cursor:pointer}
.swgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.swgrid .swatch{width:100%;aspect-ratio:1}
.lbl{color:#9aa3ab;font-size:11px;margin:8px 0 5px}
.lbl:first-child{margin-top:0}
.bgpresets{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 9px;border:1px solid #4b555e;background:#343c44;border-radius:5px;color:#fff;cursor:pointer;font-size:12px}
.chip:hover{background:#46515a}.chip.sel{background:#1769aa;border-color:#53a8e8}

.layers{max-height:230px;overflow:auto}
.layer{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:5px;background:#30373e;margin-bottom:4px;font-size:12px;cursor:pointer}
.layer.selected{background:#1769aa}
.layer .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .cnt{color:#aab4bc;font-size:10px}
.ibtn{background:none;border:0;color:#e6ebef;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;line-height:1}
.ibtn:hover{background:rgba(255,255,255,.14)}
.ibtn.off{opacity:.35}
.row{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.row select,.row input[type=number],.row input[type=text]{background:#1f2429;color:#eee;border:1px solid #4a535c;border-radius:4px;padding:4px 6px;font-size:12px}
.row input[type=range]{flex:1;accent-color:#3d9be9;min-width:60px}

.button{background:#3a424a;color:#fff;border:1px solid #505a63;border-radius:5px;padding:6px 10px;cursor:pointer;font-size:12px}
.button:hover{background:#46515a}
.button.primary{background:#1976b8;border-color:#238bce}.button.primary:hover{background:#2287cc}
.button.danger{background:#7f2727;border-color:#a33}
.button.sm{padding:4px 8px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.quick{height:36px;background:#343c44;border:1px solid #4b555e;color:#fff;border-radius:5px;font-size:18px;cursor:pointer}
.quick:hover{background:#46515a}
.quick.active{background:#1769aa;border-color:#53a8e8}

.history{padding:0!important}
.hist{padding:7px 10px;border-bottom:1px solid #3a4148;font-size:12px;color:#cfd5da;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.hist:hover{background:#343c44}
.hist.cur{background:#1769aa;color:#fff}
.hist.future{opacity:.45}
.hist small{color:#9aa7b1}
.propgrid{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center}
.muted{color:#8f99a2}

/* ================= footer ================= */
.bottom{height:34px;flex:none;background:#252a30;border-top:1px solid #111820;display:flex;align-items:center;padding:0 10px;gap:14px;font-size:12px;color:#adb5bd;direction:ltr;overflow:hidden;white-space:nowrap;position:relative;z-index:20}
.bottom .grow{flex:1}
.bottom button{background:transparent;border:0;color:#d8dde2;cursor:pointer;padding:3px 7px;border-radius:4px;font-size:13px}
.bottom button:hover{background:#353c44}
.bottom .button{background:#3a424a;border:1px solid #505a63;font-size:12px}
.bottom .pg{direction:rtl;display:flex;align-items:center;gap:4px}
#saveState{direction:rtl}

/* ================= menus / popups ================= */
.menu-pop{position:fixed;z-index:80;background:#2b3137;border:1px solid #58616a;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.6);padding:5px;min-width:230px;max-height:80vh;overflow:auto;display:none;direction:rtl;font-size:13px}
.menu-pop.show{display:block}
.mi{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:7px 12px;border-radius:5px;cursor:pointer;color:#e6ebef}
.mi:hover{background:#1769aa}
.mi.disabled{opacity:.35;pointer-events:none}
.mi kbd{direction:ltr;color:#9fb0bd;font-family:inherit;font-size:11px}
.mi .chipc{width:14px;height:14px;border-radius:3px;border:1px solid #777;display:inline-block;margin-left:6px;vertical-align:middle}
.msep{height:1px;background:#444d55;margin:5px 4px}
.mhead{padding:5px 12px;color:#8f99a2;font-size:11px}
.toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%) translateY(20px);background:#0f1418;color:#fff;border:1px solid #3b444c;border-radius:8px;padding:9px 16px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:120;max-width:90vw;direction:rtl;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100;padding:10px}
.modal-back.show{display:flex}
.modal{width:min(720px,94vw);max-height:92vh;overflow:auto;background:#2b3137;border:1px solid #58616a;border-radius:10px;box-shadow:0 20px 80px #000;padding:16px;direction:rtl}
.modal h3{margin:0 0 12px;font-size:16px}
.modal p{margin:6px 0;color:#cfd5da;font-size:13px;line-height:1.7}
.modal math-field{display:block;width:100%;min-height:80px;font-size:28px;background:#fff;color:#111;border-radius:7px;padding:10px;direction:ltr}
.modal input[type=text]{width:100%;background:#1f2429;color:#fff;border:1px solid #4a535c;border-radius:6px;padding:9px;font-size:14px}
.modal-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:14px}
.formula-help{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.formula-help button{background:#3a424a;color:#fff;border:1px solid #555f68;border-radius:4px;padding:5px 9px;cursor:pointer;font-size:13px;min-width:34px}
.formula-help button:hover{background:#46515a}
.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;font-size:13px}
.helpgrid div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #3a4148;padding:4px 0}
.helpgrid kbd{direction:ltr;color:#9fd0ff;font-family:inherit}
@media (max-width:640px){.helpgrid{grid-template-columns:1fr}}

/* ================= focus (full board) mode ================= */
.focusbar{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:40;display:none;align-items:center;gap:3px;background:rgba(30,36,42,.94);border:1px solid #47515a;border-radius:14px;padding:6px 8px;box-shadow:0 8px 30px rgba(0,0,0,.55);max-width:96vw;direction:ltr;backdrop-filter:blur(6px)}
.focusbar .fb{width:40px;height:40px;background:transparent;border:0;border-radius:9px;color:#eef2f5;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.focusbar .fb:hover{background:#3a434c}
.focusbar .fb.active{background:#1769aa;box-shadow:inset 0 0 0 1px #53a8e8}
.focusbar .fb:disabled{opacity:.3}
.focusbar .fsep{width:1px;height:26px;background:#4a545d;margin:0 4px;flex:none}
.focusbar .fsw{width:24px;height:24px;border-radius:50%;border:2px solid #666;cursor:pointer;flex:none}
.focusbar .fsw.sel{border-color:#fff;transform:scale(1.15)}
.focusbar input[type=range]{width:80px;accent-color:#3d9be9}
.focusbar .pgl{font-size:12px;color:#c5ccd2;min-width:40px;text-align:center;direction:ltr}
.focusbar .scroll{display:flex;align-items:center;gap:3px;overflow-x:auto;scrollbar-width:none}
.focusbar .scroll::-webkit-scrollbar{display:none}
.focusbar.mini{padding:4px}
.focusbar.mini .scroll,.focusbar.mini .fexit{display:none}
.app.focus .top,.app.focus .options,.app.focus .left,.app.focus .right,.app.focus .bottom{display:none}
.app.focus .focusbar{display:flex}
.app.focus{padding:0}
.app.focus .notice{display:none}

/* ================= small screens ================= */
@media (max-width:900px){
  .right{position:absolute;top:0;bottom:0;right:0;width:min(310px,88vw);transform:translateX(100%);transition:transform .2s;visibility:hidden}
  .app.panel-open .right{transform:none;visibility:visible;box-shadow:-8px 0 30px rgba(0,0,0,.5)}
  .brand{display:none}
}
@media (min-width:901px){
  .app.panel-closed .right{display:none}
}
.app.tools-closed .left{display:none}
.app.opts-closed .options{display:none}
.app.foot-closed .bottom{display:none}

@media (max-width:700px){
  .options{flex-wrap:nowrap;overflow-x:auto;min-height:40px;gap:10px;scrollbar-width:none}
  .options::-webkit-scrollbar{display:none}
  .options .opt,.options .button{flex:none}
  .opt input[type=range]{width:64px}
  .top{gap:2px;padding:0 4px}.top .ic{padding:5px 6px}
  .bottom #coords,.bottom #saveState{display:none}
  .left{width:52px}
}