/* — menu / dropdown — */
.dropdown{position:relative;display:inline-flex}
.menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;min-width:200px;background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:var(--sp-2);z-index:var(--z-dropdown);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast)}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu--start{inset-inline-end:auto;inset-inline-start:0}
.menu__label{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.menu__item{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2) var(--sp-3);border:0;background:none;border-radius:var(--r-sm);font:inherit;font-size:var(--fs-13);color:var(--text-secondary);cursor:pointer;text-align:start;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.menu__item:hover,.menu__item:focus-visible{background:var(--bg-hover);color:var(--text-primary)}
.menu__item svg{width:15px;height:15px;flex:none;opacity:.8}
.menu__item .kbd{margin-inline-start:auto}
.menu__item--danger{color:var(--danger)}
.menu__item--danger:hover,.menu__item--danger:focus-visible{background:var(--danger-soft)}
.menu__sep{height:1px;background:var(--border-subtle);margin:var(--sp-2) calc(var(--sp-1) * -1)}

/* — modal — */
.overlay{position:fixed;inset:0;background:rgba(4,4,6,.72);backdrop-filter:blur(4px);z-index:var(--z-overlay);display:grid;place-items:center;padding:var(--sp-5);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.overlay.is-open{opacity:1;visibility:visible}
.modal{width:min(520px,100%);background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);transform:translateY(8px) scale(.98);transition:transform var(--dur) var(--ease);max-height:85dvh;display:flex;flex-direction:column}
.overlay.is-open .modal{transform:none}
.modal__header{padding:var(--sp-5);border-block-end:1px solid var(--border-subtle);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.modal__title{font-size:var(--fs-16);font-weight:600;letter-spacing:var(--ls-tight)}
.modal__desc{margin-block-start:var(--sp-1);font-size:var(--fs-13);color:var(--text-muted)}
.modal__body{padding:var(--sp-5);overflow-y:auto}
.modal__footer{padding:var(--sp-4) var(--sp-5);border-block-start:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3)}
.modal__close{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:var(--sp-1);line-height:0;border-radius:var(--r-xs)}
.modal__close:hover{color:var(--text-primary);background:var(--bg-hover)}

/* — command palette — */
.palette{width:min(620px,100%);align-self:start;margin-block-start:10vh;background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl),var(--glow-accent);overflow:hidden;transform:translateY(8px) scale(.985);transition:transform var(--dur) var(--ease)}
.overlay.is-open .palette{transform:none}
.palette__search{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-block-end:1px solid var(--border-subtle)}
.palette__search svg{width:18px;height:18px;color:var(--text-muted);flex:none}
.palette__input{flex:1;background:none;border:0;outline:none;font:inherit;font-size:var(--fs-16);color:var(--text-primary)}
.palette__input::placeholder{color:var(--text-muted)}
.palette__list{max-height:340px;overflow-y:auto;padding:var(--sp-2)}
.palette__group{padding:var(--sp-3) var(--sp-3) var(--sp-1);font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.palette__item{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3);border:0;background:none;border-radius:var(--r-sm);font:inherit;font-size:var(--fs-13);color:var(--text-secondary);cursor:pointer;text-align:start}
.palette__item svg{width:16px;height:16px;color:var(--text-muted);flex:none}
.palette__item .kbd{margin-inline-start:auto}
.palette__item.is-active{background:var(--accent-soft);color:var(--text-primary)}
.palette__item.is-active svg{color:var(--accent-hover)}
.palette__footer{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);border-block-start:1px solid var(--border-subtle);background:var(--bg-raised);font-size:var(--fs-11);color:var(--text-muted)}

/* — toast — */
.toast-stack{position:fixed;inset-block-end:var(--sp-5);inset-inline-end:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);z-index:var(--z-toast);pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:280px;max-width:380px;padding:var(--sp-4);background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:var(--fs-13);color:var(--text-secondary);pointer-events:auto;animation:toastIn var(--dur-slow) var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.toast.is-leaving{animation:toastOut var(--dur) var(--ease) both}
@keyframes toastOut{to{opacity:0;transform:translateY(4px) scale(.98)}}
.toast__icon{width:16px;height:16px;flex:none;margin-block-start:2px;color:var(--accent-hover)}
.toast--success .toast__icon{color:var(--success)}
.toast--danger .toast__icon{color:var(--danger)}
.toast--warning .toast__icon{color:var(--warning)}
.toast__title{color:var(--text-primary);font-weight:600;margin-block-end:2px}
.toast__close{margin-inline-start:auto;background:none;border:0;color:var(--text-muted);cursor:pointer;line-height:0;padding:0}

/* — empty state — */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-10) var(--sp-5);gap:var(--sp-3)}
.empty__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--bg-raised);border:1px solid var(--border-subtle);color:var(--text-muted);margin-block-end:var(--sp-1)}
.empty__icon svg{width:20px;height:20px}
.empty__title{font-size:var(--fs-14);font-weight:600;color:var(--text-primary)}
.empty__desc{font-size:var(--fs-13);color:var(--text-muted);max-width:42ch}

/* — breadcrumb — */
.crumbs{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-12);color:var(--text-muted);flex-wrap:wrap}
.crumbs a{color:var(--text-muted);transition:color var(--dur-fast) var(--ease)}
.crumbs a:hover{color:var(--text-secondary)}
.crumbs__sep{opacity:.5}
[dir="rtl"] .crumbs__sep{transform:scaleX(-1)}
.crumbs [aria-current="page"]{color:var(--text-primary)}

/* — pagination — */
.pager{display:flex;align-items:center;gap:var(--sp-1)}
.pager__btn{min-width:30px;height:30px;display:inline-grid;place-items:center;padding-inline:var(--sp-2);border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--text-secondary);font:inherit;font-size:var(--fs-12);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.pager__btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.pager__btn.is-active{background:var(--bg-active);color:var(--text-primary);border-color:var(--border)}
.pager__btn:disabled{opacity:.35;pointer-events:none}
.pager__btn svg{width:14px;height:14px}
[dir="rtl"] .pager__btn svg{transform:scaleX(-1)}