/* app.css — shell, sidebar, topbar */

#app { display:flex; height:100vh; overflow:hidden; }

/* ═══ SIDEBAR ═══ */
#sidebar {
  width:var(--sb-w); min-width:var(--sb-w); background:var(--bg2);
  border-right:1.5px solid var(--border); display:flex; flex-direction:column;
  z-index:100; overflow:hidden; transition:transform .24s var(--ease);
}
.sb-logo {
  display:flex; align-items:center; gap:9px;
  padding:13px 14px 12px; border-bottom:1.5px solid var(--border); flex-shrink:0;
}
.sb-logomark {
  width:29px; height:29px; background:var(--ink); border-radius:var(--r-xs);
  display:flex; align-items:center; justify-content:center;
  color:var(--on-ink); font-size:13px; flex-shrink:0;
}
.sb-appname { flex:1; font-size:18px; font-weight:800; letter-spacing:-.3px; color:var(--ink); }
.sb-dot { color:var(--ink2); font-weight:600; }
.sb-close-btn {
  display:none; width:28px; height:28px; border-radius:var(--r-xs);
  align-items:center; justify-content:center; font-size:16px; color:var(--ink4);
}
.sb-close-btn:hover { background:var(--bg3); color:var(--ink); }

.sb-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:8px; }

.sb-section-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 14px 4px;
}
.sb-section-lbl { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink4); }
.sb-icon-btn {
  width:22px; height:22px; border-radius:5px; display:flex; align-items:center;
  justify-content:center; font-size:15px; color:var(--ink4); transition:all var(--t);
}
.sb-icon-btn:hover { background:var(--bg3); color:var(--ink); }

/* Workspace list */
.sb-ws-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; margin:1px 8px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t); position:relative; user-select:none;
}
.sb-ws-item i { font-size:20px; color:var(--ink4); flex-shrink:0; }
.sb-ws-name { flex:1; font-size:16px; font-weight:600; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-ws-item:hover { background:var(--bg3); }
.sb-ws-item.active { background:var(--ink); }
.sb-ws-item.active i, .sb-ws-item.active .sb-ws-name { color:var(--on-ink); }
.sb-ws-acts { display:flex; gap:2px; opacity:0; transition:opacity var(--t); }
.sb-ws-item:hover .sb-ws-acts, .sb-ws-item.active .sb-ws-acts { opacity:1; }
.sb-ws-acts button { width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink3); transition:all var(--t); }
.sb-ws-item.active .sb-ws-acts button { color:rgba(255,255,255,.4); }
.sb-ws-acts button:hover { background:var(--bg4); color:var(--ink); }
.sb-ws-item.active .sb-ws-acts button:hover { background:rgba(255,255,255,.15); color:var(--on-ink); }

.sb-empty { padding:6px 14px; font-size:11px; color:var(--ink4); font-style:italic; }

.sb-viewall-btn {
  display:flex; align-items:center; gap:7px; width:calc(100% - 16px); margin:2px 8px;
  padding:6px 10px; border-radius:var(--r-sm); font-size:11px; font-weight:600; color:var(--ink4);
  transition:all var(--t); cursor:pointer;
}
.sb-viewall-btn i { font-size:13px; }
.sb-viewall-btn:hover { background:var(--bg3); color:var(--ink3); }

.sb-divider { height:1px; background:var(--border); margin:8px 0; }

/* Nav buttons */
.sb-nav-btn {
  display:flex; align-items:center; gap:9px;
  width:calc(100% - 16px); margin:1px 8px; padding:10px 10px;
  border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--ink3);
  transition:background var(--t),color var(--t); cursor:pointer; position:relative; text-align:left;
}
.sb-nav-btn i { font-size:20px; flex-shrink:0; width:18px; text-align:center; color:var(--ink4); transition:color var(--t); }
.sb-nav-btn span { flex:1; font-size:16px; font-weight:600; }
.sb-nav-btn em { font-style:normal; font-size:10px; font-weight:700; background:var(--bg4); color:var(--on-ink); padding:1px 5px; border-radius:3px; margin-left:auto; display:none; }
.sb-nav-btn:hover { background:var(--bg3); color:var(--ink2); }
.sb-nav-btn:hover i { color:var(--ink3); }
.sb-nav-btn.active { background:var(--ink); color:var(--on-ink); }
.sb-nav-btn.active i { color:var(--on-ink); }
.sb-nav-btn.active em { background:var(--on-ink); color:var(--ink); display:inline-flex; }
.sb-nav-btn.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:14px; background:var(--on-ink); border-radius:0 3px 3px 0; }

.sb-footer { border-top:1.5px solid var(--border); padding:8px; flex-shrink:0; }

/* ═══ MAIN + TOPBAR ═══ */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
#topbar {
  height:var(--tb-h); min-height:var(--tb-h); border-bottom:1.5px solid var(--border);
  display:flex; align-items:center; gap:10px; padding: 0 16px; background:var(--bg); flex-shrink:0;
}
.tb-menu-btn { display:none; width:38px; height:38px; border-radius:var(--r-sm); display:none; align-items:center; justify-content:center; font-size:18px; color:var(--ink3); flex-shrink:0; }
.tb-menu-btn:hover { background:var(--bg3); color:var(--ink); }
.tb-bc { flex:1; display:flex; align-items:center; gap:3px; min-width:0; overflow:hidden; }
.bc-seg { font-size:16px; font-weight:600; color:var(--ink4); cursor:pointer; white-space:nowrap; transition:color var(--t); }
.bc-seg:hover { color:var(--ink); }
.bc-cur { color:var(--ink); cursor:default; font-size:16px; font-weight:700; }
.bc-sep { font-size:14px; color:var(--ink4); flex-shrink:0; }
.tb-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ═══ CONTENT + PAGES ═══ */
#content { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.page { display:none; flex:1; flex-direction:column; overflow:hidden; }
.page.active { display:flex; animation:fade-in .16s var(--ease); }
.page-scroll { flex:1; overflow-y:auto; padding:24px; }

/* Page inner containers */
.pi      { max-width:920px; margin:0 auto; width:100%; }
.pi--mid { max-width:680px; }
.pi--sm  { max-width:560px; }

/* Page header */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.page-title { font-size:22px; font-weight:800; letter-spacing:-.4px; color:var(--ink); line-height:1.2; }
.page-sub   { font-size:13px; color:var(--ink3); margin-top:3px; }

/* Collection grid */
.cg { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }

/* ═══ DIALOG ═══ */
.dlg-ov { display:none; position:fixed; inset:0; background:rgba(15,14,12,.45); z-index:500; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.dlg-ov.open { display:flex; }
.dlg-box { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:24px; width:min(480px,100%); max-height:90vh; overflow-y:auto; box-shadow:var(--sh-xl); animation:scale-in .16s var(--ease); }
.dlg-icon  { font-size:30px; margin-bottom:8px; }
.dlg-title { font-size:16px; font-weight:800; margin-bottom:5px; }
.dlg-desc  { font-size:13px; color:var(--ink3); line-height:1.6; margin-bottom:14px; }
#dlg-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* ═══ TOAST ═══ */
#toast-wrap { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:var(--r-sm); font-size:13px; font-weight:500; box-shadow:var(--sh-lg); pointer-events:all; animation:slide-up .18s var(--ease); border:1.5px solid transparent; max-width:300px; }
.toast i { font-size:15px; flex-shrink:0; }
.toast-default { background:var(--ink); color:#fff; }
.toast-success { background:#fff; color:var(--success); border-color:var(--success); }
.toast-error   { background:#fff; color:var(--error);   border-color:var(--error); }
.toast-warn    { background:#fff; color:var(--warn);    border-color:var(--warn); }
.toast-out { animation:toast-out .2s var(--ease) forwards; }
@keyframes toast-out { to { opacity:0; transform:translateX(110%); } }

/* ═══ MOBILE ═══ */
#sb-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.38); z-index:99; }
#sb-backdrop.show { display:block; }

@media (max-width:680px) {
  .tb-menu-btn  { display:inline-flex !important; }
  .sb-close-btn { display:inline-flex !important; }
  #sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); box-shadow:var(--sh-xl); }
  .page-scroll { padding:16px; }
  .page-title  { font-size:18px; }
  .pi { padding:0; }
}