:root{--bg:#07111f;--panel:#0e1d31cc;--line:#203751;--text:#e8f2ff;--muted:#8296ad;--blue:#36a8ff;--cyan:#49e0ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 35%,#103052 0,#07111f 55%);color:var(--text);font-family:Vazirmatn,Arial,sans-serif;min-height:100vh}.app-shell{max-width:1600px;margin:auto;padding:18px 24px}.topbar,.section-head,.top-actions,.brand,.button-row{display:flex;align-items:center}.topbar{justify-content:space-between;margin-bottom:16px}.brand-mark{font-size:38px;color:var(--cyan);margin-left:10px}.brand b{display:block;letter-spacing:2px}.brand small,.eyebrow{font-size:10px;color:var(--muted);letter-spacing:1.5px}.top-actions{gap:14px;color:var(--muted)}button,select,input{font:inherit}button{border:1px solid #2a4664;background:#12243a;color:var(--text);border-radius:9px;padding:9px 13px;cursor:pointer}button:hover{border-color:var(--cyan);box-shadow:0 0 16px #36a8ff33}.primary{background:#1686d5;border-color:#43b5ff}.glass{background:linear-gradient(135deg,#12263ccc,#091625dd);border:1px solid #2a4664;border-radius:18px;box-shadow:0 20px 50px #0005,inset 0 1px #ffffff12}.workspace{display:grid;grid-template-columns:230px 1fr;gap:18px}.controls{padding:18px}.controls h3{margin:0 0 18px;font-size:15px}.controls label{display:block;color:var(--muted);font-size:12px;margin:15px 0}.controls select,.controls input{width:100%;margin-top:8px;background:#091727;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px}.button-row{gap:6px;flex-wrap:wrap}.button-row button{flex:1;font-size:11px}.wide{width:100%;margin-top:6px}.mode-card{margin-top:22px;padding:12px;border:1px solid #2a4664;border-radius:12px;background:#0a1727}.mode-card span{font-size:11px;display:block;margin-bottom:8px}.mode-card button{width:100%;font-size:11px}.legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.legend span{font-size:10px;padding:4px 7px;border-radius:5px;background:#162a40}.sales{color:#46b4ff}.production{color:#55e08a}.warehouse{color:#ffad49}.finance{color:#c58cff}.quality{color:#ffe269}.diagram-wrap{padding:18px}.section-head{justify-content:space-between}.section-head h1{font-size:22px;margin:4px 0 0}.status-pill{font-size:11px;color:#71e6a0}.status-pill i,.live-dot{display:inline-block;width:7px;height:7px;background:#4ee693;border-radius:50%;box-shadow:0 0 10px #4ee693;margin-left:5px}.diagram{height:610px;position:relative;overflow:hidden;border-radius:14px;background:radial-gradient(circle,#102b48 0,#081522 65%)}.diagram>img{position:absolute;width:100%;height:100%;inset:0;opacity:.55}.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#0b2844;border:2px solid var(--cyan);box-shadow:0 0 30px #2caeff99}.core strong{font-size:21px;line-height:1.05}.core small{font-size:8px;color:var(--muted)}.core-ring{position:absolute;inset:-11px;border:1px dashed #44caff88;border-radius:50%;animation:spin 16s linear infinite}.node{position:absolute;width:112px;padding:10px 7px;border-radius:12px;text-align:center;background:#10243aee;border:1px solid #315270;cursor:pointer;transition:.25s}.node:hover,.node.active{transform:scale(1.08);border-color:var(--cyan);box-shadow:0 0 24px #2dafff66}.node b{display:block;font-size:12px}.node small{color:var(--muted);font-size:9px}.event-log{font-size:11px;color:var(--muted);padding:8px}.detail-panel{position:fixed;right:-380px;top:0;width:360px;height:100vh;background:#0c1c2eee;border-left:1px solid #2e5476;z-index:5;padding:24px;transition:right .35s}.detail-panel.open{right:0}.detail-panel .close{float:left;font-size:25px}.detail-panel h2{margin-top:35px}.detail-panel li{margin:9px 0;color:#b7c9db;font-size:12px}footer{text-align:center;color:#54708b;font-size:10px;padding:14px}@media(max-width:900px){.workspace{grid-template-columns:1fr}.controls{order:2}.diagram{height:540px}.app-shell{padding:12px}.section-head h1{font-size:18px}}

.workspace{grid-template-columns:1fr}.controls{position:fixed;right:24px;bottom:76px;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow-y:auto;z-index:20;padding:18px;opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);transition:opacity .25s ease,transform .25s ease,visibility .25s}.controls.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.controls-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.controls h3{margin:0}.controls-close{width:34px;height:34px;padding:0;font-size:22px;line-height:1}.controls-toggle{position:fixed;right:24px;bottom:20px;z-index:21;border-color:#43b5ff;background:#1686d5;box-shadow:0 10px 30px #0008,0 0 18px #36a8ff44;font-weight:700}.controls-toggle.active{background:#0b2844}.diagram-wrap{width:100%}@media(max-width:900px){.controls{right:12px;bottom:70px;width:calc(100vw - 24px)}.controls-toggle{right:12px;bottom:12px}.diagram{height:540px}}
.diagram-scroll{width:100%;overflow:hidden;border-radius:14px;direction:ltr}.diagram-scroll .diagram{direction:rtl}.mobile-scroll-hint{display:none}
@media(max-width:900px){
 .diagram-wrap{padding:12px;overflow:hidden}
 .section-head{padding:2px 4px 12px}
 .section-head h1{font-size:16px}
 .status-pill{white-space:nowrap}
 .mobile-scroll-hint{display:block;margin:0 4px 9px;color:#8eb9d8;font-size:10px;text-align:center}
 .diagram-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#2b83bd #091522;-webkit-overflow-scrolling:touch}
 .diagram-scroll::-webkit-scrollbar{height:6px}
 .diagram-scroll::-webkit-scrollbar-track{background:#091522}
 .diagram-scroll::-webkit-scrollbar-thumb{background:#2b83bd;border-radius:20px}
 .diagram{min-width:820px;width:820px;height:520px}
 .node{width:106px;padding:9px 6px}
 .core{width:118px;height:118px}
 .core strong{font-size:19px}
}
@media(max-width:480px){
 .app-shell{padding:8px}
 .topbar{margin-bottom:10px}
 .brand small{display:none}
 .kpis{gap:7px}
 .kpi{padding:10px}
 .diagram-wrap{border-radius:14px}
 .diagram{height:500px}
}
#themeBtn{width:42px;height:42px;padding:0;font-size:18px;transition:transform .25s ease,background .25s ease,color .25s ease}#themeBtn:hover{transform:rotate(14deg)}
body.light{--bg:#eef5fb;--panel:#ffffffdf;--line:#b9ccdc;--text:#102338;--muted:#5c7186;--blue:#087bc1;--cyan:#008db8;background:radial-gradient(circle at 50% 30%,#ffffff 0,#eaf3fa 58%,#dce9f3 100%);color:var(--text)}
body.light .glass{background:linear-gradient(135deg,#ffffffed,#edf5fbf2);border-color:#b9ccdc;box-shadow:0 18px 45px #42637a24,inset 0 1px #fff}
body.light .kpi{background:#ffffffdd;border-color:#c4d5e2;box-shadow:0 6px 18px #45657a12}
body.light button{background:#edf5fb;color:#17324b;border-color:#a9c2d5}
body.light button:hover{border-color:#078ec9;box-shadow:0 0 16px #078ec933}
body.light .primary,body.light .controls-toggle{background:#087fc3;color:#fff;border-color:#087fc3}
body.light .controls-toggle.active{background:#145276}
body.light .controls select,body.light .controls input{background:#fff;color:#17324b;border-color:#b5cad9}
body.light .mode-card{background:#f4f9fc;border-color:#bfd1de}
body.light .legend span{background:#e6f0f7}
body.light .diagram{background:radial-gradient(circle,#d7edf8 0,#eef6fb 66%)}
body.light .node{background:#ffffffed;border-color:#8eb1c9;box-shadow:0 5px 14px #3b607515}
body.light .node:hover,body.light .node.active{border-color:#008fc7;box-shadow:0 0 22px #008fc744}
body.light .core{background:#e7f5fc;color:#13334d;border-color:#008db8;box-shadow:0 0 28px #008db866}
body.light .detail-panel{background:#f5fafff5;color:#17324b;border-color:#9dbbd0}
body.light .detail-panel li{color:#405d73}
body.light .diagram>img{opacity:.42;filter:saturate(.75) contrast(.85)}
body.light footer{color:#688297}
body.light #themeBtn{background:#fff6d8;color:#855e00;border-color:#e3bd50}