@layer components{.folder-color-picker{z-index:var(--z-popover);gap:var(--sp-3);padding:var(--sp-3);background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex-direction:column;display:flex;position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0}.folder-color-picker-swatches{gap:var(--sp-2);grid-template-columns:repeat(5,1fr);display:grid}.folder-color-swatch{border-radius:var(--radius-full);background:var(--folder-hue);cursor:pointer;block-size:22px;inline-size:22px;transition:transform var(--duration-fast) var(--ease-out);border:0;padding:0}.folder-color-swatch:hover{transform:scale(1.12)}.folder-color-swatch[data-current]{box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--folder-hue)}.folder-color-picker-reset{padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-base);color:var(--color-text-muted);font-size:var(--text-size-xs);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);background:0 0;border:0}.folder-color-picker-reset:hover{background:var(--color-surface-secondary);color:var(--color-text-body)}@media (prefers-reduced-motion:reduce){.folder-color-swatch{transition:none}}}
@layer components{.folder-tree-start-here{--start-here-inset:var(--sp-2);margin-inline:var(--start-here-inset);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);margin-block-end:var(--sp-3)}.folder-tree-start-here>summary{column-gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);color:var(--color-text-heading);font-size:var(--text-size-sm);font-weight:var(--text-weight-semibold);cursor:pointer;-webkit-user-select:none;user-select:none;grid-template-columns:1fr auto;list-style:none;display:grid}.folder-tree-start-here>summary::-webkit-details-marker{display:none}.folder-tree-start-here>summary:after{content:"▾";color:var(--color-text-muted);transition:transform var(--duration-fast) var(--ease-out);grid-area:1/2}.folder-tree-start-here[open]>summary:after{transform:rotate(180deg)}.folder-tree-start-here summary small{color:var(--color-text-muted);font-size:var(--text-size-xs);font-weight:var(--text-weight-normal);grid-column:1}.folder-tree-start-here ol{padding:0 var(--sp-1) var(--sp-2);margin:0;list-style:none}.folder-tree-start-here button{align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius);color:var(--color-text);font-size:var(--text-size-sm);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-out);background:0 0;border:0;display:flex}.folder-tree-start-here button span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.folder-tree-start-here button:hover{background:var(--color-brand-subtle)}.folder-tree-start-here button[data-active]{background:var(--color-brand-subtle);color:var(--color-brand);font-weight:var(--text-weight-medium)}.folder-tree-start-here button:disabled{color:var(--color-text-muted);cursor:default}.folder-tree-start-here button data{color:var(--color-text-muted);font-size:var(--text-size-xs);flex-shrink:0}@media (prefers-reduced-motion:reduce){.folder-tree-start-here button,.folder-tree-start-here>summary:after{transition:none}}}
@layer components{.explorer-tree-header{justify-content:space-between;align-items:center;display:flex}.explorer-tree-header .folder-node-add{opacity:1}.folder-tree-inbox{align-items:center;gap:var(--sp-2);width:calc(100% - var(--sp-4));margin-inline:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-lg);background:var(--color-brand-subtle);color:var(--color-brand);font-size:var(--text-size-sm);font-weight:var(--text-weight-medium);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);border:0;margin-block-end:var(--sp-2);display:flex}.folder-tree-inbox svg{width:var(--sp-4);height:var(--sp-4);flex:none}.folder-tree-inbox span:first-of-type{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.folder-tree-inbox:hover{background:color-mix(in srgb, var(--color-brand) 14%, var(--color-surface))}.folder-tree-inbox[data-active]{background:linear-gradient(135deg, var(--color-banner-start), var(--color-banner-end));color:var(--color-white);font-weight:var(--text-weight-semibold);box-shadow:var(--shadow-sm)}.folder-tree-inbox[data-active] .folder-tree-inbox-count{color:var(--color-white);background:#ffffff38}.folder-tree-inbox[data-active] .folder-node-shelf-count{color:color-mix(in srgb, var(--color-white) 80%, transparent)}.folder-tree-inbox-count{min-inline-size:1.25rem;padding:0 var(--sp-1);border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-brand) 16%, var(--color-surface));color:var(--color-brand);font-size:var(--text-size-xs);font-weight:var(--text-weight-medium);text-align:center;flex-shrink:0;line-height:1.4}.folder-tree-inbox[data-drag-over]{outline:2px dashed var(--color-brand);outline-offset:-2px}@media (prefers-reduced-motion:reduce){.folder-tree-inbox{transition:none}}.folder-delete-confirm{gap:var(--sp-4);padding:var(--sp-5);flex-direction:column;display:flex}.folder-delete-confirm p{margin:0}.folder-delete-confirm-actions{gap:var(--sp-2);display:flex}}