/* ═══════════════════════════════════════════════════
   Elassiji Studio Pro — style.css  v3 FIXED & OPTIMIZED
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg:#0b0b0d; --surf:#111114; --surf2:#17171c; --surf3:#1e1e25;
  --b:rgba(255,255,255,0.07); --bhi:rgba(255,255,255,0.13);
  --tx:#ededf2; --dim:#6b6b78; --dimhi:#9a9aaa;
  --ac:#7c3aed; --aclo:rgba(124,58,237,0.18); --acglow:rgba(124,58,237,0.45);
  --aclt:#a78bfa; --danger:#ef4444; --green:#22c55e;
  --blur:blur(20px); --r:10px; --rsm:7px; --rxs:5px;
  --rack:58px; --rp:268px; --top:50px; --ctx:30px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100vw;height:100vh;overflow:hidden;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;background:var(--bg);color:var(--tx);user-select:none;-webkit-user-select:none;}
input,select,textarea,button{font-family:inherit;font-size:inherit;}
.dim{color:var(--dim);} .hidden{display:none!important;}

/* ORBS */
.orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(110px);opacity:0.07;z-index:0;}
.o1{width:700px;height:700px;background:#7c3aed;top:-250px;left:-180px;}
.o2{width:600px;height:600px;background:#1e40af;bottom:-200px;right:-120px;}

/* ── TOP BAR ── */
#topbar{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:500;background:rgba(11,11,13,0.95);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--b);display:flex;align-items:center;gap:0.4rem;padding:0 0.8rem;isolation:isolate;}
.tb-left,.tb-center,.tb-right{display:flex;align-items:center;gap:0.3rem;}
.tb-left{flex:1;min-width:0;}.tb-right{flex:1;justify-content:flex-end;}
.brand{text-decoration:none;color:var(--tx);font-weight:600;display:flex;align-items:center;gap:0.4rem;font-size:0.88rem;flex-shrink:0;}
.brand svg{flex-shrink:0;opacity:0.7;} .brand em{color:var(--ac);font-style:normal;}
.doc-inp{background:none;border:none;outline:none;color:var(--dimhi);font-size:0.76rem;max-width:160px;border-bottom:1px solid transparent;cursor:pointer;}
.doc-inp:focus{border-bottom-color:var(--ac);color:var(--tx);cursor:text;}
.vd{width:1px;height:16px;background:var(--b);flex-shrink:0;}
.zoom-lbl{font-size:0.73rem;color:var(--dim);min-width:40px;text-align:center;}

/* Buttons */
button{cursor:pointer;transition:all .13s;border:none;outline:none;}
.tb-btn{width:28px;height:28px;border-radius:6px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;}
.tb-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tb-btn:hover{background:var(--surf3);color:var(--tx);}
.tb-btn:disabled{opacity:0.22;pointer-events:none;}
.tb-btn.active,.tb-btn.on{background:var(--aclo);color:var(--ac);}
.ghost-btn{height:26px;padding:0 0.65rem;border-radius:var(--rxs);background:transparent;color:var(--dim);border:1px solid var(--b);}
.ghost-btn:hover{background:var(--surf3);color:var(--tx);border-color:var(--bhi);}
.accent-btn{height:26px;padding:0 0.8rem;border-radius:var(--rxs);background:var(--ac);color:#fff;font-weight:500;box-shadow:0 0 14px var(--acglow);}
.accent-btn:hover{filter:brightness(1.15);}

/* ── CONTEXT BAR ── */
#ctx-bar{position:fixed;top:var(--top);left:var(--rack);right:var(--rp);height:var(--ctx);z-index:400;background:rgba(11,11,13,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--b);display:flex;align-items:center;gap:0.5rem;padding:0 0.8rem;}
.ctx-tag{font-size:0.68rem;font-weight:600;color:var(--ac);text-transform:uppercase;letter-spacing:0.07em;flex-shrink:0;}
.ctx-opts{display:flex;align-items:center;gap:0.4rem;flex:1;}
.ctx-coords{font-size:0.68rem;color:var(--dim);flex-shrink:0;font-variant-numeric:tabular-nums;}
.ctx-tb{height:20px;padding:0 0.45rem;border-radius:3px;background:var(--surf3);border:1px solid var(--b);color:var(--dim);font-size:0.68rem;}
.ctx-tb:hover,.ctx-tb.on{background:var(--aclo);border-color:rgba(124,58,237,.3);color:var(--ac);}
.ctx-sel{height:20px;background:var(--surf3);border:1px solid var(--b);color:var(--dimhi);border-radius:3px;padding:0 3px;outline:none;font-size:0.68rem;}

/* ── WORKSPACE ── */
#workspace{position:fixed;top:calc(var(--top) + var(--ctx));left:0;right:0;bottom:0;display:grid;grid-template-columns:var(--rack) 1fr var(--rp);z-index:1;}

/* ── RACK ── */
#rack{background:var(--surf);border-right:1px solid var(--b);display:flex;flex-direction:column;align-items:center;padding:0.5rem 0;gap:0.15rem;z-index:10;overflow-y:auto;}
#rack::-webkit-scrollbar{display:none;}
.rack-div{width:26px;height:1px;background:var(--b);margin:0.15rem 0;flex-shrink:0;}
.rb{width:44px;height:38px;border-radius:8px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}
.rb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.rb:hover{background:var(--surf3);color:var(--tx);}
.rb.active{background:var(--aclo);color:var(--ac);box-shadow:0 0 8px var(--acglow);}
.rb span.hotkey{position:absolute;bottom:2px;right:4px;font-size:8px;color:var(--dim);opacity:0.7;line-height:1;}
/* Rack colors */
.rack-colors{display:flex;flex-direction:column;align-items:center;position:relative;width:44px;height:48px;flex-shrink:0;margin-bottom:2px;}
.fg-sw{position:absolute;top:0;left:6px;width:28px;height:28px;border-radius:6px;border:2px solid var(--bhi);cursor:pointer;z-index:2;}
.bg-sw{position:absolute;top:12px;left:14px;width:22px;height:22px;border-radius:5px;border:2px solid var(--surf2);background:#fff;cursor:pointer;z-index:1;}
.sw-swap{position:absolute;bottom:0;right:2px;width:15px;height:15px;border-radius:3px;background:var(--surf3);border:1px solid var(--b);color:var(--dim);font-size:9px;display:flex;align-items:center;justify-content:center;z-index:3;}

/* ── CANVAS AREA ── */
#canvas-area{position:relative;overflow:hidden;background:#16161a;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:40px 40px;cursor:none;}
#canvas-area.panning{cursor:grab;} #canvas-area.panning:active{cursor:grabbing;}
#canvas-vp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#canvas-wrap{position:relative;transform-origin:center;will-change:transform;box-shadow:0 28px 72px rgba(0,0,0,0.72),0 0 0 1px rgba(255,255,255,0.05);}
#canvas-wrap canvas,#layer-host canvas{position:absolute;top:0;left:0;display:block;}
/* Selection animated dash */
#sel-box{position:absolute;border:1.5px dashed rgba(255,255,255,0.8);pointer-events:none;z-index:80;background:rgba(124,58,237,0.04);}

/* ── RIGHT PANEL ── */
#right-panel{background:var(--surf);border-left:1px solid var(--b);display:flex;flex-direction:column;overflow:hidden;z-index:10;}
.rp-tabs{display:flex;border-bottom:1px solid var(--b);flex-shrink:0;}
.rp-tab{flex:1;height:32px;background:transparent;color:var(--dim);border-bottom:2px solid transparent;font-size:0.7rem;font-weight:500;letter-spacing:0.03em;}
.rp-tab:hover{color:var(--tx);}.rp-tab.active{color:var(--ac);border-bottom-color:var(--ac);}
.tab-pane{display:none;flex:1;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
.tab-pane.active{display:flex;}
.tab-pane::-webkit-scrollbar{width:3px;}.tab-pane::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:3px;}
.sec{padding:0.7rem 0.8rem;border-bottom:1px solid var(--b);}
.sec-head{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--dim);margin-bottom:0.5rem;font-weight:500;}

/* Sliders */
.prop{margin-bottom:0.52rem;}
.plbl{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--dim);margin-bottom:0.25rem;}
.pval{color:var(--tx);font-weight:500;}
.trk{position:relative;height:4px;border-radius:4px;background:var(--surf3);}
.trf{position:absolute;top:0;left:0;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ac),var(--aclt));pointer-events:none;transition:width .04s;}
input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:4px;background:transparent;cursor:pointer;margin:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ac);box-shadow:0 1px 4px rgba(0,0,0,0.4);transition:transform .1s;}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.35);}
input[type=range]:focus{outline:none;}

/* Brush preview */
.brush-prev-wrap{margin-top:0.6rem;border-radius:5px;overflow:hidden;background:#fff;}
#brush-prev{display:block;width:100%;height:44px;}

/* Presets */
.preset-search{width:100%;background:var(--surf3);border:1px solid var(--b);color:var(--tx);border-radius:var(--rxs);padding:0.32rem 0.6rem;outline:none;font-size:0.78rem;}
.preset-search:focus{border-color:var(--ac);}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.38rem;padding:0.6rem 0.7rem;}
.preset-card{background:var(--surf2);border:1px solid var(--b);border-radius:var(--rsm);padding:0.5rem 0.55rem;cursor:pointer;transition:all .13s;}
.preset-card:hover{background:var(--surf3);border-color:var(--bhi);}
.preset-card.active{background:var(--aclo);border-color:rgba(124,58,237,.4);}
.pc-name{font-size:0.76rem;font-weight:500;margin-bottom:0.08rem;}
.pc-sub{font-size:0.62rem;color:var(--dim);}

/* Color tab */
.wheel-wrap{position:relative;width:176px;height:176px;margin:0 auto 0.7rem;}
#hue-wheel{display:block;border-radius:50%;border:2px solid var(--b);cursor:crosshair;}
#sv-sq{position:absolute;top:34px;left:34px;border-radius:3px;border:1px solid rgba(255,255,255,0.18);cursor:crosshair;}
.wc{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.55);pointer-events:none;transform:translate(-50%,-50%);}
.color-inp-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0.3rem;margin-bottom:0.55rem;}
.cig{display:flex;flex-direction:column;gap:0.12rem;}
.cig label{font-size:0.58rem;color:var(--dim);text-transform:uppercase;letter-spacing:0.05em;}
.ci{width:100%;background:var(--surf3);border:1px solid var(--b);color:var(--tx);border-radius:4px;padding:0.25rem 0.3rem;outline:none;font-size:0.73rem;}
.ci:focus{border-color:var(--ac);}
.sw-row{display:flex;flex-wrap:wrap;gap:4px;}
.sw{width:18px;height:18px;border-radius:4px;cursor:pointer;border:1.5px solid transparent;transition:transform .1s,border-color .1s;}
.sw:hover{transform:scale(1.28);border-color:rgba(255,255,255,0.45);}
.sw-lbl{font-size:0.62rem;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em;margin:0.3rem 0 0.22rem;}

/* Layers */
.layer-tb{display:flex;gap:0.28rem;padding:0.55rem 0.65rem;border-bottom:1px solid var(--b);}
.ltb{flex:1;height:24px;border-radius:4px;background:var(--surf3);color:var(--dim);border:1px solid var(--b);font-size:11px;display:flex;align-items:center;justify-content:center;}
.ltb:hover{background:var(--surf2);color:var(--tx);border-color:var(--bhi);}
.ltb.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.layer-global{display:flex;align-items:center;gap:0.45rem;padding:0.28rem 0.7rem;border-bottom:1px solid var(--b);}
.lg-lbl{font-size:0.66rem;color:var(--dim);min-width:36px;}
.lg-rng{flex:1;height:3px;accent-color:var(--ac);}
.lg-sel{flex:1;background:var(--surf3);border:1px solid var(--b);color:var(--dimhi);border-radius:3px;font-size:0.68rem;padding:1px 3px;outline:none;}
.lg-sel option{background:var(--bg);}
.layer-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0.25rem;padding:0.45rem 0.55rem;}
.layer-list::-webkit-scrollbar{width:3px;}.layer-list::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:3px;}
.li{display:flex;align-items:center;gap:0.45rem;padding:0.4rem 0.5rem;border-radius:6px;background:var(--surf2);border:1px solid transparent;cursor:pointer;transition:all .12s;}
.li:hover{background:var(--surf3);border-color:var(--b);}
.li.active{background:var(--aclo);border-color:rgba(124,58,237,.38);}
.lthumb{width:36px;height:24px;border-radius:3px;flex-shrink:0;overflow:hidden;background:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;}
.lthumb canvas{width:100%;height:100%;display:block;}
.lcol{flex:1;min-width:0;}
.lname-row{display:flex;align-items:center;gap:0.22rem;}
.lname{flex:1;background:none;border:none;color:var(--tx);font-size:0.76rem;font-weight:500;outline:none;min-width:0;cursor:default;}
.lname:focus{cursor:text;}.libtn{width:16px;height:16px;background:none;border:none;color:var(--dim);font-size:10px;border-radius:2px;}
.libtn:hover{background:var(--surf3);color:var(--tx);}

/* Modal */
.modal-ov{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.72);backdrop-filter:var(--blur);display:flex;align-items:center;justify-content:center;}
.modal-box{background:var(--surf);border:1px solid var(--bhi);border-radius:var(--r);padding:2rem;width:320px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.85rem;}
.modal-box h2{font-size:1rem;font-weight:600;}
.mloader{width:34px;height:34px;border:3px solid var(--surf3);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Dropdown */
.ddmenu{position:fixed;z-index:500;background:var(--surf);border:1px solid var(--bhi);border-radius:var(--rsm);padding:0.28rem;min-width:172px;box-shadow:0 14px 36px rgba(0,0,0,0.5);}
.ddmenu button{display:block;width:100%;text-align:left;padding:0.38rem 0.65rem;border-radius:4px;background:none;color:var(--dimhi);font-size:0.78rem;}
.ddmenu button:hover{background:var(--surf3);color:var(--tx);}

/* Text overlay */
#text-ov{position:fixed;inset:0;z-index:450;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;}
#txt-ta{width:580px;max-width:90vw;min-height:100px;background:var(--surf);border:1px solid var(--bhi);border-radius:var(--r);padding:1rem;color:var(--tx);font-size:1.4rem;outline:none;resize:vertical;}
.txt-ctrl{display:flex;gap:0.45rem;align-items:center;}
.txt-ctrl select,.txt-ctrl input[type=number]{background:var(--surf);border:1px solid var(--b);color:var(--tx);border-radius:5px;padding:0.28rem 0.45rem;outline:none;}

/* ── MOBILE RESPONSIVENESS ── */
@media (max-width: 800px) {
  :root { --rack: 48px; --rp: 280px; --top: 48px; --ctx: 28px; }
  #workspace { grid-template-columns: 1fr; /* canvas takes full width */ }
  
  /* Rack becomes a horizontal scrollable bar at the bottom */
  #rack {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: 56px; width: 100%;
    flex-direction: row; justify-content: flex-start;
    padding: 0 0.4rem; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-top: 1px solid var(--b);
    z-index: 200; background: rgba(11,11,13,0.97);
    gap: 0.1rem;
  }
  #rack::-webkit-scrollbar { display: none; }
  .rack-div { width: 1px; height: 26px; margin: 0 0.1rem; } /* vertical dividers */
  .rb { width: 42px; height: 48px; border-radius: 6px; flex-shrink: 0; }
  .rack-colors { flex-direction: row; width: auto; height: 48px; align-items: center; flex-shrink: 0; padding: 0 4px; }
  .fg-sw { top: 8px; left: 4px; width: 24px; height: 24px; }
  .bg-sw { top: 18px; left: 14px; width: 18px; height: 18px; }
  .sw-swap { bottom: 4px; right: 0; }
  
  /* Canvas area fills everything between top bars and bottom rack */
  #canvas-area { touch-action: none; }
  #workspace { position: fixed; top: calc(var(--top) + var(--ctx)); left: 0; right: 0; bottom: 56px; }
  
  /* Right panel slides in from the right */
  #right-panel {
    position: fixed; top: calc(var(--top) + var(--ctx)); right: 0; bottom: 56px; width: min(300px, 92vw);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.85); z-index: 150; border-left: 1px solid var(--b);
  }
  #right-panel.open { transform: translateX(0); }
  
  /* Context bar spans full width on mobile */
  #ctx-bar { left: 0; right: 0; overflow-x: auto; white-space: nowrap; padding: 0 0.5rem; }
  #ctx-coords { display: none; }
  
  /* Top bar compact version */
  #topbar { padding: 0 0.3rem; gap: 0.15rem; }
  .tb-btn { width: 26px; height: 26px; }
  .zoom-lbl { min-width: 30px; font-size: 0.68rem; }
  .ghost-btn { padding: 0 0.35rem; height: 22px; font-size: 0.62rem; }
  .accent-btn { padding: 0 0.45rem; height: 22px; font-size: 0.62rem; }
  .doc-inp { max-width: 80px; font-size: 0.65rem; }
  .brand span { display: none; } /* show only icon on mobile */
  .vd { display: none; } /* hide vertical dividers on mobile topbar */
  
  .mobile-panel-btn { display: flex !important; }
}

.mobile-panel-btn {
  display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ac); color: #fff;
  align-items: center; justify-content: center; position: fixed; right: 14px; bottom: 65px;
  z-index: 400; box-shadow: 0 4px 18px var(--acglow); border: none; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.mobile-panel-btn:active { transform: scale(0.88); }
.mobile-panel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }