:root{
    --toolbar-bg:#2b2b2b;
    --toolbar-border:#3f3f3f;
    --accent:#4f9dff;
    --text:#eee;
  }
  html,body{
    margin:0; padding:0; width:100%; height:100%;
    overflow:hidden;
    background:#0f0f0f;
    font-family:'Vazirmatn', Tahoma, "Segoe UI", Arial, sans-serif;
    user-select:none;
  }
  #canvasWrap{
    position:absolute; top:0; left:0; right:0; bottom:0;
  }
  canvas{
    display:block;
    touch-action:none;
    cursor:crosshair;
  }

  #toolbar{
    position:fixed;
    top:20px; left:20px;
    background:var(--toolbar-bg);
    border:1px solid var(--toolbar-border);
    border-radius:12px;
    box-shadow:0 6px 20px rgba(0,0,0,.5);
    color:var(--text);
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:1000;
    width:200px;
  }
  #toolbarHandle{
    cursor:move;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 6px;
    border-bottom:1px solid var(--toolbar-border);
    margin-bottom:4px;
    font-size:13px;
    font-weight:bold;
    color:#aaa;
  }
  .row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .tool-btn{
    flex:1 1 auto;
    background:#3a3a3a;
    border:1px solid #4a4a4a;
    color:var(--text);
    border-radius:8px;
    padding:8px 6px;
    cursor:pointer;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    transition:.15s;
    min-width:40px;
  }
  .tool-btn:hover{ background:#484848; }
  .tool-btn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .tool-btn svg{ width:18px; height:18px; display:block; }

  input[type=range]{
    width:100%;
    accent-color: var(--accent);
  }
  input[type=color]{
    width:38px; height:32px;
    border:none;
    border-radius:6px;
    padding:0;
    background:none;
    cursor:pointer;
  }
  .colorRow{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .swatches{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
  }
  .swatch{
    width:20px; height:20px;
    border-radius:50%;
    border:2px solid #555;
    cursor:pointer;
  }
  .swatch.selected{
    border-color:#fff;
  }
  hr.sep{
    border:none;
    border-top:1px solid var(--toolbar-border);
    margin:4px 0;
  }
  #toolbar.collapsed .body{
    display:none;
  }
  #collapseBtn{
    background:none;
    border:none;
    color:#aaa;
    cursor:pointer;
    font-size:14px;
  }

  #sizePreviewWrap{
    display:flex;
    align-items:center;
    justify-content:center;
    height:36px;
  }
  #sizePreview{
    border-radius:50%;
    background:#000;
  }

  .icon-btn{
    background:#3a3a3a;
    border:1px solid #4a4a4a;
    color:var(--text);
    border-radius:8px;
    padding:8px;
    cursor:pointer;
    font-size:16px;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .icon-btn:hover{ background:#484848; }
  .icon-btn.danger:hover{ background:#7a2d2d; border-color:#a33; }
  .icon-btn svg{ width:18px; height:18px; }

  #saveBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13px;
  }
  #saveBtn svg{ width:16px; height:16px; }

  #toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:#222;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-size:13px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
    z-index:2000;
    border:1px solid #444;
    max-width:80vw;
    text-align:center;
  }
  #toast.show{ opacity:1; }

  .text-edit{
    position:absolute;
    min-width:40px;
    min-height:1.4em;
    outline:2px dashed var(--accent);
    background:transparent;
    color:inherit;
    font-family:'Vazirmatn', Tahoma, sans-serif;
    padding:2px 4px;
    white-space:pre-wrap;
    word-break:break-word;
    cursor:text;
    z-index:1500;
  }
  #textFormatBar{
    position:absolute;
    display:none;
    gap:4px;
    background:var(--toolbar-bg);
    border:1px solid var(--toolbar-border);
    border-radius:8px;
    padding:4px;
    z-index:1600;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
  }
  #textFormatBar button{
    background:#3a3a3a;
    border:1px solid #4a4a4a;
    color:var(--text);
    border-radius:6px;
    width:28px; height:28px;
    cursor:pointer;
    font-size:14px;
  }
  #textFormatBar button.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  #textFormatBar button.confirm{
    background:#2e7d4f;
    border-color:#2e7d4f;
    color:#fff;
  }

  @media (max-width:600px){
    #toolbar{ width:170px; top:10px; left:10px; }
    .tool-btn{ font-size:14px; padding:6px 4px; }
  }