.manual-ui-guidance{--dui-accent:#5146d8;--dui-line:#d2dced;--dui-surface:#f3f6fc;--dui-ink:#16243d;--dui-card:#fff}
.dui-demo{border:1px solid var(--dui-line);border-radius:18px;background:var(--dui-surface);padding:clamp(16px,3vw,28px);margin:24px 0;color:var(--dui-ink)}
.dui-kicker{display:block;color:var(--dui-accent);font-weight:800;font-size:.8rem;letter-spacing:.035em}
.dui-demo>p{margin:10px 0 20px}
.dui-sort-list{list-style:none!important;padding:0!important;margin:18px 0!important;display:grid;gap:12px}
.dui-queues,.dui-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.dui-item{margin:0!important;min-width:0;border:1px solid var(--dui-line);border-radius:12px;background:var(--dui-card);padding:12px;box-shadow:0 4px 14px #14284e06;transition:box-shadow .15s,border-color .15s}
.dui-item-head{display:flex;align-items:center;gap:9px;min-height:42px;font-size:.9rem}
.dui-item-head strong{overflow-wrap:anywhere;line-height:1.35}
.dui-grip{touch-action:none;cursor:grab;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--dui-line);border-radius:9px;background:var(--dui-surface);color:var(--dui-accent);font-size:1.6rem;line-height:1}
.dui-grip:active{cursor:grabbing}.dui-dragging{border-color:var(--dui-accent);box-shadow:0 0 0 3px #6555ed35}
.dui-sample{display:block;font-size:1.6rem;font-weight:800;margin:14px 0;color:var(--dui-ink)}
.dui-move-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dui-move-buttons button,.dui-reset{font:inherit;font-size:.78rem;line-height:1.3;border:1px solid var(--dui-line);border-radius:8px;background:var(--dui-card);color:var(--dui-ink);min-height:40px;padding:8px 10px;cursor:pointer}
.dui-move-buttons button[aria-disabled=true]{opacity:.45;cursor:default}.dui-reset{font-size:.86rem;font-weight:700;padding:10px 14px;border-color:var(--dui-accent);color:var(--dui-accent)}
.manual-ui-guidance button:focus-visible{outline:3px solid #ffbd29;outline-offset:3px}
.dui-status{min-height:1.5em;font-size:.85rem;margin:12px 0 0!important;color:var(--dui-ink)}
.dui-fixed{border:1px dashed var(--dui-line);border-radius:10px;padding:16px;margin:18px 0;color:var(--dui-ink);font-size:.9rem;background:var(--dui-card)}
.dui-chart-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.dui-mini-bars,.dui-mini-line{height:56px;background-color:var(--dui-surface);border-radius:7px;display:block;position:relative;overflow:hidden}
.dui-mini-bars:after{content:"";position:absolute;inset:12px 14px 8px;background:repeating-linear-gradient(90deg,#4d90fb 0 12%,transparent 12% 20%);clip-path:polygon(0 65%,20% 65%,20% 30%,40% 30%,40% 0,60% 0,60% 40%,80% 40%,80% 15%,100% 15%,100% 100%,0 100%)}
.dui-mini-line:after{content:"";position:absolute;inset:12px;background:#119d93;clip-path:polygon(0 75%,24% 36%,46% 60%,72% 0,100% 20%,100% 29%,73% 9%,47% 70%,25% 46%,0 85%)}
.dui-help-examples{margin-top:24px}.dui-help-case{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--dui-line);padding:12px 16px;border-radius:12px;margin:12px 0;background:var(--dui-card);color:var(--dui-ink)}
.dui-help-button{flex:0 0 42px;min-height:42px;border:0;border-radius:50%;background:var(--dui-surface);color:var(--dui-accent);font:700 1rem Georgia,serif;cursor:pointer}.dui-help-button span{border:2px solid currentColor;border-radius:50%;width:23px;height:23px;display:inline-grid;place-content:center}
.dui-help-popup{position:absolute;z-index:15;inset-inline:0;top:calc(100% + 8px);padding:18px;background:#1b2944;color:#fff;border:1px solid #526482;border-radius:12px;box-shadow:0 14px 35px #101d3a3d;white-space:normal;font-size:.92rem}
.dui-help-popup[hidden]{display:none}.dui-help-popup strong{color:#fff}.dui-help-popup p{margin:9px 0 0;line-height:1.65;color:#eef3ff;white-space:pre-line}
[data-site-theme=dark] .manual-ui-guidance,[data-theme=dark] .manual-ui-guidance,.dark .manual-ui-guidance{--dui-accent:#b8adff;--dui-line:#344563;--dui-surface:#152238;--dui-ink:#e8efff;--dui-card:#1b2c45}
@media(max-width:640px){.dui-queues,.dui-kpis{grid-template-columns:1fr}.dui-item{padding:12px}.dui-sample{margin:8px 0}.dui-move-buttons{margin-top:8px}.dui-demo{padding:14px}.dui-help-popup{font-size:.87rem}.dui-chart-pair{gap:8px}}
@media(prefers-reduced-motion:reduce){.dui-item{transition:none}}
@media(forced-colors:active){.dui-item,.dui-help-popup,.dui-demo{border:1px solid CanvasText}.dui-help-button{border:1px solid ButtonText}.dui-dragging{outline:3px solid Highlight}.dui-mini-bars,.dui-mini-line{border:1px solid CanvasText}}
@media print{.dui-move-buttons,.dui-grip,.dui-reset,.dui-status,.dui-help-button{display:none}.dui-help-case{display:block}.dui-help-popup,.dui-help-popup[hidden]{display:block!important;position:static;background:transparent;color:#111;box-shadow:none;border:0;padding:8px 0}.dui-help-popup p,.dui-help-popup strong{color:#111}.dui-help-case>strong{display:none}.dui-queues,.dui-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dui-inline-grip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;background:var(--dui-surface);border:1px solid var(--dui-line);border-radius:12px;color:var(--dui-ink)}
.dui-inline-grip>i{font-size:1.45rem;color:#6c757d}.dui-inline-grip>span{font-size:.9rem}.dui-grip>i{font-size:1.25rem}
.live-legend-group{margin:32px 0}.live-legend-group>h3{margin-bottom:10px}.live-legend-group>p{max-width:78ch}
.live-legend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none!important;margin:20px 0!important;padding:0!important}
.live-legend-grid>li{display:flex;gap:14px;align-items:flex-start;padding:18px;margin:0!important;background:var(--dui-card);border:1px solid var(--dui-line);border-radius:12px;min-width:0}
.live-legend-grid h4{font-family:inherit;font-size:1rem;font-weight:700;line-height:1.45;margin:0 0 8px;color:var(--dui-ink)}
.live-legend-grid p{font-size:.92rem;line-height:1.65;margin:0;color:var(--dui-ink)}
.live-legend-symbol{flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;font-size:1.15rem}
.live-tone-success{background:#34a853;color:#10200e}.live-tone-warning{background:#ffc107;color:#302100}.live-tone-dnd{background:#3b7ddd;color:#fff}.live-tone-info{background:#0dcaf0;color:#09222a}.live-tone-danger{background:#dc3545;color:#fff}.live-tone-muted{background:#6c757d;color:#fff}.live-tone-neutral{background:#e9ecef;color:#343a40}.live-tone-purple{background:#6f42c1;color:#fff}
.live-tooltip-guide{padding-top:12px;scroll-margin-top:112px}.live-tooltip-example{padding:22px;background:var(--dui-surface);border:1px solid var(--dui-line);border-radius:16px;margin:22px 0}
.live-tooltip-example summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;list-style:none;cursor:pointer;padding:16px;background:var(--dui-card);border:1px solid var(--dui-line);border-radius:10px;margin-top:16px;color:var(--dui-ink)}
.live-tooltip-example summary::-webkit-details-marker{display:none}.live-tooltip-example summary:focus-visible{outline:3px solid #ffbd29;outline-offset:3px}
.live-tooltip-person{display:inline-flex;gap:10px;align-items:center;font-weight:700}.live-agent-badge{padding:5px 10px;border-radius:5px;font-size:.85rem;font-weight:700;display:inline-flex;gap:7px;align-items:center}.live-tooltip-instruction{flex-basis:100%;font-size:.8rem;color:var(--dui-accent)}
.live-tooltip-example dl{max-width:550px;background:#172238;color:#fff;border-radius:12px;padding:20px;margin:12px 0 0;box-shadow:0 8px 22px #14284e15}
.live-tooltip-example dl>div{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px 0;border-bottom:1px solid #ffffff30}.live-tooltip-example dl>div:last-child{border-bottom:0}.live-tooltip-example dt{font-size:.87rem;color:#e7edf7}.live-tooltip-example dd{font-size:.9rem;font-weight:700;margin:0;color:#fff}
.dui-help-button>i{font-size:1.35rem}
@media(max-width:720px){.live-legend-grid{grid-template-columns:1fr}.live-legend-grid>li{padding:15px}.live-tooltip-example{padding:14px}.live-tooltip-example dl>div{grid-template-columns:1fr;gap:4px}.live-legend-symbol{flex-basis:38px;width:38px;height:38px}}
@media print{.live-legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-legend-grid>li,.live-tooltip-example{break-inside:avoid}.live-tooltip-example dl{display:block!important;box-shadow:none;background:#fff;color:#111;border:1px solid #aaa}.live-tooltip-example dt,.live-tooltip-example dd{color:#111}.live-tooltip-instruction{display:none}.live-legend-symbol{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
@media(forced-colors:active){.live-legend-symbol,.live-agent-badge{border:1px solid CanvasText}.live-tooltip-example dl{border:1px solid CanvasText}}