/* ============ Design tokens ============ */
:root{
  --bg:#12141A;
  --panel:#191C24;
  --panel-2:#20242E;
  --panel-3:#282D39;
  --border:#2B303C;
  --text:#EDEFF4;
  --text-muted:#8A91A6;
  --text-faint:#565D70;
  --accent-a:#FF6B4A;
  --accent-b:#7C5CFF;
  --danger:#FF5470;
  --success:#4ADE80;
  --radius-sm:6px;
  --radius-md:10px;
  --font-display:'Space Grotesk', 'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', 'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --topbar-h:56px;
  --rail-w:60px;
  --panel-w:300px;
  --tabbar-h:60px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
input,textarea,select,button{ font-family:inherit; color:inherit; }
::selection{ background:var(--accent-b); color:#fff; }

.hidden{ display:none !important; }
.only-mobile{ display:none; }

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

/* ============ Top bar ============ */
.topbar{
  height:var(--topbar-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 14px;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom:1px solid var(--border);
  z-index:30;
}
.topbar-start,.topbar-end{ display:flex; align-items:center; gap:10px; }
.topbar-center{ flex:1; display:flex; justify-content:center; }

.logo{ display:flex; align-items:center; gap:8px; user-select:none; }
.logo-word{ font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:.2px; }
.logo-word em{ font-style:normal; color:var(--accent-a); font-weight:600; }

.project-name{
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:6px 10px;
  font-size:13px;
  color:var(--text-muted);
  min-width:80px;
  max-width:180px;
}
.project-name:hover,.project-name:focus{
  border-color:var(--border);
  background:var(--panel-2);
  color:var(--text);
  outline:none;
}

.icon-btn{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--text-muted); cursor:pointer;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ background:var(--panel-2); color:var(--text); border-color:var(--border); }

.cmdk-trigger{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:999px; padding:7px 14px; color:var(--text-faint);
  cursor:pointer; font-size:12.5px; min-width:260px;
}
.cmdk-trigger:hover{ border-color:var(--accent-b); color:var(--text-muted); }
.cmdk-trigger kbd{
  margin-inline-start:auto;
  font-family:var(--font-mono); font-size:10px;
  background:var(--panel-3); border:1px solid var(--border);
  padding:2px 6px; border-radius:4px; color:var(--text-faint);
}

.zoom-control{
  display:flex; align-items:center; gap:2px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:999px;
  padding:2px;
}
.zoom-control button{
  width:26px;height:26px; border-radius:50%; border:none; background:transparent;
  color:var(--text-muted); cursor:pointer; font-size:15px;
}
.zoom-control button:hover{ background:var(--panel-3); color:var(--text); }
.zoom-control span{ font-family:var(--font-mono); font-size:11px; width:44px; text-align:center; color:var(--text-muted); }

.btn-primary{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg, var(--accent-a), var(--accent-b));
  border:none; color:#fff; font-weight:600; font-size:13px;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(124,92,255,.55);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:12.5px;
}
.btn-ghost:hover{ border-color:var(--accent-b); }
.btn-danger{
  background:rgba(255,84,112,.1); border:1px solid rgba(255,84,112,.4); color:var(--danger);
  padding:8px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:12.5px;
}
.btn-danger:hover{ background:rgba(255,84,112,.18); }

/* ============ Workspace ============ */
.workspace{
  flex:1 1 auto;
  display:flex;
  min-height:0;
}

/* Tool rail */
.tool-rail{
  width:var(--rail-w); flex:0 0 auto;
  background:var(--panel);
  border-inline-end:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:6px;
}
.tool-sep{ width:28px; height:1px; background:var(--border); margin:6px 0; }
.tool-btn{
  position:relative;
  width:40px;height:40px; border-radius:var(--radius-md);
  background:transparent; border:1px solid transparent; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.tool-btn svg{ width:19px; height:19px; }
.tool-btn:hover{ background:var(--panel-2); color:var(--text); }
.tool-btn.active{
  background:linear-gradient(135deg, rgba(255,107,74,.18), rgba(124,92,255,.18));
  border-color:var(--accent-b); color:#fff;
}
.tool-btn.disabled{ opacity:.4; cursor:default; }
.tool-btn.disabled:hover{ background:transparent; color:var(--text-muted); }
.soon-badge{
  position:absolute; inset-inline-start:44px; top:8px;
  font-size:9px; background:var(--panel-3); color:var(--text-faint);
  padding:2px 5px; border-radius:4px; white-space:nowrap; display:none;
}
.tool-btn.disabled:hover .soon-badge{ display:block; }

/* Canvas area */
.canvas-area{
  flex:1 1 auto; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.canvas-ambient{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,40%), rgba(124,92,255,.10), transparent 60%);
  transition:background-position .1s linear;
}
.canvas-scroller{
  width:100%; height:100%;
  overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
}
.canvas-shadow{
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px var(--border);
  border-radius:2px;
  line-height:0;
  flex:0 0 auto;
}
#stage{
  background:#fff;
  display:block;
  touch-action:none;
  cursor:crosshair;
}
.canvas-hint{
  position:absolute; bottom:16px; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--border);
  padding:8px 16px; border-radius:999px;
  font-size:12px; color:var(--text-faint); pointer-events:none;
}

/* ============ Side panel ============ */
.side-panel{
  width:var(--panel-w); flex:0 0 auto;
  background:var(--panel);
  border-inline-start:1px solid var(--border);
  display:flex; flex-direction:column; min-height:0;
}
.panel-tabs{
  display:flex; border-bottom:1px solid var(--border); flex:0 0 auto;
}
.panel-tab{
  flex:1; background:transparent; border:none; color:var(--text-faint);
  padding:13px 8px; font-size:12.5px; cursor:pointer; border-bottom:2px solid transparent;
}
.panel-tab:hover{ color:var(--text-muted); }
.panel-tab.active{ color:var(--text); border-color:var(--accent-a); }

.panel-body{
  flex:1 1 auto; overflow-y:auto; padding:16px;
}
.empty-note{ color:var(--text-faint); font-size:12.5px; text-align:center; margin-top:30px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:12px; color:var(--text-muted); }
.field span{ display:flex; justify-content:space-between; }
.field span em{ font-style:normal; color:var(--text-faint); font-family:var(--font-mono); font-size:11px; }
.field input[type=text],.field input[type=number],.field textarea,.field select{
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 10px; color:var(--text); font-size:13px;
}
.field input[type=color]{
  -webkit-appearance:none; appearance:none; width:100%; height:34px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--panel-2); padding:3px; cursor:pointer;
}
.field input[type=range]{ accent-color:var(--accent-b); }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.section-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  margin:18px 0 10px; border-top:1px solid var(--border); padding-top:14px;
}
.props-actions{ display:flex; gap:8px; margin-top:18px; }
.props-actions button{ flex:1; }

/* Layers list */
.layers-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.layer-row{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-2); border:1px solid transparent; border-radius:var(--radius-sm);
  padding:8px 8px;
}
.layer-row.selected{ border-color:var(--accent-b); background:var(--panel-3); }
.layer-row button{ background:transparent; border:none; color:var(--text-faint); cursor:pointer; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.layer-row button:hover{ color:var(--text); }
.layer-row button svg{ width:15px; height:15px; }
.layer-name{
  flex:1; background:transparent; border:none; color:var(--text); font-size:12.5px;
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.layer-name:focus{ outline:1px solid var(--accent-b); border-radius:3px; }
.layer-thumb{
  width:22px; height:22px; border-radius:4px; flex:0 0 auto; border:1px solid var(--border);
}
.layer-reorder{ display:flex; flex-direction:column; }
.layer-reorder button{ width:16px; height:14px; }
.layer-reorder svg{ width:11px; height:11px; }

/* Fonts panel */
.dropzone{
  border:1.5px dashed var(--border); border-radius:var(--radius-md);
  padding:22px 10px; text-align:center; color:var(--text-faint); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.dropzone.dragover{ border-color:var(--accent-a); background:rgba(255,107,74,.06); color:var(--text-muted); }
.dropzone p{ margin:4px 0 0; font-size:13px; color:var(--text-muted); }
.muted-small{ font-size:11px; color:var(--text-faint); }

.font-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.font-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:16px;
}
.font-item .fname{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }
.font-item button{
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  border-radius:6px; padding:4px 10px; font-size:11px; cursor:pointer; flex:0 0 auto;
}
.font-item button:hover{ border-color:var(--accent-b); color:var(--text); }

/* ============ Command palette ============ */
.cmdk-overlay{
  position:fixed; inset:0; background:rgba(10,11,15,.6); backdrop-filter:blur(2px);
  z-index:100; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh;
}
.cmdk-box{
  width:min(560px, 92vw); background:var(--panel-2); border:1px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.cmdk-box input{
  width:100%; padding:16px; background:transparent; border:none; border-bottom:1px solid var(--border);
  color:var(--text); font-size:15px; outline:none;
}
.cmdk-box ul{ list-style:none; margin:0; padding:8px; max-height:50vh; overflow-y:auto; }
.cmdk-box li{
  padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:13.5px;
  display:flex; justify-content:space-between; color:var(--text-muted);
}
.cmdk-box li.active{ background:var(--panel-3); color:var(--text); }

/* Toast */
.toast{
  position:fixed; bottom:20px; inset-inline-start:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel-3); border:1px solid var(--border); color:var(--text);
  padding:10px 18px; border-radius:999px; font-size:12.5px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============ Mobile bottom bar ============ */
.mobile-tabbar{
  display:none;
  height:var(--tabbar-h); flex:0 0 auto;
  background:var(--panel); border-top:1px solid var(--border);
  align-items:stretch; justify-content:space-around;
}
.mobile-tabbar button{
  flex:1; background:transparent; border:none; color:var(--text-faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; gap:4px;
}
.mobile-tabbar button svg{ width:18px; height:18px; }
.mobile-tabbar button.active{ color:var(--accent-a); }

/* ============ Responsive ============ */
@media (max-width: 900px){
  :root{ --panel-w: 84vw; }
  .only-desktop{ display:none !important; }
  .only-mobile{ display:flex; }
  .mobile-tabbar{ display:flex; }

  .tool-rail{
    position:fixed; z-index:40; top:var(--topbar-h); bottom:var(--tabbar-h);
    inset-inline-start:0; transform:translateX(-110%);
    transition:transform .22s ease; box-shadow:20px 0 40px rgba(0,0,0,.3);
  }
  [dir="rtl"] .tool-rail{ transform:translateX(110%); }
  .tool-rail.open{ transform:translateX(0); }

  .side-panel{
    position:fixed; z-index:40; top:var(--topbar-h); bottom:var(--tabbar-h);
    inset-inline-end:0; width:min(360px, 88vw);
    transform:translateX(110%);
    transition:transform .22s ease; box-shadow:-20px 0 40px rgba(0,0,0,.3);
  }
  [dir="rtl"] .side-panel{ transform:translateX(-110%); }
  .side-panel.open{ transform:translateX(0); }

  .canvas-scroller{ padding:16px; }
  .cmdk-box{ margin-top:0; }
}

@media (max-width: 520px){
  .logo-word{ display:none; }
  .project-name{ display:none; }
}