:root{--bg-page:#F2EEE6;--bg-surface:#E4DDD1;--text-primary:#384652;--text-secondary:#697784;--accent-primary:#6E8798;--success:#3E8E41;--warning:#E6A23C;--error:#D93025;--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;--font-mono:"SF Mono","Fira Code","Fira Mono",Menlo,Consolas,monospace;
/* ── Extended token aliases (used by newer templates) ── */
--border:rgba(228,221,209,.9);--border-subtle:rgba(228,221,209,.8);--border-default:rgba(110,135,152,.28);--border-input:rgba(228,221,209,.8);--bg-input:#fff;--bg-subtle:#f9f8f6;--bg-elevated:#fff;--bg-code:#1a1a2e;--surface-1:#fff;--surface-2:rgba(228,221,209,.4);--text-muted:#697784;--color-ok:#16a34a;--color-warn:#d97706;--color-err:#dc2626;--color-danger:#ef4444;--accent:#6E8798;--ok:#3E8E41}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:.938rem;color:var(--text-primary);background:var(--bg-page);line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-page)}
::-webkit-scrollbar-thumb{background:var(--bg-surface);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}

/* TOP BAR */
.ds-topbar{display:none}
.ds-topbar__t{font-size:1.1rem;font-weight:700;color:var(--text-primary)}
.ds-topbar__t span{color:var(--accent-primary);margin-right:8px}
.ds-topbar__v{font-size:.813rem;color:var(--text-secondary);padding:2px 8px;background:var(--bg-surface);border-radius:4px}

/* LEFT SIDEBAR */
.ds-sb{position:fixed;top:0;left:0;bottom:0;width:256px;background:var(--bg-surface);border-right:1px solid rgba(228,221,209,.5);overflow-y:hidden;z-index:1000;padding:0;display:flex;flex-direction:column}
.ds-sb__nav{flex:1;overflow-y:auto;padding-bottom:8px}
.ds-sb__footer{flex-shrink:0;border-top:1px solid rgba(228,221,209,.5);padding:8px 0}
.ds-sb__brand{height:64px;display:flex;align-items:center;padding:0 1.5rem 0 19px;flex-shrink:0}.ds-sb__brand .ds-sb__brand-link{display:flex;align-items:center;gap:11px;text-decoration:none;margin:0;padding:0}.ds-sb__mark{width:26px;height:26px;flex-shrink:0}.ds-sb__t{font-size:1.25rem;font-weight:700;letter-spacing:-.025em;color:var(--text-primary);margin:0!important;line-height:1}.ds-sb__sub{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text-secondary);margin-top:.25rem}
.ds-sb a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;border-radius:6px;margin:0 8px 2px;transition:all .2s ease}
.ds-sb a:hover{background:rgba(110,135,152,.1);color:var(--text-primary)}
.ds-sb a.active{background:rgba(110,135,152,.15);color:var(--text-primary);box-shadow:none;border-left:3px solid var(--accent-primary);border-radius:0 6px 6px 0;margin-left:8px;padding-left:9px}
.ds-sb a[data-tooltip]{position:relative}
.app-shell--collapsed .ds-sb a.active{border-left:none;border-radius:6px;margin-left:8px;padding-left:10px}
.app-nav__icon{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:2rem;padding:0;border-radius:.7rem;background:transparent;color:var(--accent-primary);flex-shrink:0}
.lucide-svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app-nav__glyph{width:1rem;height:1rem}

/* MAIN CONTENT */
.ds-main{margin-left:256px;padding:0 48px 48px;max-width:1120px}
.app-topline{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0;margin-bottom:24px;border-bottom:1px solid rgba(228,221,209,.8)}
.app-topline__start{display:flex;align-items:center;gap:12px;min-width:0}
.app-topline__meta{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}
.app-topline__aux{font-size:.813rem;color:var(--text-secondary)}
.app-topline__account{display:flex;align-items:center;gap:10px;margin-left:auto}
.app-topline__account-name{font-size:.875rem;font-weight:600;color:var(--text-primary)}
.app-topline__account-btn{gap:6px}
.app-alert-stack{display:grid;gap:12px;margin-bottom:24px}
.app-mobile-menu-toggle{display:none!important}
.app-mobile-overlay{display:none}
.app-sidebar-toggle{position:absolute;left:-48px;top:50%;transform:translate(-50%,-50%);z-index:1002;flex-shrink:0;background:#fff;border-color:rgba(228,221,209,.9);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.app-sidebar-toggle:hover:not(:disabled){background:#fff}
.app-page{display:flex;flex-direction:column;gap:24px}
.app-page__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.app-page__eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-primary);margin-bottom:6px}
.app-page__title{font-size:1.875rem;line-height:1.1;letter-spacing:-.03em;margin:0}
.app-page__subtitle{margin:8px 0 0;color:var(--text-secondary);max-width:760px}
.app-page__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:-8px}
.app-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(228,221,209,.65);color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:600;transition:all .15s ease}
.app-tab:hover{color:var(--text-primary);background:#fff}
.app-tab.active{background:#fff;color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.app-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.app-card-link{display:block;padding:18px;border:1px solid var(--bg-surface);border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .15s ease,box-shadow .15s ease}
.app-card-link:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.app-card-link__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.app-card-link__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.9rem;background:rgba(110,135,152,.14);color:var(--accent-primary);flex-shrink:0}
.app-card-link__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-primary);margin-bottom:6px}
.app-card-link__title{font-size:1rem;font-weight:700;margin-bottom:4px}
.app-card-link__desc{font-size:.875rem;color:var(--text-secondary)}
.app-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.app-meta{padding:14px 16px;background:#fff;border:1px solid var(--bg-surface);border-radius:12px}
.app-meta__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}
.app-meta__value{margin-top:6px;font-family:var(--font-mono);font-size:.875rem;word-break:break-word}
.app-placeholder{padding:28px;background:#fff;border:1px solid var(--bg-surface);border-radius:16px;max-width:760px}
.app-placeholder__badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(110,135,152,.15);color:var(--accent-primary);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.app-placeholder__title{margin:0 0 8px;font-size:1.5rem}
.app-placeholder__desc{margin:0;color:var(--text-secondary);max-width:48rem}
.app-placeholder__list{margin-top:16px;padding-left:18px;color:var(--text-secondary)}
.app-frame{width:100%;height:min(78vh,980px);border:1px solid var(--bg-surface);border-radius:16px;background:#fff}
.ds-section{margin-bottom:48px;padding-top:12px;scroll-margin-top:72px}
.ds-section__title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:24px}
.ds-section__desc{color:var(--text-secondary);margin-bottom:24px;max-width:640px;line-height:1.7}
h1,h2,h3,h4{color:var(--text-primary);line-height:1.3;margin-bottom:12px}
h3{font-size:1.5rem;font-weight:700}
h4{font-size:1.25rem;font-weight:700}
p{margin-bottom:12px}
.mono{font-family:var(--font-mono);font-size:.813rem}
.small{font-size:.813rem;color:var(--text-secondary)}
.label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
hr{border:none;border-top:1px solid var(--bg-surface);margin:24px 0}
.ds-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.ds-col{display:flex;flex-direction:column;gap:12px}
.ds-mt-3{margin-top:12px}.ds-mt-4{margin-top:16px}.ds-mt-5{margin-top:24px}
.ds-mb-2{margin-bottom:8px}.ds-mb-3{margin-bottom:12px}.ds-mb-4{margin-bottom:16px}.ds-mb-5{margin-bottom:24px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-family:var(--font-sans);font-size:.938rem;font-weight:500;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;user-select:none;white-space:nowrap;line-height:1;background:rgba(110,135,152,.2);color:var(--text-primary);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn:hover,.btn:focus{text-decoration:none}
.btn-main{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}
.btn-main:hover:not(:disabled){background:rgba(110,135,152,.9)}
.btn-main:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.btn-main:focus:not(:focus-visible){outline:none;box-shadow:none}
.btn-secondary{background:#fff;color:var(--text-primary);border-color:rgba(228,221,209,.95)}
.btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.82);border-color:rgba(110,135,152,.28)}
.btn-err{background:var(--error);color:#fff;border-color:var(--error)}
.btn-err:hover:not(:disabled){background:rgba(217,48,37,.9)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.5);color:var(--text-primary)}
.btn-sm{padding:4px 12px;font-size:.813rem}
.btn-lg{padding:12px 24px;font-size:1rem}
.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:ds-spin .6s linear infinite}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0;line-height:1}
.btn-icon .btn__icon{display:inline-flex;align-items:center;justify-content:center}
.btn-icon--sm{width:2rem;height:2rem}
.btn-icon--md{width:2.5rem;height:2.5rem}
.app-shell-toggle__glyph{width:1rem;height:1rem}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:.75rem;font-weight:600;border-radius:999px;line-height:1.6}.badge-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px}
.badge-primary{background:rgba(110,135,152,.15);color:var(--accent-primary)}
.badge-ok{background:rgba(62,142,65,.2);color:var(--success);border:1px solid rgba(62,142,65,.3)}
.badge-warn{background:rgba(230,162,60,.2);color:var(--warning);border:1px solid rgba(230,162,60,.3)}
.badge-err{background:rgba(217,48,37,.2);color:var(--error);border:1px solid rgba(217,48,37,.3)}

/* ALERTS / INLINE BANNERS */
.ds-alert{position:relative;padding:12px 48px 12px 16px;border-radius:8px;border-left:4px solid;font-size:.813rem;margin-bottom:12px;display:flex;align-items:flex-start;gap:12px;animation:ds-alert-in .3s ease}
@keyframes ds-alert-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ds-alert__icon{flex-shrink:0;font-size:1.15rem;line-height:1.4}
.ds-alert__body{flex:1}
.ds-alert__body strong{display:block;margin-bottom:2px;color:currentColor;font-size:.938rem}
.ds-alert__dismiss{position:absolute;top:8px;right:8px;background:none;border:none;color:inherit;opacity:.5;cursor:pointer;font-size:1rem;padding:4px;border-radius:4px;line-height:1}
.ds-alert__dismiss:hover{opacity:1}
.alert-solid.ds-alert--ok{background:var(--success);color:#fff;box-shadow:0 8px 32px rgba(62,142,65,.2);border-left:none;font-weight:500}
.alert-solid.ds-alert--warn{background:var(--warning);color:#fff;box-shadow:0 8px 32px rgba(230,162,60,.2);border-left:none;font-weight:500}
.ds-alert--err{background:rgba(217,48,37,.12);border-color:var(--error);color:var(--error)}
.ds-alert--info{background:rgba(110,135,152,.12);border-color:var(--accent-primary);color:var(--accent-primary)}
.ds-alert.dismissing{animation:ds-alert-out .3s ease forwards}
@keyframes ds-alert-out{to{opacity:0;transform:translateX(20px);max-height:0;margin:0;padding:0;overflow:hidden}}

/* TOAST NOTIFICATIONS */
.ds-toast-box{position:fixed;top:calc(56px + 16px);right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;max-width:380px}
.ds-toast{display:flex;align-items:flex-start;gap:12px;padding:12px 48px 12px 16px;border-radius:8px;border:1px solid var(--bg-surface);background:var(--bg-surface);box-shadow:0 8px 32px rgba(0,0,0,.4);font-size:.813rem;transform:translateX(120%);transition:transform .25s ease,opacity .15s ease;opacity:0;position:relative}
.ds-toast.enter{transform:translateX(0);opacity:1}
.ds-toast.exit{transform:translateX(120%);opacity:0}
.ds-toast__icon{font-size:1.15rem;flex-shrink:0;line-height:1.4}
.ds-toast__body{flex:1}
.ds-toast__body strong{display:block;margin-bottom:2px;color:var(--text-primary);font-size:.938rem}
.ds-toast__dismiss{position:absolute;top:4px;right:8px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:.9rem;padding:4px;border-radius:4px}
.ds-toast__dismiss:hover{color:var(--text-primary)}
.ds-toast--ok{border-left:3px solid var(--success)}.ds-toast--ok .ds-toast__icon{color:var(--success)}.ds-toast--ok .ds-toast__bar{background:var(--success)}
.ds-toast--warn{border-left:3px solid var(--warning)}.ds-toast--warn .ds-toast__icon{color:var(--warning)}.ds-toast--warn .ds-toast__bar{background:var(--warning)}
.ds-toast--err{border-left:3px solid var(--error)}.ds-toast--err .ds-toast__icon{color:var(--error)}.ds-toast--err .ds-toast__bar{background:var(--error)}
.ds-toast--info{border-left:3px solid var(--accent-primary)}.ds-toast--info .ds-toast__icon{color:var(--accent-primary)}.ds-toast--info .ds-toast__bar{background:var(--accent-primary)}
.ds-toast__bar{position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 8px 8px;transition:width linear}

/* PAGINATION */
.ds-pag{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ds-pag__info{font-size:.813rem;color:var(--text-secondary)}
.ds-pager{display:flex;align-items:center;gap:2px}
.ds-pager button{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;font-family:var(--font-sans);font-size:.813rem;color:var(--text-secondary);background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .15s ease}
.ds-pager button:hover:not(:disabled):not(.active){background:var(--bg-surface);border-color:var(--bg-surface);color:var(--text-primary)}
.ds-pager button.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);font-weight:600}
.ds-pager button:disabled{opacity:.3;cursor:not-allowed}
.ds-pager .dots{padding:0 4px;color:var(--text-secondary);border:1px solid transparent;min-width:34px;text-align:center}
.ds-pag__sz{font-size:.813rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.ds-pag__sz select{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--bg-surface);border-radius:4px;padding:2px 8px;font-size:.813rem}

/* NAV SIDEBAR COMPONENT */
.ds-nav{background:var(--bg-surface);border:1px solid var(--bg-surface);border-radius:12px;overflow:hidden;max-width:260px}
.ds-nav__hd{padding:12px 16px;border-bottom:1px solid var(--bg-surface);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.ds-nav a{display:flex;align-items:center;gap:12px;padding:8px 16px;color:var(--text-secondary);text-decoration:none;font-size:.938rem;transition:all .15s ease;border-left:3px solid transparent}
.ds-nav a:hover{background:rgba(110,135,152,.15);color:var(--text-primary);text-decoration:none}
.ds-nav a.active{color:var(--accent-primary);background:rgba(110,135,152,.15);border-left-color:var(--accent-primary);font-weight:600}
.ds-nav a .ni{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.ds-nav a .nr{margin-left:auto;font-size:.75rem}

/* SPINNER */
.ds-spinner{display:inline-block;border-radius:50%;border:3px solid var(--bg-surface);border-top-color:var(--accent-primary);animation:ds-spin .8s linear infinite}
.ds-spinner--sm{width:20px;height:20px;border-width:2px}
.ds-spinner--lg{width:48px;height:48px;border-width:3px}
.ld-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px;background:var(--bg-surface);border:1px solid var(--bg-surface);border-radius:12px}
.ld-overlay .small{color:var(--text-secondary)}

/* SKELETON */
.sk-line{height:14px;background:var(--bg-surface);border-radius:4px;position:relative;overflow:hidden;margin-bottom:12px}
.sk-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);animation:sk-sh 1.8s ease infinite}
.sk-line.w75{width:75%}.sk-line.w50{width:50%}.sk-line.w25{width:25%}.sk-line.w100{width:100%}
.sk-block{height:100px;background:var(--bg-surface);border-radius:8px;position:relative;overflow:hidden;margin-bottom:12px}
.sk-block::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);animation:sk-sh 1.8s ease infinite}
.sk-circle{width:48px;height:48px;background:var(--bg-surface);border-radius:50%;position:relative;overflow:hidden;display:inline-block}
.sk-circle::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);animation:sk-sh 1.8s ease infinite}
.sk-avrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sk-lcol{display:flex;flex-direction:column;gap:12px}
.sk-tbl{width:100%;border-collapse:collapse}
.sk-tbl td{padding:8px;border-bottom:1px solid var(--bg-surface)}
.sk-tbl td .sk-line{margin-bottom:0}
.sk-group{background:var(--bg-surface);border:1px solid var(--bg-surface);border-radius:12px;padding:16px}
@keyframes sk-sh{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* EMPTY STATE */
.ds-empty{text-align:center;padding:48px 24px;color:var(--text-secondary);border:1px dashed var(--bg-surface);border-radius:12px;background:var(--bg-surface)}
.ds-empty__icon{font-size:3rem;margin-bottom:12px;opacity:.5}
.ds-empty__title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.ds-empty__desc{margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto}
.ds-empty--sm{padding:24px 16px;border:none;background:transparent}
.ds-empty--sm .ds-empty__icon{font-size:2rem}

/* CARD */
.panel{background:#fff;border-radius:12px;border:1px solid var(--bg-surface);box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:visible}
.section-hd{padding:12px 24px;background:rgba(228,221,209,.3);border-bottom:1px solid var(--bg-surface);border-radius:12px 12px 0 0}
.panel-hd h3,.panel-hd h4{margin:0}
.section-bd{padding:24px}
.section-ft{padding:16px 24px;background:rgba(228,221,209,.3);border-top:1px solid var(--bg-surface);display:flex;justify-content:flex-end;border-radius:0 0 12px 12px}
.panel-bd{padding:24px}
.panel-bd--flush{padding:0;overflow:hidden;border-radius:0 0 12px 12px}
.panel-bd--flush>.ds-tbl-wrap{border:none;border-radius:0}
.panel-ft{padding:16px 24px;background:rgba(228,221,209,.3);border-top:1px solid var(--bg-surface);display:flex;justify-content:flex-end;border-radius:0 0 12px 12px}

/* MODAL */
.ds-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.ds-modal-bg.visible{opacity:1;visibility:visible}
.ds-modal{background:#fff;border-radius:12px;width:100%;max-width:400px;box-shadow:0 12px 40px rgba(0,0,0,.2);transform:translateY(12px);transition:transform .2s ease}
.ds-modal-bg.visible .ds-modal{transform:translateY(0) scale(1)}
.ds-modal__hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bg-surface)}
.ds-modal__bd{padding:16px}
.ds-modal__ft{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;border-top:1px solid var(--bg-surface)}
.ds-modal__x{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;line-height:1;padding:0 4px;border-radius:4px}
.ds-modal__x:hover{color:var(--text-primary);background:var(--bg-surface)}
.ds-modal--danger .ds-modal__ft .btn-ok{background:var(--error);color:#fff;border-color:var(--error)}
.ds-tabs{display:flex;border-bottom:1px solid var(--bg-surface);gap:4px;margin-bottom:16px}
.ds-tab{padding:8px 12px;font-weight:500;color:var(--text-secondary);background:none;border:1px solid transparent;border-bottom-color:transparent;border-radius:4px 4px 0 0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.ds-tab:hover{background:var(--bg-surface);color:var(--text-primary);text-decoration:none}
.ds-tab.active{color:var(--accent-primary);border-color:var(--bg-surface);border-bottom-color:var(--bg-page);background:var(--bg-surface)}
.ds-tab-panel{display:none}
.ds-anav{display:flex;gap:0;position:sticky;top:0;z-index:10;background:var(--bg-page);border-bottom:1px solid rgba(228,221,209,.8)}
.ds-ai-section{scroll-margin-top:51px}
.ds-anav__item{padding:10px 0;margin-right:24px;font-size:.875rem;font-weight:500;color:var(--text-secondary);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.ds-anav__item:last-child{margin-right:0}
.ds-anav__item:hover{color:var(--text-primary)}
.ds-anav__item.ds-anav-active{color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.ds-tab-panel.visible{display:flex;flex-direction:column;gap:24px}
.ds-page-stack{display:flex;flex-direction:column;gap:24px}
.ds-tbl-wrap{overflow-x:auto;overflow-y:visible;border:1px solid var(--bg-surface);border-radius:8px}
.ds-tbl{width:100%;border-collapse:collapse}
.ds-tbl th{padding:12px 24px;text-align:left;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);background:rgba(228,221,209,.3);border-bottom:1px solid var(--bg-surface)}
.ds-tbl td{padding:16px 24px;border-bottom:1px solid var(--bg-surface);color:var(--text-primary);font-size:.875rem}
.ds-tbl tr:hover td{background:rgba(228,221,209,.38)}
.ds-tbl tr:last-child td{border-bottom:none}
.ds-ctx{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--bg-surface);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:500;min-width:160px;display:none;padding:4px 0}
.ds-ctx.visible{display:block}
.ds-ctx form{display:block;margin:0}
.ds-ctx .item{padding:7px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-primary);text-decoration:none;width:100%;border:0;background:none;text-align:left;border-radius:0}
.ds-ctx .item:hover,
.ds-ctx .item:focus{background:rgba(228,221,209,.65);outline:none}
.ds-ctx .item:disabled{opacity:.4;cursor:default;pointer-events:none}
.ds-ctx .item.danger{color:var(--error)}
.ds-ctx__sep{height:1px;background:var(--bg-surface);margin:4px 0}
.ds-ctx__grp{padding:4px 12px 2px;font-size:.68rem;font-weight:600;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.04em}
.ds-ctx__flyout-wrap{position:relative}
.ds-ctx__flyout{display:none;position:absolute;left:100%;top:-4px;min-width:180px;max-height:320px;overflow-y:auto}
.ds-ctx__flyout-wrap:hover>.ds-ctx__flyout{display:block}
/* Viewport-aware flip: when the parent menu is pinned near the right edge,
   JS adds .open-left to the outer .ds-ctx so the flyout opens to the left
   instead of the right and never clips off-screen. */
.ds-ctx.open-left .ds-ctx__flyout{left:auto;right:100%}
.ds-ctx__flyout.open-up{top:auto;bottom:-4px}
.ds-ctx__flyout-trigger{justify-content:space-between}
.ds-ctx-trig{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.1rem;padding:4px}
.ds-ctx-trig:hover{color:var(--text-primary)}
.msb-row-menu{position:relative;display:inline-flex;align-items:center;justify-content:flex-end}
.msb-row-current td:first-child{font-weight:600}
.msb-current-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent-primary);margin-right:8px;vertical-align:middle}
.ds-footer{margin-top:8rem;padding-top:32px;border-top:1px solid var(--bg-surface);text-align:center}.ds-footer p{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text-secondary)}
.ds-footer{margin-top:8rem;padding-top:32px;border-top:1px solid var(--bg-surface);text-align:center}.ds-footer p{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text-secondary)}
.demo-box{background:var(--bg-page);border:1px solid var(--bg-surface);border-radius:12px;padding:24px;margin-bottom:32px}
.ds-form-group{display:flex;flex-direction:column;gap:4px}
.ds-form-row{display:flex;align-items:center;gap:12px}
.ds-form-row .ds-form-group{flex:1}
.ds-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.ds-label .req{color:var(--error);margin-left:4px}
.ds-input{display:block;width:100%;padding:10px 16px;font-family:var(--font-sans);font-size:.938rem;color:var(--text-primary);background:#fff;border:1px solid var(--bg-surface);border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease;outline:none}
.ds-input::placeholder{color:var(--text-secondary);opacity:.6}
.ds-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(110,135,152,.2)}
.ds-input:disabled{background:rgba(228,221,209,.5);border-color:var(--bg-surface);cursor:not-allowed;opacity:.6}
.ds-field-err{font-size:.813rem;color:var(--error);margin-top:2px}
.ds-field-hint{font-size:.813rem;color:var(--text-secondary);margin-top:2px}
.ds-textarea{display:block;width:100%;min-height:80px;padding:12px;font-family:var(--font-sans);font-size:.938rem;color:var(--text-primary);background:#fff;border:1px solid var(--bg-surface);border-radius:12px;resize:vertical;outline:none}
.ds-textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(110,135,152,.2)}
.ds-select{display:block;width:100%;padding:10px 16px;font-family:var(--font-sans);font-size:.938rem;color:var(--text-primary);background:#fff;border:1px solid var(--bg-surface);border-radius:12px;outline:none;cursor:pointer}
.ds-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(110,135,152,.2)}
.ds-cb-group{display:flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}
.ds-cb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid var(--bg-surface);border-radius:4px;background:var(--bg-surface);cursor:pointer;position:relative;flex-shrink:0;margin-top:2px;transition:all .15s ease}
.ds-cb:checked{background:var(--accent-primary);border-color:var(--accent-primary)}
.ds-cb:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ds-cb-label{font-size:.938rem;color:var(--text-primary)}
.ds-toggle{position:relative;display:inline-block}
.ds-toggle input{position:absolute;opacity:0;width:0;height:0}
.ds-toggle-track{display:block;width:44px;height:24px;background:var(--bg-surface);border-radius:999px;cursor:pointer;position:relative;transition:background .25s ease}
.ds-toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .25s ease;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ds-toggle input:checked+.ds-toggle-track{background:var(--accent-primary)}
.ds-toggle input:checked+.ds-toggle-track::after{transform:translateX(20px)}

.auth-card{max-width:420px;margin:0 auto}
.auth-card--wide{max-width:460px}
.auth-form{display:grid;gap:16px}
.auth-form__actions{margin-top:8px}
.auth-card__support{margin-top:16px;text-align:center;font-size:.813rem;color:var(--text-secondary)}
.auth-card__support p:last-child{margin-bottom:0}
.auth-profile-panel{max-width:640px}
.auth-profile-panel--spaced{margin-top:24px}
.auth-profile-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.auth-profile-value{min-height:46px;padding:10px 16px;background:#fff;border:1px solid var(--bg-surface);border-radius:12px;display:flex;align-items:center}
.auth-profile-edit{display:contents}
.auth-profile-actions{display:flex;gap:8px;margin-top:8px}
.phone-picker-row{align-items:flex-end}

.admin-users__form{display:grid;gap:16px}
.admin-users__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.admin-users__phone-row{align-items:flex-end}
.admin-users__phone-country{flex:0 0 auto;width:110px}
.phone-group{display:flex;flex-direction:column;gap:4px}
.phone-group__row{align-items:center;gap:8px}
.phone-group__country{flex:0 0 auto;width:120px}
.phone-group__number{flex:1;min-width:0}
.phone-picker{position:relative}
.phone-picker__btn{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;text-align:left;cursor:pointer;padding-right:10px;font-size:.875rem}
.phone-picker__sel{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.phone-picker__caret{color:var(--text-secondary);flex-shrink:0;margin-left:auto;display:block}
.phone-picker__list{position:fixed;z-index:400;background:var(--bg-elevated,#fff);border:1px solid rgba(228,221,209,.9);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.1);min-width:240px;max-height:280px;overflow-y:auto;list-style:none;padding:4px 0;margin:0}
.phone-picker__item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;font-size:.875rem;white-space:nowrap}
.phone-picker__item:hover{background:rgba(110,135,152,.08)}
.phone-picker__item[aria-selected=true]{background:rgba(110,135,152,.12)}
.phone-picker__item-code{margin-left:auto;color:var(--text-secondary);font-size:.8rem;padding-left:12px}
.admin-users__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-users__advanced{display:grid;gap:14px}
.admin-users__advanced>summary{cursor:pointer;font-weight:700;list-style:none}
.admin-users__advanced>summary::-webkit-details-marker{display:none}
.admin-users__advanced>summary::after{content:"Show";margin-left:10px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-primary)}
.admin-users__advanced[open]>summary::after{content:"Hide"}
.admin-users__hint{max-width:48rem;margin-bottom:0}
.admin-users__form--advanced{padding-top:4px}
.admin-users__row-actions{display:grid;gap:8px;min-width:220px}
.admin-users__inline-password{display:grid;gap:8px}
.admin-users__inline-password .ds-input{min-width:0}

.app-shell--collapsed .ds-sb{width:88px}
.app-shell--collapsed .ds-main{margin-left:88px}
.app-shell--collapsed .ds-sb__brand{padding:0 1rem}
.app-shell--collapsed .ds-sb__sub{padding-left:0!important;padding-right:0!important;text-align:center;font-size:.56rem}
.app-shell--collapsed .ds-sb a{justify-content:center;padding-left:10px;padding-right:10px}
.app-shell--collapsed .ds-sb a span:last-child,
.app-shell--collapsed .ds-sb__brand .ds-sb__sub{display:none}
.app-shell--collapsed .ds-sb__brand-link{justify-content:center}
.app-shell--collapsed .ds-sb__brand-link .ds-sb__t{display:none}
.app-shell--collapsed .app-nav__icon{min-width:2.25rem}
.app-shell--collapsed .ds-sb a[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px);padding:8px 10px;border-radius:10px;background:var(--text-primary);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;box-shadow:0 10px 24px rgba(0,0,0,.18);z-index:20}
.app-shell--collapsed .ds-sb a[data-tooltip]::before{content:"";position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%) translateX(-4px);border-width:6px;border-style:solid;border-color:transparent var(--text-primary) transparent transparent;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;z-index:20}
.app-shell--collapsed .ds-sb a[data-tooltip]:hover::after,
.app-shell--collapsed .ds-sb a[data-tooltip]:hover::before,
.app-shell--collapsed .ds-sb a[data-tooltip]:focus-visible::after,
.app-shell--collapsed .ds-sb a[data-tooltip]:focus-visible::before{opacity:1;visibility:visible;transition:opacity .16s ease,transform .16s ease,visibility 0s 0s;transform:translateY(-50%) translateX(0)}
.app-shell--collapsed .app-sidebar-toggle{box-shadow:none;background:var(--bg-surface);border-color:transparent}

@media (max-width: 900px){
  .ds-sb{position:fixed;top:0;left:0;bottom:0;width:min(256px,calc(100vw - 3rem));background:var(--bg-surface);border-right:1px solid rgba(228,221,209,.5);overflow-y:hidden;z-index:1001;padding:0;transform:translateX(-100%);transition:transform .3s ease-out;box-shadow:none}
  .app-shell--mobile-menu-open .ds-sb{transform:translateX(0);box-shadow:0 18px 48px rgba(0,0,0,.18)}
  .ds-main{margin-left:0;padding:0 24px 24px}
  .app-topline{margin-bottom:16px;flex-direction:row;align-items:center;padding-left:0;justify-content:space-between}
  .app-topline__start{width:auto;justify-content:flex-start}
  .app-topline__aux{width:auto}
  .app-topline__account{gap:8px}
  .app-topline__account-name{display:none}
  .app-sidebar-toggle{display:none}
  .app-mobile-menu-toggle{display:inline-flex!important;position:fixed;top:20px;right:20px;transform:none;z-index:1002;box-shadow:none;background:rgba(255,255,255,.88);border-color:rgba(228,221,209,.9);color:var(--text-secondary);backdrop-filter:blur(8px)}
  .app-mobile-menu-toggle:hover:not(:disabled){background:rgba(255,255,255,.5);color:var(--text-primary)}
  .app-mobile-overlay{display:block;position:fixed;inset:0;border:none;padding:0;background:rgba(56,70,82,.32);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}
  .app-shell--mobile-menu-open .app-mobile-overlay{opacity:1;pointer-events:auto}
  .app-shell--mobile-menu-open .app-mobile-menu-toggle{opacity:0;pointer-events:none}
  .app-shell--mobile .ds-sb,
  .app-shell--mobile.app-shell--collapsed .ds-sb{width:min(256px,calc(100vw - 3rem));padding:1.5rem 0}
  .app-shell--mobile .ds-main,
  .app-shell--mobile.app-shell--collapsed .ds-main{margin-left:0}
  .app-shell--mobile .ds-sb__brand,
  .app-shell--mobile.app-shell--collapsed .ds-sb__brand{height:64px;display:flex;align-items:center;padding:0 1.5rem}
  .app-shell--mobile .ds-sb__t,
  .app-shell--mobile.app-shell--collapsed .ds-sb__t{font-size:1.25rem;text-align:left}
  .app-shell--mobile .ds-sb__sub,
  .app-shell--mobile.app-shell--collapsed .ds-sb__sub{padding-left:24px!important;padding-right:24px!important;text-align:left;font-size:.65rem}
  .app-shell--mobile .ds-sb a,
  .app-shell--mobile.app-shell--collapsed .ds-sb a{justify-content:flex-start;padding-left:12px;padding-right:12px}
  .app-shell--mobile .ds-sb a span:last-child,
  .app-shell--mobile .ds-sb__brand .ds-sb__sub,
  .app-shell--mobile.app-shell--collapsed .ds-sb a span:last-child,
  .app-shell--mobile.app-shell--collapsed .ds-sb__brand .ds-sb__sub{display:inline}
  .app-shell--mobile .app-nav__icon,
  .app-shell--mobile.app-shell--collapsed .app-nav__icon{min-width:2rem}
  .app-shell--mobile .ds-sb a[data-tooltip]::after,
  .app-shell--mobile .ds-sb a[data-tooltip]::before,
  .app-shell--mobile.app-shell--collapsed .ds-sb a[data-tooltip]::after,
  .app-shell--mobile.app-shell--collapsed .ds-sb a[data-tooltip]::before{display:none}
  .admin-users__phone-row{grid-column:1 / -1;flex-direction:column;align-items:stretch}
  .admin-users__phone-country{width:auto;flex:1}
  .phone-group__row{flex-direction:column;align-items:stretch}
  .phone-group__country{width:auto;flex:1}
}

/* ── FORM FIELD HINTS ───────────────────────────────────────────────────── */
.ds-hint{font-size:.75rem;color:var(--text-secondary);opacity:.65;margin-top:3px;line-height:1.4}

/* ── SELECT CHEVRON (consistent cross-browser) ──────────────────────────── */
select.ds-input{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697784' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}

/* ── CLICK-TO-COPY ──────────────────────────────────────────────────────── */
.ds-copyable{cursor:pointer;border-radius:4px;transition:background .15s}
.ds-copyable:hover{background:rgba(110,135,152,.1)}
.ds-overflow-tag{display:inline-block;background:var(--bg-surface);border-radius:4px;padding:1px 6px;margin:2px 2px 2px 0;font-family:monospace}
.ds-overflow-item{display:none}.ds-overflow-item.ds-visible{display:inline-block}
.ds-overflow-toggle{background:none;border:none;padding:0;cursor:pointer;font-size:inherit;color:var(--text-secondary);font-family:inherit;line-height:inherit;text-decoration:none}
.ds-overflow-toggle:hover{text-decoration:underline}

/* TABLE DENSITY */
.ds-tbl--relaxed th{padding:14px 24px}
.ds-tbl--relaxed td{padding:20px 24px}

/* FILTER GROUP */
.ds-filter-group{display:flex;gap:4px;align-items:center}
.ds-filter-group .btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}
.ds-filter-group .btn.active:hover{opacity:.88}

/* STEP PROGRESS */
.ds-steps{display:flex;flex-direction:column;gap:2px}
.ds-steps__item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px}
.ds-steps__item--active{background:rgba(110,135,152,.1);font-weight:500}
.ds-steps__item--failed{background:rgba(217,48,37,.05)}
.ds-steps__marker{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:.7rem;font-weight:700;flex-shrink:0;background:var(--bg-surface);color:var(--text-secondary)}
.ds-steps__item--done .ds-steps__marker{background:var(--success);color:#fff}
.ds-steps__item--active .ds-steps__marker{background:var(--accent-primary);color:#fff}
.ds-steps__item--failed .ds-steps__marker{background:var(--error);color:#fff}
.ds-steps__label{font-size:.875rem}
.ds-steps__item--failed .ds-steps__label{color:var(--error)}
.ds-steps__item:not(.ds-steps__item--done):not(.ds-steps__item--active):not(.ds-steps__item--failed) .ds-steps__label{color:var(--text-secondary)}

.ds-copy-toast{position:fixed;bottom:20px;right:20px;background:var(--text-primary);color:#fff;padding:7px 14px;border-radius:8px;font-size:.8rem;font-weight:500;z-index:9999;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease}
.ds-copy-toast.show{opacity:1;transform:translateY(0)}

/* STATUS ICONS — reusable across platform */
.ds-status-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:.7rem;font-weight:700;flex-shrink:0;line-height:1}
.ds-status-icon--ok{background:var(--success);color:#fff}
.ds-status-icon--warn{background:var(--warning);color:#fff}
.ds-status-icon--err{background:var(--error);color:#fff}
.ds-status-icon--muted{background:var(--bg-surface);color:var(--text-secondary)}
/* COPY TARGET — click to copy + cursor hint */
.ds-copy-target{font-family:monospace;font-size:.8em;color:var(--text-secondary);cursor:pointer;border-radius:4px;padding:1px 4px;transition:background .15s}
.ds-copy-target:hover{background:rgba(110,135,152,.1)}

/* WORKFLOW RUN DETAIL */
.wf-run-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.813rem}
.wf-run-meta-sep{width:1px;height:14px;background:var(--bg-surface);flex-shrink:0}

/* Timeline */
.wf-timeline{display:flex;flex-direction:column;gap:0}
.wf-tl-node{display:flex;align-items:center;gap:10px;padding:8px 0;position:relative}
.wf-tl-node:not(:last-child)::after{content:'';position:absolute;left:10px;top:calc(50% + 11px);bottom:-1px;width:2px;background:var(--bg-surface)}
.wf-tl-node--sys{opacity:.7}
.wf-tl-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:.7rem;font-weight:700;flex-shrink:0;background:var(--bg-surface);color:var(--text-secondary);z-index:1;line-height:1}
.wf-tl-icon--ok{background:var(--success);color:#fff}
.wf-tl-icon--warn{background:var(--warning);color:#fff}
.wf-tl-icon--err{background:var(--error);color:#fff}
.wf-tl-glyph{width:12px;height:12px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wf-tl-label{font-size:.875rem;font-weight:500}
.wf-tl-type{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}
.wf-tl-time{margin-left:auto;font-size:.75rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.wf-tl-detail{padding:0 0 6px 32px;font-size:.75rem}
.wf-tl-summary{color:var(--text-secondary);cursor:pointer;user-select:none;font-size:.72rem}
.wf-tl-pre{font-size:.7rem;background:var(--bg-surface);border-radius:4px;padding:8px 10px;overflow-x:auto;margin-top:4px;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}

/* WORKFLOW EDITOR */
.wf-step-card{border:1px solid var(--bg-surface);border-radius:8px;background:#fff}
.wf-step-card+.wf-step-card{margin-top:6px}
.wf-step-card__row{display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:44px;cursor:pointer}
.wf-step-card__row:hover{background:rgba(228,221,209,.18)}
.wf-step-card--collapsed .wf-step-card__row{border-bottom:0}
.wf-step-card__body{border-top:1px solid rgba(228,221,209,.5);overflow:hidden;transition:none}
.wf-step-card--collapsed .wf-step-card__body{display:none}
.wf-step-card__body>.wf-step-card__sub{border-top:0}
/* Accordion header chrome */
.wf-step-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--text-secondary)}
.wf-step-icon .lucide-svg,.wf-step-icon__svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-step-card__summary{font-size:.813rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.wf-step-card__summary--empty{flex:1}
.wf-step-card:not(.wf-step-card--collapsed) .wf-step-card__summary{display:none}
.wf-step-card:not(.wf-step-card--collapsed) .wf-step-card__fields{display:flex}
.wf-step-card--collapsed .wf-step-card__fields{display:none}
.wf-step-card__chev{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--text-secondary);transition:transform .15s ease;transform:rotate(0deg)}
.wf-step-card__chev svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-step-card--collapsed .wf-step-card__chev{transform:rotate(-90deg)}
.wf-step-card__num{width:22px;height:22px;border-radius:50%;background:var(--accent-primary);color:#fff;font-size:.65rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-step-card__type{font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary);min-width:80px;flex-shrink:0;letter-spacing:.03em;white-space:nowrap}
.wf-step-label{font-family:monospace;font-size:.7rem;color:var(--text-secondary);background:none;border:1px solid transparent;border-radius:3px;padding:1px 4px;max-width:140px;transition:border-color .15s;flex-shrink:0}
.wf-step-label:hover,.wf-step-label:focus{border-color:var(--border);outline:none}
.wf-step-label--conflict{border-color:var(--error)!important}
.wf-step-alias{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.75rem;font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:4px;background:var(--bg-surface);color:var(--text-secondary);flex-shrink:0;white-space:nowrap;line-height:1.4}
/* Variable picker */
.wf-tpl-wrap{display:flex;gap:4px;align-items:flex-start;grid-column:3;margin-top:2px;position:relative}
.wf-tpl-wrap .wf-input-literal{flex:1;grid-column:unset;margin-top:0}
.wf-tpl-btn{font-family:monospace;font-size:.75rem;padding:2px 6px;flex-shrink:0;color:var(--text-secondary)}
.wf-var-picker{position:absolute;right:0;top:100%;z-index:200;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);min-width:260px;max-height:320px;overflow-y:auto;padding:6px 0}
.wf-var-picker__group{font-size:.7rem;font-weight:600;color:var(--text-secondary);padding:6px 12px 2px;text-transform:uppercase;letter-spacing:.03em}
.wf-var-picker__item{display:block;width:100%;text-align:left;padding:4px 12px;font-size:.75rem;font-family:monospace;cursor:pointer;border:none;background:none;color:var(--text-primary)}
.wf-var-picker__item:hover{background:var(--bg-surface)}
.wf-step-card__fields{flex:1;display:flex;gap:8px;align-items:center;min-width:0}
.wf-step-card__sub{padding:0 10px 10px 52px;display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(228,221,209,.5)}
.wf-step-card__sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Chip input */
.ds-chip-input{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px 8px;border:1px solid rgba(228,221,209,.8);border-radius:6px;background:#fff;min-height:36px;cursor:text}
.ds-chip-input:focus-within{outline:2px solid var(--accent-primary);outline-offset:-1px}
.ds-chip-input__text{border:none;outline:none;background:transparent;font-size:.813rem;min-width:80px;flex:1;padding:2px 0;line-height:1.5;font-family:var(--font-sans)}
.ds-chip{display:inline-flex;align-items:center;gap:3px;background:var(--bg-surface);border:1px solid rgba(228,221,209,.8);border-radius:4px;padding:1px 6px;font-size:.75rem;line-height:1.5;white-space:nowrap}
.ds-chip__x{background:none;border:none;padding:0 0 0 2px;cursor:pointer;color:var(--text-secondary);font-size:.875rem;line-height:1;display:inline-flex;align-items:center}
.ds-chip__x:hover{color:var(--text-primary)}
/* Tag color variants — applied as .ds-chip--slate, .ds-chip--blue, etc. */
.ds-chip--slate{background:rgba(110,135,152,.14);border-color:rgba(110,135,152,.3);color:var(--accent-primary)}
.ds-chip--blue{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);color:#2563eb}
.ds-chip--green{background:rgba(62,142,65,.12);border-color:rgba(62,142,65,.3);color:var(--success)}
.ds-chip--amber{background:rgba(230,162,60,.14);border-color:rgba(230,162,60,.35);color:#b45309}
.ds-chip--rose{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.3);color:#be123c}
.ds-chip--violet{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.3);color:#7c3aed}
.ds-chip--orange{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.3);color:#c2410c}
.ds-chip--teal{background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.3);color:#0f766e}
/* Aliases used by workflow maturity chips */
.ds-chip--warn{background:rgba(230,162,60,.14);border-color:rgba(230,162,60,.35);color:#b45309}
.ds-chip--grey{background:rgba(110,135,152,.12);border-color:rgba(110,135,152,.25);color:var(--text-secondary)}
/* Tag picker popover */
.tag-picker{position:absolute;z-index:200;top:calc(100% + 4px);left:0;min-width:200px;background:#fff;border:1px solid rgba(228,221,209,.8);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:4px;display:none}
.tag-picker.open{display:block}
.tag-picker__search{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid rgba(228,221,209,.8);padding:6px 8px;font-size:.813rem;font-family:var(--font-sans);outline:none;border-radius:4px 4px 0 0;background:transparent}
.tag-picker__list{max-height:200px;overflow-y:auto;padding:4px 0}
.tag-picker__item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;cursor:pointer;font-size:.813rem;user-select:none}
.tag-picker__item:hover,.tag-picker__item.focused{background:rgba(110,135,152,.1)}
.tag-picker__item--create{color:var(--accent-primary);font-style:italic}
.tag-picker__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tag-picker__dot--slate{background:var(--accent-primary)}.tag-picker__dot--blue{background:#3b82f6}.tag-picker__dot--green{background:var(--success)}.tag-picker__dot--amber{background:#f59e0b}.tag-picker__dot--rose{background:#f43f5e}.tag-picker__dot--violet{background:#8b5cf6}.tag-picker__dot--orange{background:#f97316}.tag-picker__dot--teal{background:#14b8a6}
/* Tag filter bar */
.tag-filter-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag-filter-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:opacity .15s}
.tag-filter-chip:hover{opacity:.8}
/* Compose field blocks */
.wf-compose-field{border:1px solid rgba(228,221,209,.8);border-radius:8px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:8px}
.wf-compose-field__hd{display:flex;align-items:center;gap:8px}
.wf-compose-field__label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);white-space:nowrap}
.wf-compose-area{font-family:var(--font-mono,monospace);font-size:.813rem;line-height:1.6;resize:vertical;min-height:120px;padding:10px 12px}
.wf-compose-field .wf-tpl-wrap{flex-direction:column;align-items:stretch}
.wf-compose-field .wf-tpl-btn{position:absolute;top:6px;right:6px}
.wf-compose-field .wf-tpl-wrap{position:relative}
/* Trigger row — pinned row-0 of the Steps list */
.wf-step-card--trigger{border-left:3px solid var(--accent-primary);background:rgba(110,135,152,.04)}
.wf-step-card--trigger+.wf-step-card{margin-top:10px}
.wf-step-card__num--trigger{width:auto;height:auto;background:none;color:var(--text-secondary);font-size:.75rem;font-weight:400}
.wf-step-icon--trigger{color:var(--accent-primary)}
/* Map step — de-emphasised secondary card */
.wf-step-card--map{border:1px dashed rgba(228,221,209,.9);background:rgba(228,221,209,.08);margin-top:0!important;margin-bottom:0!important}
.wf-step-card--map+.wf-step-card,.wf-step-card+.wf-step-card--map{margin-top:2px}
.wf-step-card__row--map{padding:5px 10px;min-height:32px}
.wf-step-card__type--map{font-size:.63rem;color:rgba(110,135,152,.6);width:40px}
/* UseStep input mapping sub-section */
.wf-step-card__sub--inputs{padding:6px 10px 8px 52px;gap:4px;border-top:1px solid rgba(228,221,209,.4)}
.wf-input-row{display:grid;grid-template-columns:120px 48px 1fr;gap:6px;align-items:center;min-height:28px}
.wf-input-row__name{font-size:.75rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-input-row__type{font-size:.65rem;padding:1px 4px;text-align:center}
.wf-input-literal{grid-column:3;margin-top:2px}
.wf-deliver-card{border:1px solid rgba(228,221,209,.7);border-radius:8px;margin-bottom:8px;overflow:hidden}
.wf-deliver-card__hd{display:flex;align-items:center;padding:6px 10px;background:rgba(228,221,209,.25)}
.wf-deliver-card__label{font-size:.813rem;font-weight:600;color:var(--text-primary);flex:1}
.wf-deliver-card__fields{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.wf-deliver-field{display:flex;align-items:center;gap:6px;min-height:28px}
.wf-deliver-field__name{font-size:.75rem;font-weight:500;color:var(--text-primary);min-width:80px;white-space:nowrap}

/* ── NOTIFICATION CENTER ──────────────────────────────────────────────── */
.ntf-bell-wrap{position:relative}
.ntf-bell{position:relative}
.ntf-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--error);color:#fff;font-size:.6rem;font-weight:700;line-height:16px;text-align:center;pointer-events:none;z-index:1}
.ntf-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:min(380px,calc(100vw - 32px));max-height:480px;background:#fff;border:1px solid var(--bg-surface);border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,.12);z-index:2000;flex-direction:column;overflow:hidden}
.ntf-panel--open{display:flex}
.ntf-panel__hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(228,221,209,.6);flex-shrink:0}
.ntf-panel__title{font-size:.875rem;font-weight:700;color:var(--text-primary)}
.ntf-panel__body{flex:1;overflow-y:auto;padding:4px 0}
.ntf-loading{display:flex;align-items:center;justify-content:center;padding:32px}
.ntf-empty{text-align:center;padding:32px 16px;color:var(--text-secondary);font-size:.813rem}
.ntf-item{padding:10px 16px;border-bottom:1px solid rgba(228,221,209,.4);transition:opacity .25s ease,transform .25s ease}
.ntf-item--unread{background:rgba(110,135,152,.06);border-left:3px solid var(--accent-primary);padding-left:13px}
.ntf-item__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:2px}
.ntf-item__title{font-size:.813rem;font-weight:600;color:var(--text-primary);line-height:1.3}
.ntf-item__time{font-size:.68rem;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;margin-top:1px}
.ntf-item__body{font-size:.75rem;color:var(--text-secondary);line-height:1.5;margin-bottom:4px}
.ntf-item__action{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.ntf-item__action .ds-input--sm{padding:4px 8px;font-size:.75rem;flex:1;min-width:100px}
.ntf-item__responded{margin:4px 0}
.ntf-respond-form{display:flex;gap:6px;flex:1}
.ntf-respond-form .ntf-respond-input{flex:1;padding:4px 8px;font-size:.75rem;border:1px solid rgba(228,221,209,.8);border-radius:6px}
.ntf-item__foot{display:flex;gap:6px;margin-top:2px}
.ntf-item__foot .btn{font-size:.68rem;padding:2px 6px;color:var(--text-secondary)}
.ntf-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ntf-load-more{display:block;width:100%;padding:10px 16px;background:none;border:none;border-top:1px solid rgba(228,221,209,.4);color:var(--text-secondary);font-size:.813rem;text-align:center;cursor:pointer;transition:background .15s}
.ntf-load-more:hover{background:var(--bg-subtle);color:var(--text-primary)}
.ntf-load-more:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ── Routario mark animations ─────────────────────────────────────────── */
@keyframes rm-spin{to{transform:rotate(360deg)}}
@keyframes rm-pulse{0%,100%{opacity:.3;transform:scale(.65)}50%{opacity:1;transform:scale(1.4)}}
@keyframes rm-star-flash{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.25);filter:drop-shadow(0 0 5px rgba(247,244,238,.9))}60%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 2px rgba(247,244,238,.5))}100%{opacity:0;transform:scale(.55);filter:none}}
#rm-ai.active{opacity:1!important;transform-box:fill-box;transform-origin:center;animation:rm-spin 3.2s linear infinite}
#rm-ai.active .rm-ai-dot{transform-box:fill-box;transform-origin:center;animation:rm-pulse .9s ease-in-out infinite}
#rm-ai.active .rm-ai-dot:nth-child(2){animation-delay:.225s}
#rm-ai.active .rm-ai-dot:nth-child(3){animation-delay:.45s}
#rm-ai.active .rm-ai-dot:nth-child(4){animation-delay:.675s}
#rm-star.flash{transform-box:fill-box;transform-origin:center;animation:rm-star-flash 1.4s ease-out forwards}

/* ── TEMPLATE BUILDER (wizard + highlight) ───────────────────────────── */
/* IF / FOR wizard dropdown */
.tpl-wiz{position:absolute;left:0;top:100%;z-index:200;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:8px 10px;min-width:280px}
.tpl-wiz__row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:6px}
.tpl-wiz__expr{flex:1;font-size:.75rem;padding:3px 6px;font-family:var(--font-mono,monospace);min-width:120px}
.tpl-wiz__var{font-size:.72rem;padding:2px 6px;max-width:60px;font-family:var(--font-mono,monospace)}
.tpl-wiz__kw{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
.tpl-wiz__kw--blue{color:#3b82f6}
.tpl-wiz__kw--purple{color:#8b5cf6}
.tpl-wiz__else-label{font-size:.72rem;color:var(--text-secondary);display:flex;align-items:center;gap:4px;cursor:pointer}
/* Mini picker (inside wizards) */
.tpl-mini-picker{position:absolute;left:0;top:100%;z-index:210;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);min-width:200px;max-height:260px;overflow-y:auto;padding:4px 0}
.tpl-mini-picker__group{font-size:.65rem;font-weight:600;color:var(--text-secondary);padding:5px 10px 2px;text-transform:uppercase;letter-spacing:.03em}
.tpl-mini-picker__item{display:block;width:100%;text-align:left;padding:3px 10px;font-size:.72rem;font-family:var(--font-mono,monospace);cursor:pointer;border:none;background:none;color:var(--text-primary)}
.tpl-mini-picker__item:hover{background:var(--bg-surface)}
.tpl-wiz__actions{display:flex;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--border);margin-top:2px}
.tpl-wiz__insert{font-size:.72rem;padding:3px 14px;background:var(--accent-primary);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600}
.tpl-wiz__insert:hover{opacity:.9}
.tpl-wiz__insert:disabled{opacity:.35;cursor:not-allowed}
/* Highlight overlay (textarea backdrop) */
.tpl-hl-backdrop{position:absolute;top:0;left:0;z-index:0;overflow:hidden;pointer-events:none;white-space:pre-wrap;word-wrap:break-word;color:transparent;box-sizing:border-box}
.tpl-hl--var{background:rgba(59,130,246,.12);border-radius:2px;color:transparent}
.tpl-hl--tag{background:rgba(139,92,246,.12);border-radius:2px;color:transparent}
/* Module picker rows — main label (click = insert) + wand button (click = insert + autofill) */
.ds-ctx .item.wf-picker-row{display:flex;align-items:stretch;padding:0;gap:0}
.ds-ctx .item.wf-picker-row:hover,
.ds-ctx .item.wf-picker-row:focus-within{background:rgba(228,221,209,.65)}
.wf-picker-row__main{flex:1;display:flex;align-items:center;gap:8px;background:none;border:0;padding:7px 12px;text-align:left;color:inherit;cursor:pointer;font:inherit;min-width:0}
.wf-picker-row__wand{display:inline-flex;align-items:center;justify-content:center;width:2rem;flex-shrink:0;background:none;border:0;border-left:1px solid var(--bg-surface);padding:0;cursor:pointer;color:var(--text-secondary);opacity:0;transition:opacity .12s ease,color .12s ease,background .12s ease}
.wf-picker-row:hover .wf-picker-row__wand,
.wf-picker-row:focus-within .wf-picker-row__wand{opacity:1}
.wf-picker-row__wand:hover{color:var(--brand,#f97316);background:rgba(0,0,0,.04)}
.wf-picker-row__wand svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}