/* Light, collapsible application navigation. */
#sidebar{--ns-surface:#f4f7f2;--ns-line:#e1e8dc;--ns-ink:#1c3628;--ns-text:#566b5a;--ns-muted:#8b9a8a;--ns-hover:#e8eee4;--ns-accent:#2f6b46;--ns-accent-soft:#dcebd6;
 width:236px;min-width:236px;height:calc(100dvh - 20px);margin:10px 0 10px 10px;top:10px;background:var(--ns-surface);border:1px solid var(--ns-line);border-radius:18px;color:var(--ns-ink);box-shadow:0 1px 2px #1c362808,0 8px 24px #1c36280a;transition:width .24s ease,min-width .24s ease;overflow:visible}
#sidebar .ns-head{position:relative;flex:none;height:68px;display:flex;align-items:center}
#sidebar .brand{height:auto;width:100%;padding:0 20px;gap:12px;font-size:23px;color:var(--ns-ink);letter-spacing:-1.2px;overflow:hidden;white-space:nowrap}
#sidebar .brand-mark{flex:none;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:3px;transform:rotate(-12deg)}
#sidebar .brand-mark span{background:var(--ns-accent);border-radius:3px}#sidebar .brand-mark span:nth-child(2),#sidebar .brand-mark span:nth-child(3){background:#86b578}
#sidebar .brand-dot{color:#86b578}#sidebar .brand small{font-size:8px;color:var(--ns-muted);letter-spacing:2.4px;margin-top:6px}
#sidebar .ns-toggle{position:absolute;right:-12px;top:22px;z-index:3;width:24px;height:24px;display:grid;place-items:center;background:#fff;border:1px solid var(--ns-line);border-radius:8px;color:var(--ns-muted);box-shadow:0 1px 3px #1c362814;cursor:pointer;opacity:0;transition:opacity .18s,background .18s,color .18s}
@media(min-width:901px){#sidebar .ns-toggle{display:none}
 #sidebar .brand{cursor:pointer;margin:0 10px;width:calc(100% - 20px);padding:8px 10px;border-radius:12px;transition:background .18s}
 #sidebar .brand:hover{background:var(--ns-hover)}#sidebar .brand-mark{transition:transform .3s ease}#sidebar .brand:hover .brand-mark{transform:rotate(33deg) scale(1.08)}
 .layout.nav-collapsed #sidebar .brand{margin:0 auto;width:48px;height:48px;padding:0}}
#sidebar .ns-toggle:hover{background:var(--ns-hover);color:var(--ns-ink)}#sidebar .ns-toggle svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .24s}

/* Workspace switcher */
#sidebar .sidebar-store{padding:0 12px 10px}#sidebar .sidebar-store-label{display:none}
#sidebar .store-switch{border:1px solid var(--ns-line);background:#fff;color:var(--ns-ink);border-radius:12px;padding:8px 10px 8px 8px;gap:10px;min-height:50px;box-shadow:0 1px 2px #1c36280a;transition:border-color .18s,box-shadow .18s}
#sidebar .store-switch:hover{border-color:#cad8c4;box-shadow:0 2px 8px #1c362812}
#sidebar .store-icon{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#3d7b52,#86b578);color:#fff;font-size:13px;font-weight:700;flex:none;box-shadow:inset 0 0 0 1px #ffffff33}
#sidebar .store-switch-copy{min-width:0}#sidebar .store-switch-copy strong{font-size:12px;font-weight:650;letter-spacing:-.1px}
#sidebar .store-switch-copy small{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ns-muted)}
#sidebar .store-switch-copy small::before{content:'';width:6px;height:6px;border-radius:50%;background:#4cae6a;box-shadow:0 0 0 2px #4cae6a26}
#sidebar .store-switch>.icon{color:var(--ns-muted);width:12px;flex:none;margin-left:auto;stroke-width:2.4}
#sidebar .store-menu{top:60px;left:12px;right:12px;min-width:200px;border-radius:12px;padding:5px;box-shadow:0 16px 40px #1c36281f;border-color:var(--ns-line)}#sidebar .store-menu button{font-size:12px;border-radius:8px}#sidebar .store-menu button:hover,#sidebar .store-menu button.selected{background:var(--ns-hover)}

/* Command search */
#sidebar .ns-search{display:flex;align-items:center;gap:9px;width:calc(100% - 24px);margin:0 12px 14px;height:36px;padding:0 8px 0 11px;background:#fff9;border:1px solid var(--ns-line);border-radius:10px;color:var(--ns-muted);font:500 12px 'DM Sans',sans-serif;cursor:pointer;flex:none;transition:background .18s,border-color .18s,color .18s}
#sidebar .ns-search:hover{background:#fff;border-color:#cad8c4;color:var(--ns-text)}#sidebar .ns-search .icon{width:15px;height:15px;flex:none;stroke-width:2.4}
#sidebar .ns-search span{flex:1;text-align:left;white-space:nowrap;overflow:hidden}
#sidebar .ns-search kbd{font:600 10px 'DM Sans',sans-serif;color:var(--ns-muted);background:var(--ns-surface);border:1px solid var(--ns-line);border-bottom-width:2px;border-radius:5px;padding:1px 5px}

/* Navigation */
#sidebar .sidebar-nav{padding:0 12px;scrollbar-width:thin;scrollbar-color:#d6e2d1 transparent;overflow-x:hidden;min-height:0}
#sidebar .nav-label{font-size:10px;letter-spacing:.9px;font-weight:650;color:var(--ns-muted);padding:0 10px 7px;text-transform:uppercase}#sidebar .nav-label-spaced{padding-top:20px}
#sidebar .nav-item{min-height:38px;padding:9px 10px;border-radius:10px;color:var(--ns-text);gap:11px;font:500 13px 'DM Sans',sans-serif;white-space:nowrap;margin-bottom:2px;position:relative;transition:background .16s,color .16s,box-shadow .16s}
#sidebar .nav-item:hover:not(.active){background:var(--ns-hover);color:var(--ns-ink)}
#sidebar .nav-item.active{background:#fff;color:var(--ns-ink);font-weight:650;box-shadow:0 1px 2px #1c362814,0 0 0 1px #e1e8dc}
#sidebar .nav-item.active::before{content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--ns-accent)}
#sidebar .nav-item .icon{width:18px;height:18px;flex:none;color:var(--ns-text);stroke-width:2.4;transition:color .16s}
#sidebar .nav-item:hover .icon{color:var(--ns-ink)}#sidebar .nav-item.active .icon{width:18px;height:18px;color:var(--ns-accent)}
#sidebar .nav-item span{overflow:hidden}
#sidebar .nav-item em,#sidebar .nav-item.active em{margin-left:auto;font-size:10px;font-style:normal;font-weight:700;background:var(--ns-accent);color:#fff;border-radius:999px;min-width:20px;height:18px;line-height:18px;padding:0 6px;text-align:center}

/* Footer: plan usage + profile */
#sidebar .sidebar-bottom{padding:10px 12px 12px;flex:none}#sidebar .sidebar-bottom>.nav-item{margin-bottom:10px}
#sidebar .ns-usage{margin:0 0 10px;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--ns-line);box-shadow:0 1px 2px #1c36280a}
#sidebar .ns-usage-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 11px 'DM Sans',sans-serif;color:var(--ns-ink)}
#sidebar .ns-usage-top b{font:700 9px 'DM Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--ns-accent);background:var(--ns-accent-soft);border-radius:999px;padding:3px 7px}
#sidebar .ns-usage-bar{height:6px;margin:10px 0 7px;border-radius:999px;background:#edf2ea;overflow:hidden}#sidebar .ns-usage-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3d7b52,#86b578)}
#sidebar .ns-usage small{display:flex;justify-content:space-between;font:500 10px 'DM Sans',sans-serif;color:var(--ns-muted)}#sidebar .ns-usage small strong{color:var(--ns-text);font-weight:600}
#sidebar .profile-button{padding:10px 6px 0;border-top:1px solid var(--ns-line);color:var(--ns-ink);gap:10px;min-height:52px;white-space:nowrap;border-radius:0}
#sidebar .profile-button strong{font-size:12px;font-weight:650}#sidebar .profile-button small{font-size:10px;color:var(--ns-muted)}#sidebar .profile-button>.icon{color:var(--ns-muted);width:15px;flex:none;stroke-width:2.4}
#sidebar .profile-avatar{position:relative;width:32px;height:32px;background:#d8e7d0;color:var(--ns-accent);font-size:12px;font-weight:700;flex:none;overflow:visible}
#sidebar .profile-avatar::after{content:'';position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#4cae6a;border:2px solid var(--ns-surface)}
#sidebar :is(button,a):focus-visible{outline:2px solid #6e9a68;outline-offset:2px}
.ns-tooltip{position:fixed;z-index:1000;pointer-events:none;background:#1c3628;color:#f4f8ee;border-radius:8px;padding:7px 10px;font:500 11px 'DM Sans',sans-serif;box-shadow:0 6px 18px #1c36282e;white-space:nowrap}.ns-tooltip[hidden]{display:none}

/* Top bar: sits on the canvas, aligned with the brand row; a hairline appears once content scrolls under it. */
@media(min-width:901px){
 .topbar{height:78px;padding:10px 36px 0;background:#f6f8f5cc;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
 .topbar.ns-scrolled{border-bottom-color:#e1e8dc;box-shadow:0 6px 18px #1c36280a}
 .topbar .breadcrumb{font-size:13px;gap:8px;color:#8b9a8a}.topbar .breadcrumb strong{color:#1c3628;font-weight:650}.topbar .crumb-sep{color:#c9d3c6}
 .topbar #breadcrumb-store{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border:1px solid #e1e8dc;border-radius:999px;background:#fff;color:#566b5a;font-weight:500}
 .topbar #breadcrumb-store::before{content:attr(data-letter);display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:linear-gradient(140deg,#3d7b52,#86b578);color:#fff;font-size:10px;font-weight:700}
 .topbar .topbar-right{gap:10px}.topbar .demo-pill{border:1px solid #d6e6cf;background:#eef6e9}
 .topbar .icon-button{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid #e1e8dc}.topbar .icon-button:hover{background:#eef3ea}
 .topbar .top-avatar{width:38px;height:38px;box-shadow:0 0 0 2px #fff,0 0 0 3px #e1e8dc}
}
/* Command palette */
.ns-palette{width:min(520px,calc(100vw - 32px));margin:12vh auto auto;padding:0;border:1px solid #e1e8dc;border-radius:16px;background:#fff;color:#1c3628;box-shadow:0 30px 80px #1c362838;font-family:'DM Sans',sans-serif;overflow:hidden}
.ns-palette::backdrop{background:#16291f59;backdrop-filter:blur(3px)}
.ns-palette-field{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #edf1ea;color:#8b9a8a}.ns-palette-field .icon{width:17px;height:17px;flex:none}
.ns-palette-field input{flex:1;border:0;outline:0;background:none;font:500 15px 'DM Sans',sans-serif;color:#1c3628}
.ns-palette-field kbd,.ns-palette-foot kbd{font:600 10px 'DM Sans',sans-serif;color:#8b9a8a;background:#f4f7f2;border:1px solid #e1e8dc;border-bottom-width:2px;border-radius:5px;padding:1px 5px}
.ns-palette-list{list-style:none;margin:0;padding:6px;max-height:320px;overflow:auto}
.ns-palette-list li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:500;color:#566b5a;cursor:pointer}
.ns-palette-list li .icon{width:17px;height:17px;color:#8b9a8a}.ns-palette-list li small{margin-left:auto;font-size:10px;color:#8b9a8a}
.ns-palette-list li[aria-selected=true]{background:#eef4ea;color:#1c3628}.ns-palette-list li[aria-selected=true] .icon{color:#2f6b46}
.ns-palette-empty{padding:22px;text-align:center;font-size:12px;color:#8b9a8a}
.ns-palette-foot{display:flex;gap:14px;padding:9px 16px;border-top:1px solid #edf1ea;font-size:10px;color:#8b9a8a;background:#fafbf9}

@media(min-width:901px){
 .layout.nav-collapsed #sidebar{width:72px;min-width:72px}
 .layout.nav-collapsed #sidebar .brand{justify-content:center}.layout.nav-collapsed #sidebar .brand>span:last-child{display:none}
 .layout.nav-collapsed #sidebar .ns-toggle svg{transform:rotate(-90deg)}
 .layout.nav-collapsed #sidebar .sidebar-store{padding:0 11px 10px}.layout.nav-collapsed #sidebar .store-switch{padding:8px;justify-content:center;min-height:48px}.layout.nav-collapsed #sidebar .store-switch-copy,.layout.nav-collapsed #sidebar .store-switch>.icon{display:none}
 .layout.nav-collapsed #sidebar .ns-search{width:48px;margin:0 auto 14px;padding:0;justify-content:center}.layout.nav-collapsed #sidebar .ns-search :is(span,kbd){display:none}
 .layout.nav-collapsed #sidebar .sidebar-nav{padding:0 12px}.layout.nav-collapsed #sidebar .nav-label{font-size:0;height:12px;padding:0}.layout.nav-collapsed #sidebar .nav-label-spaced{height:22px;margin:0 8px 10px;border-bottom:1px solid var(--ns-line)}
 .layout.nav-collapsed #sidebar .nav-item{justify-content:center;padding:11px 0;min-height:42px}.layout.nav-collapsed #sidebar .nav-item>span{display:none}
 .layout.nav-collapsed #sidebar .nav-item em{position:absolute;top:3px;right:3px;font-size:8px;min-width:15px;height:15px;line-height:15px;padding:0 4px;box-shadow:0 0 0 2px var(--ns-surface)}
 .layout.nav-collapsed #sidebar .ns-usage{display:none}
 .layout.nav-collapsed #sidebar .sidebar-bottom{padding:10px 12px 12px}.layout.nav-collapsed #sidebar .profile-button{padding:10px 0 0;justify-content:center}.layout.nav-collapsed #sidebar .profile-button>span:nth-child(2),.layout.nav-collapsed #sidebar .profile-button>.icon{display:none}
 .layout.nav-collapsed #sidebar .store-menu{left:62px;top:0;right:auto;width:204px}
}
@media(max-width:900px){#sidebar{position:fixed;left:-260px;top:10px;margin:0;bottom:10px;transition:left .22s ease;height:calc(100dvh - 20px);box-shadow:0 12px 50px #1c362824}.layout.menu-open #sidebar{left:10px}#sidebar .ns-toggle{right:12px;top:22px;opacity:1;background:transparent;border-color:transparent;box-shadow:none}#sidebar .ns-toggle svg{transform:rotate(90deg)}}
@media(max-height:720px){#sidebar .ns-usage{display:none}}
@media(prefers-reduced-motion:reduce){#sidebar,#sidebar *{transition:none!important}}