/* Đa Liên Phát component styles.
   Every rule references alias tokens only. Metrics (heights, paddings, type
   pairings, stroke widths) are transcribed from the Fluent source file; corner
   radii use the brand's 6px control / 8px surface aliases. */

/* ============================== BUTTON ============================== */
.dlp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-snudge);border:var(--stroke-width-thin) solid transparent;border-radius:var(--radius-control);font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--motion-hover);-webkit-user-select:none;user-select:none}
.dlp-btn:focus-visible{outline:none;box-shadow:0 0 0 1px var(--border-focus-outer),0 0 0 3px var(--border-focus)}
.dlp-btn--small{height:var(--control-height-small);padding:0 var(--spacing-s);gap:var(--spacing-xs);font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-btn--medium{height:var(--control-height-medium);padding:0 var(--spacing-m);font-size:var(--font-size-300);line-height:var(--line-height-300)}
.dlp-btn--large{height:var(--control-height-large);padding:0 var(--spacing-l);font-size:var(--font-size-400);line-height:var(--line-height-400)}
.dlp-btn--icon-only.dlp-btn--small{width:var(--control-height-small);padding:0}
.dlp-btn--icon-only.dlp-btn--medium{width:var(--control-height-medium);padding:0}
.dlp-btn--icon-only.dlp-btn--large{width:var(--control-height-large);padding:0}
.dlp-btn--primary{background:var(--action-primary);color:var(--action-primary-foreground);border-color:var(--action-primary)}
.dlp-btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.dlp-btn--primary:active{background:var(--action-primary-pressed);border-color:var(--action-primary-pressed)}
.dlp-btn--secondary{background:var(--action-secondary);color:var(--action-secondary-foreground);border-color:var(--border-default)}
.dlp-btn--secondary:hover{background:var(--action-secondary-hover)}
.dlp-btn--secondary:active{background:var(--action-secondary-pressed)}
.dlp-btn--outline{background:transparent;color:var(--foreground-primary);border-color:var(--border-default)}
.dlp-btn--outline:hover{background:var(--action-subtle-hover)}
.dlp-btn--outline:active{background:var(--action-subtle-pressed)}
.dlp-btn--subtle{background:transparent;color:var(--foreground-primary);border-color:transparent}
.dlp-btn--subtle:hover{background:var(--action-subtle-hover);color:var(--foreground-primary)}
.dlp-btn--subtle:active{background:var(--action-subtle-pressed)}
.dlp-btn--transparent{background:transparent;color:var(--foreground-brand);border-color:transparent}
.dlp-btn--transparent:hover{color:var(--action-primary-hover);background:transparent}
.dlp-btn--danger{background:var(--action-danger);color:var(--foreground-on-accent);border-color:var(--action-danger)}
.dlp-btn--danger:hover{background:var(--action-danger-hover);border-color:var(--action-danger-hover)}
.dlp-btn--gold{background:var(--brand-accent);color:var(--foreground-on-accent);border-color:var(--brand-accent)}
.dlp-btn--gold:hover{background:var(--brand-accent-hover);border-color:var(--brand-accent-hover)}
.dlp-btn[disabled],.dlp-btn[aria-disabled="true"]{background:var(--background-disabled);color:var(--foreground-disabled);border-color:var(--border-disabled);cursor:not-allowed;pointer-events:none}
.dlp-btn--subtle[disabled],.dlp-btn--transparent[disabled]{background:transparent;border-color:transparent}
.dlp-btn--selected{background:var(--background-selected);color:var(--foreground-brand);border-color:var(--background-selected)}

/* Compound button — label over a secondary line */
.dlp-compound{display:inline-flex;align-items:center;gap:var(--spacing-m);border:var(--stroke-width-thin) solid var(--border-default);border-radius:var(--radius-control);background:var(--action-secondary);color:var(--foreground-primary);cursor:pointer;text-align:left;font-family:var(--font-family-base);transition:var(--motion-hover)}
.dlp-compound:hover{background:var(--action-secondary-hover)}
.dlp-compound--small{padding:var(--spacing-s) var(--spacing-m)}
.dlp-compound--medium{padding:var(--spacing-m) var(--spacing-m)}
.dlp-compound--large{padding:var(--spacing-l) var(--spacing-l)}
.dlp-compound__label{font-size:var(--font-size-300);line-height:var(--line-height-300);font-weight:var(--font-weight-semibold);display:block}
.dlp-compound--large .dlp-compound__label{font-size:var(--font-size-400);line-height:var(--line-height-400)}
.dlp-compound__secondary{display:block;font-size:var(--font-size-200);line-height:var(--line-height-200);font-weight:var(--font-weight-regular);color:var(--foreground-secondary);margin-top:var(--spacing-xxs)}
.dlp-compound--primary{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-foreground)}
.dlp-compound--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.dlp-compound--primary .dlp-compound__secondary{color:rgba(255,255,255,.82)}

/* Split & menu button */
.dlp-split{display:inline-flex;align-items:stretch}
.dlp-split>.dlp-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.dlp-split>.dlp-btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left-width:0;padding:0 var(--spacing-s)}
.dlp-split--primary>.dlp-btn:last-child{border-left:var(--stroke-width-thin) solid rgba(255,255,255,.36)}

/* ============================== LINK ============================== */
.dlp-link{color:var(--foreground-link);font-family:var(--font-family-base);font-size:inherit;line-height:inherit;text-decoration:none;cursor:pointer;background:none;border:0;padding:0;border-radius:var(--radius-small)}
.dlp-link:hover{color:var(--foreground-link-hover);text-decoration:underline}
.dlp-link:active{color:var(--color-navy-50)}
.dlp-link--subtle{color:var(--foreground-primary)}
.dlp-link--inline{text-decoration:underline}
.dlp-link--on-brand{color:var(--color-neutral-white)}
.dlp-link[aria-disabled="true"]{color:var(--foreground-disabled);pointer-events:none;text-decoration:none}

/* ============================== FIELD / LABEL / INPUT ============================== */
.dlp-field{display:flex;flex-direction:column;gap:var(--spacing-xxs)}
.dlp-label{font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);color:var(--foreground-primary);font-size:var(--font-size-300);line-height:var(--line-height-300)}
.dlp-label--small{font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-label--large{font-size:var(--font-size-400);line-height:var(--line-height-400)}
.dlp-label--weak{font-weight:var(--font-weight-regular)}
.dlp-label__required{color:var(--status-danger-icon);padding-left:var(--spacing-xxs)}
.dlp-field__hint{font-size:var(--font-size-200);line-height:var(--line-height-200);color:var(--foreground-secondary)}
.dlp-field__message{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-field__message--error{color:var(--status-danger-foreground)}
.dlp-field__message--warning{color:var(--status-warning-foreground)}
.dlp-field__message--success{color:var(--status-success-foreground)}

.dlp-input{display:inline-flex;align-items:center;gap:var(--spacing-s);width:100%;background:var(--background-surface);border:var(--stroke-width-thin) solid var(--border-default);border-bottom-color:var(--color-neutral-grey-46);border-radius:var(--radius-control);color:var(--foreground-primary);font-family:var(--font-family-base);transition:var(--motion-hover)}
.dlp-input:hover{border-color:var(--border-strong);border-bottom-color:var(--foreground-secondary)}
.dlp-input--small{height:var(--control-height-small);padding:0 var(--spacing-snudge);font-size:var(--font-size-200)}
.dlp-input--medium{height:var(--control-height-medium);padding:0 var(--spacing-mnudge);font-size:var(--font-size-300)}
.dlp-input--large{height:var(--control-height-large);padding:0 var(--spacing-m);font-size:var(--font-size-400)}
.dlp-input__control{flex:1;min-width:0;border:0;outline:none;background:transparent;color:inherit;font:inherit;padding:0}
.dlp-input__control::placeholder{color:var(--foreground-tertiary)}
.dlp-input:focus-within{border-color:var(--border-default);border-bottom:var(--stroke-width-thick) solid var(--border-focus);padding-bottom:0}
.dlp-input--underline{border-radius:0;border-width:0 0 var(--stroke-width-thin) 0;background:transparent}
.dlp-input--filled{background:var(--background-subtle);border-color:transparent;border-bottom-color:transparent}
.dlp-input--error{border-color:var(--status-danger-icon);border-bottom-color:var(--status-danger-icon)}
.dlp-input[aria-disabled="true"],.dlp-input--disabled{background:var(--background-disabled);border-color:var(--border-disabled);color:var(--foreground-disabled);pointer-events:none}
.dlp-input__affix{color:var(--foreground-secondary);display:flex;align-items:center;flex-shrink:0}

.dlp-textarea{display:block;width:100%;background:var(--background-surface);border:var(--stroke-width-thin) solid var(--border-default);border-bottom-color:var(--color-neutral-grey-46);border-radius:var(--radius-control);color:var(--foreground-primary);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);padding:var(--spacing-s) var(--spacing-mnudge);resize:vertical;min-height:52px}
.dlp-textarea:focus{outline:none;border-bottom:var(--stroke-width-thick) solid var(--border-focus)}
.dlp-textarea--none{resize:none}
.dlp-textarea--both{resize:both}

/* Search box */
.dlp-searchbox .dlp-input__control{padding:0}
.dlp-searchbox__clear{display:flex;border:0;background:none;padding:0;cursor:pointer;color:var(--foreground-secondary)}

/* Spin button */
.dlp-spin__steppers{display:flex;flex-direction:column;margin-right:calc(-1 * var(--spacing-snudge));flex-shrink:0}
.dlp-spin__step{display:flex;align-items:center;justify-content:center;width:22px;height:15px;border:0;background:none;cursor:pointer;color:var(--foreground-secondary);border-radius:var(--radius-small)}
.dlp-spin__step:hover{background:var(--action-subtle-hover);color:var(--foreground-primary)}

/* ============================== SELECTION CONTROLS ============================== */
.dlp-choice{display:inline-flex;align-items:center;gap:var(--spacing-s);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-primary);padding:var(--spacing-xs) 0}
.dlp-choice input{position:absolute;opacity:0;width:0;height:0}
.dlp-choice[aria-disabled="true"]{color:var(--foreground-disabled);cursor:not-allowed}
.dlp-checkbox__box{width:16px;height:16px;flex-shrink:0;border:var(--stroke-width-thin) solid var(--color-neutral-grey-46);border-radius:var(--radius-medium);display:flex;align-items:center;justify-content:center;color:transparent;background:var(--background-surface);transition:var(--motion-hover)}
.dlp-choice--large .dlp-checkbox__box{width:20px;height:20px}
.dlp-choice:hover .dlp-checkbox__box{border-color:var(--foreground-primary)}
.dlp-choice--checked .dlp-checkbox__box{background:var(--action-primary);border-color:var(--action-primary);color:var(--foreground-on-accent)}
.dlp-choice--checked:hover .dlp-checkbox__box{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.dlp-choice--circular .dlp-checkbox__box{border-radius:var(--radius-circular)}
.dlp-choice[aria-disabled="true"] .dlp-checkbox__box{background:var(--background-disabled);border-color:var(--border-disabled)}
.dlp-radio__dot{width:16px;height:16px;flex-shrink:0;border:var(--stroke-width-thin) solid var(--color-neutral-grey-46);border-radius:var(--radius-circular);background:var(--background-surface);display:flex;align-items:center;justify-content:center;transition:var(--motion-hover)}
.dlp-radio__dot::after{content:"";width:8px;height:8px;border-radius:var(--radius-circular);background:transparent}
.dlp-choice:hover .dlp-radio__dot{border-color:var(--foreground-primary)}
.dlp-choice--checked .dlp-radio__dot{border-color:var(--action-primary)}
.dlp-choice--checked .dlp-radio__dot::after{background:var(--action-primary)}
.dlp-radio-group{display:flex;gap:var(--spacing-xs)}
.dlp-radio-group--vertical{flex-direction:column}

.dlp-switch{display:inline-flex;align-items:center;gap:var(--spacing-s);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-300);color:var(--foreground-primary)}
.dlp-switch__track{width:40px;height:20px;border-radius:var(--radius-circular);border:var(--stroke-width-thin) solid var(--color-neutral-grey-46);background:transparent;position:relative;flex-shrink:0;transition:background-color var(--duration-faster) var(--curve-easy-ease),border-color var(--duration-faster) var(--curve-easy-ease)}
.dlp-switch__thumb{position:absolute;top:2px;left:3px;width:14px;height:14px;border-radius:var(--radius-circular);background:var(--color-neutral-grey-46);transition:transform var(--duration-faster) var(--curve-easy-ease),background-color var(--duration-faster) var(--curve-easy-ease)}
.dlp-switch--checked .dlp-switch__track{background:var(--action-primary);border-color:var(--action-primary)}
.dlp-switch--checked .dlp-switch__thumb{transform:translateX(19px);background:var(--color-neutral-white)}
.dlp-switch[aria-disabled="true"]{color:var(--foreground-disabled);pointer-events:none}
.dlp-switch[aria-disabled="true"] .dlp-switch__track{border-color:var(--border-disabled);background:var(--background-disabled)}

/* Slider */
.dlp-slider{display:flex;align-items:center;height:var(--control-height-medium);width:100%;position:relative;cursor:pointer}
.dlp-slider__rail{position:absolute;left:0;right:0;height:4px;border-radius:var(--radius-circular);background:var(--color-neutral-grey-88)}
.dlp-slider__fill{position:absolute;left:0;height:4px;border-radius:var(--radius-circular);background:var(--action-primary)}
.dlp-slider__thumb{position:absolute;width:20px;height:20px;border-radius:var(--radius-circular);background:var(--color-neutral-white);border:calc(var(--stroke-width-thin) * 5) solid var(--action-primary);box-shadow:var(--shadow-2);transform:translateX(-50%)}
.dlp-slider--vertical{flex-direction:column;width:var(--control-height-medium);height:120px}

/* Rating */
.dlp-rating{display:inline-flex;align-items:center;gap:var(--spacing-xxs);color:var(--brand-accent-highlight)}
.dlp-rating__star{background:none;border:0;padding:0;cursor:pointer;display:flex;color:inherit}
.dlp-rating__star--empty{color:var(--color-neutral-grey-74)}
.dlp-rating__count{color:var(--foreground-secondary);font-size:var(--font-size-200);margin-left:var(--spacing-xs)}

/* Swatch picker */
.dlp-swatches{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}
.dlp-swatch{width:28px;height:28px;border-radius:var(--radius-inset);border:var(--stroke-width-thin) solid rgba(0,0,0,.12);cursor:pointer;padding:0;position:relative}
.dlp-swatch--circular{border-radius:var(--radius-circular)}
.dlp-swatch--selected{box-shadow:0 0 0 2px var(--background-surface),0 0 0 4px var(--action-primary)}

/* ============================== DROPDOWN / MENU / LIST ============================== */
.dlp-dropdown{position:relative}
.dlp-dropdown__trigger{justify-content:space-between;text-align:left;width:100%;cursor:pointer}
.dlp-listbox{background:var(--background-surface);border:var(--stroke-width-thin) solid var(--border-subtle);border-radius:var(--radius-surface);box-shadow:var(--elevation-flyout);padding:var(--spacing-xs);min-width:160px;max-height:280px;overflow:auto}
.dlp-listbox--floating{position:absolute;z-index:40;top:calc(100% + var(--spacing-xs));left:0;right:0}
.dlp-option,.dlp-menu-item{display:flex;align-items:center;gap:var(--spacing-s);height:var(--control-height-medium);padding:0 var(--spacing-mnudge);border-radius:var(--radius-medium);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-primary);cursor:pointer;border:0;background:none;width:100%;text-align:left;white-space:nowrap}
.dlp-option:hover,.dlp-menu-item:hover{background:var(--action-subtle-hover)}
.dlp-option--selected{background:var(--background-selected);color:var(--foreground-brand);font-weight:var(--font-weight-semibold)}
.dlp-menu-item[aria-disabled="true"]{color:var(--foreground-disabled);pointer-events:none}
.dlp-menu-item__secondary{margin-left:auto;color:var(--foreground-tertiary);font-size:var(--font-size-200);padding-left:var(--spacing-l)}
.dlp-menu-section__header{padding:var(--spacing-xs) var(--spacing-mnudge);font-size:var(--font-size-200);line-height:var(--line-height-200);font-weight:var(--font-weight-semibold);color:var(--foreground-secondary)}

.dlp-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.dlp-list-item{display:flex;align-items:center;gap:var(--spacing-m);padding:var(--spacing-s) var(--spacing-m);border-radius:var(--radius-control);cursor:pointer;color:var(--foreground-primary)}
.dlp-list-item:hover{background:var(--action-subtle-hover)}
.dlp-list-item--selected{background:var(--background-selected)}
.dlp-list-item__primary{font-size:var(--font-size-300);line-height:var(--line-height-300);font-weight:var(--font-weight-semibold)}
.dlp-list-item__secondary{font-size:var(--font-size-200);line-height:var(--line-height-200);color:var(--foreground-secondary)}
.dlp-list--divided .dlp-list-item{border-radius:0;border-bottom:var(--stroke-width-thin) solid var(--datagrid-divider)}

/* Tree */
.dlp-tree{display:flex;flex-direction:column}
.dlp-tree-item__row{display:flex;align-items:center;gap:var(--spacing-xs);height:var(--control-height-medium);padding:0 var(--spacing-s);border-radius:var(--radius-medium);cursor:pointer;font-size:var(--font-size-300);color:var(--foreground-primary)}
.dlp-tree-item__row:hover{background:var(--action-subtle-hover)}
.dlp-tree-item__row--selected{background:var(--background-selected);font-weight:var(--font-weight-semibold)}
.dlp-tree-item__chevron{display:flex;color:var(--foreground-secondary);transition:transform var(--duration-faster) var(--curve-easy-ease)}
.dlp-tree-item__chevron--open{transform:rotate(90deg)}
.dlp-tree__children{padding-left:var(--spacing-xl)}

/* ============================== SURFACES ============================== */
.dlp-card{background:var(--background-card);border:var(--stroke-width-thin) solid var(--border-subtle);border-radius:var(--radius-surface);box-shadow:var(--elevation-card);display:flex;flex-direction:column;gap:var(--spacing-m);padding:var(--spacing-m);color:var(--foreground-primary)}
.dlp-card--small{padding:var(--spacing-s);gap:var(--spacing-s)}
.dlp-card--large{padding:var(--spacing-l);gap:var(--spacing-l)}
.dlp-card--filled{background:var(--background-subtle)}
.dlp-card--filled-alt{background:var(--background-canvas);border-color:transparent}
.dlp-card--subtle{background:transparent;border-color:var(--border-subtle)}
.dlp-card--interactive{cursor:pointer;transition:var(--motion-hover)}
.dlp-card--interactive:hover{background:var(--background-subtle-hover)}
.dlp-card--selected{border-color:var(--border-accent);background:var(--background-selected)}
.dlp-card--horizontal{flex-direction:row;align-items:center}
.dlp-card__header{display:flex;align-items:center;gap:var(--spacing-m)}
.dlp-card__header-text{display:flex;flex-direction:column;min-width:0;flex:1}
.dlp-card__title{font-size:var(--font-size-300);line-height:var(--line-height-300);font-weight:var(--font-weight-semibold)}
.dlp-card__subtitle{font-size:var(--font-size-200);line-height:var(--line-height-200);color:var(--foreground-secondary)}
.dlp-card__body{font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-secondary)}
.dlp-card__footer{display:flex;align-items:center;gap:var(--spacing-s)}
.dlp-card__media{margin:calc(-1 * var(--spacing-m));margin-bottom:0;overflow:hidden;border-radius:calc(var(--radius-surface) - 1px) calc(var(--radius-surface) - 1px) 0 0}
.dlp-card__media img{display:block;width:100%;height:100%;object-fit:cover}

.dlp-divider{display:flex;align-items:center;gap:var(--spacing-m);color:var(--foreground-secondary);font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-divider::before,.dlp-divider::after{content:"";flex:1;height:var(--stroke-width-thin);background:var(--datagrid-divider)}
.dlp-divider--start::before{flex:0 0 var(--spacing-m)}
.dlp-divider--end::after{flex:0 0 var(--spacing-m)}
.dlp-divider--plain::before,.dlp-divider--plain::after{margin:0}
.dlp-divider--vertical{flex-direction:column;height:100%;width:auto;padding:0 var(--spacing-m)}
.dlp-divider--vertical::before,.dlp-divider--vertical::after{width:var(--stroke-width-thin);height:auto}
.dlp-divider--strong::before,.dlp-divider--strong::after{background:var(--border-strong)}

.dlp-accordion{border-top:var(--stroke-width-thin) solid var(--datagrid-divider)}
.dlp-accordion__item{border-bottom:var(--stroke-width-thin) solid var(--datagrid-divider)}
.dlp-accordion__header{display:flex;align-items:center;gap:var(--spacing-s);width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);font-weight:var(--font-weight-semibold);color:var(--foreground-primary);padding:var(--spacing-mnudge) var(--spacing-s)}
.dlp-accordion__header:hover{background:var(--action-subtle-hover)}
.dlp-accordion--small .dlp-accordion__header{padding:var(--spacing-snudge) var(--spacing-s);font-size:var(--font-size-200)}
.dlp-accordion--large .dlp-accordion__header{padding:var(--spacing-m) var(--spacing-s);font-size:var(--font-size-400)}
.dlp-accordion__chevron{display:flex;color:var(--foreground-secondary);transition:transform var(--duration-normal) var(--curve-decelerate)}
.dlp-accordion__chevron--open{transform:rotate(90deg)}
.dlp-accordion__panel{padding:0 var(--spacing-s) var(--spacing-m) var(--spacing-xxxl);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-secondary)}

.dlp-dialog__backdrop{position:fixed;inset:0;background:var(--background-overlay);display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--spacing-xxl)}
.dlp-dialog{background:var(--background-surface);border-radius:var(--radius-surface);box-shadow:var(--elevation-dialog);padding:var(--spacing-xxl);max-width:600px;width:100%;display:flex;flex-direction:column;gap:var(--spacing-l);max-height:100%;overflow:auto}
.dlp-dialog--small{max-width:340px}
.dlp-dialog__title{font-size:var(--font-size-500);line-height:var(--line-height-500);font-weight:var(--font-weight-semibold);margin:0;display:flex;align-items:flex-start;gap:var(--spacing-m)}
.dlp-dialog__body{font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-secondary)}
.dlp-dialog__actions{display:flex;justify-content:flex-end;gap:var(--spacing-s)}

.dlp-drawer{background:var(--background-surface);box-shadow:var(--elevation-drawer);display:flex;flex-direction:column;height:100%}
.dlp-drawer--inline{box-shadow:none;border-right:var(--stroke-width-thin) solid var(--border-subtle)}
.dlp-drawer--small{width:320px}
.dlp-drawer--medium{width:592px}
.dlp-drawer--large{width:940px}
.dlp-drawer__header{display:flex;align-items:center;gap:var(--spacing-m);padding:var(--spacing-l) var(--spacing-xxl);font-size:var(--font-size-500);line-height:var(--line-height-500);font-weight:var(--font-weight-semibold)}
.dlp-drawer__body{flex:1;overflow:auto;padding:0 var(--spacing-xxl) var(--spacing-l)}
.dlp-drawer__footer{display:flex;gap:var(--spacing-s);padding:var(--spacing-l) var(--spacing-xxl);border-top:var(--stroke-width-thin) solid var(--border-subtle)}

.dlp-popover{background:var(--background-surface);border:var(--stroke-width-thin) solid var(--border-subtle);border-radius:var(--radius-surface);box-shadow:var(--elevation-flyout);padding:var(--spacing-m) var(--spacing-l);font-size:var(--font-size-300);line-height:var(--line-height-300);max-width:320px}
.dlp-popover--brand{background:var(--action-primary);color:var(--foreground-on-accent);border-color:var(--action-primary)}
.dlp-teaching{max-width:320px;display:flex;flex-direction:column;gap:var(--spacing-s);padding:var(--spacing-l)}
.dlp-teaching__title{font-size:var(--font-size-400);line-height:var(--line-height-400);font-weight:var(--font-weight-semibold);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-s)}
.dlp-teaching__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-s);margin-top:var(--spacing-xs)}
.dlp-teaching__progress{font-size:var(--font-size-200);color:var(--foreground-secondary)}
.dlp-teaching--brand .dlp-teaching__progress{color:rgba(255,255,255,.82)}

.dlp-tooltip{background:var(--background-surface);border:var(--stroke-width-thin) solid var(--border-subtle);border-radius:var(--radius-medium);box-shadow:var(--shadow-4);padding:var(--spacing-xs) var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200);color:var(--foreground-primary);max-width:240px}
.dlp-tooltip--inverted{background:var(--background-inverted);color:var(--foreground-on-inverted);border-color:transparent}

.dlp-acrylic{background:rgba(255,255,255,.72);backdrop-filter:blur(30px) saturate(125%);-webkit-backdrop-filter:blur(30px) saturate(125%);border:var(--stroke-width-thin) solid rgba(255,255,255,.5);border-radius:var(--radius-surface)}
.dlp-acrylic--dark{background:rgba(41,41,41,.72);border-color:rgba(255,255,255,.08);color:var(--color-neutral-white)}

/* ============================== NAVIGATION ============================== */
.dlp-breadcrumb{display:flex;align-items:center;gap:var(--spacing-xxs);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);flex-wrap:wrap}
.dlp-breadcrumb__item{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--foreground-secondary);padding:var(--spacing-xxs) var(--spacing-xs);border-radius:var(--radius-medium);text-decoration:none;background:none;border:0;cursor:pointer;font:inherit}
.dlp-breadcrumb__item:hover{background:var(--action-subtle-hover);color:var(--foreground-primary)}
.dlp-breadcrumb__item--current{color:var(--foreground-primary);font-weight:var(--font-weight-semibold);pointer-events:none}
.dlp-breadcrumb__sep{display:flex;color:var(--foreground-tertiary)}
.dlp-breadcrumb--small{font-size:var(--font-size-200)}
.dlp-breadcrumb--large{font-size:var(--font-size-400)}

.dlp-tablist{display:flex;gap:var(--spacing-xs);border-bottom:var(--stroke-width-thin) solid var(--datagrid-divider)}
.dlp-tablist--vertical{flex-direction:column;border-bottom:0;border-right:var(--stroke-width-thin) solid var(--datagrid-divider)}
.dlp-tablist--subtle{border:0}
.dlp-tab{position:relative;display:flex;align-items:center;gap:var(--spacing-s);background:none;border:0;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-secondary);padding:var(--spacing-mnudge);border-radius:var(--radius-medium) var(--radius-medium) 0 0;white-space:nowrap}
.dlp-tab:hover{color:var(--foreground-primary);background:var(--action-subtle-hover)}
.dlp-tab--small{padding:var(--spacing-snudge) var(--spacing-s);font-size:var(--font-size-200)}
.dlp-tab--selected{color:var(--foreground-primary);font-weight:var(--font-weight-semibold)}
.dlp-tab--selected::after{content:"";position:absolute;left:var(--spacing-mnudge);right:var(--spacing-mnudge);bottom:0;height:var(--stroke-width-thick);border-radius:var(--radius-circular);background:var(--action-primary)}
.dlp-tablist--vertical .dlp-tab{border-radius:var(--radius-medium) 0 0 var(--radius-medium);justify-content:flex-start}
.dlp-tablist--vertical .dlp-tab--selected::after{left:0;right:auto;top:var(--spacing-s);bottom:var(--spacing-s);width:var(--stroke-width-thicker);height:auto}

.dlp-nav{display:flex;flex-direction:column;gap:var(--spacing-xxs);padding:var(--spacing-s);background:var(--background-surface);border-right:var(--stroke-width-thin) solid var(--border-subtle);width:260px;height:100%;overflow:auto}
.dlp-nav--collapsed{width:52px;align-items:center}
.dlp-nav__app{display:flex;align-items:center;gap:var(--spacing-m);padding:var(--spacing-s);font-weight:var(--font-weight-semibold);font-size:var(--font-size-400);color:var(--foreground-primary)}
.dlp-nav__section{font-size:var(--font-size-200);line-height:var(--line-height-200);font-weight:var(--font-weight-semibold);color:var(--foreground-secondary);padding:var(--spacing-mnudge) var(--spacing-mnudge) var(--spacing-xs)}
.dlp-nav__item{position:relative;display:flex;align-items:center;gap:var(--spacing-m);height:var(--control-height-large);padding:0 var(--spacing-mnudge);border-radius:var(--radius-control);border:0;background:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-primary);width:100%;text-align:left;text-decoration:none}
.dlp-nav__item:hover{background:var(--action-subtle-hover)}
.dlp-nav__item--small{height:var(--control-height-medium)}
.dlp-nav__item--selected{background:var(--background-selected);color:var(--foreground-brand);font-weight:var(--font-weight-semibold)}
.dlp-nav__item--selected::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:var(--stroke-width-thicker);height:16px;border-radius:var(--radius-circular);background:var(--action-primary)}
.dlp-nav__sub{padding-left:var(--spacing-xxxl)}
.dlp-nav__badge{margin-left:auto}

.dlp-toolbar{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs);background:var(--background-surface);border-radius:var(--radius-control);flex-wrap:wrap}
.dlp-toolbar__divider{width:var(--stroke-width-thin);align-self:stretch;background:var(--datagrid-divider);margin:var(--spacing-xs) var(--spacing-xs)}

/* Carousel */
.dlp-carousel{position:relative;display:flex;flex-direction:column;gap:var(--spacing-m)}
.dlp-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--radius-surface)}
.dlp-carousel__track{display:flex;transition:transform var(--duration-slow) var(--curve-decelerate)}
.dlp-carousel__slide{flex:0 0 100%}
.dlp-carousel__nav{display:flex;align-items:center;justify-content:center;gap:var(--spacing-s)}
.dlp-carousel__step{width:8px;height:8px;border-radius:var(--radius-circular);border:0;padding:0;background:var(--color-neutral-grey-74);cursor:pointer}
.dlp-carousel__step--active{background:var(--action-primary);width:20px}
.dlp-carousel__step--bar{border-radius:var(--radius-circular);width:32px;height:4px}
.dlp-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.dlp-carousel__arrow--prev{left:var(--spacing-m)}
.dlp-carousel__arrow--next{right:var(--spacing-m)}

/* ============================== DATA DISPLAY ============================== */
.dlp-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);background:var(--color-navy-160);color:var(--color-navy-60);font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);overflow:hidden;flex-shrink:0;position:relative}
.dlp-avatar img{width:100%;height:100%;object-fit:cover}
.dlp-avatar--square{border-radius:var(--radius-inset)}
.dlp-avatar--gold{background:var(--color-gold-160);color:var(--color-gold-50)}
.dlp-avatar--neutral{background:var(--color-neutral-grey-92);color:var(--color-neutral-grey-26)}
.dlp-avatar-group{display:inline-flex}
.dlp-avatar-group--stack .dlp-avatar{margin-left:-8px;box-shadow:0 0 0 2px var(--background-surface)}
.dlp-avatar-group--stack .dlp-avatar:first-child{margin-left:0}
.dlp-avatar-group--spread{gap:var(--spacing-xs)}

.dlp-presence{border-radius:var(--radius-circular);border:2px solid var(--background-surface);display:inline-flex;align-items:center;justify-content:center;color:var(--color-neutral-white)}
.dlp-presence--available{background:var(--color-success)}
.dlp-presence--busy{background:var(--color-danger)}
.dlp-presence--away{background:var(--color-warning)}
.dlp-presence--offline{background:var(--color-neutral-grey-62)}
.dlp-presence--out-of-office{background:var(--color-danger)}
.dlp-avatar__presence{position:absolute;right:-1px;bottom:-1px}

.dlp-persona{display:inline-flex;align-items:center;gap:var(--spacing-m);min-width:0}
.dlp-persona__text{display:flex;flex-direction:column;min-width:0}
.dlp-persona__primary{font-size:var(--font-size-300);line-height:var(--line-height-300);font-weight:var(--font-weight-semibold);color:var(--foreground-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlp-persona__secondary,.dlp-persona__tertiary{font-size:var(--font-size-200);line-height:var(--line-height-200);color:var(--foreground-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dlp-badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);border-radius:var(--radius-circular);border:var(--stroke-width-thin) solid transparent;white-space:nowrap}
.dlp-badge--tiny{height:6px;min-width:6px;padding:0}
.dlp-badge--extra-small{height:10px;min-width:10px;padding:0}
.dlp-badge--small{height:16px;min-width:16px;padding:0 var(--spacing-xs);font-size:var(--font-size-100);line-height:var(--line-height-100)}
.dlp-badge--medium{height:20px;min-width:20px;padding:0 var(--spacing-snudge);font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-badge--large{height:24px;min-width:24px;padding:0 var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-badge--extra-large{height:32px;min-width:32px;padding:0 var(--spacing-mnudge);font-size:var(--font-size-300);line-height:var(--line-height-300)}
.dlp-badge--rounded{border-radius:var(--radius-medium)}
.dlp-badge--filled{background:var(--action-primary);color:var(--foreground-on-accent)}
.dlp-badge--ghost{background:transparent;color:var(--action-primary)}
.dlp-badge--outline{background:transparent;color:var(--action-primary);border-color:currentColor}
.dlp-badge--tint{background:var(--background-selected);color:var(--color-navy-60);border-color:var(--color-navy-140)}
.dlp-badge--success.dlp-badge--filled{background:var(--color-success)}
.dlp-badge--success.dlp-badge--tint{background:var(--status-success-background);color:var(--status-success-foreground);border-color:var(--status-success-border)}
.dlp-badge--warning.dlp-badge--filled{background:var(--color-warning)}
.dlp-badge--warning.dlp-badge--tint{background:var(--status-warning-background);color:var(--status-warning-foreground);border-color:var(--status-warning-border)}
.dlp-badge--danger.dlp-badge--filled{background:var(--color-danger)}
.dlp-badge--danger.dlp-badge--tint{background:var(--status-danger-background);color:var(--status-danger-foreground);border-color:var(--status-danger-border)}
.dlp-badge--info.dlp-badge--tint{background:var(--status-info-background);color:var(--status-info-foreground);border-color:var(--status-info-border)}
.dlp-badge--gold.dlp-badge--filled{background:var(--brand-accent)}
.dlp-badge--gold.dlp-badge--tint{background:var(--brand-accent-subtle);color:var(--brand-accent-foreground);border-color:var(--brand-accent-border)}
.dlp-badge--neutral.dlp-badge--filled{background:var(--color-neutral-grey-26)}
.dlp-badge--neutral.dlp-badge--tint{background:var(--color-neutral-grey-94);color:var(--color-neutral-grey-26);border-color:var(--color-neutral-grey-88)}

.dlp-tag{display:inline-flex;align-items:center;gap:var(--spacing-snudge);height:var(--control-height-medium);padding:0 var(--spacing-s);border-radius:var(--radius-control);border:var(--stroke-width-thin) solid var(--border-default);background:var(--background-surface);color:var(--foreground-primary);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);max-width:100%}
.dlp-tag--small{height:var(--control-height-small);font-size:var(--font-size-200);padding:0 var(--spacing-snudge)}
.dlp-tag--large{height:var(--control-height-large);font-size:var(--font-size-400);padding:0 var(--spacing-m)}
.dlp-tag--filled{background:var(--color-neutral-grey-94);border-color:transparent}
.dlp-tag--brand{background:var(--background-selected);border-color:transparent;color:var(--color-navy-60)}
.dlp-tag--circular{border-radius:var(--radius-circular)}
.dlp-tag__dismiss{display:flex;background:none;border:0;padding:0;cursor:pointer;color:var(--foreground-secondary);border-radius:var(--radius-small)}
.dlp-tag__dismiss:hover{color:var(--foreground-primary)}
.dlp-tag--interactive{cursor:pointer;transition:var(--motion-hover)}
.dlp-tag--interactive:hover{background:var(--action-subtle-hover)}
.dlp-tag--selected{background:var(--background-selected);border-color:var(--border-accent);color:var(--foreground-brand)}
.dlp-tag__secondary{border-left:var(--stroke-width-thin) solid var(--border-default);margin-left:var(--spacing-xxs);padding-left:var(--spacing-snudge);display:flex;align-items:center}

.dlp-status{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-primary)}
.dlp-status--small{font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-status--large{font-size:var(--font-size-400);line-height:var(--line-height-400)}
.dlp-status__icon{display:flex;flex-shrink:0}
.dlp-status--success .dlp-status__icon{color:var(--status-success-icon)}
.dlp-status--warning .dlp-status__icon{color:var(--status-warning-icon)}
.dlp-status--danger .dlp-status__icon{color:var(--status-danger-icon)}
.dlp-status--info .dlp-status__icon{color:var(--status-info-icon)}
.dlp-status--neutral .dlp-status__icon{color:var(--foreground-secondary)}

/* DataGrid */
.dlp-datagrid{width:100%;border-collapse:collapse;background:var(--background-card);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);color:var(--foreground-primary)}
.dlp-datagrid th{background:var(--datagrid-header-background);color:var(--datagrid-header-foreground);font-weight:var(--font-weight-semibold);font-size:var(--font-size-200);line-height:var(--line-height-200);text-align:left;padding:0 var(--spacing-s);height:32px;border-bottom:var(--stroke-width-thin) solid var(--datagrid-divider);white-space:nowrap}
.dlp-datagrid th button{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.dlp-datagrid td{padding:0 var(--spacing-s);border-bottom:var(--stroke-width-thin) solid var(--datagrid-divider);vertical-align:middle}
.dlp-datagrid--smaller td{height:24px}
.dlp-datagrid--small td{height:32px}
.dlp-datagrid--medium td{height:44px}
.dlp-datagrid--large td{height:60px}
.dlp-datagrid tbody tr:hover{background:var(--datagrid-row-hover)}
.dlp-datagrid tbody tr[aria-selected="true"]{background:var(--datagrid-row-selected)}
.dlp-datagrid__secondary{color:var(--foreground-secondary);font-size:var(--font-size-200);line-height:var(--line-height-200)}
.dlp-datagrid__cell{display:flex;align-items:center;gap:var(--spacing-s);min-width:0}
.dlp-datagrid__numeric{text-align:right;font-variant-numeric:tabular-nums}

/* ============================== FEEDBACK ============================== */
.dlp-messagebar{display:flex;align-items:flex-start;gap:var(--spacing-s);padding:var(--spacing-snudge) var(--spacing-m);border-radius:var(--radius-control);border:var(--stroke-width-thin) solid;font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300);min-height:36px}
.dlp-messagebar__icon{display:flex;flex-shrink:0;margin-top:1px}
.dlp-messagebar__body{flex:1;min-width:0}
.dlp-messagebar__title{font-weight:var(--font-weight-semibold);margin-right:var(--spacing-xs)}
.dlp-messagebar__actions{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}
.dlp-messagebar--info{background:var(--color-neutral-grey-96);border-color:var(--border-subtle);color:var(--foreground-primary)}
.dlp-messagebar--info .dlp-messagebar__icon{color:var(--status-info-icon)}
.dlp-messagebar--success{background:var(--status-success-background);border-color:var(--status-success-border);color:var(--status-success-foreground)}
.dlp-messagebar--warning{background:var(--status-warning-background);border-color:var(--status-warning-border);color:var(--status-warning-foreground)}
.dlp-messagebar--danger{background:var(--status-danger-background);border-color:var(--status-danger-border);color:var(--status-danger-foreground)}
.dlp-messagebar--multiline{flex-direction:column;align-items:stretch}

.dlp-toast{display:flex;gap:var(--spacing-s);width:292px;padding:var(--spacing-m);background:var(--background-surface);border:var(--stroke-width-thin) solid var(--border-subtle);border-radius:var(--radius-surface);box-shadow:var(--elevation-toast);font-family:var(--font-family-base);font-size:var(--font-size-300);line-height:var(--line-height-300)}
.dlp-toast__title{font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:var(--spacing-xs)}
.dlp-toast__body{color:var(--foreground-secondary);font-size:var(--font-size-200);line-height:var(--line-height-200);margin-top:var(--spacing-xxs)}
.dlp-toast__footer{display:flex;gap:var(--spacing-s);margin-top:var(--spacing-s)}
.dlp-toast--success .dlp-toast__title{color:var(--status-success-foreground)}
.dlp-toast--warning .dlp-toast__title{color:var(--status-warning-foreground)}
.dlp-toast--danger .dlp-toast__title{color:var(--status-danger-foreground)}

.dlp-progress{width:100%;height:2px;background:var(--color-neutral-grey-88);border-radius:var(--radius-circular);overflow:hidden}
.dlp-progress--large{height:4px}
.dlp-progress__bar{height:100%;background:var(--action-primary);border-radius:var(--radius-circular);transition:width var(--duration-normal) var(--curve-easy-ease)}
.dlp-progress--success .dlp-progress__bar{background:var(--color-success)}
.dlp-progress--warning .dlp-progress__bar{background:var(--color-warning)}
.dlp-progress--danger .dlp-progress__bar{background:var(--color-danger)}
.dlp-progress--indeterminate .dlp-progress__bar{width:33%;animation:dlp-indeterminate 2s var(--curve-easy-ease) infinite}
@keyframes dlp-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

.dlp-spinner{display:inline-flex;align-items:center;gap:var(--spacing-s);font-family:var(--font-family-base);font-size:var(--font-size-300);color:var(--foreground-primary)}
.dlp-spinner__ring{border-radius:var(--radius-circular);border-style:solid;border-color:var(--color-neutral-grey-88);border-top-color:var(--action-primary);animation:dlp-spin 1.5s linear infinite}
.dlp-spinner--inverted .dlp-spinner__ring{border-color:rgba(255,255,255,.35);border-top-color:var(--color-neutral-white)}
@keyframes dlp-spin{to{transform:rotate(360deg)}}

.dlp-skeleton{background:linear-gradient(90deg,var(--color-neutral-grey-92) 25%,var(--color-neutral-grey-96) 37%,var(--color-neutral-grey-92) 63%);background-size:400% 100%;animation:dlp-shimmer 1.6s var(--curve-linear) infinite;border-radius:var(--radius-medium)}
.dlp-skeleton--circle{border-radius:var(--radius-circular)}
.dlp-skeleton--static{animation:none}
@keyframes dlp-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

.dlp-infolabel{display:inline-flex;align-items:center;gap:var(--spacing-xxs)}
.dlp-infolabel__button{display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--foreground-secondary);border-radius:var(--radius-circular)}
.dlp-infolabel__button:hover{color:var(--foreground-primary)}

/* ============================== UTILITIES ============================== */
.dlp-placeholder{background:var(--color-neutral-grey-94);border:var(--stroke-width-thin) dashed var(--border-default);border-radius:var(--radius-inset);display:flex;align-items:center;justify-content:center;color:var(--foreground-tertiary);font-family:var(--font-family-base);font-size:var(--font-size-200)}
.dlp-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}