.sidebar{
  position:fixed;left:0;top:0;height:100vh;height:100dvh;
  width:var(--sidebar-width);z-index:100;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
  overflow:hidden;
  box-shadow:4px 0 30px rgba(0,0,0,0.3);
}
.sidebar-open .sidebar{transform:translateX(0)}

.sidebar-header{
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-logo{
  font-size:1.2rem;font-weight:800;letter-spacing:-1px;
  color:var(--text-primary);
}
.sidebar-close{
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--transition);
  background:var(--bg-card);border:1px solid var(--border);
  font-size:0.85rem;color:var(--text-tertiary);
}
.sidebar-close:hover{background:var(--border);color:var(--text-primary)}

.sidebar-nav{
  padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-nav-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--radius-md);
  font-size:0.85rem;font-weight:500;color:var(--text-secondary);
  transition:var(--transition);text-decoration:none;
}
.sidebar-nav-link svg{width:18px;height:18px;fill:var(--text-tertiary);transition:var(--transition);flex-shrink:0}
.sidebar-nav-link:hover{background:rgba(108,92,231,0.08);color:var(--text-primary)}
.sidebar-nav-link:hover svg{fill:var(--accent)}

.sidebar-section{
  padding:12px 16px 8px;
  flex-shrink:0;
}
.sidebar-section-title{
  font-size:0.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--text-tertiary);margin-bottom:8px;
}

.sidebar-select-wrap select{
  width:100%;padding:10px 14px;border-radius:var(--radius-md);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-primary);font-size:0.85rem;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2398989d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color var(--transition);
}
.sidebar-select-wrap select:focus{border-color:var(--accent);outline:none}
.sidebar-select-wrap select option{background:var(--bg-card);color:var(--text-primary)}

.sidebar-subcats{
  display:flex;flex-wrap:wrap;gap:4px;
}
.sidebar-subcat-btn{
  padding:6px 14px;border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;
  cursor:pointer;transition:var(--transition);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-tertiary);
}
.sidebar-subcat-btn:hover{border-color:var(--accent);color:var(--text-primary);background:rgba(108,92,231,0.05)}
.sidebar-subcat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.sidebar-templates{
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;max-height:280px;padding-right:4px;
}
.sidebar-template-card{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius-md);
  background:var(--bg-card);border:1px solid var(--border);
  transition:var(--transition);cursor:pointer;text-decoration:none;
}
.sidebar-template-card:hover{border-color:var(--accent);transform:translateX(3px);background:rgba(108,92,231,0.03)}
.sidebar-template-img{
  width:56px;height:36px;border-radius:4px;overflow:hidden;
  background:var(--bg-primary);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;color:var(--text-tertiary);
}
.sidebar-template-img img{width:100%;height:100%;object-fit:cover}
.sidebar-template-name{font-size:0.78rem;font-weight:500;color:var(--text-secondary);line-height:1.3}
.sidebar-template-card:hover .sidebar-template-name{color:var(--text-primary)}

.sidebar-empty{
  padding:16px;text-align:center;font-size:0.8rem;color:var(--text-tertiary);
  background:var(--bg-card);border-radius:var(--radius-md);border:1px dashed var(--border);
}

.sidebar-toggle{
  position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:1001;
  width:42px;height:42px;border-radius:var(--radius-md);
  background:var(--bg-glass);backdrop-filter:blur(20px);
  border:1px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:left var(--transition),background var(--transition),border-color var(--transition);
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.sidebar-toggle svg{width:18px;height:18px;fill:var(--text-secondary);transition:var(--transition)}
.sidebar-toggle:hover{border-color:var(--accent);background:rgba(108,92,231,0.15)}
.sidebar-toggle:hover svg{fill:var(--accent)}
.sidebar-open .sidebar-toggle{left:calc(var(--sidebar-width) + 16px)}

@media(max-width:768px){
  .sidebar{width:85vw;z-index:999;top:0;height:100vh;height:100dvh}
  .sidebar-toggle{display:none}
  .sidebar-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.6);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    z-index:998;display:none;
  }
  .sidebar-overlay.open{display:block}
}