/*! @pdp/design-system v0.15.12 — pdp-components.css: PDP komponentlari (.eco-*), faqat --eco-* tokenlari
   https://design.pdp.uz/ds/css/v0.15.12/pdp-components.css (latest: https://design.pdp.uz/ds/css/pdp-components.css) · manifest: https://design.pdp.uz/ds/css/v0.15.12/manifest.json
   Ulanish tartibi / order: fonts.css → tokens/<brand>.css → pdp-base.css (ixtiyoriy) → pdp-components.css → products/<product>.css
   Manba — tools/ecosystem-ds (design.pdp.uz repo), build.js yig‘adi: qo‘lda tahrirlamang, loyihaga nusxa ko‘chirmang. */
/* — foundation — */
:root {
  --eco-field-focus-w: 1.5px;
  --eco-field-radius-affix: var(--eco-radius-full);
  --eco-field-radius-multiline: var(--eco-radius-3xl);
  --eco-focus-w: 1.5px;
  --eco-viz-bar-max: 24px;
  --eco-viz-bar-fill: 62%;
  --eco-viz-bar-radius: 4px 4px 0 0;
  --eco-viz-line: 2px;
  --eco-viz-line-sub: 1.5px;
  --eco-viz-dot: 8px;
  --eco-viz-ring: 2px;
  --eco-viz-area: .08;
  --eco-viz-dim: .45;
  --eco-viz-track: 8px;
}
.eco-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* — nav — */
:root { --eco-nav-group-font: var(--eco-font-body); --eco-nav-group: 600 11px/16px var(--eco-nav-group-font); --eco-nav-group-ls: .06em; --eco-nav-group-pad: 6px 12px 4px; --eco-nav-item-h: 40px; --eco-nav-item: 500 15px/20px var(--eco-font-body); --eco-nav-sub-h: 34px; --eco-nav-sub-pad: 7px 12px; --eco-nav-sub: 500 14px/20px var(--eco-font-body); }
:root, [data-theme="dark"] { --eco-nav-ink-mix: 78%; --eco-nav-group-mix: 62%; --eco-nav-icon-mix: 55%; --eco-nav-fill-mix: 8%; --eco-nav-line-mix: 15%; --eco-nav-sel-mix: 100%; }
[data-theme="light"] { --eco-nav-ink-mix: 80%; --eco-nav-group-mix: 68%; --eco-nav-icon-mix: 56%; --eco-nav-fill-mix: 6%; --eco-nav-line-mix: 10%; --eco-nav-sel-mix: 92%; }
:root {
  --eco-nav-width: 256px;
  --eco-nav-width-col: 60px;
  --eco-nav-radius: var(--eco-radius-md);
  --eco-nav-weight: 500;
  --eco-nav-sel-weight: 500;
  --eco-nav-cur-weight: 600;
  --eco-nav-count-font: var(--eco-font-body);
}
:root, [data-theme], .eco-shell, [class*="eco-lock-"] {
  --eco-nav-ink: color-mix(in srgb, var(--eco-text-primary) var(--eco-nav-ink-mix), transparent);
  --eco-nav-ink-hover: var(--eco-text-primary);
  --eco-nav-ink-sub: color-mix(in srgb, var(--eco-text-primary) 60%, transparent);
  --eco-nav-ink-group: color-mix(in srgb, var(--eco-text-primary) var(--eco-nav-group-mix), transparent);
  --eco-nav-icon: color-mix(in srgb, var(--eco-text-primary) var(--eco-nav-icon-mix), transparent);
  --eco-nav-icon-sel: var(--eco-text-brand-primary);
  --eco-nav-hover-bg: color-mix(in oklab, var(--eco-text-primary) var(--eco-nav-fill-mix), transparent);
  --eco-nav-line: color-mix(in oklab, var(--eco-text-primary) var(--eco-nav-line-mix), transparent);
  --eco-nav-guide: color-mix(in oklab, var(--eco-text-primary) 20%, transparent);
  --eco-nav-sel-bg: color-mix(in srgb, var(--eco-bg-brand-primary) var(--eco-nav-sel-mix), var(--eco-brand-primary));
  --eco-nav-sel-fg: var(--eco-text-brand-primary);
}
/* — app-surface — */
:root, [data-theme="dark"] { --eco-app-k: 0%; --eco-app-card-shadow: none; --eco-app-well-2: var(--eco-bg-quaternary); }
[data-theme="light"] { --eco-app-k: 100%; --eco-app-card-shadow: none; --eco-app-well-2: var(--eco-bg-tertiary); }
:root, [data-theme], .eco-shell, [class*="eco-lock-"] {
  --eco-app-gap: 16px;
  --eco-app-canvas: var(--eco-app-canvas-b, color-mix(in srgb, var(--eco-bg-secondary) var(--eco-app-k), var(--eco-bg-primary)));
  --eco-app-card: var(--eco-app-card-b, color-mix(in srgb, var(--eco-bg-primary) var(--eco-app-k), var(--eco-bg-secondary)));
  --eco-app-card-hover: var(--eco-app-card-hover-b, color-mix(in srgb, var(--eco-bg-primary_hover) var(--eco-app-k), var(--eco-bg-tertiary)));
  --eco-app-well: var(--eco-app-well-b, color-mix(in srgb, var(--eco-bg-secondary) var(--eco-app-k), var(--eco-bg-tertiary)));
  --eco-app-well-hover: var(--eco-app-well-hover-b, color-mix(in srgb, var(--eco-bg-secondary_hover) var(--eco-app-k), var(--eco-bg-quaternary)));
  --eco-app-control: var(--eco-app-control-b, color-mix(in srgb, var(--eco-bg-primary) var(--eco-app-k), var(--eco-bg-secondary)));
  --eco-app-control-hover: var(--eco-bg-secondary_hover);
  --eco-app-track: var(--eco-app-track-b, color-mix(in srgb, var(--eco-bg-tertiary) var(--eco-app-k), var(--eco-bg-secondary)));
  --eco-app-control-rest: color-mix(in srgb, var(--eco-bg-primary) var(--eco-app-k), transparent);
  --eco-viz-trackbg: color-mix(in oklab, var(--eco-fg-primary) 10%, var(--eco-app-card));
  --eco-viz-ord-1: color-mix(in oklab, var(--eco-fg-primary) 28%, var(--eco-app-card));
  --eco-viz-ord-2: color-mix(in oklab, var(--eco-fg-primary) 52%, var(--eco-app-card));
  --eco-viz-ord-3: color-mix(in oklab, var(--eco-fg-primary) 80%, var(--eco-app-card));
}
:is(.eco-shell__head, .eco-overview__head, .eco-listpage__head, .eco-listpage__views, .eco-listpage__bar, .eco-listpage__foot, .eco-page__head, .eco-page__bar, .eco-page__tabs, .eco-report__bar, .eco-page__foot, .eco-timegrid__legend) {
  --btn-t-bg: var(--eco-app-control); --btn-t-bg-hover: var(--eco-app-control-hover); --ic-tile: var(--eco-app-control); --eco-focus-gap: var(--eco-app-canvas);
}
:is(.eco-shell__head, .eco-overview__head, .eco-listpage__head, .eco-listpage__views, .eco-listpage__bar, .eco-page__head, .eco-page__bar, .eco-report__bar) :is(.eco-segment, .eco-tabs--pill) { --tabs-track: var(--eco-app-track); }
:is(.eco-shell__head, .eco-overview__head, .eco-listpage__head, .eco-listpage__bar, .eco-page__head, .eco-page__bar, .eco-report__bar) .eco-input { --field-bg: var(--eco-app-control); --field-bg-hover: color-mix(in srgb, var(--eco-app-control) 50%, var(--eco-app-control-hover)); }
:is(.eco-overview__card, .eco-kpi, .eco-page__card, .eco-page__fields, .eco-page__tcard, .eco-page__tbl, .eco-page__soon, .eco-page__tile, .eco-report__scroll, .eco-timegrid__scroll, .eco-listpage__scroll, .eco-board__card) {
  --btn-t-bg: var(--eco-app-well); --btn-t-bg-hover: var(--eco-app-well-hover); --ic-tile: var(--eco-app-well); --eco-focus-gap: var(--eco-app-card);
}
/* — icon — */
.eco-icon { width: var(--eco-icon-md); height: var(--eco-icon-md); flex: none; }
.eco-icon--sm { width: var(--eco-icon-sm); height: var(--eco-icon-sm); }
.eco-icon--lg { width: var(--eco-icon-lg); height: var(--eco-icon-lg); }
svg > use.eco-on { display: none; }
:is([aria-selected="true"], [aria-pressed="true"], [aria-current]:not([aria-current="false"])) svg > use:first-child:not(:last-child) { display: none; }
:is([aria-selected="true"], [aria-pressed="true"], [aria-current]:not([aria-current="false"])) svg > use.eco-on { display: inline; }
.eco-input-wrap > .eco-icon { position: absolute; top: 50%; transform: translateY(-50%); color: var(--eco-fg-quaternary); pointer-events: none; }
.eco-input-group__addon > .eco-icon { width: var(--eco-icon-sm); height: var(--eco-icon-sm); color: var(--eco-fg-tertiary); }
.eco-input-group__addon--icon > .eco-icon { width: 20px; height: 20px; color: var(--eco-fg-quaternary); }
.eco-input-group__select + .eco-icon { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--eco-text-secondary); pointer-events: none; }
.eco-input-wrap > .eco-icon:first-child { left: 16px; }
.eco-input-wrap > .eco-icon:last-child:not(:first-child) { right: 16px; }
.eco-field.is-error .eco-input-wrap > .eco-icon:last-child { color: var(--eco-fg-error-secondary); }
.eco-field.is-success .eco-input-wrap > .eco-icon:last-child { color: var(--eco-fg-success-primary); }
/* — button — */
:root, [data-theme] {
  --btn-p-bg: var(--eco-brand-button, var(--eco-bg-brand-solid)); --btn-p-fg: var(--eco-brand-on-button, var(--eco-text-primary_on-brand));
  --btn-a-bg: var(--eco-brand-button-accent, var(--eco-brand-accent)); --btn-a-fg: var(--eco-brand-on-button-accent, var(--eco-brand-on-accent));
  --btn-i-bg: var(--eco-brand-button-ink, var(--eco-text-primary)); --btn-i-fg: var(--eco-brand-on-button-ink, var(--eco-bg-primary));
  --btn-p-bg-hover: color-mix(in srgb, var(--btn-p-bg) 88%, var(--eco-btn-hover-to, var(--btn-p-fg)));
  --btn-a-bg-hover: color-mix(in srgb, var(--btn-a-bg) 88%, var(--eco-btn-accent-hover-to, var(--btn-a-fg)));
  --btn-i-bg-hover: color-mix(in srgb, var(--btn-i-bg) 88%, var(--btn-i-fg));
  --btn-s-fg: var(--eco-text-primary);
  --btn-s-fg-hover: var(--eco-text-primary);
  --btn-n-fg: var(--eco-text-primary);
}
:root, [data-theme="dark"] {
  --btn-t-bg: var(--eco-color-neutral-900); --btn-t-fg: var(--eco-text-secondary);
  --btn-t-bg-hover: var(--eco-color-neutral-800); --btn-t-fg-hover: var(--eco-text-primary);
  --btn-t-bg-surface: var(--eco-color-neutral-800);
  --btn-t-bg-surface-hover: var(--eco-color-neutral-700);
  --btn-o-line: initial;
  --btn-t-bg-file: var(--eco-color-neutral-800); --btn-t-bg-file-hover: var(--eco-color-neutral-700);
  --b-tint-bg-surface: initial;
}
[data-theme="light"] {
  --btn-t-bg: var(--eco-color-surface); --btn-t-fg: var(--eco-color-neutral-700);
  --btn-t-bg-hover: var(--eco-color-surface-hover); --btn-t-fg-hover: var(--eco-color-neutral-700);
  --btn-t-bg-surface: var(--eco-bg-primary);
  --btn-t-bg-surface-hover: var(--eco-color-surface-hover);
  --btn-o-line: var(--eco-border-tertiary);
  --btn-t-bg-file: var(--eco-bg-primary); --btn-t-bg-file-hover: var(--eco-color-surface-hover);
  --b-tint-bg-surface: var(--eco-bg-primary);
}
.eco-card:not(.eco-card--raised, .eco-card--app) { --btn-t-bg: var(--btn-t-bg-surface); --btn-t-bg-hover: var(--btn-t-bg-surface-hover); }
:where(.eco-card:not(.eco-card--raised, .eco-card--app)) > * { --eco-focus-gap: var(--eco-bg-secondary); }
:where(.eco-card--raised) > * { --eco-focus-gap: var(--eco-bg-primary); }
.eco-btn { --spin: currentColor; --ring: transparent; --ico: currentColor; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--eco-btn-gap, var(--eco-spacing-md)); height: 40px; padding: 0 var(--eco-spacing-xl); border: 0; border-radius: var(--eco-radius-4xl); background: transparent; box-shadow: inset 0 0 0 1px var(--ring); font: 500 var(--eco-text-md)/var(--eco-text-md--line-height) var(--eco-font-body); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear, transform var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-btn svg { width: 16px; height: 16px; flex: none; color: var(--ico); transition: color var(--eco-duration-fast) linear; }
.eco-btn:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-btn:not([disabled]):not([aria-disabled="true"]):not(.eco-btn--link-color):not(.eco-btn--link-gray):not(.eco-btn--link-destructive):not(.eco-btn-group > .eco-btn):active { transform: scale(.975); }
.eco-btn--xs { gap: var(--eco-spacing-xs); height: 32px; padding: 0 var(--eco-spacing-lg); border-radius: var(--eco-radius-2xl); font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); }
.eco-btn--sm { height: 36px; font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); }
.eco-btn--lg { height: 44px; padding: 0 var(--eco-spacing-2xl); }
.eco-btn--xl { height: 48px; padding: 0 var(--eco-spacing-3xl); }
.eco-btn:is(.eco-btn--lg, .eco-btn--xl) svg { width: 20px; height: 20px; }
.eco-btn--icon { width: 40px; padding: 0; }
.eco-btn--icon.eco-btn--xs { width: 32px; }
.eco-btn--icon.eco-btn--sm { width: 36px; }
.eco-btn--icon.eco-btn--lg { width: 44px; }
.eco-btn--icon.eco-btn--xl { width: 48px; }
.eco-btn--block { width: 100%; }
.eco-btn--primary { --ico: var(--btn-p-fg); background: var(--btn-p-bg); color: var(--btn-p-fg); }
.eco-btn--accent { --ico: var(--btn-a-fg); background: var(--btn-a-bg); color: var(--btn-a-fg); }
.eco-btn--ink { --ico: var(--btn-i-fg); background: var(--btn-i-bg); color: var(--btn-i-fg); }
.eco-btn--primary:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--btn-p-bg-hover); }
.eco-btn--accent:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--btn-a-bg-hover); }
.eco-btn--ink:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--btn-i-bg-hover); }
.eco-btn--secondary { --ico: var(--btn-s-fg); background: var(--btn-t-bg); color: var(--btn-s-fg); }
.eco-btn--tertiary { --ico: var(--btn-n-fg); background: var(--btn-t-bg); color: var(--btn-n-fg); }
.eco-btn--outline { --ring: var(--btn-o-line, var(--btn-t-bg));--ico: var(--btn-n-fg); color: var(--btn-n-fg); }
.eco-btn--ghost { --ico: var(--btn-n-fg); color: var(--eco-btn-ghost-fg, var(--btn-n-fg)); }
.eco-btn:is(.eco-btn--secondary, .eco-btn--tertiary):not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--btn-t-bg-hover); }
.eco-btn--secondary:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { --ico: var(--btn-s-fg-hover); color: var(--btn-s-fg-hover); }
.eco-btn:is(.eco-btn--outline, .eco-btn--ghost):not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--btn-t-bg); }
.eco-btn--on-inverse { --ink: var(--eco-inverse-ink, var(--eco-rail-ink, var(--eco-color-white))); --ico: var(--ink); height: 36px; padding: 0 14px; border-radius: var(--eco-radius-full); color: var(--ink); }
.eco-btn--on-inverse svg { width: 18px; height: 18px; }
.eco-btn--on-inverse.eco-btn--icon { width: 36px; padding: 0; }
.eco-btn--on-inverse:not([disabled], [aria-disabled="true"]):is(:hover, .is-hover) { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.eco-btn--on-inverse:not([disabled], [aria-disabled="true"]):is(:active, .is-active) { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.eco-btn--toggle[aria-pressed="true"] { --ico: var(--eco-bg-primary); background: var(--eco-text-primary); color: var(--eco-bg-primary); }
.eco-btn--toggle[aria-pressed="true"]:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: color-mix(in oklab, var(--eco-text-primary) 86%, var(--eco-bg-primary)); }
.eco-btn--toggle.eco-btn--quiet[aria-pressed="true"] { --ico: var(--btn-n-fg); background: var(--btn-t-bg-hover); color: var(--btn-n-fg); font-weight: 600; }
.eco-btn--toggle.eco-btn--quiet[aria-pressed="true"]:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: color-mix(in oklab, var(--btn-t-bg-hover) 80%, var(--eco-text-primary)); }
.eco-btn--quiet:not([aria-pressed="true"]) > .eco-btn__on, .eco-btn--quiet[aria-pressed="true"] > .eco-btn__off { display: none; }
.eco-btn--link-color, .eco-btn--link-gray, .eco-btn--link-destructive { height: auto; padding: 0; border-radius: var(--eco-radius-xs); }
.eco-btn--link-color > span, .eco-btn--link-gray > span, .eco-btn--link-destructive > span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--eco-duration-fast) linear; }
.eco-btn--link-color { color: var(--eco-text-brand-secondary); }
.eco-btn--link-color:hover { color: var(--eco-text-brand-secondary_hover); }
.eco-btn--link-gray { --ico: var(--eco-fg-quaternary); color: var(--eco-text-tertiary); }
.eco-btn--link-gray:hover { color: var(--eco-text-tertiary_hover); }
.eco-btn--link-color:hover > span, .eco-btn--link-gray:hover > span, .eco-btn--link-destructive:hover > span { text-decoration-color: currentColor; }
.eco-btn.eco-btn--inline { min-height: 24px; vertical-align: bottom; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); letter-spacing: 0; white-space: normal; text-align: start; }
.eco-btn--link-color.eco-btn--inline:is([aria-disabled="true"], :disabled):is(:hover, :active) { color: var(--eco-text-brand-secondary); }
.eco-btn.eco-btn--inline:is([aria-disabled="true"], :disabled):is(:hover, :active) > span { text-decoration-color: transparent; }
fieldset:disabled .eco-btn.eco-btn--inline { opacity: 1; cursor: not-allowed; }
.eco-btn.eco-btn--cell { height: auto; min-height: 24px; padding-inline: 0; white-space: nowrap; }
@container listpage (max-width: 639px) { .eco-btn.eco-btn--fold { width: 36px; padding: 0; justify-content: center; } }
.eco-btn--primary-destructive { --ico: var(--eco-text-white); background: var(--eco-bg-error-solid); color: var(--eco-text-white); }
.eco-btn--primary-destructive:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--eco-bg-error-solid_hover); }
.eco-btn--secondary-destructive { background: var(--eco-bg-error-primary); color: var(--eco-text-error-primary); }
.eco-btn--secondary-destructive:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--eco-bg-error-secondary); color: var(--eco-text-error-primary_hover); }
.eco-btn--tertiary-destructive { color: var(--eco-text-error-primary); }
.eco-btn--tertiary-destructive:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--eco-bg-error-primary); color: var(--eco-text-error-primary_hover); }
.eco-btn--link-destructive { color: var(--eco-text-error-primary); }
.eco-btn--link-destructive:hover { color: var(--eco-text-error-primary_hover); }
:is(.eco-card:not(.eco-card--raised, .eco-card--app)) :is(.eco-btn--tertiary-destructive, .eco-btn--link-destructive, .eco-field.is-error .eco-hint, .eco-slider.is-error > .eco-hint, .eco-otp.is-error .eco-otp__foot, .eco-file__status--error, .eco-progress-field.is-error .eco-progress-field__hint) { color: var(--eco-text-error-primary_hover); }
.eco-btn[class*="destructive"]:focus-visible { --focus-c: var(--eco-focus-ring-error); }
.eco-btn[disabled], .eco-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.eco-btn.is-loading { color: transparent !important; pointer-events: none; }
.eco-btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; background: var(--spin);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg%3E%3Ccircle cy='-38' r='9.5'/%3E%3Ccircle cx='32.9' cy='-19' r='9.5'/%3E%3Ccircle cx='32.9' cy='19' r='9.5'/%3E%3Ccircle cy='38' r='9.5'/%3E%3Ccircle cx='-32.9' cy='19' r='9.5'/%3E%3Ccircle cx='-32.9' cy='-19' r='9.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg%3E%3Ccircle cy='-38' r='9.5'/%3E%3Ccircle cx='32.9' cy='-19' r='9.5'/%3E%3Ccircle cx='32.9' cy='19' r='9.5'/%3E%3Ccircle cy='38' r='9.5'/%3E%3Ccircle cx='-32.9' cy='19' r='9.5'/%3E%3Ccircle cx='-32.9' cy='-19' r='9.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
  animation: eco-btn-ld-spin calc(var(--eco-duration-slow) * 9) linear infinite, eco-btn-ld-breathe calc(var(--eco-duration-slow) * 3) ease-in-out infinite; }
@keyframes eco-btn-ld-spin { to { rotate: 360deg; } }
@keyframes eco-btn-ld-breathe { 50% { scale: .82; } }
@keyframes eco-btn-ld-fade { to { opacity: .45; } }
.eco-btn--primary.is-loading { --spin: var(--btn-p-fg); background: var(--btn-p-bg-hover); }
.eco-btn--accent.is-loading { --spin: var(--btn-a-fg); background: var(--btn-a-bg-hover); }
.eco-btn--ink.is-loading { --spin: var(--btn-i-fg); background: var(--btn-i-bg-hover); }
.eco-btn--secondary.is-loading { --spin: var(--btn-s-fg); }
.eco-btn:is(.eco-btn--tertiary, .eco-btn--outline, .eco-btn--ghost).is-loading { --spin: var(--btn-n-fg); }
.eco-btn--primary-destructive.is-loading { --spin: var(--eco-text-white); background: var(--eco-bg-error-solid_hover); }
.eco-btn--secondary-destructive.is-loading, .eco-btn--tertiary-destructive.is-loading, .eco-btn--link-destructive.is-loading { --spin: var(--eco-text-error-primary); }
.eco-btn--link-color.is-loading { --spin: var(--eco-text-brand-secondary); }
.eco-btn--link-gray.is-loading { --spin: var(--eco-text-tertiary); }
.eco-btn.is-loading > * { opacity: 0; }
@keyframes eco-spin { to { transform: rotate(360deg); } }
.eco-btn-group > .eco-btn { border-radius: 0; }
.eco-btn-group:not(.eco-btn-group--vertical) > .eco-btn:not(.eco-btn--icon) { min-width: 0; white-space: normal; }
.eco-btn-group:not(.eco-btn-group--vertical) > .eco-btn:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
.eco-btn-group:not(.eco-btn-group--vertical) > .eco-btn:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
.eco-btn-group--vertical > .eco-btn:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.eco-btn-group--vertical > .eco-btn:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.eco-btn-group > .eco-btn + .eco-btn::before { content: ""; position: absolute; inset-block: var(--eco-spacing-md); inset-inline-start: 0; width: 1px; background: currentColor; opacity: .15; pointer-events: none; }
.eco-btn-group--vertical > .eco-btn + .eco-btn::before { inset: 0 0 auto; width: 20px; height: 1px; margin-inline: auto; }
.eco-btn-group--vertical > .eco-btn--xs + .eco-btn::before { width: 16px; }
.eco-btn-group--vertical > .eco-btn--sm + .eco-btn::before { width: 18px; }
.eco-btn-group--vertical > .eco-btn--lg + .eco-btn::before { width: 22px; }
.eco-btn-group--vertical > .eco-btn--xl + .eco-btn::before { width: 24px; }
.eco-btn-group > .eco-btn--ghost + .eco-btn--ghost::before, .eco-btn-group > .eco-btn.is-loading::before { opacity: 0; }
.eco-btn-group > .eco-btn--outline + .eco-btn--outline::before { opacity: 0; }
.eco-modal__actions > .eco-btn:not(.eco-btn--xs, .eco-btn--lg, .eco-btn--xl, .eco-btn--link-color, .eco-btn--link-gray, .eco-btn--link-destructive) { height: 36px; font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); }
.eco-modal__actions > .eco-btn:not(.eco-btn--xs, .eco-btn--lg, .eco-btn--xl, .eco-btn--link-color, .eco-btn--link-gray, .eco-btn--link-destructive)::before { content: ""; position: absolute; inset: -2px 0; }
.eco-rtip__acts .eco-btn { height: 32px; padding: 0 8px; }
/* — field — */
.eco-field { display: grid; gap: var(--eco-spacing-sm); min-width: 0; }
.eco-field--compact > :is(label, span) { font: 500 13px/18px var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-label { font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-label .req { color: var(--eco-text-brand-tertiary); }
.eco-hint { font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-input { --ring: transparent; --ring-w: 1px; --field-bg: var(--eco-bg-secondary); --field-bg-hover: color-mix(in srgb, var(--eco-bg-secondary) 50%, var(--eco-bg-secondary_hover)); --field-focus: transparent; width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--eco-field-radius-affix); outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; background-color: var(--field-bg); color: var(--eco-text-primary); box-shadow: inset 0 0 0 var(--ring-w) var(--ring), 0 0 0 var(--eco-field-focus-w) var(--field-focus); font: 400 var(--eco-text-md)/var(--eco-text-md--line-height) var(--eco-font-body); transition: background-color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear, outline-color var(--eco-duration-fast) linear; }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-input { --field-bg: var(--eco-bg-primary); --field-bg-hover: color-mix(in srgb, var(--eco-bg-primary) 50%, var(--eco-bg-primary_hover)); }
.eco-input--sm { min-height: 40px; padding: 8px 14px; }
.eco-input::placeholder { color: var(--eco-text-placeholder); opacity: 1; }
:is(input, select, textarea).eco-input:hover:not(:focus, :disabled, [readonly], :placeholder-shown, select:invalid) { background-color: var(--field-bg-hover); }
.eco-input:focus { --field-focus: var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-input:disabled { opacity: .5; cursor: not-allowed; }
textarea.eco-input { min-height: 128px; padding: 12px 16px; border-radius: var(--eco-field-radius-multiline); resize: vertical; }
textarea.eco-input[rows="1"] { min-height: 44px; border-radius: var(--eco-field-radius-affix); resize: none; }
select.eco-input { appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23747774'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px; }
.eco-field.is-error .eco-input, .eco-input[aria-invalid="true"] { --ring: transparent; --field-focus: var(--eco-focus-ring-error); }
.eco-field.is-error :is(input, select, textarea).eco-input:hover:not(:focus, :disabled, [readonly], :placeholder-shown, select:invalid), :is(input, select, textarea).eco-input[aria-invalid="true"]:hover:not(:focus, :disabled, [readonly], :placeholder-shown, select:invalid) { --ring: transparent; }
.eco-field.is-error .eco-input:focus, .eco-input[aria-invalid="true"]:focus { --field-focus: var(--eco-focus-ring-error); }
.eco-field.is-error .eco-hint { color: var(--eco-text-error-primary); }
.eco-field.is-success .eco-hint { color: var(--eco-text-success-primary); }
.eco-hint--error { display: flex; gap: 6px; align-items: flex-start; color: var(--eco-text-error-primary); }
.eco-hint--error > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.eco-input-wrap { position: relative; display: block; }
.eco-input-wrap > select.eco-input { background-image: none; }
.eco-input-wrap > .eco-icon:first-child ~ .eco-input { padding-left: 44px; }
.eco-input-wrap > .eco-input:not(:last-child) { padding-right: 44px; }
.eco-input-wrap:has(> .eco-input:disabled) > :is(.eco-icon, .eco-input-reveal) { opacity: .5; }
.eco-input-wrap:has(> .eco-input:disabled) > .eco-input-reveal { pointer-events: none; }
.eco-input-wrap > .eco-input-reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: transparent; color: var(--eco-fg-quaternary); cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-input-reveal:hover:not(:disabled) { background-color: var(--eco-bg-secondary_hover); color: var(--eco-text-secondary); }
.eco-input-reveal:disabled { cursor: not-allowed; }
.eco-input-reveal:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-input-reveal[aria-pressed="true"] > .eco-icon:first-child, .eco-input-reveal:not([aria-pressed="true"]) > .eco-icon:last-child { display: none; }
.eco-input-wrap:has(> .eco-input-reveal) > .eco-input::-ms-reveal { display: none; }
.eco-input.eco-input--well { background: var(--eco-app-well); }
.eco-input.eco-input--on-canvas { background: var(--eco-app-control); }
.eco-input.eco-input--muted { color: var(--eco-text-secondary); }
.eco-input.eco-input--filter { min-height: 36px; padding-block: 6px; }
@container listpage (max-width: 639px) {
  .eco-input.eco-input--filter { width: 40px; padding: 0; color: transparent; }
  .eco-input.eco-input--filter:focus, .eco-input.eco-input--filter:not(:placeholder-shown) { width: 200px; padding-left: 40px; color: inherit; }
}
select.eco-input.eco-input--lead { padding-left: 44px; }
select.eco-input.eco-input--ellipsis { padding-right: 44px; text-overflow: ellipsis; }
.eco-field.eco-field--top { align-content: start; }
.eco-slider__head > .eco-label { line-height: 24px; }
.eco-slider.is-error > .eco-hint { color: var(--eco-text-error-primary); }
.eco-slider.is-error > .eco-hint > svg { display: inline-block; width: var(--eco-icon-sm); height: var(--eco-icon-sm); margin-right: var(--eco-spacing-sm); vertical-align: -3px; }
.eco-input.eco-input--value { --field-bg: var(--eco-app-well); --field-bg-hover: var(--eco-app-well); padding: 0 16px; font: 500 15px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-input--sm.eco-input--value { font-size: 14px; }
/* — control — */
.eco-choice { display: inline-flex; align-items: flex-start; gap: var(--eco-spacing-md); font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-secondary); cursor: pointer; }
.eco-choice > .eco-check, .eco-choice > .eco-radio { margin-top: 2px; }
.eco-choice > .eco-switch { margin-top: 0; }
.eco-choice small { display: block; font-size: inherit; line-height: inherit; font-weight: 400; color: var(--eco-text-tertiary); }
.eco-choice--row { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--eco-radius-xl); background: var(--eco-choice-bg, var(--eco-bg-secondary)); }
.eco-choice--md { gap: var(--eco-spacing-lg); font-size: var(--eco-text-md); line-height: var(--eco-text-md--line-height); }
.eco-choice--md small { margin-top: var(--eco-spacing-xxs); }
.eco-check, .eco-radio { --_s: 16px; --_r: calc(var(--_s) * .34); --_sh: 0 0 transparent; -webkit-appearance: none; appearance: none; flex: none; position: relative; box-sizing: border-box; width: var(--_s); height: var(--_s); margin: 0; padding: 0; display: inline-block; vertical-align: middle; border: 0; border-radius: var(--_r); background: var(--ctl-off-bg, color-mix(in srgb, var(--eco-text-primary) 10%, transparent)); box-shadow: var(--_sh); color: inherit; cursor: pointer; outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; -webkit-tap-highlight-color: transparent; transition: background-color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-base) var(--eco-ease-standard), transform var(--eco-duration-base) var(--eco-ease-emphasized); }
.eco-check--md, .eco-radio--md { --_s: 20px; }
.eco-radio { --_r: 50%; }
.eco-check--round { --_s: 24px; --_r: 50%; }
.eco-check--round.eco-check--lg { --_s: 28px; }
.eco-check::before, .eco-check::after, .eco-radio::after { content: ""; position: absolute; pointer-events: none; }
:is(.eco-check, .eco-radio):not(:disabled, :checked, .is-on, .eco-check:indeterminate):hover { background: var(--ctl-off-bg-hover, color-mix(in srgb, var(--eco-text-primary) 16%, transparent)); }
:is(.eco-check, .eco-radio):not(:disabled):active { transform: scale(.88); transition: background-color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) var(--eco-ease-standard), transform var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-check::before { inset: 0; border-radius: 50%; background: var(--ctl-on, var(--eco-brand-button, var(--eco-bg-brand-solid))); transform: scale(.3); opacity: 0; transition: transform var(--eco-duration-fast) var(--eco-ease-exit), opacity var(--eco-duration-fast) linear, border-radius var(--eco-duration-fast) var(--eco-ease-exit); }
.eco-check:is(:checked, :indeterminate, .is-on)::before { transform: scale(1); opacity: 1; border-radius: var(--_r); transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized), opacity 60ms linear, border-radius var(--eco-duration-slow) var(--eco-ease-emphasized); }
.eco-check:not(:disabled, :checked, :indeterminate, .is-on):active::before { transform: scale(.45); opacity: .35; transition: transform var(--eco-duration-fast) var(--eco-ease-standard), opacity var(--eco-duration-fast) linear; }
.eco-check { --_mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4 8.5 13.4 14.5 7.1' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --_from: inset(0 78% 0 0); }
.eco-check--round { --_mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 12.4 10.6 15.5 16.7 9.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --_from: inset(0 74% 0 0); }
.eco-check:indeterminate { --_mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10H14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); --_from: inset(0 70% 0 0); }
.eco-check::after { inset: 0; background: var(--ctl-mark, var(--eco-brand-on-button, var(--eco-text-primary_on-brand))); -webkit-mask: var(--_mk) center / 100% 100% no-repeat; mask: var(--_mk) center / 100% 100% no-repeat; clip-path: var(--_from); opacity: 0; transition: clip-path var(--eco-duration-fast) var(--eco-ease-exit), opacity var(--eco-duration-fast) linear; }
.eco-check:is(:checked, :indeterminate, .is-on)::after { clip-path: inset(0); opacity: 1; transition: clip-path var(--eco-duration-base) var(--eco-ease-standard) 110ms, opacity 1ms linear 110ms; }
.eco-radio::after { inset: 0; margin: auto; width: 50%; height: 50%; border-radius: 50%; background: var(--ctl-on, var(--eco-brand-button, var(--eco-bg-brand-solid))); transform: scale(0); transition: transform var(--eco-duration-fast) var(--eco-ease-exit), opacity var(--eco-duration-fast) linear; }
.eco-radio:is(:checked, .is-on)::after { transform: scale(1); transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized); }
.eco-radio:not(:disabled, :checked, .is-on):active::after { transform: scale(.45); opacity: .4; transition: transform var(--eco-duration-fast) var(--eco-ease-standard), opacity var(--eco-duration-fast) linear; }
.eco-check--media { --ctl-off-bg: color-mix(in srgb, var(--eco-color-white) 42%, transparent); --ctl-off-bg-hover: color-mix(in srgb, var(--eco-color-white) 58%, transparent); --_sh: 0 1px 4px color-mix(in srgb, var(--eco-color-black) 22%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eco-check[aria-invalid="true"]:not(:checked, :indeterminate, .is-on), .eco-radio[aria-invalid="true"]:not(:checked, .is-on) { background: color-mix(in srgb, var(--eco-border-error) 20%, transparent); }
:is(.eco-check, .eco-radio):disabled { background: color-mix(in srgb, var(--eco-text-primary) 5%, transparent); cursor: not-allowed; }
.eco-check:disabled::before, .eco-radio:disabled::after { background: var(--eco-fg-disabled); }
.eco-check:disabled::after { background: var(--eco-bg-primary); }
@media (prefers-reduced-motion: reduce) { .eco-check, .eco-radio, .eco-check::before, .eco-check::after, .eco-radio::after { transition: none; } }
.eco-choice--card { display: flex; align-items: flex-start; gap: var(--eco-spacing-lg); padding: var(--eco-spacing-xl); border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); color: var(--eco-text-primary); --ctl-off-bg: var(--eco-bg-primary_alt); --ctl-off-bg-hover: var(--eco-bg-primary_alt); transition: background-color var(--eco-duration-base) var(--eco-ease-standard), transform var(--eco-duration-base) var(--eco-ease-emphasized); }
.eco-choice--card > span { flex: 1; min-width: 0; }
.eco-choice--card > .eco-check, .eco-choice--card > .eco-radio { margin-top: 2px; }
.eco-choice--card:not(:has(:disabled)):hover { background: var(--eco-bg-secondary_hover); }
.eco-choice--card:not(:has(:disabled)):active { transform: scale(.985); }
.eco-choice--card:has(:checked) { background: var(--eco-bg-brand-primary); }
.eco-choice--card:has([aria-invalid="true"]:not(:checked)) { background: color-mix(in srgb, var(--eco-border-error) 12%, var(--eco-bg-secondary)); }
.eco-choice--card :is(.eco-check, .eco-radio):focus-visible:not(:disabled) { box-shadow: var(--_sh); }
.eco-choice--card:has(:focus-visible) { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-choice--card:has(:disabled) { color: var(--eco-text-disabled); }
.eco-choice--card:has(:disabled) small { color: var(--eco-text-disabled); }
@media (prefers-reduced-motion: reduce) { .eco-choice--card { transition: none; } .eco-choice--card:active { transform: none; } }
.eco-switch { appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; padding: 2px; border: 0; border-radius: var(--eco-radius-full); background: var(--ctl-bg, var(--eco-bg-tertiary)); box-shadow: none; cursor: pointer; transition: background-color var(--eco-duration-base) var(--eco-ease-standard), box-shadow var(--eco-duration-base); }
.eco-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--eco-fg-white); box-shadow: var(--eco-shadow-sm); transition: transform var(--eco-duration-base) var(--eco-ease-emphasized), background-color var(--eco-duration-base); }
.eco-switch:not(:checked, :disabled):hover { background: var(--eco-bg-quaternary); }
.eco-switch:checked { background: var(--eco-bg-brand-solid); box-shadow: none; }
.eco-switch:checked::before { transform: translateX(16px); background: var(--eco-text-primary_on-brand); }
.eco-switch--md { width: 44px; height: 24px; }
.eco-switch--md::before { width: 20px; height: 20px; }
.eco-switch--md:checked::before { transform: translateX(20px); }
.eco-switch:disabled { background: var(--eco-bg-disabled); box-shadow: none; cursor: not-allowed; }
.eco-switch:disabled::before { background: var(--eco-fg-disabled); box-shadow: none; }
.eco-switch:focus-visible:not(:disabled) { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; }
:is(.eco-check, .eco-radio, .eco-switch):focus-visible:not(:disabled) { box-shadow: var(--_sh, 0 0 transparent), 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-choice:has(:disabled) { color: var(--eco-text-disabled); cursor: not-allowed; }
/* — badge — */
.eco-badge { --b-bg: var(--eco-bg-secondary); --b-fg: var(--eco-text-secondary); --b-dot: var(--eco-fg-quaternary); display: inline-flex; align-items: center; gap: var(--eco-spacing-xs); padding: var(--eco-badge-pad, 2px 10px); border-radius: var(--eco-radius-full); background: var(--b-bg); color: var(--b-fg); box-shadow: none; font: 500 var(--eco-badge-fs, var(--eco-text-sm))/var(--eco-badge-lh, var(--eco-text-sm--line-height)) var(--eco-font-body); letter-spacing: var(--eco-badge-ls, inherit); white-space: nowrap; }
:where(.eco-card:not(.eco-card--raised, .eco-card--app), .eco-segment, .eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) .eco-badge { --b-bg: var(--eco-bg-primary); }
:where(.eco-card:not(.eco-card--raised, .eco-card--app)) :is(.eco-badge--brand, .eco-badge--success, .eco-badge--warning, .eco-badge--error, .eco-badge--info, .eco-badge[class*="--cat-"]):not(.eco-badge--solid) { background: var(--b-tint-bg-surface, var(--b-bg)); }
.eco-badge--sm { padding: 2px 8px; font-size: var(--eco-text-xs); line-height: var(--eco-text-xs--line-height); }
.eco-badge--lg { padding: 4px 12px; }
.eco-badge--badge { border-radius: var(--eco-radius-sm); padding-inline: 8px; }
.eco-badge--badge.eco-badge--sm { padding-inline: 6px; }
.eco-badge--badge.eco-badge--lg { padding-inline: 10px; border-radius: var(--eco-radius-md); }
.eco-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--b-dot); }
.eco-badge--brand { --b-bg: var(--eco-bg-brand-primary); --b-fg: var(--eco-text-brand-secondary); --b-dot: var(--eco-fg-brand-secondary); }
.eco-badge--success { --b-bg: var(--eco-bg-success-primary); --b-fg: var(--eco-text-success-primary); --b-dot: var(--eco-fg-success-secondary); }
.eco-badge--warning { --b-bg: var(--eco-bg-warning-primary); --b-fg: var(--eco-text-warning-primary); --b-dot: var(--eco-fg-warning-primary); }
.eco-badge--error { --b-bg: var(--eco-bg-error-primary); --b-fg: var(--eco-text-error-primary); --b-dot: var(--eco-fg-error-secondary); }
.eco-badge--info { --b-bg: color-mix(in oklab, var(--eco-fg-info-primary) 18%, transparent); --b-fg: color-mix(in oklab, var(--eco-fg-info-primary), var(--eco-color-white) 25%); --b-dot: var(--eco-fg-info-primary); }
[data-theme="light"] .eco-badge--info { --b-bg: color-mix(in srgb, var(--eco-fg-info-primary) 12%, var(--eco-color-white)); --b-fg: color-mix(in oklab, var(--eco-fg-info-primary), black 10%); }
[data-theme="dark"] .eco-badge--info { --b-bg: color-mix(in oklab, var(--eco-fg-info-primary) 18%, transparent); --b-fg: color-mix(in oklab, var(--eco-fg-info-primary), var(--eco-color-white) 25%); }
.eco-badge--solid { background: var(--eco-badge-solid-bg, var(--eco-bg-brand-solid)); color: var(--eco-badge-solid-fg, var(--eco-text-primary_on-brand)); box-shadow: none; }
.eco-badge svg { width: 12px; height: 12px; }
.eco-badge--lg svg { width: 14px; height: 14px; }
.eco-badge--cat-black { --cat: var(--eco-cat-black); --cat-dk: 0%; --cat-lt: 0%; }
.eco-badge--cat-green { --cat: var(--eco-cat-green); --cat-dk: 20%; --cat-lt: 20%; }
.eco-badge--cat-blue { --cat: var(--eco-cat-blue); --cat-dk: 10%; --cat-lt: 25%; }
.eco-badge--cat-teal { --cat: var(--eco-cat-teal); --cat-dk: 30%; --cat-lt: 0%; }
.eco-badge--cat-red { --cat: var(--eco-cat-red); --cat-dk: 10%; --cat-lt: 25%; }
[class*="--cat-"] { --cat-bg: color-mix(in oklab, var(--cat) 18%, transparent); --cat-fg: color-mix(in oklab, var(--cat), var(--eco-color-white) var(--cat-lt)); }
[data-theme="light"] [class*="--cat-"] { --cat-bg: color-mix(in srgb, var(--cat) 12%, var(--eco-color-white)); --cat-fg: color-mix(in oklab, var(--cat), black var(--cat-dk)); }
[data-theme="dark"] [class*="--cat-"] { --cat-bg: color-mix(in oklab, var(--cat) 18%, transparent); --cat-fg: color-mix(in oklab, var(--cat), var(--eco-color-white) var(--cat-lt)); }
.eco-badge[class*="--cat-"] { --b-bg: var(--cat-bg); --b-fg: var(--cat-fg); }
.eco-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--eco-radius-sm); border: 0; background: var(--eco-bg-secondary); color: var(--eco-text-secondary); box-shadow: none; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear; }
.eco-chip:hover { background: var(--eco-bg-secondary_hover); }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-chip:not([aria-pressed="true"]) { background: var(--eco-bg-primary); }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-chip:not([aria-pressed="true"]):hover { background: var(--eco-bg-primary_hover); }
.eco-chip[aria-pressed="true"] { background: var(--eco-text-primary); color: var(--eco-bg-primary); }
.eco-chip:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-badge.eco-badge--title { letter-spacing: 0; }
.eco-badge.eco-badge--trend svg { width: 14px; height: 14px; }
.eco-badge.eco-badge--num { font-variant-numeric: tabular-nums; }
.eco-badge--label { --b-bg: var(--eco-bg-primary); --eco-badge-fs: 12px; --eco-badge-lh: 1; --eco-badge-pad: 0 14px; --eco-badge-ls: .12em; height: 28px; font-family: var(--eco-font-mono); text-transform: uppercase; }
.eco-badge--ink { --b-bg: var(--eco-bg-primary-solid); --b-fg: var(--eco-text-white); }
[data-theme="dark"] .eco-badge--ink { --b-bg: var(--eco-text-primary); --b-fg: var(--eco-bg-primary); }
.eco-count { position: absolute; top: -5px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--eco-radius-full); background: var(--eco-bg-error-solid); color: var(--eco-text-white); font: 600 12px/20px var(--eco-font-body); text-align: center; box-shadow: 0 0 0 2px var(--eco-bg-primary); }
.eco-count--dot { min-width: 0; width: 10px; height: 10px; padding: 0; top: 5px; right: 6px; }
.eco-badge--tone { --b-bg: var(--eco-app-well); gap: 6px; height: 24px; padding: 0 10px; font-size: 12px; line-height: 1; }
.eco-badge--tone svg { width: 14px; height: 14px; }
.eco-badge--t-ok { --b-bg: var(--eco-bg-success-primary); --b-fg: var(--eco-text-success-primary); --b-dot: var(--eco-bg-success-solid); }
.eco-badge--t-warn { --b-bg: var(--eco-bg-warning-primary); --b-fg: color-mix(in oklab, var(--eco-fg-warning-primary), var(--eco-text-primary) 45%); --b-dot: var(--eco-bg-warning-solid); }
.eco-badge--t-neutral { --b-bg: var(--eco-app-well-2); --b-fg: var(--eco-text-secondary); --b-dot: var(--eco-fg-quaternary); }
.eco-badge--t-bad { --b-bg: var(--eco-bg-error-primary); --b-fg: var(--eco-text-error-primary); --b-dot: var(--eco-bg-error-solid); }
.eco-badge--t-brand { --b-bg: var(--eco-bg-brand-primary); --b-fg: var(--eco-text-brand-secondary); --b-dot: var(--eco-bg-brand-solid); }
.eco-badge--t-info { --b-bg: color-mix(in oklab, var(--eco-fg-info-primary) 14%, transparent); --b-fg: var(--eco-fg-info-primary); --b-dot: var(--eco-fg-info-primary); }
.eco-badge--t-plain { --b-bg: var(--eco-app-well-2); --b-fg: var(--eco-text-primary); --b-dot: var(--eco-fg-quaternary); }
.eco-badge--t-none { --b-bg: transparent; --b-fg: var(--eco-text-quaternary); --b-dot: transparent; }
.eco-badge--mark { display: inline-grid; place-items: center; flex: none; gap: normal; width: 24px; height: 24px; padding: 0; border-radius: var(--eco-radius-md); font: 600 12px/1 var(--eco-font-body); }
.eco-badge--mark-sm { width: 18px; height: 18px; border-radius: 6px; font-size: 10.5px; }
.eco-badge--mark-pin { position: absolute; top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--eco-mark-cut, var(--eco-app-card)); }
.eco-badge--grade { display: inline-grid; place-items: center; gap: normal; min-width: var(--eco-grade-w, 36px); height: 28px; padding: 0 6px; border-radius: var(--eco-radius-md); font: 500 13px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-badge--grade-bar { --b-bg: var(--eco-grade-bg, var(--eco-app-well)); --b-fg: var(--eco-text-primary); position: relative; }
.eco-badge--grade-bar::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 2.5px; margin-left: -7px; border-radius: 2px; background: var(--b-dot, transparent); }
.eco-badge--count { --b-bg: var(--eco-app-well); flex: none; justify-content: center; gap: normal; min-width: 22px; padding: 0 7px; font: 500 12px/22px var(--eco-font-body); text-align: center; font-variant-numeric: tabular-nums; }
/* — card — */
.eco-card { display: block; background: var(--eco-bg-secondary); border: 1px solid transparent; border-radius: var(--eco-radius-4xl); padding: 24px; color: var(--eco-text-primary); text-decoration: none; }
.eco-card--raised { background: var(--eco-bg-primary_alt); border-color: transparent; box-shadow: var(--eco-shadow-lg); }
.eco-card--interactive { transition: transform var(--eco-duration-base) var(--eco-ease-emphasized), border-color var(--eco-duration-base), box-shadow var(--eco-duration-base); cursor: pointer; }
.eco-card--interactive:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--eco-shadow-lg); }
.eco-card--interactive:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-card__title { font: var(--eco-font-display--weight, 500) var(--eco-text-xl)/var(--eco-text-xl--line-height) var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing, 0); color: var(--eco-text-primary); }
.eco-card__title { --eco-badge-ls: 0; }
.eco-card__meta { font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-card--app { --eco-kpi-bg: var(--eco-app-well); display: grid; align-content: start; gap: var(--eco-card-gap, 16px); min-width: 0; padding: var(--eco-card-pad, 20px); border: 0; border-radius: var(--eco-card-r, var(--eco-radius-3xl)); background: var(--eco-card-bg, var(--eco-app-card)); box-shadow: var(--eco-app-card-shadow); }
.eco-card--app > * { min-width: 0; }
.eco-card__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
.eco-card__hd > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* — avatar — */
.eco-avatar--cat-black { --cat: var(--eco-cat-black); --cat-dk: 0%; --cat-lt: 0%; }
.eco-avatar--cat-green { --cat: var(--eco-cat-green); --cat-dk: 20%; --cat-lt: 20%; }
.eco-avatar--cat-blue { --cat: var(--eco-cat-blue); --cat-dk: 10%; --cat-lt: 25%; }
.eco-avatar--cat-teal { --cat: var(--eco-cat-teal); --cat-dk: 30%; --cat-lt: 0%; }
.eco-avatar--cat-red { --cat: var(--eco-cat-red); --cat-dk: 10%; --cat-lt: 25%; }
.eco-avatar[class*="--cat-"] { background: var(--cat-bg); color: var(--cat-fg); }
.eco-avatar { --s: 40px; --f: var(--eco-text-md); position: relative; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); color: var(--eco-text-tertiary); box-shadow: none; font: 600 var(--f)/1 var(--eco-font-body); }
.eco-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.eco-avatar--xs { --s: 24px; --f: var(--eco-text-xs); }
.eco-avatar--sm { --s: 32px; --f: var(--eco-text-sm); }
.eco-avatar--lg { --s: 48px; --f: var(--eco-text-lg); }
.eco-avatar--xl { --s: 56px; --f: var(--eco-text-xl); }
.eco-avatar--2xl { --s: 64px; --f: var(--eco-text-display-xs); }
.eco-avatar__status { position: absolute; right: 0; bottom: 0; width: calc(var(--s) * .25); height: calc(var(--s) * .25); min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--eco-fg-success-primary); box-shadow: 0 0 0 1.5px var(--eco-bg-primary); }
.eco-avatar__status--busy { background: var(--eco-fg-warning-primary); }
.eco-avatar__status--off { background: var(--eco-bg-primary); box-shadow: inset 0 0 0 2px var(--eco-border-primary), 0 0 0 1.5px var(--eco-bg-primary); }
.eco-avatar--36 { --s: 36px; --f: var(--eco-text-xs); font-weight: 500; line-height: 20px; }
.eco-avatar--36 > svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); }
.eco-avatar > svg { flex: none; }
.eco-avatar--brand { color: var(--eco-avatar-ink); }
.eco-avatar--tint { background: var(--eco-avatar-tint-bg); color: var(--eco-avatar-tint-ink); }
.eco-avatar--accent { background: var(--eco-avatar-accent-bg, var(--eco-avatar-tint-bg)); color: var(--eco-avatar-accent-ink, var(--eco-avatar-tint-ink)); }
.eco-avatar--inverse { background: var(--eco-avatar-inverse-bg, var(--eco-bg-primary-solid)); color: var(--eco-avatar-inverse-ink, var(--eco-avatar-tint-ink)); }
.eco-avatar--solid { background: var(--eco-avatar-solid-bg, var(--eco-bg-brand-solid)); color: var(--eco-avatar-solid-ink, var(--eco-text-primary_on-brand)); }
.eco-avatar--ink-black { color: var(--eco-avatar-ink-black); }
.eco-avatar--ink-green { color: var(--eco-avatar-ink-green); }
.eco-avatar--ink-blue { color: var(--eco-avatar-ink-blue); }
.eco-avatar--ink-teal { color: var(--eco-avatar-ink-teal); }
.eco-avatar--ink-red { color: var(--eco-avatar-ink-red); }
.eco-avatar--3d { color: transparent; }
.eco-avatar--3d img { position: absolute; inset: 0; display: block; }
.eco-avatar--hue-1 { background: var(--eco-avatar-hue-1-bg); color: var(--eco-avatar-hue-1-ink); }
.eco-avatar--hue-2 { background: var(--eco-avatar-hue-2-bg); color: var(--eco-avatar-hue-2-ink); }
.eco-avatar--hue-3 { background: var(--eco-avatar-hue-3-bg); color: var(--eco-avatar-hue-3-ink); }
.eco-avatar--hue-4 { background: var(--eco-avatar-hue-4-bg); color: var(--eco-avatar-hue-4-ink); }
.eco-avatar--hue-5 { background: var(--eco-avatar-hue-5-bg); color: var(--eco-avatar-hue-5-ink); }
.eco-avatar--hue-6 { background: var(--eco-avatar-hue-6-bg); color: var(--eco-avatar-hue-6-ink); }
.eco-avatar--hue-7 { background: var(--eco-avatar-hue-7-bg); color: var(--eco-avatar-hue-7-ink); }
.eco-avatar.eco-avatar--live { box-shadow: 0 0 0 2px var(--eco-bg-primary), 0 0 0 4px var(--eco-fg-success-primary); }
.eco-avatar-group { display: inline-flex; }
.eco-avatar-group > .eco-avatar { box-shadow: 0 0 0 2px var(--eco-avatar-cut, var(--eco-bg-primary)); }
.eco-avatar-group > .eco-avatar + .eco-avatar { margin-left: -8px; }
.eco-avatar-group--tail > .eco-avatar:first-child { box-shadow: none; }
.eco-menu__item > .eco-avatar svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); }
.eco-menu__item--danger > .eco-avatar:has(> svg) { background: var(--eco-bg-error-primary); color: var(--eco-fg-error-primary); box-shadow: none; }
.eco-person { display: flex; align-items: center; gap: var(--eco-person-gap, 12px); }
.eco-person__t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.eco-person__t b { font: 500 var(--eco-person-fs, 16px)/var(--eco-person-lh, 22px) var(--eco-font-body); }
.eco-person__t small { font-size: var(--eco-person-sub-fs, 14px); line-height: var(--eco-person-sub-lh, 20px); color: var(--eco-text-tertiary); }
/* — tabs — */
:root, [data-theme="dark"] { --tabs-track-in: var(--eco-bg-primary); --tabs-ind: var(--eco-fg-brand-secondary); --tabs-fg: var(--eco-tab-label, rgba(255, 255, 255, .7)); --tabs-fg-on: var(--eco-tab-label-strong); }
[data-theme="light"] { --tabs-track-in: var(--eco-bg-tertiary); --tabs-ind: var(--eco-fg-brand-primary); --tabs-fg: var(--eco-tab-label, rgba(0, 0, 0, .7)); --tabs-fg-on: var(--eco-tab-label-strong); }
.eco-tabs { display: flex; gap: 0; box-shadow: inset 0 -1px 0 var(--eco-border-tertiary); overflow-x: auto; scrollbar-width: none; }
.eco-tabs::-webkit-scrollbar { display: none; }
.eco-tab { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--eco-spacing-sm); padding: 4px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tabs-fg); font: 500 var(--eco-text-sm)/24px var(--eco-font-body); letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: color var(--eco-duration-fast) linear, border-color var(--eco-duration-fast) linear, background-color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear; }
.eco-tab:hover { color: var(--tabs-fg-on); }
.eco-tab[aria-selected="true"] { color: var(--tabs-fg-on); border-bottom-color: var(--tabs-ind); }
.eco-tab:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: -2px; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); border-radius: var(--eco-radius-xs); z-index: 1; }
:is(.eco-tab, .eco-segment > button) > svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); flex: none; }
.eco-tab { --eco-badge-pad: 2px 8px; --eco-badge-fs: var(--eco-text-xs); --eco-badge-lh: var(--eco-text-xs--line-height); }
.eco-tab[aria-selected="true"] > .eco-badge { --b-bg: var(--eco-bg-brand-primary); --b-fg: var(--eco-text-brand-secondary); }
.eco-tabs--md > .eco-tab { padding: 9px 16px; font-size: var(--eco-text-md); line-height: var(--eco-text-md--line-height); }
.eco-tabs--md > .eco-tab { --eco-badge-fs: var(--eco-text-sm); --eco-badge-lh: var(--eco-text-sm--line-height); }
.eco-tabs.eco-tabs--fill { width: 100%; }
:is(.eco-tabs--fill > .eco-tab, .eco-segment--fill > button) { flex: 1 1 0; min-width: max-content; }
.eco-tabpanel:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 4px; box-shadow: 0 0 0 4px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(4px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); border-radius: var(--eco-radius-xs); }
.eco-segment { display: inline-flex; }
.eco-tabs.eco-tabs--flush { gap: 24px; box-shadow: none; }
.eco-tabs--flush .eco-tab { padding: 8px 0 10px; }
.eco-tabs--flush .eco-tab:focus-visible { box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-segment--scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
:is(.eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) { width: fit-content; max-width: 100%; }
:is(.eco-segment, .eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) { --tabs-track: var(--eco-bg-secondary); --seg-px: var(--eco-spacing-lg); --seg-h: 36px; --seg-font: var(--eco-text-sm); --seg-lh: 24px; --seg-on-bg: var(--eco-tab-pill-bg); --seg-on-fg: var(--eco-tab-pill-fg); --seg-on-shadow: var(--eco-tab-pill-shadow, 0 2px 8px rgba(0, 0, 0, .06)); gap: var(--eco-spacing-xxs); padding: var(--eco-spacing-xs) var(--eco-spacing-md); border-radius: var(--eco-radius-full); background: var(--tabs-track); box-shadow: none; }
.eco-card:not(.eco-card--raised, .eco-card--app) :is(.eco-segment, .eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) { --tabs-track: var(--tabs-track-in); }
:is(.eco-segment--inverse, .eco-tabs--inverse) { --seg-on-bg: var(--eco-tab-inverse-bg); --seg-on-fg: var(--eco-tab-inverse-fg); --seg-on-shadow: none; }
:is(.eco-segment--brand, .eco-tabs--brand, .eco-tabs--button-brand) { --seg-on-bg: var(--eco-tab-brand-bg, var(--eco-bg-brand-solid)); --seg-on-fg: var(--eco-tab-brand-fg, var(--eco-text-primary_on-brand)); --seg-on-shadow: none; }
:is(.eco-segment--accent, .eco-tabs--accent) { --seg-on-bg: var(--eco-tab-accent-bg, var(--eco-brand-accent)); --seg-on-fg: var(--eco-tab-accent-fg, var(--eco-brand-on-accent)); --seg-on-shadow: none; }
:is(.eco-segment--sm, .eco-tabs--sm) { --seg-h: 28px; --seg-lh: 20px; }
:is(.eco-segment--md, .eco-tabs--md) { --seg-h: 44px; --seg-px: var(--eco-spacing-xl); --seg-font: var(--eco-text-md); }
:is(.eco-segment--lg, .eco-tabs--lg) { --seg-h: 56px; --seg-px: var(--eco-spacing-3xl); --seg-font: var(--eco-text-lg); --seg-lh: 28px; }
@media (max-width: 360px) { .eco-segment { --seg-px: var(--eco-spacing-md); } }
.eco-segment--fill { display: flex; width: 100%; }
:is(.eco-segment > button, :is(.eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) > .eco-tab) { display: inline-flex; align-items: center; justify-content: center; gap: var(--eco-spacing-sm); min-height: var(--seg-h); padding: 0 var(--seg-px); border: 0; border-radius: var(--eco-radius-full); background: none; color: var(--tabs-fg); font: 500 var(--seg-font)/var(--seg-lh) var(--eco-font-body); letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear; }
:is(.eco-segment > button:not([aria-pressed="true"]), :is(.eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) > .eco-tab:not([aria-selected="true"])):hover { background: none; color: var(--tabs-fg-on); }
:is(.eco-segment > button[aria-pressed="true"], :is(.eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) > .eco-tab[aria-selected="true"]) { margin-inline: calc(var(--eco-spacing-xs) * -1); padding-inline: calc(var(--seg-px) + var(--eco-spacing-xs)); background: var(--seg-on-bg); color: var(--seg-on-fg); box-shadow: var(--seg-on-shadow); }
:is(.eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) > .eco-tab[aria-selected="true"] > .eco-badge { --b-bg: var(--eco-bg-secondary); --b-fg: var(--eco-text-secondary); }
:is(.eco-segment > button, :is(.eco-tabs--pill, .eco-tabs--button-border, .eco-tabs--button-brand, .eco-tabs--button-gray) > .eco-tab):focus-visible {  outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); z-index: 1; }
.eco-segment.eco-segment--stacked { display: flex; width: 100%; border-radius: var(--eco-radius-4xl); }
.eco-segment.eco-segment--stacked > button { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-start; padding-block: var(--eco-spacing-lg); border-radius: var(--eco-radius-4xl); font-size: var(--eco-text-xs); line-height: 20px; white-space: normal; text-align: center; overflow-wrap: break-word; }
/* — table — */
.eco-table { --table-line: color-mix(in srgb, var(--eco-border-tertiary) 60%, transparent); width: 100%; border-collapse: separate; border-spacing: 0; font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-table th { padding: 11px 24px; text-align: left; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-table thead th { background: var(--eco-bg-secondary); --ctl-bg: var(--eco-bg-primary_alt); }
.eco-table thead th:first-child { border-radius: var(--eco-radius-xl) 0 0 var(--eco-radius-xl); }
.eco-table thead th:last-child { border-radius: 0 var(--eco-radius-xl) var(--eco-radius-xl) 0; }
.eco-table thead th:only-child { border-radius: var(--eco-radius-xl); }
.eco-table td, .eco-table tbody th { padding: 16px 24px; border-bottom: 1px solid var(--table-line); vertical-align: middle; }
.eco-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.eco-table tbody tr:nth-last-child(1 of :not([hidden])) :is(td, th) { border-bottom: 0; }
.eco-table tbody th { font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); }
.eco-table td:first-child, .eco-table tbody th { color: var(--eco-text-primary); font-weight: 500; }
.eco-table tbody tr:hover td { background: var(--eco-bg-primary_hover); --ctl-bg: var(--eco-bg-primary_alt); }
.eco-table tbody tr:has(.eco-check:checked) td { background: var(--eco-bg-secondary); }
.eco-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.eco-table__sort { display: inline-flex; align-items: center; gap: var(--eco-spacing-xs); margin: -4px -6px; padding: 4px 6px; border-radius: var(--eco-radius-xs); font: inherit; color: inherit; cursor: pointer; transition: color var(--eco-duration-fast) linear; }
.eco-table__sort:hover { color: var(--eco-text-secondary); }
.eco-table__sort:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-table__sort svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); flex: none; color: var(--eco-fg-quaternary); }
.eco-table [aria-sort="descending"] > .eco-table__sort svg { transform: rotate(90deg); }
.eco-table [aria-sort="ascending"] > .eco-table__sort svg { transform: rotate(-90deg); }
.eco-table :is(th, td).eco-table__check { width: 1%; padding-right: 0; }
.eco-table__check .eco-check:not(.eco-check--round) { --_s: 20px; }
.eco-table .eco-table__check + :is(th, td) { padding-left: 12px; }
.eco-table__hit { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -10px; vertical-align: middle; cursor: pointer; }
.eco-table__person { display: flex; align-items: center; gap: var(--eco-spacing-lg); min-width: 0; }
.eco-table__person b { display: block; font-weight: 500; color: var(--eco-text-primary); }
.eco-table__person span:not(.eco-avatar) { display: block; color: var(--eco-text-tertiary); }
.eco-table__actions { display: flex; justify-content: flex-end; gap: var(--eco-spacing-xs); }
.eco-table-card { max-width: 100%; overflow: hidden; border: 1px solid transparent; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary); color: var(--eco-text-primary); }
.eco-table-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--eco-spacing-xl); padding: 20px 24px; border-bottom: 1px solid transparent; }
.eco-table-card__head:has(+ .eco-table-card__body > .eco-table) { padding-bottom: 16px; border-bottom-color: transparent; }
.eco-table-card__body:has(> .eco-table) { padding: 0 8px; }
.eco-table-card__body:not(.eco-table-card__head + *):has(> .eco-table) { padding-top: 8px; }
.eco-table-card .eco-table :is(th, td):first-child { padding-left: 16px; }
.eco-table-card .eco-table :is(th, td):last-child { padding-right: 16px; }
.eco-table-card__heading { flex: 1 1 240px; min-width: 0; }
.eco-table-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-spacing-md); font: 600 var(--eco-text-lg)/var(--eco-text-lg--line-height) var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-primary); }
.eco-table-card__desc { margin-top: var(--eco-spacing-xs); font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-table-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-spacing-lg); }
.eco-table-card__body { position: relative; overflow-x: auto; }
.eco-table-card__body:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: -2px; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-table-card .eco-table td { white-space: nowrap; }
.eco-table-card__foot { padding: 12px 24px 16px; border-top: 1px solid transparent; }
@media (max-width: 767px) { .eco-table-card__head { padding: 16px; } .eco-table-card__foot { padding: 12px 16px 16px; } .eco-table-card__body:has(> .eco-table) { padding-inline: 4px; } .eco-table-card .eco-table :is(th, td):first-child { padding-left: 12px; } .eco-table-card .eco-table :is(th, td):last-child { padding-right: 12px; } }
.eco-table.eco-table--tabular :is(td, .num) { font-variant-numeric: tabular-nums; }
.eco-table__person.eco-table__person--tight { gap: 10px; }
.eco-table__person.eco-table__person--tight b { white-space: nowrap; }
.eco-table__person.eco-table__person--tight span:not(.eco-avatar) { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); white-space: nowrap; }
.eco-table.eco-table--page :is(td, tbody th) { padding: 12px 16px; text-wrap: pretty; }
.eco-table.eco-table--page thead th { padding: 10px 16px; white-space: normal; text-wrap: balance; vertical-align: bottom; }
.eco-table.eco-table--page td.num { white-space: nowrap; }
.eco-table.eco-table--page tbody tr.is-hl :is(td, th) { background: var(--eco-app-well); }
.eco-table.eco-table--page tfoot :is(td, th) { padding: 12px 16px; background: var(--eco-app-well); color: var(--eco-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.eco-table.eco-table--page tfoot :is(td, th):first-child { border-radius: var(--eco-radius-xl) 0 0 var(--eco-radius-xl); }
.eco-table.eco-table--page tfoot :is(td, th):last-child { border-radius: 0 var(--eco-radius-xl) var(--eco-radius-xl) 0; }
.eco-table.eco-table--page .eco-avatar { --s: 32px; }
@container page (max-width: 1150px) {
  .eco-page .eco-table.eco-table--page :is(td, th, thead th, tfoot td, tfoot th) { padding-inline: 12px; }
  .eco-page .eco-table.eco-table--page:has(thead th:nth-child(8)) :is(td, th, thead th, tfoot td, tfoot th) { padding-inline: 10px; }
  .eco-page .eco-table.eco-table--page:has(thead th:nth-child(9)) :is(td, th, thead th, tfoot td, tfoot th) { padding-inline: 8px; }
}
.eco-overview .eco-table.eco-table--page :is(td, th, thead th, tfoot td, tfoot th) { padding-inline: 12px; }
:is(.eco-listpage__scroll, .eco-report__scroll, .eco-timegrid__scroll) .eco-table thead tr:first-child > th { box-shadow: 0 -8px 0 var(--eco-app-card); }
:is(.eco-listpage__scroll, .eco-report__scroll, .eco-timegrid__scroll) .eco-table tfoot :is(td, th) { box-shadow: 0 8px 0 var(--eco-app-card); }
:is(.eco-listpage__scroll, .eco-page__tbl, .eco-report__scroll, .eco-timegrid__scroll, .eco-overview__card, .eco-page__card) .eco-table thead th { background: var(--eco-app-well); }
:is(.eco-listpage__scroll, .eco-page__tbl, .eco-report__scroll, .eco-timegrid__scroll, .eco-overview__card, .eco-page__card) .eco-table tbody tr:not(.eco-listpage__group):hover td { background: var(--eco-app-card-hover); }
:is(.eco-listpage__scroll, .eco-page__tbl, .eco-report__scroll, .eco-timegrid__scroll, .eco-overview__card, .eco-page__card) .eco-table tbody tr:has(.eco-check:checked) td { background: var(--eco-app-well); }
/* — alert — */
.eco-alert { --al-bg: var(--eco-bg-secondary); --al-fg: var(--eco-text-primary); --al-ic: var(--eco-fg-primary);
  --btn-t-bg: var(--btn-t-bg-surface); --btn-t-bg-hover: var(--btn-t-bg-surface-hover);
  display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-auto-columns: auto; align-items: start; column-gap: var(--eco-spacing-md);
  padding: var(--eco-spacing-lg) var(--eco-spacing-xl); border-radius: var(--eco-radius-4xl); background: var(--al-bg);
  color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/24px var(--eco-font-body); letter-spacing: 0; }
:is(.eco-card:not(.eco-card--raised, .eco-card--app), .eco-dropzone, .eco-file, .eco-alert) { --ic-tile: var(--eco-bg-primary_alt); }
:is(.eco-card--raised, .eco-table-card, .eco-modal, .eco-menu, .eco-file.is-error, .eco-card:not(.eco-card--raised, .eco-card--app) .eco-alert) { --ic-tile: var(--eco-bg-secondary); }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-alert { --al-bg: var(--eco-bg-primary); --btn-t-bg: var(--eco-bg-secondary); --btn-t-bg-hover: var(--eco-bg-secondary_hover); }
.eco-alert > svg, .eco-alert__icon { grid-column: 1; width: var(--eco-icon-sm); height: var(--eco-icon-sm); margin: 2px; color: var(--al-ic); }
.eco-alert__body { grid-column: 2; min-width: 0; }
.eco-alert__title, .eco-alert > :not(.eco-alert__body) :is(b, strong) { font-weight: 500; color: var(--al-fg); }
.eco-alert__desc { color: var(--eco-text-tertiary); }
.eco-alert > :is(.eco-alert__cta, .eco-btn) { grid-column: 3; gap: var(--eco-spacing-md); border-radius: var(--eco-radius-4xl); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); letter-spacing: 0; }
.eco-alert > :is(.eco-alert__cta, .eco-btn) svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); }
.eco-alert--brand { --al-fg: var(--eco-text-brand-secondary); --al-ic: var(--eco-fg-brand-primary); }
.eco-alert--success { --al-fg: var(--eco-text-success-primary); --al-ic: var(--eco-fg-success-primary);
  --btn-p-bg: var(--eco-bg-success-solid); --btn-p-fg: var(--eco-text-white); --btn-p-bg-hover: color-mix(in srgb, var(--btn-p-bg) 88%, var(--eco-color-black)); }
.eco-alert--warning { --al-fg: var(--al-warn-fg, var(--eco-text-warning-primary)); --al-ic: var(--al-warn-fg, var(--eco-fg-warning-primary));
  --btn-p-bg: var(--eco-project-online);  --btn-p-fg: var(--eco-color-black); --btn-p-bg-hover: color-mix(in srgb, var(--btn-p-bg) 88%, var(--btn-p-fg)); }
.eco-alert--error { --al-fg: var(--eco-text-error-primary_hover); --al-ic: var(--eco-fg-error-primary);
  --btn-p-bg: var(--eco-bg-error-solid); --btn-p-fg: var(--eco-text-white); --btn-p-bg-hover: var(--eco-bg-error-solid_hover); }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-alert--error { --al-fg: var(--eco-text-error-primary); }
.eco-alert--error .eco-btn:focus-visible { --focus-c: var(--eco-focus-ring-error); }
@media (max-width: 480px) { .eco-alert > :is(.eco-alert__cta, .eco-btn) { grid-column: 2; justify-self: start; margin-top: var(--eco-spacing-md); } }
@media (max-width: 360px) { .eco-alert > :is(.eco-alert__cta, .eco-btn) { grid-column: 1 / -1; max-width: 100%; height: auto; min-height: 36px; padding-block: 8px; white-space: normal; } }
.eco-toast { display: inline-flex; align-items: center; gap: var(--eco-spacing-lg); padding: 12px 16px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary-solid); color: var(--eco-text-white); box-shadow: var(--eco-shadow-lg); font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); }
.eco-toast > svg { width: 20px; height: 20px; color: var(--eco-fg-brand-primary_alt); flex: none; }
/* — tooltip — */
.eco-tooltip { display: inline-grid; gap: 4px; max-width: 320px; padding: 8px 12px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary-solid); color: var(--eco-text-white); font: 600 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); box-shadow: var(--eco-shadow-lg); }
.eco-tooltip small { font-weight: 500; font-size: inherit; color: color-mix(in oklab, var(--eco-text-white) 78%, transparent); }
/* — progress — */
.eco-progress { height: 8px; border-radius: var(--eco-radius-full); background: var(--progress-track, var(--eco-bg-secondary)); overflow: hidden; }
.eco-progress > span { display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: var(--progress-fill, var(--eco-brand-button, var(--eco-bg-brand-solid))); }
:is(.eco-card:not(.eco-card--raised, .eco-card--app), .eco-file) { --progress-track: var(--eco-bg-tertiary); }
.eco-progress-row { display: flex; align-items: center; gap: var(--eco-spacing-lg); }
.eco-progress-row > .eco-progress { flex: 1; }
.eco-progress--meter { display: block; border-radius: 4px; --progress-track: var(--eco-bg-tertiary); --progress-fill: var(--eco-brand-button); }
.eco-progress-row--col { display: grid; grid-template-columns: minmax(0, 1fr) 48px; }
.eco-progress-row--col > .eco-progress { flex: 0 1 auto; }
.eco-progress-row--col > span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--eco-text-secondary); }
.eco-progress-row > b { flex: none; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-secondary); font-variant-numeric: tabular-nums; }
.eco-progress-field { display: grid; gap: var(--eco-spacing-lg); min-width: 0; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-secondary); }
.eco-progress-field__head { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-spacing-lg); min-width: 0; }
.eco-progress-field__label { display: inline-flex; align-items: center; gap: var(--eco-spacing-md); min-width: 0; overflow-wrap: anywhere; }
.eco-progress-field__info { width: 16px; height: 16px; flex: none; color: var(--eco-fg-quaternary); }
.eco-progress-field__value { display: inline-flex; align-items: center; gap: var(--eco-spacing-md); flex: none; font-variant-numeric: tabular-nums; }
.eco-progress-field__status { display: inline-flex; width: 20px; height: 20px; flex: none; color: var(--eco-fg-quaternary); }
.eco-progress-field__status > svg { width: 100%; height: 100%; }
.eco-progress-field > .eco-progress-row { margin-top: calc(var(--eco-spacing-sm) * -1); }
.eco-progress-field__hint { margin: calc(var(--eco-spacing-xs) * -1) 0 0; color: var(--eco-text-tertiary); overflow-wrap: anywhere; }
.eco-progress-field.is-complete .eco-progress-field__status { color: var(--eco-fg-brand-primary); }
.eco-progress-field.is-error .eco-progress-field__status { color: var(--eco-fg-error-primary); }
.eco-progress-field.is-error .eco-progress { --progress-fill: var(--eco-fg-error-primary); }
.eco-progress-field.is-error .eco-progress-field__hint { color: var(--eco-text-error-primary); }
@media (prefers-reduced-motion: no-preference) { .eco-progress-field__spin { animation: eco-spin 1.2s linear infinite; } }
.eco-progress-float { position: relative; padding-top: 40px; }
.eco-progress-float > b { position: absolute; top: 0; left: clamp(30px, var(--v, 50%), calc(100% - 30px)); transform: translateX(-50%); padding: 6px 10px; border-radius: var(--eco-radius-md); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-lg); font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-progress-float--bottom { padding: 0 0 40px; }
.eco-progress-float--bottom > b { top: auto; bottom: 0; }
.eco-progress-circle { --s: 160px; --p: 50; --w: 8; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); }
.eco-progress-circle > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: rotate(-90deg); }
.eco-progress-circle circle { fill: none; stroke: var(--progress-track, var(--eco-bg-secondary)); stroke-width: var(--w); }
.eco-progress-circle circle + circle { stroke: var(--progress-fill, var(--eco-brand-button, var(--eco-bg-brand-solid))); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.eco-progress-circle[aria-valuenow="0"] circle + circle { stroke-linecap: butt; }
.eco-progress-circle__v { position: relative; display: grid; justify-items: center; font: var(--eco-font-display--weight, 500) var(--eco-text-display-xs)/var(--eco-text-display-xs--line-height) var(--eco-font-display); letter-spacing: var(--eco-text-display-xs--letter-spacing); color: var(--eco-text-primary); font-variant-numeric: tabular-nums; }
.eco-progress-circle__v small { font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); }
.eco-progress-circle--xxs { --s: 64px; --w: 10; }
.eco-progress-circle--xxs .eco-progress-circle__v { font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-secondary); }
.eco-progress-circle--sm { --s: 200px; --w: 7; }
.eco-progress-circle--sm .eco-progress-circle__v { font-size: var(--eco-text-display-sm); line-height: var(--eco-text-display-sm--line-height); letter-spacing: var(--eco-text-display-sm--letter-spacing); }
.eco-progress-circle--md { --s: 240px; --w: 6.5; }
.eco-progress-circle--md .eco-progress-circle__v { font-size: var(--eco-text-display-md); line-height: var(--eco-text-display-md--line-height); letter-spacing: var(--eco-text-display-md--letter-spacing); }
.eco-progress-circle--md .eco-progress-circle__v small { font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); letter-spacing: 0; }
.eco-skeleton { display: block; border-radius: var(--eco-radius-md); background: linear-gradient(90deg, var(--eco-bg-tertiary) 0%, var(--eco-bg-secondary) 50%, var(--eco-bg-tertiary) 100%); background-size: 200% 100%; animation: eco-shimmer 1.4s linear infinite; }
@keyframes eco-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.eco-link { color: var(--eco-text-brand-secondary); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.eco-link:hover { color: var(--eco-text-brand-secondary_hover); }
.eco-link:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); border-radius: var(--eco-radius-xs); }
.eco-progress.eco-progress--xs { height: 4px; }
.eco-progress.eco-progress--sm { height: 6px; }
.eco-skeleton.eco-skeleton--card { border-radius: var(--eco-radius-3xl); }
.eco-skeleton.eco-skeleton--line { height: 12px; border-radius: var(--eco-radius-full); }
.eco-skeleton.eco-skeleton--title { height: 28px; border-radius: var(--eco-radius-md); }
.eco-skeleton.eco-skeleton--bar { height: var(--v); border-radius: 4px 4px 0 0; }
.eco-skeleton.eco-skeleton--hbar { height: var(--eco-viz-hbar); border-radius: 0 4px 4px 0; }
.eco-skeleton.eco-skeleton--circle { width: var(--s, 40px); height: var(--s, 40px); border-radius: var(--eco-radius-full); }
.eco-skeleton.eco-skeleton--bubble { width: var(--w, 60%); height: var(--h, 44px); border-radius: 18px; }
/* — featured-icon — */
.eco-featured-icon { --fi-s: 48px; --fi-i: 24px; --fi-w: 8px; --fi-r: var(--eco-radius-lg); --fi-bg: var(--eco-bg-brand-primary); --fi-ring: var(--eco-bg-brand-primary); --fi-fg: var(--eco-fg-brand-primary); flex: none; display: inline-grid; place-items: center; width: var(--fi-s); height: var(--fi-s); border-radius: var(--eco-radius-full); background: var(--eco-fi-off-bg, var(--fi-bg)); color: var(--eco-fi-off-fg, var(--fi-fg)); box-shadow: none; }
.eco-featured-icon > svg { width: var(--fi-i); height: var(--fi-i); }
.eco-featured-icon--sm { --fi-s: 32px; --fi-i: 16px; --fi-w: 4px; --fi-r: var(--eco-radius-sm); }
.eco-featured-icon--md { --fi-s: 40px; --fi-i: 20px; --fi-w: 6px; --fi-r: var(--eco-radius-md); }
.eco-featured-icon--xl { --fi-s: 56px; --fi-i: 28px; --fi-w: 10px; --fi-r: var(--eco-radius-xl); }
.eco-featured-icon--gray { --fi-bg: var(--eco-bg-tertiary); --fi-ring: var(--eco-bg-secondary); --fi-fg: var(--eco-fg-tertiary); }
.eco-featured-icon--success { --fi-bg: var(--eco-bg-success-primary); --fi-ring: color-mix(in oklab, var(--eco-bg-success-primary) 50%, transparent); --fi-fg: var(--eco-fg-success-primary); }
.eco-featured-icon--warning { --fi-bg: var(--eco-bg-warning-primary); --fi-ring: color-mix(in oklab, var(--eco-bg-warning-primary) 50%, transparent); --fi-fg: var(--eco-fg-warning-primary); }
.eco-featured-icon--error { --fi-bg: var(--eco-bg-error-secondary); --fi-ring: var(--eco-bg-error-primary); --fi-fg: var(--eco-fg-error-primary); }
.eco-featured-icon--modern { border-radius: var(--fi-r); background: var(--eco-fi-off-bg, var(--ic-tile, var(--eco-bg-secondary))); color: var(--eco-fi-off-fg, var(--eco-fg-secondary)); box-shadow: none; }
.eco-featured-icon--tile { --fi-s: 36px; --fi-i: 20px; --fi-r: var(--eco-radius-xl); display: grid; border-radius: var(--fi-r); background: var(--eco-fi-off-bg, var(--fi-tile-bg, var(--ic-tile, var(--eco-bg-secondary)))); color: var(--eco-fi-off-fg, var(--eco-fg-brand-primary)); }
.eco-featured-icon--brand { background: var(--eco-fi-off-bg, var(--eco-bg-brand-primary)); color: var(--eco-fi-off-fg, var(--eco-fg-brand-primary)); }
.eco-featured-icon--solid { --fi-bg: var(--eco-bg-brand-solid); --fi-fg: var(--eco-text-primary_on-brand); }
/* — pagination — */
.eco-pagination { container: eco-pagination / inline-size; display: flex; align-items: center; justify-content: space-between; gap: var(--eco-spacing-lg); }
.eco-pagination__pages { list-style: none; display: flex; align-items: center; gap: var(--eco-spacing-xxs); margin: 0; padding: 0; }
.eco-pagination__page, .eco-pagination__gap { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--eco-radius-full); font: 500 var(--eco-text-sm)/1 var(--eco-font-body); color: var(--eco-text-quaternary); text-decoration: none; font-variant-numeric: tabular-nums; }
.eco-pagination__page { transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-pagination__page:hover { background: var(--eco-bg-secondary); color: var(--eco-text-secondary); }
.eco-pagination__page[aria-current="page"] { background: var(--eco-bg-secondary); color: var(--eco-text-primary); }
.eco-pagination__page:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-pagination__gap { color: var(--eco-text-tertiary); }
.eco-pagination__info { margin: 0; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-pagination > .eco-pagination__info { display: none; }
.eco-pagination--minimal > .eco-pagination__info { display: block; }
.eco-pagination__btns { display: flex; gap: var(--eco-spacing-lg); }
@container eco-pagination (max-width: 600px) {
  .eco-pagination__pages { display: none; }
  .eco-pagination > .eco-pagination__info { display: block; }
  .eco-pagination:not(.eco-pagination--minimal) > :is(.eco-pagination__prev, .eco-pagination__next) { padding: 10px; }
  .eco-pagination:not(.eco-pagination--minimal) > :is(.eco-pagination__prev, .eco-pagination__next) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container eco-pagination (max-width: 360px) {
  .eco-pagination--minimal :is(.eco-pagination__prev, .eco-pagination__next) { padding: 10px; }
  .eco-pagination--minimal :is(.eco-pagination__prev, .eco-pagination__next) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* — modal — */
:root, [data-theme="dark"] { --modal-edge: transparent; --modal-t-bg: color-mix(in oklab, var(--eco-color-white) 8%, transparent); --modal-t-bg-hover: color-mix(in oklab, var(--eco-color-white) 15%, transparent); }
[data-theme="light"] { --modal-edge: transparent; --modal-t-bg: var(--eco-color-surface); --modal-t-bg-hover: var(--eco-color-surface-hover); }
.eco-modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--eco-spacing-xl); overflow-y: auto; background: var(--eco-bg-overlay); }
.eco-modal-overlay--blur, dialog.eco-modal--blur::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eco-modal { --w: 480px; --btn-t-bg: var(--modal-t-bg); --btn-t-bg-hover: var(--modal-t-bg-hover); position: relative; width: 100%; max-width: var(--w); padding: var(--eco-spacing-3xl); border: 0; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-xl), inset 0 0 1px var(--modal-edge); color: var(--eco-text-primary); text-align: left; }
.eco-modal--xs { --w: 320px; }
.eco-modal--md { --w: 640px; }
.eco-modal--lg { --w: 800px; }
dialog.eco-modal { position: fixed; inset: 0; width: calc(100% - 32px); max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; }
dialog.eco-modal::backdrop { background: var(--eco-bg-overlay); }
dialog.eco-modal--cover { width: calc(100% - 80px); max-width: none; max-height: calc(100dvh - 80px); }
dialog.eco-modal--full { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
dialog.eco-modal--full[open], dialog.eco-modal--full > form { display: flex; flex-direction: column; }
dialog.eco-modal--full > form { flex: 1 1 auto; }
dialog.eco-modal--full > form > .eco-featured-icon { align-self: flex-start; }
dialog.eco-modal--full > form > .eco-modal__actions { margin-top: auto; padding-top: var(--eco-spacing-2xl); }
.eco-modal > .eco-featured-icon, .eco-modal > form > .eco-featured-icon { --fi-s: 40px; --fi-i: 16px; --fi-w: 0px; }
.eco-modal .eco-modal__close { --ico: var(--eco-fg-tertiary); position: absolute; top: var(--eco-spacing-xl); right: 10px; width: 24px; min-width: 0; height: 24px; min-height: 0; padding: 0; color: var(--eco-fg-tertiary); }
.eco-modal .eco-modal__close:not([disabled], [aria-disabled="true"]):is(:hover, :active) { --ico: var(--btn-n-fg, var(--eco-text-primary)); color: var(--btn-n-fg, var(--eco-text-primary)); }
.eco-modal .eco-modal__close > svg { width: 16px; height: 16px; }
.eco-modal .eco-modal__close::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; }
.eco-modal__title { margin: var(--eco-spacing-lg) 0 0; padding-right: var(--eco-spacing-3xl); font: 500 var(--eco-text-md)/28px var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-primary); }
.eco-modal__title:first-child { margin-top: 0; }
.eco-modal__text { margin-top: var(--eco-spacing-md); padding-right: var(--eco-spacing-xl); font: 400 var(--eco-text-sm)/24px var(--eco-font-body); color: var(--eco-text-tertiary); text-wrap: pretty; }
.eco-modal__body { margin-top: var(--eco-spacing-lg); }
.eco-modal__actions { display: flex; justify-content: flex-end; gap: var(--eco-spacing-md); margin-top: var(--eco-spacing-2xl); }
@media (max-width: 639px) {
  dialog.eco-modal, .eco-modal-overlay > .eco-modal { max-width: none; }
  .eco-modal__actions { flex-direction: column-reverse; }
  dialog.eco-modal--cover { width: calc(100% - 32px); max-height: calc(100dvh - 32px); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.eco-modal[open] { animation: eco-modal-in var(--eco-duration-base) var(--eco-ease-emphasized); }
  dialog.eco-modal[open]::backdrop { animation: eco-fade-in var(--eco-duration-base) linear; }
}
@keyframes eco-modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes eco-fade-in { from { opacity: 0; } }
/* — empty — */
.eco-empty { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; max-width: 352px; margin-inline: auto; text-align: center; }
.eco-empty__art { --ring-d: 240px; position: relative; display: grid; place-items: center; margin-bottom: var(--eco-spacing-xl); }
.eco-empty__art::before { display: none; content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: var(--ring-d); height: var(--ring-d); transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 23px, var(--eco-border-secondary) 23px 24px); -webkit-mask-image: radial-gradient(closest-side, var(--eco-color-black) 10%, transparent 72%), linear-gradient(var(--eco-color-black) 55%, transparent 70%); -webkit-mask-composite: source-in; mask-image: radial-gradient(closest-side, var(--eco-color-black) 10%, transparent 72%), linear-gradient(var(--eco-color-black) 55%, transparent 70%); mask-composite: intersect; pointer-events: none; }
.eco-empty__title { font: 600 var(--eco-text-md)/var(--eco-text-md--line-height) var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-primary); }
.eco-empty__text { margin-top: var(--eco-spacing-xs); font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); text-wrap: pretty; }
.eco-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--eco-spacing-lg); margin-top: var(--eco-spacing-3xl); }
.eco-empty--md { max-width: 512px; }
.eco-empty--md .eco-empty__art { --ring-d: 336px; margin-bottom: var(--eco-spacing-2xl); }
.eco-empty--md .eco-empty__title { font-size: var(--eco-text-lg); line-height: var(--eco-text-lg--line-height); }
.eco-empty--md .eco-empty__text { font-size: var(--eco-text-md); line-height: var(--eco-text-md--line-height); }
.eco-empty--md .eco-empty__actions { margin-top: var(--eco-spacing-4xl); }
.eco-empty--inline { flex-direction: row; align-items: center; gap: 16px; max-width: none; text-align: left; }
.eco-empty--inline .eco-empty__art { flex: none; width: 64px; margin: 0; }
.eco-empty--inline .eco-empty__actions { justify-content: flex-start; margin-top: 10px; }
@media (max-width: 600px) {
  .eco-empty--inline { flex-direction: column; align-items: flex-start; }
}
.eco-empty--compact .eco-empty__title { font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); font-weight: 500; color: var(--eco-text-secondary); }
.eco-empty--note { position: static; isolation: auto; display: grid; flex-direction: row; align-items: normal; justify-items: center; gap: 8px; max-width: none; margin-inline: 0; padding: 20px 12px; font-size: 13px; color: var(--eco-text-tertiary); }
.eco-empty--note > svg { width: 28px; height: 28px; color: var(--eco-fg-tertiary); }
.eco-empty--note b { color: var(--eco-text-primary); }
.eco-empty--note > b { font: 500 14px/18px var(--eco-font-body); }
/* — file-upload — */
.eco-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--eco-spacing-lg); padding: 16px 24px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-secondary); box-shadow: none; color: var(--eco-text-tertiary); text-align: center; cursor: pointer; transition: box-shadow var(--eco-duration-fast) linear, background-color var(--eco-duration-fast) linear; }
.eco-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eco-dropzone__text { display: block; font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); }
.eco-dropzone__text b { font-weight: 600; color: var(--eco-text-brand-secondary); }
.eco-dropzone__hint { display: block; margin-top: var(--eco-spacing-xs); font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); }
.eco-dropzone:hover { background: var(--eco-bg-secondary_hover); }
.eco-dropzone.is-dragover { background: var(--eco-bg-brand-primary); box-shadow: none; }
.eco-dropzone:has(.eco-dropzone__input:focus-visible) { outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-dropzone:has(.eco-dropzone__input:disabled) { background: var(--eco-bg-disabled); box-shadow: none; color: var(--eco-text-disabled); cursor: not-allowed; }
.eco-dropzone:has(.eco-dropzone__input:disabled) :is(b, .eco-dropzone__input) { color: inherit; cursor: not-allowed; }
.eco-dropzone:has(.eco-dropzone__input:disabled) { --eco-fi-off-bg: transparent; --eco-fi-off-fg: var(--eco-fg-disabled); }
.eco-dropzone:has(.eco-dropzone__input:disabled) .eco-dropzone__hint { color: var(--eco-text-tertiary); }
.eco-files { list-style: none; display: grid; gap: var(--eco-spacing-lg); margin: 0; padding: 0; }
.eco-file { --btn-t-bg: var(--btn-t-bg-file); --btn-t-bg-hover: var(--btn-t-bg-file-hover); position: relative; display: flex; align-items: flex-start; gap: var(--eco-spacing-lg); padding: 16px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-secondary); box-shadow: none; }
.eco-file.is-error { --btn-t-bg: var(--eco-bg-secondary); --btn-t-bg-hover: var(--eco-bg-secondary_hover); background: var(--eco-bg-primary); box-shadow: inset 0 0 0 var(--eco-field-focus-w) var(--eco-border-error); }
.eco-file__body { flex: 1; min-width: 0; display: grid; gap: var(--eco-spacing-xxs); }
.eco-file__name { padding-right: 40px; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-secondary); overflow-wrap: anywhere; }
.eco-file__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-file__meta > * + * { padding-left: 11px; background: radial-gradient(circle, var(--eco-fg-quaternary) 1.5px, transparent 2px) left center / 4px 4px no-repeat; }
.eco-file__meta > * + .eco-file__status--error { flex-basis: 100%; padding-left: 0; background: none; }
.eco-file__meta { padding-right: 40px; }
.eco-file__meta svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); flex: none; }
.eco-file__status { display: inline-flex; align-items: center; gap: var(--eco-spacing-xs); }
.eco-file__status--ok { font-weight: 500; color: var(--eco-text-success-primary); }
.eco-file__status--error { color: var(--eco-text-error-primary); }
.eco-file__body > .eco-progress-row { margin-top: var(--eco-spacing-xs); }
.eco-file__body > .eco-btn { justify-self: start; margin-top: var(--eco-spacing-xs); }
.eco-file__del { position: absolute; top: 8px; right: 8px; }
.eco-dropzone.eco-dropzone--well { background: var(--eco-app-well); }
.eco-file.eco-file--well { background: var(--eco-app-well); }
/* — forced-colors — */
@media (forced-colors: active) {
  .eco-switch, .eco-chip, .eco-dropzone, .eco-file, .eco-pagination__page[aria-current="page"] { outline: 1px solid ButtonText; outline-offset: -1px; }
  .eco-check, .eco-radio { outline: 1px solid ButtonText; outline-offset: -1px; }
  .eco-check::before { forced-color-adjust: none; background: Highlight; }
  .eco-check::after { forced-color-adjust: none; background: HighlightText; }
  .eco-radio::after { forced-color-adjust: none; background: Highlight; }
  .eco-check:focus-visible, .eco-radio:focus-visible, .eco-switch:focus-visible, .eco-chip:focus-visible, .eco-pagination__page:focus-visible { outline: var(--eco-focus-w) solid Highlight; outline-offset: 2px; }
}
/* — search-cancel — */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 0 0 6px; background: var(--eco-text-tertiary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px no-repeat; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--eco-text-primary); }
/* — button-group — */
.eco-btn-group { display: inline-flex; align-items: stretch; max-width: 100%; border-radius: var(--eco-radius-4xl); isolation: isolate; }
.eco-btn-group:has(> .eco-btn--xs) { border-radius: var(--eco-radius-2xl); }
.eco-btn-group--fill { display: flex; width: 100%; }
.eco-btn-group--fill > .eco-btn { flex: 1 1 0; min-width: 0; }
.eco-btn-group--vertical { flex-direction: column; }
.eco-btn-group > .eco-btn:focus-visible { z-index: 1; }
.eco-btn-group > .eco-btn--outline + .eco-btn--outline { margin-inline-start: -1px; }
.eco-btn-group--vertical > .eco-btn--outline + .eco-btn--outline { margin-inline-start: 0; margin-block-start: -1px; }
/* — otp — */
.eco-otp { display: grid; gap: var(--eco-spacing-md); min-width: 0; margin: 0; padding: 0; border: 0; }
.eco-otp > legend { float: none; padding: 0; margin-bottom: var(--eco-spacing-sm); }
.eco-otp__row { display: flex; align-items: center; gap: var(--eco-spacing-md); min-width: 0; }
.eco-otp__cell { flex: 0 1 42px; width: auto; min-width: 0; height: 44px; padding: 0; border-radius: var(--eco-radius-xl); text-align: center; font: 600 var(--eco-text-lg)/var(--eco-text-lg--line-height) var(--eco-font-body); letter-spacing: 0; font-variant-numeric: tabular-nums; caret-color: var(--eco-text-tertiary); }
.eco-otp__sep { flex: none; width: 6px; height: 1px; background: var(--eco-border-secondary); }
@media (max-width: 360px) { .eco-otp__row { gap: var(--eco-spacing-xs); } }
.eco-otp__foot { min-height: 28px; margin: 0; padding-top: var(--eco-spacing-xs); font: 400 var(--eco-text-sm)/24px var(--eco-font-body); font-variant-numeric: tabular-nums; color: var(--eco-text-tertiary); text-wrap: pretty; }
.eco-otp__foot > svg { display: inline-block; width: var(--eco-icon-sm); height: var(--eco-icon-sm); margin-right: var(--eco-spacing-sm); vertical-align: -3px; }
.eco-otp.is-error .eco-otp__foot { color: var(--eco-text-error-primary); }
.eco-otp.is-error .eco-otp__foot > svg { color: var(--eco-fg-error-primary); }
.eco-otp:disabled .eco-otp__foot { opacity: .5; }
/* — input-group — */
.eco-input-group { --ig-h: 44px; --ig-in: 6px; --pill-h: calc(var(--ig-h) - 2 * var(--ig-in)); --field-bg: var(--eco-bg-secondary); --field-bg-hover: color-mix(in srgb, var(--eco-bg-secondary) 50%, var(--eco-bg-secondary_hover)); --affix-bg: var(--eco-bg-primary_alt); --affix-bg-hover: color-mix(in srgb, var(--affix-bg), var(--eco-text-primary) 6%); --field-focus: transparent; position: relative; display: flex; align-items: center; gap: 0; width: 100%; min-width: 0; min-height: var(--ig-h); padding: var(--ig-in); border-radius: var(--eco-field-radius-affix, var(--eco-radius-full)); outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--field-focus); background-color: var(--field-bg); color: var(--eco-text-primary); font: 400 var(--eco-text-md)/var(--eco-text-md--line-height) var(--eco-font-body); transition: background-color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear, outline-color var(--eco-duration-fast) linear; }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-input-group, .eco-input-group--on-grey { --field-bg: var(--eco-bg-primary); --field-bg-hover: color-mix(in srgb, var(--eco-bg-primary) 50%, var(--eco-bg-primary_hover)); --affix-bg: var(--eco-bg-secondary); }
.eco-input-group--sm { --ig-h: 40px; }
.eco-input-group:hover:not(:focus-within, .is-disabled, :has(> .eco-input-group__input:is(:disabled, [readonly], :placeholder-shown))) { background-color: var(--field-bg-hover); }
.eco-input-group:focus-within { --field-focus: var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-input-group__input:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.eco-input-group__input { flex: 1 1 auto; align-self: stretch; width: 100%; min-width: 0; margin: 0; padding: 0 calc(16px - var(--ig-in)); border: 0; border-radius: inherit; outline: none; background: transparent; color: inherit; font: inherit; letter-spacing: 0; }
.eco-input-group--sm .eco-input-group__input { padding-inline: calc(14px - var(--ig-in)); }
.eco-input-group__input::placeholder { color: var(--eco-text-placeholder); opacity: 1; }
.eco-input-group__addon { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--pill-h); height: var(--pill-h); padding: 0 14px; border-radius: var(--eco-field-radius-affix, var(--eco-radius-full)); background-color: var(--affix-bg); color: var(--eco-text-secondary); font-weight: 500; white-space: nowrap; }
.eco-input-group--sm .eco-input-group__addon { padding-inline: 12px; }
label.eco-input-group__addon { cursor: text; }
.eco-input-group__addon + .eco-input-group__input, .eco-input-group__btn + .eco-input-group__input { padding-left: 8px; }
.eco-input-group > :is(.eco-input-group__addon--icon, .eco-input-group__addon--plain) { min-width: 0; padding: 0 calc(14px - var(--ig-in)); background: none; color: var(--eco-text-tertiary); font-weight: 400; }
.eco-input-group > :is(.eco-input-group__addon--icon, .eco-input-group__addon--plain) + .eco-input-group__input { padding-left: 2px; }
.eco-input-group > .eco-input-group__input + .eco-input-group__addon--plain { padding-left: 2px; }
.eco-input-group__addon:has(> .eco-input-group__select) { padding: 0; background: none; }
.eco-input-group__select { appearance: none; min-width: 0; height: var(--pill-h); margin: 0; padding: 0 calc(14px + var(--eco-icon-sm) + 4px) 0 14px; border: 0; border-radius: var(--eco-field-radius-affix, var(--eco-radius-full)); outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; background-color: var(--affix-bg); color: var(--eco-text-primary); font: inherit; font-weight: 500; letter-spacing: 0; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear; }
.eco-input-group__select:hover:not(:disabled) { background-color: var(--affix-bg-hover); }
.eco-input-group__select:focus-visible { box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-input-group__select option { color: var(--eco-text-primary); background: var(--eco-bg-primary); }
.eco-input-group__btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--pill-h); height: var(--pill-h); margin: 0; padding: 0 14px; border: 0; border-radius: var(--eco-field-radius-affix, var(--eco-radius-full)); outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; background-color: var(--affix-bg); color: var(--eco-text-primary); font: inherit; font-weight: 500; letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear, box-shadow var(--eco-duration-fast) linear; }
.eco-input-group--sm .eco-input-group__btn { padding-inline: 12px; }
.eco-input-group__btn:hover:not(:disabled) { background-color: var(--affix-bg-hover); }
.eco-input-group__btn:focus-visible { box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-input-group__btn:disabled { color: var(--eco-text-placeholder); cursor: not-allowed; }
.eco-input-group__btn > svg { flex: none; width: 18px; height: 18px; }
.eco-input-group__btn--icon { width: var(--pill-h); padding: 0; color: var(--eco-text-secondary); }
.eco-input-group__btn.is-done { color: var(--eco-text-success-primary); }
@media (max-width: 479px) { .eco-input-group__btn:has(> svg):has(> span) { width: var(--pill-h); padding: 0; } .eco-input-group__btn:has(> svg) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.eco-field.is-error .eco-input-group, .eco-input-group.is-error, .eco-input-group:has(> .eco-input-group__input[aria-invalid="true"]) { --field-focus: var(--eco-focus-ring-error); }
.eco-input-group:is(.is-disabled, :has(> .eco-input-group__input:disabled)) { opacity: .5; cursor: not-allowed; }
.eco-input-group:is(.is-disabled, :has(> .eco-input-group__input:disabled)) :is(.eco-input-group__input, .eco-input-group__addon, .eco-input-group__select, .eco-input-group__btn) { cursor: not-allowed; pointer-events: none; }
@media (forced-colors: active) { .eco-input-group:focus-within { outline-color: Highlight; } :is(.eco-input-group__select, .eco-input-group__btn):focus-visible { outline-color: Highlight; } :is(.eco-input-group__addon, .eco-input-group__btn, .eco-input-group__select):not(.eco-input-group__addon--icon, .eco-input-group__addon--plain) { border: 1px solid CanvasText; } }
.eco-input-group--well { --field-bg: var(--eco-app-well); --field-bg-hover: color-mix(in srgb, var(--eco-app-well) 50%, var(--eco-app-well-hover)); --affix-bg: var(--eco-app-card); }
/* — callout — */
:root, [data-theme="dark"] {
  --callout-info-bg: color-mix(in srgb, var(--eco-fg-info-primary) 16%, transparent);
  --callout-warning-icon: var(--eco-fg-warning-primary);
}
[data-theme="light"] {
  --callout-info-bg: color-mix(in srgb, var(--eco-fg-info-primary) 8%, var(--eco-bg-primary));
  --callout-warning-icon: var(--eco-color-warning-600);
}
.eco-callout {
  --co-bg: var(--callout-surface, var(--eco-bg-secondary)); --co-ic: var(--eco-fg-secondary);
  --co-tile: var(--callout-tile, var(--eco-bg-primary_alt));
  --co-muted: color-mix(in srgb, var(--eco-text-primary) 76%, transparent);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; column-gap: var(--eco-spacing-lg);
  min-width: 0; padding: var(--eco-spacing-xl) var(--eco-spacing-2xl); border-radius: var(--eco-radius-2xl);
  background: var(--co-bg); color: var(--eco-text-primary);
  font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); letter-spacing: 0; overflow-wrap: break-word; }
.eco-callout[hidden] { display: none; }
.eco-callout:has(> .eco-callout__icon) { grid-template-columns: auto minmax(0, 1fr); }
.eco-callout > :not(.eco-callout__icon, .eco-callout__close) { grid-column: -2 / -1; min-width: 0; }
:is(.eco-callout--brand, .eco-callout--tip, .eco-callout--info, .eco-callout--important, .eco-callout--warning, .eco-callout--error, .eco-callout--success) { --co-tile: color-mix(in srgb, var(--eco-bg-primary_alt) 72%, transparent); }
:is(.eco-callout--brand, .eco-callout--tip) { --co-bg: var(--eco-bg-brand-primary); --co-ic: var(--eco-fg-brand-primary); }
:is(.eco-callout--info, .eco-callout--important) { --co-bg: var(--callout-info-bg); --co-ic: var(--eco-fg-info-primary); }
.eco-callout--warning { --co-bg: var(--eco-bg-warning-primary); --co-ic: var(--callout-warning-icon); }
.eco-callout--error { --co-bg: var(--eco-bg-error-primary); --co-ic: var(--eco-fg-error-primary); }
.eco-callout--success { --co-bg: var(--eco-bg-success-primary); --co-ic: var(--eco-fg-success-primary); }
:is(.eco-card:not(.eco-card--raised, .eco-card--app)) { --callout-surface: var(--eco-bg-primary); --callout-tile: var(--eco-bg-secondary); }
:is(.eco-card--raised, .eco-table-card) { --callout-surface: initial; --callout-tile: initial; }
.eco-callout__icon { grid-column: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--eco-radius-md); background: var(--co-tile); color: var(--co-ic); }
.eco-callout__icon > svg { width: var(--eco-icon-md); height: var(--eco-icon-md); }
.eco-callout:has(> .eco-callout__icon) > .eco-callout__content { padding-top: var(--eco-spacing-xs); }
.eco-callout:has(> .eco-callout__icon) > .eco-callout__content:not(:has(> .eco-callout__title)) { padding-top: var(--eco-spacing-sm); }
.eco-callout__title { margin: 0; color: var(--eco-text-primary); font: 600 var(--eco-text-md)/var(--eco-text-md--line-height) var(--eco-font-body); letter-spacing: 0; -webkit-hyphens: auto; hyphens: auto; }
.eco-callout__body { margin: 0; color: var(--co-muted); }
.eco-callout__title + .eco-callout__body { margin-top: var(--eco-spacing-xs); }
.eco-callout__body > * { margin: 0; }
.eco-callout__body > * + * { margin-top: var(--eco-spacing-md); }
.eco-callout__body :is(ul, ol) { padding-left: 1.25em; }
.eco-callout__body :is(b, strong) { font-weight: 600; color: var(--eco-text-primary); }
.eco-callout :is(.eco-callout__body a, .eco-callout__action) { color: var(--eco-text-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.eco-callout :is(.eco-callout__body a, .eco-callout__action):hover { text-decoration-thickness: 2px; }
.eco-callout :is(a, button):focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--co-bg, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--eco-focus-ring); border-radius: var(--eco-radius-xs); }
.eco-callout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-spacing-md) var(--eco-spacing-xl); margin-top: var(--eco-spacing-lg); }
.eco-callout__action { display: inline-flex; align-items: center; gap: var(--eco-spacing-xs); font-weight: 600; }
.eco-callout__action > svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); flex: none; }
.eco-callout:has(> .eco-callout__close) { padding-right: calc(var(--eco-spacing-2xl) + 32px); }
.eco-callout__close { position: absolute; top: var(--eco-spacing-md); right: var(--eco-spacing-md); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: transparent; color: var(--co-muted); cursor: pointer; transition: background-color var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-callout__close:hover { background: color-mix(in srgb, var(--eco-text-primary) 8%, transparent); color: var(--eco-text-primary); }
.eco-callout__close > svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); }
.eco-callout--compact { column-gap: var(--eco-spacing-md); padding: var(--eco-spacing-lg) var(--eco-spacing-xl); border-radius: var(--eco-radius-xl); }
.eco-callout--compact > .eco-callout__icon { width: 20px; height: 20px; background: none; }
.eco-callout--compact:has(> .eco-callout__icon) > .eco-callout__content { padding-top: 0; }
.eco-callout--compact .eco-callout__content > :is(.eco-callout__title, .eco-callout__body) { display: inline; font-size: var(--eco-text-sm); line-height: var(--eco-text-sm--line-height); }
.eco-callout--compact .eco-callout__title { margin-right: var(--eco-spacing-xs); }
.eco-callout--compact .eco-callout__body > * { display: inline; }
.eco-callout--compact .eco-callout__actions { display: inline-flex; margin: 0 0 0 var(--eco-spacing-md); vertical-align: top; }
.eco-callout--compact:has(> .eco-callout__close) { padding-right: calc(var(--eco-spacing-xl) + 32px); }
.eco-callout--compact > .eco-callout__close { top: var(--eco-spacing-xxs); right: var(--eco-spacing-xs); }
.eco-callout__title:has(> svg.eco-callout__icon) { display: flex; align-items: flex-start; gap: var(--eco-spacing-md); }
svg.eco-callout__icon { flex: none; width: var(--eco-icon-md); height: var(--eco-icon-md); margin-top: 2px; border-radius: 0; background: none; }
svg.eco-callout__icon circle { fill: var(--co-ic); }
svg.eco-callout__icon path { fill: var(--eco-bg-primary); }
@media (prefers-reduced-motion: reduce) { .eco-callout__close { transition: none; } }
@media (forced-colors: active) { .eco-callout { border: 1px solid CanvasText; } .eco-callout__icon { color: CanvasText; } svg.eco-callout__icon circle { fill: CanvasText; } svg.eco-callout__icon path { fill: Canvas; } .eco-callout__close { color: ButtonText; } }
/* — menu — */
:root, [data-theme="dark"] {
  --menu-edge: transparent;
  --menu-press: var(--eco-bg-primary);
}
[data-theme="light"] {
  --menu-edge: transparent;
  --menu-press: var(--eco-bg-secondary_hover);
}
.eco-menu { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; min-width: 240px; max-width: min(320px, calc(100vw - 32px)); max-height: var(--eco-menu-max-h, min(480px, calc(100dvh - 32px))); margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); box-shadow: inset 0 0 0 1px var(--menu-edge), var(--eco-shadow-lg); color: var(--eco-text-primary); font-family: var(--eco-font-body); text-align: left; list-style: none; }
.eco-menu[hidden] { display: none; }
.eco-menu__group { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; list-style: none; }
.eco-menu > .eco-menu__item + .eco-menu__item { margin-top: -2px; }
.eco-menu__label { padding: var(--eco-menu-label-pt, 10px) 12px 6px; font: 500 var(--eco-text-xs)/20px var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); }
.eco-menu__sep { flex: none; height: 1px; margin: 4px 12px; background: transparent; }
.eco-menu__item { --ico: var(--eco-fg-tertiary); --ico-on: var(--eco-fg-primary); position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 36px; margin: 0; padding: 6px 12px; border: 0; border-radius: var(--eco-radius-3xl); background: transparent; color: var(--eco-text-primary); font: 500 var(--eco-text-sm)/24px var(--eco-font-body); letter-spacing: 0; text-align: left; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-menu__item > .eco-avatar { --s: 36px; --f: var(--eco-text-sm); }
.eco-menu__item > svg, .eco-menu__end svg { width: 16px; height: 16px; flex: none; color: var(--ico); transition: color var(--eco-duration-fast) linear; }
.eco-menu__item > svg:first-child, .eco-menu__item > .eco-menu__check { align-self: flex-start; margin-top: 2px; }
.eco-menu__item:not(:has(.eco-menu__desc)) > .eco-menu__check { align-self: center; margin-top: 0; }
.eco-menu__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.eco-menu__title { overflow-wrap: anywhere; }
.eco-menu__desc { font: 400 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); overflow-wrap: anywhere; }
.eco-menu__end { display: inline-flex; flex: none; align-items: center; margin-left: auto; color: var(--ico); }
.eco-menu__end.eco-menu__end--num { font-variant-numeric: tabular-nums; color: var(--eco-text-secondary); }
.eco-menu__kbd { display: inline-flex; flex: none; gap: 2px; align-items: center; margin-left: auto; padding: 1px 6px; border-radius: var(--eco-radius-md); font: 500 var(--eco-text-sm)/24px var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-menu__item--danger .eco-menu__kbd { color: inherit; }
.eco-menu__check { flex: none; width: 16px; height: 16px; color: var(--ico); visibility: hidden; }
.eco-menu__check--dot { display: inline-grid; place-items: center; }
.eco-menu__check--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.eco-menu__item:not([aria-disabled="true"]):not(:disabled):hover { --ico: var(--ico-on); background: var(--eco-bg-secondary); }
.eco-menu__item:not([aria-disabled="true"]):not(:disabled):active { background: var(--menu-press); }
.eco-menu__item:focus-visible { --ico: var(--ico-on); z-index: 1; outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-menu__item:is([aria-selected="true"], [aria-checked="true"]) { --ico: var(--ico-on); }
.eco-menu__item.is-active { --ico: var(--ico-on); background: var(--eco-bg-secondary); }
.eco-menu__item mark { background: none; color: inherit; font-weight: 700; }
.eco-menu__item:is([aria-selected="true"], [aria-checked="true"]) .eco-menu__check { visibility: visible; }
.eco-menu__item--danger { --ico: var(--eco-fg-error-primary); --ico-on: var(--eco-text-error-primary_hover); color: var(--eco-text-error-primary); }
.eco-menu__item--danger:not([aria-disabled="true"]):not(:disabled):is(:hover, :active), .eco-menu__item--danger:focus-visible { color: var(--eco-text-error-primary_hover); }
.eco-menu__item--danger:focus-visible { --focus-c: var(--eco-focus-ring-error); }
.eco-menu__item:is([aria-disabled="true"], :disabled) { opacity: .5; cursor: not-allowed; }
.eco-menu--lg { padding: 8px; }
.eco-menu--lg .eco-menu__item { min-height: 52px; gap: 10px; padding: 8px 12px; border-radius: var(--eco-radius-xl); }
.eco-menu--lg .eco-menu__title { font: 500 15px/20px var(--eco-font-body); }
.eco-dropdown { position: relative; display: inline-flex; vertical-align: top; }
.eco-dropdown > .eco-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; }
.eco-dropdown:is(.eco-dropdown--end, .is-end) > .eco-menu { right: 0; left: auto; }
.eco-dropdown.is-up > .eco-menu { top: auto; bottom: calc(100% + 8px); }
@media (prefers-reduced-motion: no-preference) {
  .eco-dropdown > .eco-menu:not([hidden]) { animation: eco-menu-in var(--eco-duration-base) var(--eco-ease-emphasized); }
  .eco-dropdown.is-up > .eco-menu:not([hidden]) { animation-name: eco-menu-in-up; }
}
@keyframes eco-menu-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes eco-menu-in-up { from { opacity: 0; transform: translateY(4px); } }
@media (forced-colors: active) {
  .eco-menu { border: 1px solid CanvasText; }
  .eco-menu__item:focus-visible { outline-color: Highlight; }
  .eco-menu__sep, .eco-menu__check--dot::before { forced-color-adjust: none; background: CanvasText; }
}
/* — slider — */
:root, [data-theme="dark"] { --sl-thumb-shadow: 0 0 transparent;  --sl-dot: var(--eco-fg-tertiary); --sl-tip-bg: var(--eco-bg-secondary); }
[data-theme="light"] { --sl-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06), 0 0 1px rgba(0, 0, 0, .06); --sl-dot: var(--eco-fg-quaternary); --sl-tip-bg: var(--eco-bg-primary); }
.eco-slider {
  --sl-lo: 0; --sl-hi: .5; --sl-steps: 10;
  --sl-h: 20px; --sl-pad: 2px; --sl-tw: 24px; --sl-th: 16px;
  --sl-run: calc(100% - var(--sl-tw) - 2 * var(--sl-pad));
  --sl-track: var(--eco-bg-tertiary); --sl-ring: transparent;
  --sl-fill: var(--eco-slider-fill, var(--eco-brand-button, var(--eco-bg-brand-solid))); --sl-thumb: var(--eco-color-white);
  --sl-dot-on: var(--eco-slider-mark, var(--eco-color-white));
  --sl-tip-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 -6px 12px rgba(0, 0, 0, .03), 0 14px 28px rgba(0, 0, 0, .08);
  --sl-focus: var(--eco-focus-ring);
  display: grid; gap: var(--eco-spacing-xs); width: 100%; min-width: 0;
}
:where(.eco-card:not(.eco-card--raised, .eco-card--app)) .eco-slider { --sl-track: var(--eco-bg-primary); }
.eco-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-spacing-md); min-width: 0; }
.eco-slider__value { margin-left: auto; font: 500 var(--eco-text-sm)/24px var(--eco-font-body); color: var(--eco-text-primary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.eco-slider__control { position: relative; height: var(--sl-h); cursor: pointer; }
.eco-slider__track, .eco-slider__fill { position: absolute; inset: 0; overflow: hidden; border-radius: var(--eco-radius-full); pointer-events: none; }
.eco-slider__track { background: var(--sl-track); box-shadow: 0 0 0 var(--eco-field-focus-w) var(--sl-ring); }
.eco-slider__fill { background: var(--sl-fill); clip-path: inset(0 calc(100% - var(--sl-run) * var(--sl-hi) - var(--sl-tw) - 2 * var(--sl-pad)) 0 calc(var(--sl-run) * var(--sl-lo)) round calc(var(--sl-h) / 2)); }
.eco-slider--steps :is(.eco-slider__track, .eco-slider__fill)::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--sl-pad) + var(--sl-tw) / 2 - var(--sl-run) / var(--sl-steps) / 2);
  width: calc(var(--sl-run) / var(--sl-steps) * (var(--sl-steps) + 1));
  background: radial-gradient(circle, var(--sl-dot) 1.5px, transparent 2px) 0 50% / calc(100% / (var(--sl-steps) + 1)) 100% repeat-x;
  opacity: .17;
}
.eco-slider--steps .eco-slider__fill::before { --sl-dot: var(--sl-dot-on); }
.eco-slider__input { position: absolute; inset: 0 var(--sl-pad); width: calc(100% - 2 * var(--sl-pad)); height: 100%; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; outline: none; }
.eco-slider__input.is-top { z-index: 1; }
.eco-slider__input::-webkit-slider-runnable-track { height: 100%; border: 0; background: none; }
.eco-slider__input::-moz-range-track { height: 100%; border: 0; background: none; }
.eco-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--sl-tw); height: var(--sl-th); margin-top: calc((var(--sl-h) - var(--sl-th)) / 2); border: 0; border-radius: var(--eco-radius-full); background: var(--sl-thumb); box-shadow: var(--sl-thumb-shadow); pointer-events: auto; cursor: grab; }
.eco-slider__input::-moz-range-thumb { width: var(--sl-tw); height: var(--sl-th); border: 0; border-radius: var(--eco-radius-full); background: var(--sl-thumb); box-shadow: var(--sl-thumb-shadow); pointer-events: auto; cursor: grab; }
.eco-slider__input:active::-webkit-slider-thumb { cursor: grabbing; }
.eco-slider__input:active::-moz-range-thumb { cursor: grabbing; }
.eco-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--sl-focus); }
.eco-slider__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--sl-focus); }
.eco-slider__tip { position: absolute; z-index: 2; left: calc(var(--sl-pad) + var(--sl-tw) / 2 + var(--sl-run) * var(--sl-hi)); bottom: calc(100% + 5px); box-sizing: border-box; height: 28px; padding: 4px 8px; border-radius: var(--eco-radius-xl); background: var(--sl-tip-bg); color: var(--eco-text-primary); box-shadow: var(--sl-tip-shadow); font: 400 var(--eco-text-xs)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.eco-slider__tip::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -4px; width: 10px; height: 10px; border-radius: var(--eco-radius-xs); background: inherit; transform: translateX(-50%) rotate(45deg); }
.eco-slider:has(> .eco-slider__head) > .eco-slider__control:has(> .eco-slider__tip) { margin-top: 33px; }
.eco-slider__marks { position: relative; height: 20px; font: 400 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-slider__marks > span { position: absolute; top: 0; left: calc(var(--sl-pad) + var(--sl-tw) / 2 + var(--sl-run) * var(--at, 0)); transform: translateX(-50%); white-space: nowrap; }
.eco-slider > .eco-hint { margin-top: 2px; }
.eco-slider.is-error { --sl-ring: var(--eco-focus-ring-error); --sl-focus: var(--eco-focus-ring-error); }
.eco-slider--thin { --sl-tw: 16px; --sl-th: 16px; --sl-pad: 0px; --sl-thumb-shadow: var(--sl-thin-shadow); }
:root, [data-theme="dark"] { --sl-thin-shadow: 0 0 transparent; }
[data-theme="light"] { --sl-thin-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 1px rgba(0, 0, 0, .22); }
.eco-slider--thin :is(.eco-slider__track, .eco-slider__fill) { inset: calc(50% - 2px) 0; }
.eco-slider--thin .eco-slider__input::-webkit-slider-thumb { border-radius: 50%; }
.eco-slider--thin :is(.eco-slider__track, .eco-slider__fill)::before { display: none; }
.eco-slider:is([aria-disabled="true"], .is-disabled, :has(.eco-slider__input:disabled)) { --sl-track: var(--eco-bg-disabled); --sl-fill: var(--eco-fg-disabled); --sl-dot: var(--eco-fg-disabled); --sl-dot-on: var(--eco-bg-primary); --sl-thumb: var(--eco-bg-primary); }
.eco-slider:is([aria-disabled="true"], .is-disabled, :has(.eco-slider__input:disabled)) :is(.eco-label, .eco-slider__value, .eco-slider__marks) { color: var(--eco-text-disabled); }
.eco-slider:is([aria-disabled="true"], .is-disabled, :has(.eco-slider__input:disabled)) .eco-slider__control { cursor: not-allowed; }
.eco-slider__input:disabled::-webkit-slider-thumb { box-shadow: none; cursor: not-allowed; }
.eco-slider__input:disabled::-moz-range-thumb { box-shadow: none; cursor: not-allowed; }
@media (forced-colors: active) {
  .eco-slider__track { box-shadow: none; border: 1px solid CanvasText; }
  .eco-slider__fill { forced-color-adjust: none; background: Highlight; }
  .eco-slider__input::-webkit-slider-thumb { forced-color-adjust: none; background: Canvas; box-shadow: 0 0 0 1px CanvasText; }
  .eco-slider__input::-moz-range-thumb { forced-color-adjust: none; background: Canvas; box-shadow: 0 0 0 1px CanvasText; }
  .eco-slider__tip { outline: 1px solid CanvasText; }
  .eco-slider:is([aria-disabled="true"], .is-disabled, :has(.eco-slider__input:disabled)) .eco-slider__fill { background: GrayText; }
  .eco-slider:is([aria-disabled="true"], .is-disabled, :has(.eco-slider__input:disabled)) :is(.eco-label, .eco-slider__value, .eco-slider__marks) { color: GrayText; }
}
.eco-range { --rg-fill: var(--eco-slider-fill, var(--eco-brand-button, var(--eco-bg-brand-solid))); --rg-track: var(--eco-bg-tertiary);
  display: block; width: 100%; height: 20px; margin: 0; padding: 0; overflow: hidden; border-radius: var(--eco-radius-full); background: var(--rg-track); -webkit-appearance: none; appearance: none; cursor: pointer; }
:where(.eco-card:not(.eco-card--raised, .eco-card--app)) .eco-range { --rg-track: var(--eco-bg-primary); }
.eco-range::-webkit-slider-runnable-track { height: 20px; border: 0; background: none; }
.eco-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 16px; margin-top: 2px; border: 0; border-radius: var(--eco-radius-full); background: var(--eco-color-white);
  box-shadow: var(--sl-thumb-shadow, 0 0 transparent), calc(-2000px - var(--rg-tw, 24px) / 2) 0 0 2000px var(--rg-fill); }
.eco-range::-moz-range-track { height: 20px; border: 0; background: none; }
.eco-range::-moz-range-progress { height: 20px; border-radius: var(--eco-radius-full); background: var(--rg-fill); }
.eco-range::-moz-range-thumb { width: 24px; height: 16px; border: 0; border-radius: var(--eco-radius-full); background: var(--eco-color-white); box-shadow: var(--sl-thumb-shadow, none); }
.eco-range:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-range:disabled { --rg-fill: var(--eco-fg-disabled); cursor: not-allowed; }
.eco-range--sm { --rg-tw: 16px; height: 16px; }
.eco-range--sm::-webkit-slider-runnable-track { height: 16px; }
.eco-range--sm::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: 0; }
.eco-range--sm::-moz-range-track, .eco-range--sm::-moz-range-progress { height: 16px; }
.eco-range--sm::-moz-range-thumb { width: 16px; height: 16px; }
.eco-range--thin { --rg-p: 0%; height: 6px; margin: 6px 0; overflow: visible; border-radius: var(--eco-radius-full); background: linear-gradient(to right, var(--rg-fill) 0 var(--rg-p), var(--rg-track) 0); }
.eco-range--thin::-webkit-slider-runnable-track { height: 6px; background: none; }
.eco-range--thin::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; box-shadow: var(--sl-thin-shadow); }
.eco-range--thin::-moz-range-track { height: 6px; border-radius: var(--eco-radius-full); background: var(--rg-track); }
.eco-range--thin::-moz-range-progress { height: 6px; border-radius: var(--eco-radius-full); background: var(--rg-fill); }
.eco-range--thin::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; box-shadow: var(--sl-thin-shadow); }
.eco-range--thin:focus-visible { box-shadow: none; }
.eco-range--thin:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-range--thin:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
@media (forced-colors: active) {
  .eco-btn:not(.eco-btn--ghost, [class*="link-"]) { outline: 1px solid ButtonText; outline-offset: -1px; }
  .eco-segment > button[aria-pressed="true"], .eco-tabs:is(.eco-tabs--pill, .eco-tabs--button-brand, .eco-tabs--button-gray, .eco-tabs--button-border) > .eco-tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .eco-menu__item:is(:hover, .is-selected, [aria-selected="true"]) { outline: 1px solid Highlight; outline-offset: -1px; }
  .eco-btn[disabled], .eco-btn[aria-disabled="true"] { outline-color: GrayText; }
}
/* — aurora — */
.eco-aurora { --au-bg: var(--eco-color-white); --au-fg: var(--eco-color-black); --au-line: color-mix(in srgb, var(--eco-aurora-line) 7%, transparent); --au-o: 1; --au-cell: 7.85cqi;
  position: relative; isolation: isolate; overflow: hidden; background: var(--au-bg); color: var(--au-fg); }
.eco-aurora.eco-aurora--dark { --au-bg: var(--eco-color-black); --au-fg: var(--eco-color-white); --au-line: color-mix(in srgb, var(--eco-color-white) 4%, transparent); --au-o: .7; }
.eco-aurora.eco-aurora--light { --au-bg: var(--eco-color-white); --au-fg: var(--eco-color-black); --au-line: color-mix(in srgb, var(--eco-aurora-line) 7%, transparent); --au-o: 1; }
.eco-aurora__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; }
.eco-aurora__bg::after { content: ""; position: absolute; inset: 0; -webkit-mask: radial-gradient(ellipse 72% 68% at 50% 46%, black 18%, transparent 78%); mask: radial-gradient(ellipse 72% 68% at 50% 46%, black 18%, transparent 78%); background: linear-gradient(90deg, var(--au-line) 1px, transparent 1px) 50% 50% / var(--au-cell) var(--au-cell), linear-gradient(var(--au-line) 1px, transparent 1px) 50% 50% / var(--au-cell) var(--au-cell); }
.eco-aurora__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .35; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
.eco-aurora__bg i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 50%; opacity: calc(var(--o) * var(--au-o)); transform: translate(-50%, -50%) rotate(var(--r));
  animation: eco-aurora var(--t) var(--eco-ease-standard) var(--dl, 0s) infinite alternate; will-change: transform; }
.eco-aurora__bg i:nth-child(1) { --x: 93%; --y: 4%; --w: 96%; --h: 105%; --r: -14deg; --o: .08; --dx: -24%; --dy: 14%; --t: calc(var(--eco-duration-slow) * 34); background: radial-gradient(closest-side, var(--eco-aurora-1) 30%, transparent); }
.eco-aurora__bg i:nth-child(2) { --x: 5%; --y: 75%; --w: 102%; --h: 146%; --r: 145deg; --o: .12; --dx: 20%; --dy: -10%; --t: calc(var(--eco-duration-slow) * 42); --dl: calc(var(--eco-duration-slow) * -20); background: radial-gradient(closest-side, var(--eco-aurora-2) 25%, color-mix(in srgb, var(--eco-aurora-2-deep) 70%, transparent) 62%, transparent); }
.eco-aurora__bg i:nth-child(3) { --x: 50%; --y: 83%; --w: 80%; --h: 105%; --r: 72deg; --o: .11; --dx: -18%; --dy: -12%; --t: calc(var(--eco-duration-slow) * 30); --dl: calc(var(--eco-duration-slow) * -34); background: radial-gradient(closest-side, var(--eco-aurora-3) 28%, color-mix(in srgb, var(--eco-aurora-ring) 34%, var(--eco-aurora-3)) 56%, color-mix(in srgb, var(--eco-aurora-ring) 30%, transparent) 74%, transparent); }
.eco-aurora__bg i:nth-child(4) { --x: 99.6%; --y: 66.6%; --w: 96%; --h: 105%; --r: 14.5deg; --o: .09; --dx: -22%; --dy: 10%; --t: calc(var(--eco-duration-slow) * 38); --dl: calc(var(--eco-duration-slow) * -48); background: radial-gradient(closest-side, var(--eco-aurora-4) 28%, color-mix(in srgb, var(--eco-aurora-ring) 34%, var(--eco-aurora-4)) 56%, color-mix(in srgb, var(--eco-aurora-ring) 30%, transparent) 74%, transparent); }
.eco-aurora.eco-aurora--dark .eco-aurora__bg i:nth-child(3) { --o: .07; }
.eco-aurora.eco-aurora--dark .eco-aurora__bg i:nth-child(4) { --o: .26; }
@keyframes eco-aurora {
  0% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  55% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--r) + 9deg)) scale(1.08); }
  100% { transform: translate(calc(-50% - var(--dx) * .5), calc(-50% + var(--dy) * .4)) rotate(calc(var(--r) - 6deg)) scale(.95); }
}
.eco-aurora.is-paused .eco-aurora__bg i { animation-play-state: paused; }
.eco-aurora--still .eco-aurora__bg i { animation: none; }
@media (prefers-reduced-motion: reduce) { .eco-aurora__bg i { animation: none; } }
.eco-aurora.eco-aurora--dark .eco-aurora__bg::before { opacity: .1; }
.eco-aurora.eco-aurora--dark .eco-aurora__bg i { display: none; }
.eco-aurora.eco-aurora--dark .eco-aurora__bg::before, .eco-aurora.eco-aurora--dark .eco-aurora__bg::after {
  content: ""; position: absolute; inset: -18px; z-index: 0; opacity: 1; mix-blend-mode: normal; -webkit-mask: none; mask: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--eco-color-white) var(--au-da, 7%), transparent) 1px, transparent 1.6px) 0 0 / 18px 18px;
  animation: eco-au-dots calc(var(--eco-duration-slow) * 84) linear infinite; }
.eco-aurora.eco-aurora--dark .eco-aurora__bg::after { --au-da: 30%;
  -webkit-mask: radial-gradient(closest-side, black, transparent) 0 0 / 55% 120% no-repeat, radial-gradient(closest-side, black, transparent) 0 0 / 40% 100% no-repeat;
  mask: radial-gradient(closest-side, black, transparent) 0 0 / 55% 120% no-repeat, radial-gradient(closest-side, black, transparent) 0 0 / 40% 100% no-repeat;
  animation: eco-au-dots calc(var(--eco-duration-slow) * 84) linear infinite, eco-au-sweep calc(var(--eco-duration-slow) * 72) var(--eco-ease-standard) infinite alternate; }
@keyframes eco-au-dots { to { transform: translate(18px, 18px); } }
@keyframes eco-au-sweep { 0% { -webkit-mask-position: 0% 0%, 100% 100%; mask-position: 0% 0%, 100% 100%; } 50% { -webkit-mask-position: 70% 100%, 20% 0%; mask-position: 70% 100%, 20% 0%; } 100% { -webkit-mask-position: 100% 10%, 0% 90%; mask-position: 100% 10%, 0% 90%; } }
.eco-aurora.is-paused .eco-aurora__bg::before, .eco-aurora.is-paused .eco-aurora__bg::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .eco-aurora__bg::before, .eco-aurora__bg::after { animation: none !important; } }
/* — rainbow-button — */
.eco-btn.eco-btn--rainbow, .eco-btn.eco-btn--rainbow-light {
  --rb-g: linear-gradient(90deg, var(--eco-rainbow-1), var(--eco-rainbow-5), var(--eco-rainbow-3), var(--eco-rainbow-4), var(--eco-rainbow-2));
  --rb-bg: var(--eco-color-black); --rb-fg: var(--eco-color-white); --rb-t: calc(var(--eco-duration-slow) * 10);
  position: relative; isolation: isolate; border: 2px solid transparent; color: var(--rb-fg); background: transparent;
  padding-bottom: 2px;  }
.eco-btn.eco-btn--rainbow::after, .eco-btn.eco-btn--rainbow-light::after { content: ""; position: absolute; z-index: -1; inset: -2px; border: 2px solid transparent; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--rb-bg), var(--rb-bg)) padding-box, linear-gradient(var(--rb-bg) 50%, color-mix(in srgb, var(--rb-bg) 60%, transparent) 80%, transparent) border-box, var(--rb-g) border-box;
  background-size: 200%; animation: eco-rainbow var(--rb-t) linear infinite; }
.eco-btn.eco-btn--rainbow::before, .eco-btn.eco-btn--rainbow-light::before { content: ""; position: absolute; z-index: -2; left: 50%; bottom: -20%; width: 60%; height: 20%; transform: translateX(-50%);
  background: var(--rb-g); background-size: 200%; filter: blur(12px); animation: eco-rainbow var(--rb-t) linear infinite; pointer-events: none; }
:root, [data-theme="dark"] { --rb-main-bg: var(--eco-color-white); --rb-main-fg: var(--eco-color-black); --rb-main-hover: color-mix(in srgb, var(--eco-color-white) 92%, var(--eco-color-black));
  --rb-alt-bg: var(--eco-color-black); --rb-alt-fg: var(--eco-color-white); --rb-alt-hover: color-mix(in srgb, var(--eco-color-black) 86%, var(--eco-color-white)); }
[data-theme="light"] { --rb-main-bg: var(--eco-color-black); --rb-main-fg: var(--eco-color-white); --rb-main-hover: color-mix(in srgb, var(--eco-color-black) 86%, var(--eco-color-white));
  --rb-alt-bg: var(--eco-color-white); --rb-alt-fg: var(--eco-color-black); --rb-alt-hover: color-mix(in srgb, var(--eco-color-white) 92%, var(--eco-color-black)); }
.eco-btn.eco-btn--rainbow { --rb-bg: var(--rb-main-bg); --rb-fg: var(--rb-main-fg); }
.eco-btn.eco-btn--rainbow-light { --rb-bg: var(--rb-alt-bg); --rb-fg: var(--rb-alt-fg); }
:root:is([data-brand="university"], [data-brand="junior"]) :is(.eco-btn.eco-btn--rainbow, .eco-btn.eco-btn--rainbow-light) { --rb-g: linear-gradient(90deg, var(--eco-rainbow-1), var(--eco-rainbow-5), var(--eco-rainbow-c3), var(--eco-rainbow-c4), var(--eco-rainbow-c2)); }
:is(:root[data-brand="school"], .eco-lock-school) :is(.eco-btn.eco-btn--rainbow, .eco-btn.eco-btn--rainbow-light) { --rb-g: linear-gradient(90deg, var(--eco-gradient-stop-1), var(--eco-gradient-stop-2), var(--eco-gradient-stop-3), var(--eco-gradient-stop-4), var(--eco-gradient-stop-5)); }
.eco-btn.eco-btn--rainbow:hover { --rb-bg: var(--rb-main-hover); }
.eco-btn.eco-btn--rainbow-light:hover { --rb-bg: var(--rb-alt-hover); }
@keyframes eco-rainbow { 0% { background-position: 0%; } 100% { background-position: 200%; } }
@media (prefers-reduced-motion: reduce) { .eco-btn.eco-btn--rainbow::after, .eco-btn.eco-btn--rainbow-light::after, .eco-btn.eco-btn--rainbow::before, .eco-btn.eco-btn--rainbow-light::before { animation: none; } }
/* — cover — */
:root, [data-theme="dark"] { --cv-t-bg: var(--eco-color-black); --cv-t-fg: var(--eco-color-white);
  --cv-t-1: color-mix(in srgb, var(--eco-brand-accent) 56%, var(--eco-color-black)); --cv-t-2: color-mix(in srgb, var(--eco-brand-primary) 34%, transparent);
  --cv-t-3: color-mix(in srgb, var(--eco-brand-accent) 30%, var(--eco-color-black)); --cv-t-4: color-mix(in srgb, var(--eco-color-black) 72%, transparent); --cv-t-grain: .22; }
[data-theme="light"] { --cv-t-bg: color-mix(in srgb, var(--eco-color-white) 60%, var(--eco-color-surface)); --cv-t-fg: var(--eco-color-black);
  --cv-t-1: color-mix(in srgb, var(--eco-brand-primary) 70%, transparent); --cv-t-2: color-mix(in srgb, var(--eco-brand-accent) 92%, transparent);
  --cv-t-3: color-mix(in srgb, var(--eco-brand-primary) 46%, transparent); --cv-t-4: color-mix(in srgb, var(--eco-color-black) 18%, transparent); --cv-t-grain: .32; }
.eco-cover { --cv-bg: var(--cv-t-bg); --cv-fg: var(--cv-t-fg); --cv-1: var(--cv-t-1); --cv-2: var(--cv-t-2); --cv-3: var(--cv-t-3); --cv-4: var(--cv-t-4);
  --cv-grain: var(--cv-t-grain); --cv-blur: 56px; --cv-t: calc(var(--eco-duration-slow) * 60);
  position: relative; isolation: isolate; overflow: hidden; background: var(--cv-bg); color: var(--cv-fg); }
:root .eco-cover.eco-cover--dark { --cv-bg: var(--eco-color-black); --cv-fg: var(--eco-color-white);
  --cv-1: color-mix(in srgb, var(--eco-brand-accent) 56%, var(--eco-color-black)); --cv-2: color-mix(in srgb, var(--eco-brand-primary) 34%, transparent);
  --cv-3: color-mix(in srgb, var(--eco-brand-accent) 30%, var(--eco-color-black)); --cv-4: color-mix(in srgb, var(--eco-color-black) 72%, transparent); --cv-grain: .22; }
:root .eco-cover.eco-cover--light { --cv-bg: color-mix(in srgb, var(--eco-color-white) 60%, var(--eco-color-surface)); --cv-fg: var(--eco-color-black);
  --cv-1: color-mix(in srgb, var(--eco-brand-primary) 70%, transparent); --cv-2: color-mix(in srgb, var(--eco-brand-accent) 92%, transparent);
  --cv-3: color-mix(in srgb, var(--eco-brand-primary) 46%, transparent); --cv-4: color-mix(in srgb, var(--eco-color-black) 18%, transparent); --cv-grain: .32; }
.eco-cover::before { content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; filter: blur(var(--cv-blur));
  background:
    radial-gradient(34% 38% at 32% 36%, var(--cv-1), transparent 70%),
    radial-gradient(28% 32% at 70% 32%, var(--cv-2), transparent 70%),
    radial-gradient(36% 30% at 62% 70%, var(--cv-3), transparent 72%),
    radial-gradient(22% 24% at 36% 72%, var(--cv-4), transparent 70%);
  animation: eco-cover var(--cv-t) var(--eco-ease-standard) infinite alternate; will-change: transform; }
.eco-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--cv-grain); mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }
@keyframes eco-cover {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.06); }
  100% { transform: translate(-3%, 3%) rotate(-6deg) scale(.97); }
}
.eco-cover.is-paused::before { animation-play-state: paused; }
.eco-cover--still::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .eco-cover::before { animation: none; } }
@media (forced-colors: active) { .eco-cover::before, .eco-cover::after { display: none; } }
/* — glass — */
.eco-glass { position: relative; border-radius: var(--eco-radius-3xl); background: var(--eco-glass-fill); color: var(--eco-glass-ink); -webkit-backdrop-filter: var(--eco-glass-backdrop); backdrop-filter: var(--eco-glass-backdrop); }
.eco-glass--tile { display: inline-grid; place-items: center; aspect-ratio: 1; }
.eco-glass--pill { border-radius: var(--eco-radius-full); }
.eco-btn.eco-btn--glass { --ico: var(--eco-glass-ink); background: var(--eco-glass-fill); color: var(--eco-glass-ink); -webkit-backdrop-filter: var(--eco-glass-backdrop); backdrop-filter: var(--eco-glass-backdrop);
  transition: background-color var(--eco-duration-fast) var(--eco-ease-standard), transform var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-btn.eco-btn--glass:not([disabled], [aria-disabled="true"]):is(:hover, :active, :focus-visible) { background: var(--eco-glass-fill-hover); }
.eco-btn.eco-btn--glass:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--eco-glass-ink); }
.eco-btn.eco-btn--glass:not(.eco-btn--square) { border-radius: var(--eco-radius-full); }
.eco-btn--glass.eco-btn--square { border-radius: var(--eco-radius-2xl); }
.eco-glass::before, .eco-btn.eco-btn--glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--eco-glass-rim); pointer-events: none;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .eco-glass, .eco-btn.eco-btn--glass { background: var(--eco-glass-solid); }
}
@media (forced-colors: active) {
  .eco-glass, .eco-btn.eco-btn--glass { background: Canvas; color: CanvasText; border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .eco-glass::before, .eco-btn.eco-btn--glass::before { display: none; }
}
/* — loader — */
:root, [data-theme="dark"] { --ld-core-c: var(--eco-color-white); }
:root[data-theme="light"], [data-theme="light"] { --ld-core-c: var(--eco-color-black); }
.eco-loader { --ld-size: 40px; --ld-t: calc(var(--eco-duration-slow) * 4.4);  --ld-ray-w: 1px; --ld-ds: 1;
  --ld-o: var(--eco-brand-primary);  --ld-i: var(--eco-fg-brand-secondary); --ld-ray: transparent; --ld-core: transparent; --ld-mark: none;
  position: relative; display: inline-block; flex: none; width: var(--ld-size); height: var(--ld-size); vertical-align: middle; }
.eco-loader > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.eco-loader__spin, .eco-loader__core, .eco-loader__o > *, .eco-loader__i > *, .eco-loader__o > g > * { transform-box: view-box; transform-origin: 0 0; }
.eco-loader__spin { animation: eco-loader-spin calc(var(--ld-t) * 3) linear infinite; }
.eco-loader__rays { display: var(--ld-rays, var(--ld-mark, inline)); fill: none; stroke: var(--ld-ray); stroke-width: var(--ld-ray-w); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eco-loader__core { display: var(--ld-mark, inline); fill: var(--ld-core); animation: eco-loader-core var(--ld-t) ease-in-out 0s infinite;  }
.eco-loader__o > *, .eco-loader__i > * { transform: rotate(var(--ld-a)) translateY(var(--ld-r)) scale(var(--ld-ds));
  animation: eco-loader-breathe var(--ld-t) ease-in-out calc(var(--k, 0) * var(--ld-t) * -.045 + var(--ld-lag, 0s)) infinite; }
.eco-loader__o > g { --ld-a: calc(var(--k, 0) * 360deg / 10); --ld-r: -38px; --ld-sy: .84;  transform: rotate(var(--ld-a)); animation: none; }
.eco-loader__o > g > * { transform-box: view-box; transform-origin: 0 0; animation-duration: var(--ld-t); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: 0s; }
.eco-loader__o > g > circle { fill: var(--ld-o); transform: translateY(var(--ld-r)) scale(var(--ld-ds)); animation-name: eco-loader-dot; }
.eco-loader__ray { display: var(--ld-rays, var(--ld-mark, inline)); fill: none; stroke: var(--ld-ray); stroke-width: var(--ld-ray-w); stroke-linecap: round; vector-effect: non-scaling-stroke; animation-name: eco-loader-ray; }
@keyframes eco-loader-dot { 50% { transform: translateY(calc(var(--ld-r) * var(--ld-sy))) scale(var(--ld-ds)); } }
@keyframes eco-loader-ray { 50% { transform: scaleY(var(--ld-sy)); } }
.eco-loader__i > * { --ld-a: calc((var(--k, 0) + .5) * 360deg / 6); --ld-r: -22px; --ld-r-in: -17px; --ld-lag: calc(var(--ld-t) * -.88); fill: var(--ld-i); }
:is(.eco-loader__o, .eco-loader__i) > :nth-child(2) { --k: 1; } :is(.eco-loader__o, .eco-loader__i) > :nth-child(3) { --k: 2; }
:is(.eco-loader__o, .eco-loader__i) > :nth-child(4) { --k: 3; } :is(.eco-loader__o, .eco-loader__i) > :nth-child(5) { --k: 4; }
:is(.eco-loader__o, .eco-loader__i) > :nth-child(6) { --k: 5; } :is(.eco-loader__o, .eco-loader__i) > :nth-child(7) { --k: 6; }
:is(.eco-loader__o, .eco-loader__i) > :nth-child(8) { --k: 7; } :is(.eco-loader__o, .eco-loader__i) > :nth-child(9) { --k: 8; }
:is(.eco-loader__o, .eco-loader__i) > :nth-child(10) { --k: 9; } :is(.eco-loader__o, .eco-loader__i) > :nth-child(11) { --k: 10; } :is(.eco-loader__o, .eco-loader__i) > :nth-child(12) { --k: 11; }
@keyframes eco-loader-spin { to { transform: rotate(360deg); } }
@keyframes eco-loader-breathe { 50% { transform: rotate(var(--ld-a)) translateY(var(--ld-r-in)) scale(var(--ld-ds)); } }
@keyframes eco-loader-core { 0%, 100% { transform: scale(1.28); } 50% { transform: scale(1); } }
@keyframes eco-loader-fade { to { opacity: .45; } }
@keyframes eco-loader-in { from { opacity: 0; } }
.eco-loader--sm { --ld-size: 20px; --ld-ds: 1.1; --ld-rays: none; }
.eco-loader--sm { --ld-ds: 1.7; --ld-t: calc(var(--eco-duration-slow) * 3); }
.eco-loader--sm .eco-loader__o > g:nth-child(n+7) { display: none; }
.eco-loader--sm .eco-loader__o > g { --ld-a: calc(var(--k, 0) * 60deg); }
.eco-loader--sm .eco-loader__core { display: none; }
.eco-loader--md { --ld-size: 40px; --ld-ds: 1; }
.eco-loader--lg { --ld-size: 96px; --ld-ray-w: 1.5px; --ld-ds: 1.3; }
:where(:root[data-brand="ecosystem"]) .eco-loader:where(:not(.eco-loader--dots)) { --ld-o: var(--eco-color-malachite); --ld-i: var(--eco-color-malachite); --ld-ray: var(--eco-color-lime); --ld-core: var(--ld-core-c); --ld-mark: inline; }
.eco-loader.eco-loader--mono { --ld-o: currentColor; --ld-i: currentColor; --ld-core: currentColor; --ld-rays: none; }
@media (prefers-reduced-motion: reduce) {
  .eco-loader__spin, .eco-loader__core, .eco-loader__o > *, .eco-loader__i > *, .eco-loader__o > g > * { animation: none; }
  .eco-loader > svg { animation: eco-loader-fade var(--ld-t) ease-in-out infinite alternate; }
}
@media (forced-colors: active) { .eco-loader { --ld-o: CanvasText; --ld-i: CanvasText; --ld-core: CanvasText; --ld-ray: CanvasText; } }
.eco-loader-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: var(--eco-spacing-lg);
  background: var(--eco-bg-primary); transition: opacity var(--eco-duration-slow) var(--eco-ease-exit), visibility 0s linear var(--eco-duration-slow); }
.eco-loader-screen > * { animation: eco-loader-in var(--eco-duration-base) var(--eco-ease-standard) 300ms both; }
.eco-loader-screen__text { margin: 0; font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); text-align: center; }
.eco-loader-screen.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* — send — */
.eco-send { --send-size: 44px; --send-ic: 20px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--send-size); height: var(--send-size); margin: 0; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: var(--btn-p-bg); color: var(--btn-p-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--eco-duration-fast) linear, transform var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-send--sm { --send-size: 36px; }
.eco-send--lg { --send-size: 48px; --send-ic: 24px; }
.eco-send > svg { display: block; width: var(--send-ic); height: var(--send-ic); color: inherit; transform-origin: 50% 50%; }
.eco-send > svg:has(> use[href$="send-right-fill"]) { translate: calc(var(--send-ic) * .08) 0; }
.eco-send:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { background: var(--btn-p-bg-hover); }
.eco-send:not(:disabled, [aria-disabled="true"]):active { transform: scale(.975); }
.eco-send:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-send:is(:disabled, [aria-disabled="true"]) { background: var(--eco-bg-disabled); color: var(--eco-fg-disabled); cursor: not-allowed; }
.eco-send.is-swap > svg { animation: eco-send-swap calc(var(--eco-duration-base) * 1.2) var(--eco-ease-standard) both; }
@keyframes eco-send-swap { from { opacity: 0; transform: scale(.3) rotate(-45deg); } 70% { opacity: 1; transform: scale(1.08) rotate(4deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eco-send { transition: none; } .eco-send.is-swap > svg { animation: none; } }
/* — replybar — */
    .eco-replybar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; min-width: 0; min-height: 52px; padding: 8px 6px 8px 14px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-brand-primary); color: var(--eco-text-primary); font: 400 13px/18px var(--eco-font-body); letter-spacing: 0; text-align: start; }
    .eco-replybar__icon { grid-column: 1; grid-row: 1; width: 20px; height: 20px; margin-inline-end: 12px; color: var(--eco-text-brand-secondary); }
    .eco-replybar__thumb { grid-column: 2; grid-row: 1; display: block; width: 36px; height: 36px; margin-inline-end: 10px; border-radius: var(--eco-radius-md); background: var(--eco-bg-secondary); object-fit: cover; }
    .eco-replybar__body { grid-column: 3; grid-row: 1; display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
    .eco-replybar__author, .eco-replybar__text { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .eco-replybar__author { font-weight: 600; color: var(--eco-text-brand-secondary); }
    .eco-replybar__text { color: var(--eco-text-secondary); }
    .eco-replybar__close { grid-column: 4; grid-row: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 0 0 8px; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: transparent; color: var(--eco-text-secondary); cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
    .eco-replybar__close svg { width: 18px; height: 18px; }
    .eco-replybar__close:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--eco-text-primary) 8%, transparent); color: var(--eco-text-primary); }
    .eco-replybar__close:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
    @media (prefers-reduced-motion: reduce) { .eco-replybar__close { transition: none; } }
.eco-replybar--quote { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 4px 10px 4px 12px; border-radius: var(--eco-radius-md); background: color-mix(in srgb, var(--eco-text-primary) 6%, transparent); box-shadow: inset 3px 0 0 var(--eco-fg-brand-primary); }
.eco-replybar--quote .eco-replybar__body { grid-column: 1; }
/* — illustration — */
.eco-illo { --il-g: var(--eco-illo-ground); --il-b: var(--eco-illo-base); --il-s: var(--eco-illo-shade); --il-k: var(--eco-illo-ink); --il-a: var(--eco-illo-accent);
  --il-w: var(--eco-illo-on-accent); --il-i: var(--eco-illo-on-ink); --il-x: var(--eco-illo-spark); --il-e: var(--eco-illo-alert);
  display: block; flex: none; width: var(--illo-s, 128px); height: var(--illo-s, 128px); overflow: visible; }
.eco-illo--64 { --illo-s: 64px; } .eco-illo--240 { --illo-s: 240px; }
:is(.eco-card) .eco-illo, .eco-illo.eco-illo--on-grey { --il-b: var(--eco-illo-base-on-grey); --il-s: var(--eco-illo-shade-on-grey); --il-g: var(--eco-illo-ground-on-grey); }
.eco-empty__art--illo { margin-bottom: var(--eco-spacing-lg); }
@media (forced-colors: active) { .eco-illo { --il-g: Canvas; --il-b: GrayText; --il-s: GrayText; --il-k: CanvasText; --il-a: CanvasText; --il-w: Canvas; --il-i: Canvas; --il-x: CanvasText; --il-e: CanvasText; } }
/* — rail-item — */
.eco-rail-item { display: grid; justify-items: center; align-content: start; gap: 4px; width: 72px; margin: 0; padding: 2px 2px 6px; border: 0; border-radius: var(--eco-radius-xl); background: none; color: inherit; font: 500 11px/14px var(--eco-font-body); letter-spacing: 0; text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.eco-rail-item__ic { position: relative; display: grid; place-items: center; width: 52px; height: 32px; border-radius: var(--eco-radius-full); transition: background-color var(--eco-duration-fast) linear; }
.eco-rail-item__ic > svg { width: 24px; height: 24px; }
.eco-rail-item__ic > b { position: absolute; top: -4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--eco-radius-full); background: var(--eco-bg-brand-solid); color: var(--eco-text-primary_on-brand, var(--eco-color-white)); font: 600 10px/18px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-rail-item:is(:hover, .is-hover) { color: var(--eco-rail-ink, var(--eco-color-white)); }
.eco-rail-item:is(:hover, .is-hover) .eco-rail-item__ic { background: color-mix(in srgb, var(--eco-rail-ink, var(--eco-color-white)) 10%, transparent); }
.eco-rail-item[aria-current] { color: var(--eco-rail-sel-ink, var(--eco-bg-brand-solid)); font-weight: 600; }
.eco-rail-item[aria-current] .eco-rail-item__ic { background: var(--eco-bg-brand-solid); color: var(--eco-text-primary_on-brand, var(--eco-color-white)); }
.eco-rail-item[aria-current] .eco-rail-item__ic > b { background: color-mix(in srgb, var(--eco-color-white) 86%, transparent); -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4); color: var(--eco-color-black); box-shadow: 0 1px 2px color-mix(in srgb, var(--eco-color-black) 16%, transparent); }
.eco-rail-item:focus-visible { outline: none; }
.eco-rail-item:is(:focus-visible, .is-focus) .eco-rail-item__ic { outline: none; box-shadow: 0 0 0 2px var(--eco-shell-rail-bg, var(--eco-rail-bg, var(--eco-color-black))), 0 0 0 calc(2px + var(--eco-focus-w)) var(--eco-focus-ring); }
.eco-rail-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .eco-rail-item__ic { transition: none; } }
/* — shell-rail — */
.eco-shell__brand { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; white-space: nowrap; }
.eco-shell__logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-shell__logo svg { width: 20px; height: 20px; }
.eco-shell__logo svg { transform-box: fill-box; transform-origin: center; transition: transform calc(var(--eco-duration-slow) * 2.4) var(--eco-ease-emphasized); }
.eco-shell__brand:is(:hover, :focus-visible) .eco-shell__logo svg, .eco-switcher:is(:hover, :focus-visible) .eco-shell__logo svg { transform: rotate(72deg); }
@media (prefers-reduced-motion: reduce) { .eco-shell__logo svg { transition: none; } .eco-shell__brand:is(:hover, :focus-visible) .eco-shell__logo svg, .eco-switcher:is(:hover, :focus-visible) .eco-shell__logo svg { transform: none; } }
.eco-shell__brand b { font: 600 15px/18px var(--eco-font-body); }
.eco-shell__brand small { display: block; margin-top: 1px; font-size: 12px; line-height: 14px; color: var(--eco-nav-ink-group, var(--eco-text-tertiary)); }
:is(button.eco-shell__brand, button.eco-shell__user) { box-sizing: border-box; width: 100%; margin: 0; border: 0; border-radius: var(--eco-nav-radius); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
:is(button.eco-shell__brand, button.eco-shell__user):hover { background: var(--eco-nav-hover-bg); }
:is(button.eco-shell__brand, button.eco-shell__user):focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
button.eco-shell__brand { min-height: 52px; padding: 6px 8px 6px 6px; color: inherit; -webkit-text-fill-color: currentColor; }
a.eco-shell__brand { color: inherit; text-decoration: none; }
.eco-shell__brand > .eco-shell__label { min-width: 0; }
.eco-shell__brand b { display: block; overflow: hidden; text-overflow: ellipsis; }
.eco-shell__brand small, .eco-shell__user small { display: block; overflow: hidden; text-overflow: ellipsis; }
.eco-shell__logo--mark { width: 26px; height: 26px; border-radius: 0; background: none; }
.eco-shell__logo--mark svg { width: 26px; height: 26px; }
.eco-menu__item > .eco-shell__logo--mark, .eco-menu__item > .eco-shell__logo--mark svg { width: 24px; height: 24px; }
.eco-shell__org > .eco-menu, .eco-shell__side .eco-shell__org > .eco-menu { z-index: 30; top: calc(100% + 6px); right: 0; left: 0; width: var(--eco-org-menu-w, auto); min-width: 0; max-width: none; }
.eco-shell__chev { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--eco-fg-quaternary); transition: rotate var(--eco-duration-base) var(--eco-ease-standard); }
.eco-shell__rail { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; min-height: 0; margin: 8px 0 8px 8px; padding: 14px 0 12px; border-radius: var(--eco-radius-2xl); background: var(--eco-shell-rail-bg, var(--eco-rail-bg, var(--eco-color-black))); color: color-mix(in srgb, var(--eco-rail-ink, var(--eco-color-white)) 64%, transparent); overflow: hidden; }
.eco-shell__rail-mark { position: relative; isolation: isolate; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; color: var(--eco-rail-ink, var(--eco-color-white)); }
.eco-shell__rail-mark::before { content: ""; position: absolute; z-index: -1; inset: -6px; border-radius: 50%; background: var(--eco-shell-rail-glow, none); filter: blur(12px); opacity: .95; }
@media (prefers-reduced-motion: no-preference) { .eco-shell__rail-mark::before { animation: eco-rail-breathe 6s ease-in-out infinite alternate; } }
@keyframes eco-rail-breathe { from { transform: scale(.92); } to { transform: scale(1.08); } }
.eco-shell__rail-mark > svg { width: 34px; height: 34px; }
.eco-shell__rail-gap { position: relative; flex: none; height: 10px; }
.eco-shell__rail-gap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 1px; translate: -50% -50%; border-radius: 1px; background: color-mix(in srgb, var(--eco-rail-ink, currentColor) 18%, transparent); pointer-events: none; }
.eco-shell__rail-foot { --eco-focus-gap: var(--eco-shell-rail-bg, var(--eco-rail-bg, var(--eco-color-black))); display: grid; justify-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.eco-shell__rail-foot > button:not(.eco-btn), .eco-shell__rail-foot > .eco-dropdown > button:not(.eco-btn) { display: grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: color-mix(in srgb, var(--eco-rail-ink, var(--eco-color-white)) 10%, transparent); color: var(--eco-rail-ink, var(--eco-color-white)); cursor: pointer; }
.eco-shell__rail-foot :is(button, .eco-dropdown > button):not(.eco-btn):hover { background: color-mix(in srgb, var(--eco-rail-ink, var(--eco-color-white)) 18%, transparent); }
.eco-shell__rail-foot :is(button, .eco-dropdown > button):not(.eco-btn):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--eco-shell-rail-bg, var(--eco-rail-bg, var(--eco-color-black))), 0 0 0 calc(2px + var(--eco-focus-w)) var(--eco-focus-ring); }
.eco-shell__rail-foot :is(button, .eco-dropdown > button):not(.eco-btn) > svg { width: 18px; height: 18px; }
.eco-shell__rail-foot > .eco-dropdown { position: static; }
.eco-shell__rail .eco-dropdown > .eco-menu, .eco-shell__rail .eco-dropdown:is(.is-up, .is-end) > .eco-menu { top: auto; right: auto; bottom: 0; left: calc(100% + 14px); min-width: 280px; }
/* — switcher — */
.eco-switcher { display: flex; align-items: center; justify-content: var(--eco-switcher-justify, normal); gap: 8px; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 6px var(--eco-switcher-pr, 8px) 6px var(--eco-switcher-pl, 6px); border: 0; border-radius: var(--eco-nav-radius); background: none; color: inherit; -webkit-text-fill-color: currentColor; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-switcher:hover { background: var(--eco-nav-hover-bg); }
.eco-switcher:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-switcher:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
.eco-switcher > .eco-shell__label { min-width: 0; }
.eco-switcher b { display: block; overflow: hidden; text-overflow: ellipsis; font: 600 15px/18px var(--eco-font-body); }
.eco-switcher small { display: block; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-size: 12px; line-height: 14px; color: var(--eco-nav-ink-group, var(--eco-text-tertiary)); }
/* — sheet — */
.eco-sheet { --ic-tile: var(--eco-bg-secondary); position: absolute; z-index: 3; display: flex; flex-direction: column; background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-xl); color: var(--eco-text-primary); text-align: left; visibility: hidden; transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized), visibility 0s linear var(--eco-duration-slow); }
.eco-sheet--end { top: 8px; right: 8px; bottom: 8px; width: min(400px, calc(100% - 48px)); border-radius: var(--eco-radius-4xl); transform: var(--sheet-out, translateX(calc(100% + 16px))); }
.eco-sheet.is-open { transform: none; visibility: visible; transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized), visibility 0s; }
.eco-sheet--bottom { left: 8px; right: 8px; bottom: 0; max-height: 82%; border-radius: var(--eco-radius-4xl) var(--eco-radius-4xl) 0 0; transform: translateY(calc(100% + 16px)); }
.eco-sheet__grip { flex: none; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--eco-bg-quaternary); }
.eco-sheet--end .eco-sheet__grip { display: var(--sheet-grip, none); }
.eco-sheet__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px 24px; }
.eco-sheet__head > .eco-avatar { --s: 48px; }
.eco-sheet__title { margin: 0; font: 600 var(--eco-text-lg)/26px var(--eco-font-body); letter-spacing: 0; }
.eco-sheet__sub { font: 400 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-sheet__head .eco-btn--icon { margin-left: auto; flex: none; }
.eco-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sheet-body-pad, 0 24px 16px); }
.eco-sheet__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px 20px; }
.eco-sheet--bottom .eco-sheet__foot > .eco-btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .eco-sheet { transition-duration: 0s !important; }
}
.eco-sheet__body.eco-sheet__body--stack { display: flex; flex-direction: column; gap: 20px; }
/* — text — */
.eco-title { font-weight: 600; font-size: var(--eco-title-fs, 26px); line-height: var(--eco-title-lh, 32px); letter-spacing: -0.02em; }
.eco-heading { font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; }
.eco-heading--lg { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.eco-sub { margin-top: 4px; font-size: 14px; color: var(--eco-text-tertiary); }
.eco-caption { display: block; font-size: 12.5px; line-height: 16px; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-muted { color: var(--eco-text-tertiary); }
.eco-eyebrow { font: 500 12px/16px var(--eco-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--eco-eyebrow-ink, var(--eco-text-tertiary)); }
.eco-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; line-height: 17px; color: var(--eco-text-tertiary); }
.eco-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.eco-meta svg { width: 14px; height: 14px; }
.eco-prose { display: grid; gap: 12px; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--eco-text-secondary); }
.eco-prose b { font-weight: 600; color: var(--eco-text-primary); }
/* — figure — */
.eco-figure { display: flex; align-items: baseline; gap: 8px; }
.eco-figure b { font: var(--eco-font-display--weight-strong, 700) 28px/1 var(--eco-font-display); font-variant-numeric: tabular-nums; }
.eco-delta { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px; border-radius: var(--eco-radius-full); font: 500 12px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; background: var(--eco-bg-success-primary); color: var(--eco-text-success-primary); }
.eco-delta--down { background: var(--eco-bg-error-primary); color: var(--eco-text-error-primary); }
.eco-delta svg { width: 12px; height: 12px; }
.eco-figure__score { font: 500 28px/1 var(--eco-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.eco-figure__score small { font-size: 14px; color: var(--eco-text-tertiary); letter-spacing: 0; }
/* — legend — */
.eco-legend { display: flex; gap: 16px; font-size: 13px; color: var(--eco-text-tertiary); }
.eco-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.eco-legend--wrap { flex-wrap: wrap; gap: 6px 14px; line-height: 18px; }
.eco-legend b { font-weight: 600; color: var(--eco-text-primary); }
.eco-legend--marks { flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--eco-text-secondary); }
.eco-legend--marks > span { display: inline-flex; align-items: center; gap: 6px; }
/* — kbd — */
.eco-kbd { flex: none; display: inline-grid; place-items: center; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--eco-radius-sm); background: var(--ic-tile, var(--eco-bg-secondary)); color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/1 var(--eco-font-body); letter-spacing: 0; white-space: nowrap; }
.eco-kbd--lg { min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--eco-radius-md); font-size: var(--eco-text-sm); }
.eco-kbd-combo { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.eco-kbd--on-dark { background: color-mix(in srgb, var(--eco-color-white) 12%, transparent); color: color-mix(in srgb, var(--eco-color-white) 80%, transparent); }
.eco-btn--primary .eco-kbd--on-dark { background: color-mix(in srgb, var(--eco-text-primary_on-brand) 14%, transparent); color: var(--eco-text-primary_on-brand); }
/* — command — */
.eco-cmd { --ic-tile: var(--eco-bg-secondary); display: flex; flex-direction: column; max-height: 440px; overflow: hidden; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-xl); color: var(--eco-text-primary); text-align: left; }
.eco-cmd__search { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px 20px; }
.eco-cmd__search > svg { width: 20px; height: 20px; flex: none; color: var(--eco-fg-quaternary); }
.eco-cmd__input { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: none; color: var(--eco-text-primary); font: 400 var(--eco-text-md)/24px var(--eco-font-body); }
.eco-cmd__input::placeholder { color: var(--eco-text-placeholder); opacity: 1; }
.eco-cmd__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; scroll-padding: 8px; }
.eco-cmd__label { padding: 10px 12px 6px; font: 500 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-cmd__item { --ico: var(--eco-fg-tertiary); display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border-radius: var(--eco-radius-3xl); font: 500 var(--eco-text-sm)/24px var(--eco-font-body); cursor: pointer; user-select: none; }
.eco-cmd__item > svg { width: 18px; height: 18px; flex: none; color: var(--ico); }
.eco-cmd__item > .eco-avatar { --s: 28px; }
.eco-cmd__item small { margin-left: 6px; font: 400 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-cmd__item .eco-kbd-combo { margin-left: auto; }
.eco-cmd__item.is-active { --ico: var(--eco-fg-primary); --ic-tile: var(--eco-bg-primary_alt); background: var(--eco-bg-secondary); }
.eco-cmd__item mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--eco-bg-brand-solid); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.eco-cmd__item[hidden], .eco-cmd__group[hidden] { display: none; }
.eco-cmd__empty { padding: 28px 16px 32px; text-align: center; font: 400 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-cmd__empty b { display: block; margin-bottom: 4px; color: var(--eco-text-primary); font-weight: 500; }
.eco-cmd__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 16px; --ic-tile: var(--eco-bg-primary_alt); background: var(--eco-bg-secondary);  font: 400 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-cmd__foot > span { display: inline-flex; align-items: center; gap: 6px; }
.eco-cmd__foot output { margin-left: auto; color: var(--eco-text-success-primary); font-weight: 500; }
@media (max-width: 860px) {
  .eco-cmd__foot output { margin-left: 0; width: 100%; }
}
.eco-cmd__trigger { display: inline-flex; align-items: center; gap: 10px; min-width: min(320px, 100%); height: 40px; padding: 0 8px 0 16px; border: 0; border-radius: var(--eco-field-radius-affix); background: var(--eco-bg-primary_alt); color: var(--eco-text-placeholder); font: 400 var(--eco-text-sm)/1 var(--eco-font-body); cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-cmd__trigger:hover { color: var(--eco-text-tertiary); }
.eco-cmd__trigger:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-cmd__trigger > svg { width: 18px; height: 18px; color: var(--eco-fg-quaternary); }
.eco-cmd__trigger .eco-kbd-combo { margin-left: auto; }
/* — combobox — */
.eco-combobox { --eco-menu-max-h: 280px; position: relative; }
.eco-combobox > .eco-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; min-width: 0; max-width: none; }
.eco-combobox .eco-menu__item[hidden] { display: none; }
.eco-combobox__empty { padding: 10px 12px; font: 400 var(--eco-text-sm)/24px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-combobox__chev { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--eco-fg-quaternary); pointer-events: none; transition: rotate var(--eco-duration-base) var(--eco-ease-standard); }
.eco-combobox.is-open .eco-combobox__chev { rotate: 180deg; }
.eco-combobox--multi .eco-combobox__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 40px 6px 8px; border-radius: 22px;  background: var(--eco-bg-secondary); cursor: text; }
.eco-combobox--multi .eco-combobox__field:focus-within { outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-combobox--multi .eco-combobox__field input { flex: 1 0 120px; min-width: 0; padding: 4px 6px; border: 0; outline: 0; background: none; color: var(--eco-text-primary); font: 400 var(--eco-text-md)/24px var(--eco-font-body); }
.eco-combobox--multi .eco-combobox__field input::placeholder { color: var(--eco-text-placeholder); opacity: 1; }
.eco-menu__title.eco-combobox__new { color: var(--eco-text-brand-secondary); }
/* — chip-types — */
.eco-chip--assist > svg { color: var(--eco-fg-brand-primary); }
.eco-chip--menu[aria-expanded] > svg:last-child { color: var(--eco-fg-tertiary); }
.eco-chip--menu.is-set { background: var(--eco-bg-brand-primary); color: var(--eco-text-brand-secondary); }
.eco-chip--input { gap: 6px; padding: 3px 4px 3px 4px; cursor: default; border-radius: var(--eco-radius-full); }
.eco-chip--input > .eco-avatar { --s: 24px; flex: none; }
.eco-chip--input > span { padding-left: 2px; }
.eco-chip--input:not(:has(> .eco-avatar)) { padding-left: 10px; }
.eco-chip__x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--eco-fg-tertiary); cursor: pointer; }
.eco-chip__x:hover { background: var(--btn-t-bg-hover); color: var(--eco-fg-primary); }
.eco-chip__x:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-chip__x svg { width: 12px; height: 12px; }
.eco-chip.eco-chip--tag { --ic-tile: var(--eco-bg-primary_alt); padding: 3px 4px 3px 10px; background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); }
.eco-chip--tag > .eco-chip__x { width: 20px; height: 20px; color: var(--eco-fg-quaternary); }
.eco-chip--tag > .eco-chip__x svg { width: var(--eco-icon-sm); height: var(--eco-icon-sm); }
.eco-chip--tag > .eco-chip__x:hover { color: var(--eco-fg-primary); background: var(--eco-bg-secondary); }
.eco-chip--suggest { border-radius: var(--eco-radius-full); padding-inline: 14px; }
.eco-chip.eco-chip--app { min-height: 36px; padding: 6px 10px; border-radius: var(--eco-radius-full); background: var(--eco-app-control-rest); color: var(--eco-text-secondary); white-space: nowrap; }
.eco-chip.eco-chip--app:hover, .eco-chip.eco-chip--app[aria-expanded="true"] { background: var(--eco-app-control-hover); color: var(--eco-text-primary); }
.eco-chip.eco-chip--app.is-set { background: var(--eco-bg-brand-primary); color: var(--eco-text-brand-secondary); }
.eco-chip.eco-chip--app[aria-pressed="true"] { background: var(--eco-text-primary); color: var(--eco-bg-primary); }
.eco-chip.eco-chip--app > svg { width: 16px; height: 16px; flex: none; }
.eco-chip.eco-chip--app > svg:last-child:not(:first-child) { color: var(--eco-fg-tertiary); }
.eco-chip.eco-chip--app > .eco-badge { --eco-badge-pad: 0 6px; --eco-badge-fs: var(--eco-text-xs); --eco-badge-lh: 18px; }
/* — nav-item — */
.eco-nav-item { display: flex; align-items: center; justify-content: var(--eco-nav-item-justify, normal); gap: 10px; box-sizing: border-box; width: 100%; min-height: var(--eco-nav-item-h, 40px); padding: var(--eco-nav-item-pad, 0 12px); border: 0; border-radius: var(--eco-nav-radius); background: var(--eco-nav-item-bg, none); color: var(--eco-nav-ink); font: var(--eco-nav-weight) 15px/20px var(--eco-font-body); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-nav-item svg { width: 18px; height: 18px; flex: none; color: var(--eco-nav-icon); }
.eco-nav-item > svg:first-child { width: var(--eco-nav-item-ic, 18px); height: var(--eco-nav-item-ic, 18px); }
.eco-nav-item__label { display: var(--eco-nav-item-label, block); flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eco-nav-item:is(:hover, .is-hover) { background: var(--eco-nav-hover-bg); color: var(--eco-nav-ink-hover); }
.eco-nav-item:is(:hover, .is-hover) > svg:first-child { color: inherit; }
.eco-nav-item:is(:focus-visible, .is-focus) { outline: var(--eco-focus-w) solid transparent; outline-offset: -2px; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-nav-item[aria-current="page"] { background: var(--eco-nav-sel-bg); color: var(--eco-nav-sel-fg); font-weight: var(--eco-nav-sel-weight); }
.eco-nav-item[aria-current="page"] svg { color: var(--eco-nav-icon-sel); }
.eco-nav-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .eco-nav-item { transition: none; } .eco-nav-item__chev { transition: none; } }
.eco-nav-item__count { display: var(--eco-nav-item-count, block); margin-left: auto; min-width: var(--eco-nav-count-w, 20px); padding: var(--eco-nav-count-pad, 0 6px); border-radius: var(--eco-nav-count-r, 10px); background: var(--eco-nav-count-bg, var(--ic-tile, var(--eco-bg-primary_alt))); font: var(--eco-nav-count-weight, 600) 11px/var(--eco-nav-count-lh, 20px) var(--eco-nav-count-font); font-variant-numeric: tabular-nums; text-align: center; color: var(--eco-nav-count-ink, var(--eco-text-secondary)); }
.eco-nav-item svg.eco-nav-item__chev { display: var(--eco-nav-item-chev, block); flex: none; width: var(--eco-nav-chev, 16px); height: var(--eco-nav-chev, 16px); margin-left: auto; color: var(--eco-nav-chev-ink, var(--eco-fg-quaternary)); visibility: var(--eco-nav-chev-vis, visible); transition: rotate var(--eco-duration-base) var(--eco-ease-standard); }
.eco-nav-item[aria-expanded="false"] > .eco-nav-item__chev { rotate: -90deg; }
.is-current > .eco-nav-item { background: var(--eco-nav-cur-bg, var(--eco-nav-item-bg, none)); color: var(--eco-nav-cur-ink, var(--eco-nav-ink-hover)); font-weight: var(--eco-nav-cur-weight); }
.is-current > .eco-nav-item:hover { background: var(--eco-nav-cur-bg, var(--eco-nav-hover-bg)); }
.is-current > .eco-nav-item > svg:first-child { color: var(--eco-nav-icon-sel); }
.eco-nav-item--sub { min-height: var(--eco-nav-sub-h); padding: var(--eco-nav-sub-pad); color: var(--eco-nav-ink-sub); font: var(--eco-nav-sub); }
.eco-nav-item--sub > svg:first-child { display: var(--eco-nav-sub-icon, none); }
.eco-nav-item--sub[aria-current="page"] { color: var(--eco-nav-sel-fg); font-weight: var(--eco-nav-sel-weight); }
.eco-nav-subs { display: grid; gap: 1px; margin: 2px 0 4px 20px; padding: 0 0 0 10px; background: linear-gradient(var(--eco-nav-guide) 0 3px, transparent 3px 7px) 0 0 / 1px 7px repeat-y; }
/* — shell — */
.eco-shell { --shell-w: var(--eco-nav-width);   display: grid; grid-template-columns: var(--shell-w) minmax(0, 1fr); height: var(--eco-shell-h, 100dvh); border-radius: var(--eco-shell-radius, 0); overflow: hidden; background: var(--eco-app-canvas); color: var(--eco-text-primary); transition: grid-template-columns var(--eco-duration-slow) var(--eco-ease-standard); }
.eco-shell.is-collapsed { --shell-w: calc(var(--eco-nav-width-col) + 8px); }
.eco-shell__side { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; min-width: 0; padding: 16px 12px; overflow: hidden; background: var(--eco-app-card); --ic-tile: var(--eco-app-well); }
.eco-shell--floating .eco-shell__side { margin: 10px 0 10px 10px; border-radius: 20px; background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); --ic-tile: var(--eco-app-well); }
.eco-shell--floating:not(.is-collapsed) { --shell-w: calc(var(--eco-nav-width) + 10px); }
.eco-shell__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; background: var(--eco-app-canvas); --ic-tile: var(--eco-app-control); }
.eco-shell--inset .eco-shell__main { margin: 10px 10px 10px 0; border-radius: 20px; }
.eco-shell--floating .eco-shell__main { background: none; --ic-tile: var(--eco-app-control); }
.eco-shell { --eco-search-gap: 10px; --eco-search-pl: 14px; --eco-search-pr: 14px; --eco-search-r: var(--eco-field-radius-affix); --eco-search-bg: var(--eco-bg-primary); --eco-search-ink: var(--eco-text-tertiary); --eco-search-ph: var(--eco-text-tertiary); --eco-search-ic: 18px; }
:where(.eco-shell__search) { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; height: 40px; padding: 0 14px; border: 0; border-radius: var(--eco-field-radius-affix); background: var(--ic-tile, var(--eco-bg-primary_alt)); color: var(--eco-text-tertiary); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden; }
:where(.eco-shell__search) svg { width: 18px; height: 18px; flex: none; }
:where(.eco-shell__search) .eco-kbd-combo, :where(.eco-shell__search) > .eco-kbd { flex: none; width: auto; margin-left: auto; }
:where(.eco-shell__search) { --ic-tile: var(--eco-bg-primary); }
.eco-shell__nav { display: grid; align-content: start; gap: 2px; overflow: auto; }
.eco-shell__group { margin: 8px 0 0; padding: var(--eco-nav-group-pad); font: var(--eco-nav-group); letter-spacing: var(--eco-nav-group-ls); text-transform: uppercase; color: var(--eco-nav-ink-group); white-space: nowrap; }
.eco-shell__user { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px; border-radius: var(--eco-radius-xl); white-space: nowrap; overflow: hidden; }
.eco-shell__user b { display: block; font: 500 14px/20px var(--eco-font-body); }
.eco-shell__user small { font-size: 12px; line-height: 16px; color: var(--eco-text-tertiary); }
.eco-shell__head { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 10px 20px 10px 12px; }
.eco-shell__crumb { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 14px; color: var(--eco-text-tertiary); white-space: nowrap; overflow: hidden; }
.eco-shell__crumb b { color: var(--eco-text-primary); font-weight: 600; }
.eco-shell__spacer { flex: 1; }
.eco-shell__page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 4px 20px 20px; overflow: auto; }
.eco-shell__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eco-shell__title > :is(h1, h2, h3, h4) { font: var(--eco-font-display--weight, 500) var(--eco-text-display-xs)/1.2 var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing, 0); }
.eco-shell.is-collapsed :is(.eco-shell__label, .eco-shell__search .eco-kbd-combo, .eco-shell__search > .eco-kbd) { display: none; }
.eco-shell.is-collapsed .eco-shell__search { justify-content: center; padding: 0; }
.eco-shell.is-collapsed { --eco-nav-item-h: 44px; --eco-nav-sub-h: 44px; --eco-nav-item-pad: 0; --eco-nav-sub-pad: 0; --eco-nav-item-justify: center; --eco-nav-item-ic: 22px; --eco-nav-item-label: none; --eco-nav-item-count: none; --eco-nav-item-chev: none; --eco-nav-cur-bg: var(--eco-nav-sel-bg); --eco-nav-cur-ink: var(--eco-nav-sel-fg); }
.eco-shell.is-collapsed .eco-shell__group { display: none; }
.eco-shell.is-collapsed .eco-shell__user { justify-content: center; }
.eco-shell__scrim { display: none; }
@media (max-width: 760px) {
  .eco-shell:not(.eco-shell--drawer) { --shell-w: calc(var(--eco-nav-width-col) + 8px); }
  .eco-shell:not(.eco-shell--drawer) :is(.eco-shell__label, .eco-shell__search .eco-kbd-combo, .eco-shell__search > .eco-kbd) { display: none; }
  .eco-shell:not(.eco-shell--drawer) .eco-shell__search { justify-content: center; padding: 0; }
  .eco-shell:not(.eco-shell--drawer) { --eco-nav-item-pad: 0; --eco-nav-sub-pad: 0; --eco-nav-item-justify: center; --eco-nav-item-label: none; --eco-nav-item-count: none; }
  .eco-shell:not(.eco-shell--drawer) .eco-shell__group { display: none; }
  .eco-shell:not(.eco-shell--drawer) .eco-shell__user { justify-content: center; }
  .eco-shell__crumb > :not(b) { display: none; }
  .eco-shell__head { padding-right: 12px; }
  .eco-shell__aux { display: none; }
}
@media (max-width: 839px) {
  .eco-shell--drawer { grid-template-columns: minmax(0, 1fr); }
  .eco-shell--drawer .eco-shell__side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(304px, calc(100vw - 56px)); margin: 0; border-radius: 0 20px 20px 0; background: var(--eco-app-card); visibility: hidden; transform: translateX(-100%); transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized), visibility 0s linear var(--eco-duration-slow); }
  .eco-shell--drawer.is-open .eco-shell__side { visibility: visible; transform: none; transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized); }
  .eco-shell--drawer .eco-shell__scrim { position: fixed; z-index: 39; inset: 0; display: block; background: var(--eco-bg-overlay); opacity: 0; pointer-events: none; transition: opacity var(--eco-duration-slow) var(--eco-ease-standard); }
  .eco-shell--drawer.is-open .eco-shell__scrim { opacity: 1; pointer-events: auto; }
  .eco-shell--drawer.is-collapsed { --shell-w: var(--eco-nav-width); }
  .eco-shell--drawer.is-collapsed :is(.eco-shell__label, .eco-shell__search .eco-kbd-combo, .eco-shell__search > .eco-kbd) { display: revert; }
  .eco-shell--drawer.is-collapsed { --eco-nav-item-label: block; --eco-nav-item-count: block; --eco-nav-item-pad: 0 12px; --eco-nav-sub-pad: 0 12px; --eco-nav-item-justify: flex-start; }
  .eco-shell--drawer.is-collapsed .eco-shell__group { display: block; }
  .eco-shell--drawer.is-collapsed .eco-shell__search { justify-content: flex-start; padding: 0 12px; }
  .eco-shell--drawer.is-collapsed .eco-shell__search { padding: 0 14px; }
  .eco-shell--drawer.is-collapsed .eco-shell__user { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-shell, .eco-shell--drawer .eco-shell__side, .eco-shell--drawer .eco-shell__scrim { transition: none; }
}
.eco-shell--deep { grid-template-rows: minmax(0, 1fr); }
.eco-shell--deep > :is(.eco-shell__side, .eco-shell__main) { min-height: 0; }
.eco-shell--deep .eco-shell__side { gap: 10px; padding: 12px 10px; }
.eco-shell--deep .eco-shell__nav { gap: 1px; margin-inline: -4px; padding-inline: 4px; scrollbar-width: thin; }
.eco-shell--deep .eco-shell__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eco-shell__nav [hidden] { display: none !important; }
:where(.eco-shell__search):focus-within { outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
:where(.eco-shell__search) > input:focus-visible { outline-color: transparent; box-shadow: none; }
:where(.eco-shell__search) > input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--eco-text-primary); font: inherit; outline: none; }
:where(.eco-shell__search) > input::placeholder { color: var(--eco-text-tertiary); opacity: 1; }
:where(.eco-shell__search) > input::-webkit-search-cancel-button { display: none; }
.eco-shell__section { display: grid; gap: 1px; }
.eco-shell__toggle[aria-expanded="false"] + .eco-shell__sub { display: none; }
.eco-shell__sub { display: grid; gap: 1px; margin: 2px 0 4px 20px; padding: 0 0 0 10px; background: linear-gradient(var(--eco-nav-guide) 0 3px, transparent 3px 7px) 0 0 / 1px 7px repeat-y; }
.eco-shell__none { margin: 8px 12px; font-size: var(--eco-text-sm); color: var(--eco-text-tertiary); }
.eco-shell__nav[data-q] :is(.eco-shell__group, [data-eco-shell-fav]) { display: none; }
.eco-shell__nav[data-q] .eco-shell__toggle[aria-expanded] + .eco-shell__sub { display: grid; }
.eco-shell__nav[data-q] { --eco-nav-chev-vis: hidden; }
.eco-shell.is-collapsed :is(.eco-shell__sub, .eco-shell__chev) { display: none; }
.eco-shell--deep.is-collapsed :is(.eco-shell__side, .eco-shell__nav) { overflow: visible; }
.eco-shell--deep.is-collapsed .eco-shell__side { position: relative; z-index: 6; }
.eco-shell.is-collapsed .eco-shell__section { position: relative; }
.eco-shell.is-collapsed .eco-shell__section.is-fly > .eco-shell__sub { position: absolute; z-index: 20; top: -4px; left: calc(100% + 14px); display: grid; box-sizing: border-box; width: 248px; margin: 0; max-height: 560px; padding: 4px; overflow: auto; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-lg); }
.eco-shell.is-collapsed .eco-shell__section.is-fly > .eco-shell__sub::before { content: attr(aria-label); padding: 8px 12px 4px; font: 600 11px/16px var(--eco-nav-group-font, var(--eco-font-body)); letter-spacing: .06em; text-transform: uppercase; color: var(--eco-nav-ink-group); }
.eco-shell.is-collapsed .eco-shell__section.is-fly > .eco-shell__sub { --eco-nav-sub-h: 32px; --eco-nav-sub-pad: 6px 12px; --eco-nav-item-justify: flex-start; --eco-nav-item-label: block; }
.eco-shell.is-collapsed [data-eco-shell-fav] { display: none; }
.eco-shell.is-collapsed .eco-shell__section.is-fly:not(.is-current) > .eco-shell__toggle { --eco-nav-item-bg: var(--eco-nav-hover-bg); }
.eco-shell.is-collapsed :is(button.eco-shell__brand, button.eco-shell__user) { justify-content: center; padding-inline: 0; }
.eco-shell.is-collapsed { --eco-switcher-justify: center; --eco-switcher-pl: 0px; --eco-switcher-pr: 0px; }
.eco-shell__head > .eco-dropdown { flex: none; }
.eco-shell__head > .eco-dropdown > .eco-menu { min-width: 300px; }
.eco-shell__stat { display: inline-flex; align-items: center; gap: 12px; height: 44px; margin: 0; padding: 0 14px 0 16px; border: 0; border-radius: var(--eco-radius-full); background: var(--eco-app-control); color: var(--eco-text-primary); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.eco-shell__stat:hover { background: var(--eco-app-control-hover); }
.eco-shell__stat:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-shell__stat > span { display: grid; }
.eco-shell__stat small { font: 400 var(--eco-text-xs)/16px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-shell__stat b { font: 500 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-shell__stat b small { margin-left: 4px; }
.eco-shell__head > [hidden], .eco-shell__crumb > [hidden] { display: none; }
.eco-shell__crumb > b[data-sub] { color: var(--eco-text-tertiary); font-weight: 400; }
.eco-shell__crumb > .eco-shell__crumb-doc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eco-shell__spark { flex: none; width: 56px; }
.eco-shell__bell { position: relative; }
.eco-shell__dot { position: absolute; top: -2px; right: -4px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--eco-radius-full); background: var(--eco-bg-error-solid); color: var(--eco-text-white); font: 600 11px/18px var(--eco-font-body); font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
.eco-shell__side :is(.eco-shell__org, .eco-shell__me) { display: block; }
.eco-shell__side .eco-shell__me > .eco-menu { min-width: 248px; }
.eco-shell__side .eco-shell__me > .eco-menu { top: auto; bottom: calc(100% + 8px); }
.eco-shell.is-collapsed .eco-shell__side :is(.eco-shell__org, .eco-shell__me) > .eco-menu { left: calc(100% + 14px); right: auto; top: 0; bottom: auto; }
.eco-shell.is-collapsed .eco-shell__side .eco-shell__org > .eco-menu { width: calc(var(--eco-nav-width) - 12px); }
.eco-shell:not(.is-collapsed) .eco-shell__side .eco-shell__org > .eco-menu { left: -6px; right: -6px; }
.eco-shell--deep:not(.is-collapsed) .eco-shell__side .eco-shell__org > .eco-menu { left: -4px; right: -4px; }
.eco-shell.is-collapsed .eco-shell__side .eco-shell__me > .eco-menu { top: auto; bottom: 0; }
@media (prefers-reduced-motion: reduce) { .eco-shell__chev { transition: none; } }
.eco-shell--deep { --eco-nav-item-h: 36px; --eco-nav-chev: 14px; --eco-nav-count-w: 0; --eco-nav-count-pad: 2px 8px; --eco-nav-count-r: var(--eco-radius-full); --eco-nav-count-weight: 500; --eco-nav-count-lh: 16px; }
.eco-shell--deep .eco-shell__side { --eco-nav-chev-ink: var(--eco-nav-ink-group); --eco-nav-count-bg: var(--eco-nav-hover-bg); --eco-nav-count-ink: var(--eco-nav-ink-group); }
.eco-shell--deep { --eco-search-gap: 12px; --eco-search-pl: 10px; --eco-search-pr: 12px; --eco-search-r: var(--eco-radius-full); --eco-search-bg: var(--eco-nav-hover-bg); --eco-search-ink: var(--eco-nav-ink-group); --eco-search-ph: var(--eco-nav-ink-group); --eco-search-ic: 20px; }
.eco-shell--deep :where(.eco-shell__search) { gap: 12px; padding: 0 12px 0 10px; border-radius: var(--eco-radius-full); background: var(--eco-nav-hover-bg); color: var(--eco-nav-ink-group); }
.eco-shell--deep :where(.eco-shell__search) > svg { width: 20px; height: 20px; }
.eco-shell--deep :where(.eco-shell__search) > input::placeholder { color: var(--eco-nav-ink-group); }
.eco-shell--deep .eco-shell__none { color: var(--eco-nav-ink-group); }
.eco-shell--rail { grid-template-columns: auto var(--shell-w) minmax(0, 1fr); }
.eco-shell:not(.eco-shell--rail) > .eco-shell__rail, .eco-shell:not(.eco-shell--rail) > .eco-shell__side > .eco-shell__title { display: none; }
.eco-shell--deep.eco-shell--rail > .eco-shell__rail { position: relative; z-index: 7; gap: 4px; overflow: visible; }
.eco-shell--deep.eco-shell--rail .eco-shell__rail-mark { margin-bottom: 8px; }
.eco-shell--deep .eco-shell__rail-foot { gap: 8px; }
.eco-shell--deep .eco-shell__rail-foot > button:not(.eco-btn), .eco-shell--deep .eco-shell__rail-foot > .eco-dropdown > button:not(.eco-btn) { width: 32px; height: 32px; }
.eco-shell--rail .eco-shell__side { grid-template-rows: auto auto auto minmax(0, 1fr) auto; margin: 8px 0 8px 8px; border-radius: var(--eco-radius-2xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); --eco-nav-hover-bg: var(--eco-app-well); }
.eco-shell--rail .eco-shell__main { margin: 8px 8px 8px 0; border-radius: var(--eco-radius-2xl); background: none; overflow: hidden; }
.eco-shell--rail { --eco-search-bg: var(--eco-app-well); }
.eco-shell--rail :where(.eco-shell__search) { background: var(--eco-app-well); }
.eco-shell--rail :where(.eco-shell__search) { --ic-tile: var(--eco-bg-primary); }
.eco-shell--rail .eco-shell__nav > .eco-nav-item { min-width: 0; }
.eco-shell--rail button.eco-shell__user { padding: 8px 10px 8px 8px; background: var(--eco-app-well); box-shadow: none; }
.eco-shell--rail button.eco-shell__user:hover { background: var(--eco-app-well-hover); }
.eco-shell--rail .eco-shell__user > .eco-shell__label { flex: 1 1 auto; min-width: 0; }
.eco-shell__user > .eco-shell__chev { flex: none; width: 16px; height: 16px; color: var(--eco-fg-quaternary, var(--eco-text-tertiary)); }
.eco-shell__title { margin: 6px 4px 0; font: var(--eco-font-display--weight, 600) 18px/24px var(--eco-font-display, var(--eco-font-body)); letter-spacing: -0.01em; color: var(--eco-text-primary); }
.eco-shell--deep.eco-shell--rail > .eco-shell__rail { padding-top: 12px; }
.eco-shell--rail.eco-shell--dense > .eco-shell__rail { gap: 0; padding-top: 10px; }
.eco-shell--rail.eco-shell--dense .eco-shell__rail-gap { height: 6px; }
.eco-shell__main--solo { border-radius: var(--eco-radius-xl); overflow: visible; }
.eco-shell--rail .eco-shell__nav[data-rail]:not([data-q]) > :is(.eco-shell__group, .eco-shell__section:not(.is-shown)) { display: none; }
.eco-shell--rail .eco-shell__nav[data-rail]:not([data-q]):has(> .is-shown) > :is(a.eco-nav-item, [data-eco-shell-fav]) { display: none; }
.eco-shell--rail .eco-shell__nav[data-rail]:not([data-q]) > .is-shown > .eco-shell__toggle { display: none; }
.eco-shell--rail .eco-shell__nav[data-rail]:not([data-q]) > .is-shown > .eco-shell__sub { display: grid; margin: 0; padding: 0; background: none; }
.eco-shell--rail .eco-shell__nav[data-rail]:not([data-q]) > .is-shown { --eco-nav-sub-h: var(--eco-nav-item-h); --eco-nav-sub-pad: var(--eco-nav-item-pad, 0 12px); --eco-nav-ink-sub: var(--eco-nav-ink); --eco-nav-sub: var(--eco-nav-weight) 15px/20px var(--eco-font-body); --eco-nav-sub-icon: block; }
.eco-shell--rail :is(.eco-shell__nav[data-rail], .eco-shell__nav[data-rail] :is(.eco-shell__section, .eco-shell__sub, [data-eco-shell-fav])) { grid-template-columns: minmax(0, 1fr); }
.eco-shell--rail.is-collapsed { --shell-w: 0px; }
.eco-shell--rail.is-collapsed > .eco-shell__side { visibility: hidden; padding-inline: 0; overflow: hidden; }
.eco-shell--rail.is-collapsed > .eco-shell__main { margin-left: 8px; }
.eco-shell--rail.eco-shell--icons.is-collapsed { --shell-w: calc(var(--eco-nav-width-col) + 8px); }
.eco-shell--rail.eco-shell--icons.is-collapsed > .eco-shell__side { grid-template-rows: auto auto minmax(0, 1fr) auto; visibility: visible; padding: 12px 8px; }
.eco-shell--rail.eco-shell--icons.is-collapsed > .eco-shell__main { margin-left: 0; }
.eco-shell--rail.eco-shell--icons.is-collapsed .eco-shell__side > .eco-shell__title { display: none; }
.eco-shell--rail.eco-shell--icons.is-collapsed .eco-shell__nav[data-rail]:not([data-q]) > .is-shown > .eco-shell__sub { display: grid; }
@media (max-width: 760px) {
  .eco-shell--rail:not(.eco-shell--drawer) .eco-shell__title { display: none; }
}
@media (max-width: 839px) {
  .eco-shell--rail.eco-shell--drawer .eco-shell__rail { display: none; }
  .eco-shell--rail.eco-shell--drawer .eco-shell__main { margin: 0; border-radius: 0; }
  .eco-shell--rail.eco-shell--drawer .eco-shell__side { margin: 0; border-radius: 0 20px 20px 0; }
}
/* — stat — */
.eco-stat { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--eco-radius-lg); background: transparent; color: var(--eco-text-primary); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.eco-stat:hover, .eco-stat[aria-expanded="true"], .eco-stat.is-open { background: var(--eco-stat-bg, var(--eco-app-control)); }
.eco-stat:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-stat__body { display: grid; }
.eco-stat__label { font: 400 var(--eco-text-xs)/16px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-stat__value { font: 500 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-stat__value small { margin-left: 4px; font: inherit; color: var(--eco-text-tertiary); }
.eco-stat__trend { font: 500 12px/16px var(--eco-font-body); color: var(--eco-text-success-primary, var(--eco-fg-brand-primary)); font-variant-numeric: tabular-nums; }
/* — search — */
.eco-search { --h: 44px; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: var(--h); padding: 0 6px 0 16px; border-radius: var(--eco-radius-full); background: var(--btn-t-bg); color: var(--eco-text-primary); transition: background-color var(--eco-duration-fast) linear; }
.eco-search:hover { background: var(--btn-t-bg-hover); }
.eco-search:focus-within, .eco-search.is-focus { background: var(--eco-bg-primary_alt); outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-search > svg { flex: none; width: 20px; height: 20px; color: var(--eco-fg-tertiary); }
.eco-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: inherit; font: 400 var(--eco-text-md)/1 var(--eco-font-body); outline: none; }
.eco-search input::placeholder { color: var(--eco-text-placeholder); }
.eco-search input:is(:focus, :focus-visible) { outline: none; box-shadow: none; border-radius: 0; }
.eco-search--compact { --h: 36px; gap: 8px; padding: 0 6px 0 12px; }
.eco-search--compact > svg { width: 18px; height: 18px; }
.eco-search--compact input { font-size: var(--eco-text-sm); }
.eco-search input::-webkit-search-cancel-button { display: none; }
.eco-search__btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--eco-fg-tertiary); cursor: pointer; }
.eco-search__btn:hover { background: var(--btn-t-bg-hover); color: var(--eco-fg-primary); }
.eco-search__btn:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-search__btn svg { width: 18px; height: 18px; }
.eco-search__kbd { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--eco-bg-primary_alt); color: var(--eco-text-tertiary); font: 500 12px/1 var(--eco-font-mono); }
.eco-search .eco-avatar { flex: none; }
.eco-search__spin { flex: none; margin-right: 9px; }
.eco-search--menu { --h: 40px; --ic-tile: var(--eco-bg-primary); box-sizing: border-box; gap: var(--eco-search-gap, 12px); padding: 0 var(--eco-search-pr, 12px) 0 var(--eco-search-pl, 10px); border: 0; border-radius: var(--eco-search-r, var(--eco-radius-full)); color: var(--eco-search-ink, var(--eco-nav-ink-group, var(--eco-text-tertiary))); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden; transition: none; }
.eco-search--menu, .eco-search--menu:hover, .eco-search--menu:focus-within, .eco-search--menu.is-focus { background: var(--eco-search-bg, var(--eco-app-well)); }
.eco-search--menu > svg { width: var(--eco-search-ic, 20px); height: var(--eco-search-ic, 20px); color: inherit; }
.eco-search--menu > input { padding: 0; color: var(--eco-text-primary); font: inherit; }
.eco-search--menu > input::placeholder { color: var(--eco-search-ph, var(--eco-search-ink, var(--eco-nav-ink-group, var(--eco-text-tertiary)))); opacity: 1; }
.eco-search--menu > .eco-kbd, .eco-search--menu .eco-kbd-combo { flex: none; width: auto; margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .eco-search { transition: none; }
}
/* — chart — */
:root, [data-theme], [class*="eco-lock-"] {
  --eco-viz-c1: color-mix(in oklab, var(--eco-fg-primary) 80%, var(--eco-app-card));
  --eco-viz-c2: var(--eco-erp-chart-green, var(--eco-chart-1));
  --eco-viz-c3: var(--eco-erp-chart-accent, var(--eco-chart-3));
  --eco-viz-c3-edge: transparent;
  --eco-viz-risk: var(--eco-chart-div-1);
  --eco-viz-ctx: var(--eco-viz-ord-1);
  --eco-viz-track: var(--eco-viz-trackbg);
  --eco-viz-surface: var(--eco-app-card);
  --eco-viz-grid: color-mix(in oklab, var(--eco-fg-primary) 8%, var(--eco-app-card));
  --eco-viz-base: color-mix(in oklab, var(--eco-fg-primary) 28%, var(--eco-app-card));
  --eco-viz-label: var(--eco-text-tertiary);
  --eco-viz-gap: 2px;
  --eco-viz-grid-w: 1px;
  --eco-viz-ref-w: 1.5px;
  --eco-viz-wash: .32; --eco-viz-fade: 0;
  --eco-viz-hbar: 12px;
  --eco-viz-meter: 8px;
  --eco-viz-bullet: 16px;
  --eco-viz-spark-h: 32px;
  --eco-viz-spark-line: 1.5px;
  --eco-viz-plot-h: 200px;
  --eco-viz-hit: 24px;
  --eco-viz-tick: var(--eco-text-xs);
  --eco-viz-dur: var(--eco-duration-slow);
  --eco-viz-dur-hover: var(--eco-duration-fast);
  --eco-viz-ease: var(--eco-ease-emphasized);
}
.eco-chart { position: relative; display: grid; gap: 16px; min-width: 0; color: var(--eco-text-secondary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; min-width: 0; }
.eco-chart__title { margin: 0; min-width: 0; color: var(--eco-text-primary); font: 500 var(--eco-text-md)/24px var(--eco-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-chart__meta { color: var(--eco-viz-label); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--eco-text-secondary); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); }
.eco-chart__legend > li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eco-chart__legend > li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--k); box-shadow: inset 0 0 0 1px var(--ke, transparent); }
.eco-chart__legend > li.is-line::before { width: 14px; height: var(--eco-viz-line); border-radius: 1px; box-shadow: none; }
.eco-chart__legend > li.is-dash::before { width: 14px; height: var(--eco-viz-line-sub); border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, var(--k) 0 4px, transparent 4px 7px); }
.eco-chart__fig { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--h, var(--eco-viz-plot-h)) auto; column-gap: 8px; margin: 0; min-width: 0; }
.eco-chart__y, .eco-chart__r { position: relative; grid-row: 1; color: var(--eco-viz-label); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-chart__y { grid-column: 1; text-align: right; }
.eco-chart__y > span { position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); }
.eco-chart__r > b, .eco-chart__y > b { display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 400; }
.eco-chart__r > b { font-weight: 500; }
.eco-chart__r { grid-column: 3; min-width: 0; }
.eco-chart__r > span { position: absolute; left: 0; bottom: var(--y); transform: translateY(50%); color: var(--eco-text-secondary); font-weight: 500; }
.eco-chart__plot { position: relative; min-width: 0; border-radius: var(--eco-radius-xs); outline: var(--eco-focus-w) solid transparent; }
.eco-chart__fig > .eco-chart__plot { grid-column: 2; grid-row: 1; }
.eco-chart__plot:focus-visible { box-shadow: 0 0 0 4px var(--eco-viz-surface), 0 0 0 calc(4px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-chart__x { position: relative; grid-column: 2; grid-row: 2; height: 16px; margin-top: 8px; color: var(--eco-viz-label); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-chart__x > span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.eco-chart__x > span.is-first { transform: none; }
.eco-chart__x > span.is-last { transform: translateX(-100%); }
.eco-chart__x > span.is-now { color: var(--eco-text-primary); font-weight: 600; }
.eco-chart__gl { position: absolute; left: 0; right: 0; bottom: var(--y); height: var(--eco-viz-grid-w); margin-bottom: calc(var(--eco-viz-grid-w) / -2); background: var(--eco-viz-grid); pointer-events: none; }
.eco-chart__gl.is-base { background: var(--eco-viz-base); }
.eco-chart__ref { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--y); height: var(--eco-viz-ref-w); margin-bottom: calc(var(--eco-viz-ref-w) / -2); background: repeating-linear-gradient(90deg, var(--k, var(--eco-viz-c1)) 0 4px, transparent 4px 8px); filter: drop-shadow(0 1px 0 var(--eco-viz-surface)) drop-shadow(0 -1px 0 var(--eco-viz-surface)); pointer-events: none; }
.eco-chart__val { position: absolute; z-index: 1; color: var(--eco-text-primary); font: 600 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.eco-chart__note { position: absolute; z-index: 3; left: var(--x); bottom: calc(var(--ny) + 12px); padding: 0 8px; border-radius: var(--eco-radius-full); background: var(--eco-viz-surface); color: var(--eco-text-primary); font: 500 var(--eco-viz-tick)/18px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.eco-chart__note.is-first { transform: translateX(-8px); }
.eco-chart__note.is-last { transform: translateX(calc(-100% + 8px)); }
.eco-chart__lead { position: absolute; z-index: 2; left: var(--x); bottom: var(--y); width: 1px; height: calc(var(--ny) - var(--y) + 12px); margin-left: -.5px; background: var(--eco-viz-base); pointer-events: none; }
.eco-chart__note--side { bottom: var(--y); transform: translate(calc(-100% - 14px), 50%); }
.eco-chart__note--side.is-end { transform: translate(14px, 50%); }
.eco-chart__lead--side { left: calc(var(--x) - 12px); width: 8px; height: 1px; margin: 0 0 -.5px; }
.eco-chart__lead--side.is-end { left: calc(var(--x) + 4px); }
.eco-chart__hair { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--x); width: 1px; margin-left: -.5px; background: var(--eco-viz-base); pointer-events: none; }
.eco-chart__tip { position: absolute; z-index: 5; display: grid; gap: 4px; min-width: 120px; max-width: 260px; padding: 8px 12px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary); box-shadow: var(--eco-shadow-lg); color: var(--eco-text-tertiary); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); pointer-events: none; }
:is(.eco-chart__hair, .eco-chart__tip)[hidden] { display: none; }
.eco-chart__tip > p { margin: 0; }
.eco-chart__tip > p:first-child { color: var(--eco-text-secondary); font-weight: 500; }
.eco-chart__tip > div { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); align-items: baseline; gap: 8px; white-space: nowrap; }
.eco-chart__tip > div > i { align-self: center; width: 12px; height: var(--eco-viz-line); border-radius: 1px; background: var(--k); box-shadow: 0 0 0 1px var(--ke, transparent); }
.eco-chart__tip > div > b { color: var(--eco-text-primary); font: 600 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-chart__tip > div > span { overflow: hidden; text-overflow: ellipsis; }
.eco-chart__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eco-chart__table { margin-top: -8px; }
.eco-chart__table > summary { display: inline-flex; align-items: center; gap: 4px; min-height: var(--eco-viz-hit); border-radius: var(--eco-radius-xs); color: var(--eco-text-secondary); font: 500 var(--eco-viz-tick)/16px var(--eco-font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; outline: var(--eco-focus-w) solid transparent; }
.eco-chart__table > summary::-webkit-details-marker { display: none; }
.eco-chart__table > summary:hover { color: var(--eco-text-primary); }
.eco-chart__table > summary:focus-visible { box-shadow: 0 0 0 2px var(--eco-viz-surface), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-chart__table > summary > svg { width: 14px; height: 14px; transition: transform var(--eco-viz-dur-hover) var(--eco-ease-standard); }
.eco-chart__table[open] > summary > svg { transform: rotate(180deg); }
.eco-chart__table > div { margin-top: 8px; overflow-x: auto; }
.eco-chart__table .eco-table { width: 100%; }
@media (prefers-reduced-motion: reduce) { .eco-chart__table > summary > svg { transition: none; } }
@media (forced-colors: active) { .eco-chart__legend > li::before, .eco-chart__tip > div > i { forced-color-adjust: none; } }
/* — chart-line — */
.eco-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.eco-chart__line { fill: none; stroke: var(--k); stroke-width: var(--eco-viz-line); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eco-chart__line.is-ctx { stroke-width: var(--eco-viz-line-sub); }
.eco-chart__line.is-dash { stroke-dasharray: 4 4; }
.eco-chart__area { fill: var(--k); fill-opacity: var(--eco-viz-wash); stroke: none; }
.eco-chart__part { fill: var(--k); fill-opacity: .6;  stroke: var(--eco-viz-surface); stroke-width: var(--eco-viz-gap); vector-effect: non-scaling-stroke; }
.eco-chart__dot { position: absolute; z-index: 2; left: var(--x); bottom: var(--y); width: var(--eco-viz-dot); height: var(--eco-viz-dot); margin: 0 0 calc(var(--eco-viz-dot) / -2) calc(var(--eco-viz-dot) / -2); border-radius: 50%; background: var(--k); box-shadow: 0 0 0 var(--eco-viz-ring) var(--eco-viz-surface); pointer-events: none; }
.eco-chart__dot[hidden] { display: none; }
.eco-chart--line .eco-chart__svg { animation: eco-viz-fade var(--eco-viz-dur) var(--eco-viz-ease) both; }
@keyframes eco-viz-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eco-chart--line .eco-chart__svg { animation: none; } }
.eco-chart--static { position: static; gap: 8px; color: inherit; font: inherit; }
.eco-chart--static svg { display: block; width: 100%; height: auto; overflow: visible; }
.eco-chart--static .eco-chart__sgrid { stroke: var(--eco-app-well); stroke-width: 1; }
.eco-chart--static .eco-chart__sarea { fill: color-mix(in srgb, var(--eco-chart-1) 14%, transparent); }
.eco-chart--static .eco-chart__sline { fill: none; stroke: var(--eco-chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.eco-chart--static .eco-chart__spoint { fill: var(--eco-chart-1); stroke: var(--eco-app-card); stroke-width: 2; }
.eco-chart--static text { font: 500 11px/1 var(--eco-font-body); fill: var(--eco-text-tertiary); }
.eco-chart--static .eco-chart__sval { fill: var(--eco-text-primary); font-weight: 600; }
/* — chart-bar — */
.eco-chart__cols { position: absolute; inset: 0; display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.eco-chart__slot { position: relative; display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; gap: var(--eco-viz-gap); min-width: 0; }
.eco-chart__bar { flex: none; width: min(var(--eco-viz-bar-max), calc((var(--eco-viz-bar-fill) - (var(--n, 1) - 1) * var(--eco-viz-gap)) / var(--n, 1))); height: var(--v); min-height: 1px; border-radius: var(--eco-viz-bar-radius); background: var(--k); box-shadow: var(--cap, 0 0 0 0 transparent); transform-origin: 50% 100%; animation: eco-viz-grow-y var(--eco-viz-dur) var(--eco-viz-ease) both; transition: opacity var(--eco-viz-dur-hover) var(--eco-ease-standard); }
.eco-chart__bar.is-c3 { box-shadow: inset 0 2px 0 var(--eco-viz-c3-edge); }
.eco-chart__stack { display: flex; flex: none; flex-direction: column-reverse; width: min(var(--eco-viz-bar-max), var(--eco-viz-bar-fill)); height: var(--v); border-radius: var(--eco-viz-bar-radius); overflow: hidden; transform-origin: 50% 100%; animation: eco-viz-grow-y var(--eco-viz-dur) var(--eco-viz-ease) both; transition: opacity var(--eco-viz-dur-hover) var(--eco-ease-standard); }
.eco-chart__seg { flex: none; height: var(--v); background: var(--k); }
.eco-chart__seg + .eco-chart__seg { box-shadow: inset 0 calc(var(--eco-viz-gap) * -1) 0 var(--eco-viz-surface); }
.eco-chart__seg.is-c3 { box-shadow: inset 0 0 0 1px var(--eco-viz-c3-edge); }
.eco-chart__seg + .eco-chart__seg.is-c3 { box-shadow: inset 0 calc(var(--eco-viz-gap) * -1) 0 var(--eco-viz-surface), inset 0 0 0 1px var(--eco-viz-c3-edge); }
.eco-chart__slot > .eco-chart__val { bottom: calc(var(--v) + 4px); left: 50%; transform: translateX(-50%); }
.eco-chart[data-hot] .eco-chart__slot:not(.is-hot) > :is(.eco-chart__bar, .eco-chart__stack) { opacity: var(--eco-viz-dim); }
@keyframes eco-viz-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { :is(.eco-chart__bar, .eco-chart__stack) { animation: none; transition: none; } }
/* — chart-hbar — */
.eco-chart__rows { display: grid; grid-template-columns: fit-content(var(--name-w, 40%)) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; margin: 0; padding: 0; list-style: none; border-radius: var(--eco-radius-xs); outline: var(--eco-focus-w) solid transparent; }
.eco-chart__rows.has-rank { grid-template-columns: auto fit-content(var(--name-w, 40%)) minmax(0, 1fr) auto; }
.eco-chart__rows:focus-visible { box-shadow: 0 0 0 4px var(--eco-viz-surface), 0 0 0 calc(4px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-chart__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 32px; }
.eco-chart__row > .eco-chart__rank { min-width: 16px; color: var(--eco-viz-label); font: 500 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; text-align: right; }
.eco-chart__row > .eco-chart__name { min-width: 0; overflow: hidden; color: var(--eco-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.eco-chart__row > .eco-chart__hb { display: block; height: var(--eco-viz-hbar); }
.eco-chart__hb > i { display: block; width: var(--v); min-width: 2px; height: 100%; border-radius: 0 4px 4px 0; background: var(--k); transform-origin: 0 50%; animation: eco-viz-grow-x var(--eco-viz-dur) var(--eco-viz-ease) both; transition: opacity var(--eco-viz-dur-hover) var(--eco-ease-standard); }
.eco-chart__hb > i.is-c3 { box-shadow: inset 0 0 0 1px var(--eco-viz-c3-edge); }
.eco-chart__row > b { color: var(--eco-text-primary); font: 600 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.eco-chart[data-hot] .eco-chart__row:not(.is-hot) .eco-chart__hb > i { opacity: var(--eco-viz-dim); }
.eco-chart__share { display: flex; border-radius: 4px; outline: var(--eco-focus-w) solid transparent; gap: var(--eco-viz-gap); height: var(--eco-viz-hbar); }
.eco-chart__share > i { flex: var(--v) 1 0; min-width: 4px; background: var(--k); transform-origin: 0 50%; animation: eco-viz-grow-x var(--eco-viz-dur) var(--eco-viz-ease) both; transition: opacity var(--eco-viz-dur-hover) var(--eco-ease-standard); }
.eco-chart__share > i:first-child { border-radius: 4px 0 0 4px; }
.eco-chart__share > i:last-child { border-radius: 0 4px 4px 0; }
.eco-chart__share > i:only-child { border-radius: 4px; }
.eco-chart__share > i.is-c3 { box-shadow: inset 0 0 0 1px var(--eco-viz-c3-edge); }
.eco-chart[data-hot] .eco-chart__share > i:not(.is-hot) { opacity: var(--eco-viz-dim); }
.eco-chart__share:focus-visible { box-shadow: 0 0 0 4px var(--eco-viz-surface), 0 0 0 calc(4px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-chart__keys { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.eco-chart__keys > li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 48px; align-items: center; gap: 8px; min-height: 32px; }
.eco-chart__keys > li > i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); box-shadow: inset 0 0 0 1px var(--ke, transparent); }
.eco-chart__keys > li > span { min-width: 0; overflow: hidden; color: var(--eco-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.eco-chart__keys > li > b { color: var(--eco-text-primary); font: 600 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.eco-chart__keys > li > small { color: var(--eco-viz-label); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; text-align: right; }
@keyframes eco-viz-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { :is(.eco-chart__hb > i, .eco-chart__share > i) { animation: none; transition: none; } }
.eco-chart--bars { position: static; gap: 10px; color: inherit; font: inherit; }
.eco-chart--bars > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 13px; color: var(--eco-text-secondary); }
.eco-chart--bars i { height: 10px; border-radius: var(--eco-radius-full); background: var(--eco-app-well); overflow: hidden; }
.eco-chart--bars i::before { content: ""; display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--bc, var(--eco-chart-1)); }
.eco-chart--bars b { font: 500 12.5px/1 var(--eco-font-body); text-align: right; color: var(--eco-text-primary); }
/* — chart-meter — */
.eco-chart--meter { gap: 8px; }
.eco-chart__mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.eco-chart__mrow > span { min-width: 0; overflow: hidden; color: var(--eco-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.eco-chart__mrow > b { color: var(--eco-text-primary); font: 600 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-chart__mrow > b > small { margin-left: 4px; color: var(--eco-viz-label); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); }
.eco-chart__meter { position: relative; height: var(--eco-viz-meter); border-radius: var(--eco-radius-full); background: var(--eco-viz-track); }
.eco-chart__meter > .eco-chart__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: inherit; background: var(--k, var(--eco-viz-c1)); transform-origin: 0 50%; animation: eco-viz-grow-x var(--eco-viz-dur) var(--eco-viz-ease) both; }
.eco-chart__meter > .eco-chart__target { position: absolute; z-index: 1; left: var(--t); top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--eco-viz-c1); box-shadow: 0 0 0 2px var(--eco-viz-surface); }
.eco-chart__meter--bullet { height: var(--eco-viz-bullet); border-radius: var(--eco-radius-xs); background: none; }
.eco-chart__meter--bullet > .eco-chart__band { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); background: var(--k); }
.eco-chart__meter--bullet > .eco-chart__band:first-child { border-radius: var(--eco-radius-xs) 0 0 var(--eco-radius-xs); }
.eco-chart__meter--bullet > .eco-chart__band.is-end { border-radius: 0 var(--eco-radius-xs) var(--eco-radius-xs) 0; }
.eco-chart__meter--bullet > .eco-chart__fill { top: 25%; bottom: 25%; border-radius: 0 2px 2px 0; }
.eco-chart__mscale { position: relative; height: 16px; color: var(--eco-viz-label); font: 400 var(--eco-viz-tick)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-chart__mscale > span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.eco-chart__mscale > span.is-first { transform: translateX(-1px); }
.eco-chart__mscale > span.is-last { transform: translateX(calc(-100% + 1px)); }
.eco-chart__mscale > span.is-t { color: var(--eco-text-primary); font-weight: 500; }
.eco-chart__risk { display: inline-flex; align-items: center; gap: 4px; color: var(--eco-text-error-primary); font: 500 var(--eco-viz-tick)/16px var(--eco-font-body); }
.eco-chart__risk > svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .eco-chart__meter > .eco-chart__fill { animation: none; } }
/* — chart-spark — */
.eco-chart--spark { gap: 0; }
.eco-chart__spark { position: relative; height: var(--h, var(--eco-viz-spark-h)); border-radius: var(--eco-radius-xs); outline: var(--eco-focus-w) solid transparent; }
.eco-chart__spark:focus-visible { box-shadow: 0 0 0 4px var(--eco-viz-surface), 0 0 0 calc(4px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-chart__spark .eco-chart__line { stroke-width: var(--eco-viz-spark-line); }
.eco-chart__spark .eco-chart__dot { width: 6px; height: 6px; margin: 0 0 -3px -3px; }
.eco-chart__spark > .eco-chart__cols { gap: var(--eco-viz-gap); }
.eco-chart__spark .eco-chart__slot > .eco-chart__bar { width: 100%; max-width: 8px; border-radius: 2px 2px 0 0; }
.eco-chart__spark .eco-chart__slot > .eco-chart__bar.is-c3 { box-shadow: inset 0 0 0 1px var(--eco-viz-c3-edge); }
/* — list-table — */
.eco-table.eco-table--list td { white-space: nowrap; }
.eco-table.eco-table--list thead th { white-space: normal; text-wrap: balance; vertical-align: bottom; }
.eco-table.eco-table--list tbody :is(td, th) { padding-block: var(--lp-py); }
.eco-table.eco-table--list :is(th, td).eco-table__check { position: sticky; left: 0; z-index: 2; width: var(--lp-chk); min-width: var(--lp-chk); background: var(--eco-app-card); }
.eco-table.eco-table--list tbody tr[data-row] { cursor: pointer; }
.eco-table.eco-table--list tbody tr:has(.eco-check:checked) :is(td, th) { background: var(--eco-app-well); }
.eco-table.eco-table--list tbody tr.is-current :is(td, th) { background: var(--eco-app-well); }
.eco-table.eco-table--list td.num { color: var(--eco-text-primary); }
.eco-table.eco-table--list td.is-empty { color: var(--eco-text-quaternary); }
.eco-table.eco-table--list tfoot :is(td, th) { position: sticky; bottom: 0; z-index: 3; padding: 12px 24px; border: 0; background: var(--eco-app-well); font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-primary); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-table.eco-table--list tfoot :is(td, th).num { text-align: right; }
.eco-table.eco-table--list tfoot :is(td, th):first-child { border-radius: var(--eco-radius-xl) 0 0 var(--eco-radius-xl); }
.eco-table.eco-table--list tfoot :is(td, th):last-child { border-radius: 0 var(--eco-radius-xl) var(--eco-radius-xl) 0; }
@container listpage (max-width: 999px) {
  .eco-table.eco-table--list :is(th, td) { padding-inline: 16px; }
}
@container listpage (max-width: 1239px) {
  .eco-listpage--facets .eco-table--list :is(th, td) { padding-inline: 12px; }
}
@container listpage (max-width: 639px) {
  .eco-table.eco-table--list, .eco-table.eco-table--list tbody, .eco-table.eco-table--list tfoot { display: block; }
  .eco-table.eco-table--list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px var(--lp-px); border-bottom: 1px solid var(--table-line); }
  [data-selecting] .eco-table.eco-table--list tbody tr[data-row] { grid-template-columns: auto minmax(0, 1fr) auto; }
  .eco-table.eco-table--list tbody :is(td, th) { display: none; padding: 0; border: 0; background: none; }
  .eco-table.eco-table--list tbody tr:has(.eco-check:checked) { background: var(--eco-app-well); }
  [data-selecting] .eco-table.eco-table--list tbody td.eco-table__check { display: block; grid-row: 1 / span 2; width: auto; min-width: 0; }
  .eco-table.eco-table--list tfoot tr { padding: 10px var(--lp-px); background: var(--eco-app-well); }
  .eco-table.eco-table--list tfoot td.num { color: var(--eco-text-primary); font-weight: 500; }
}
@container listpage (min-width: 1000px) { .eco-listpage--facets .eco-table--list :is(th, td) { padding-inline: 16px; } }
@container listpage (max-width: 1149px) {
  .eco-shell--deep.eco-shell--rail .eco-table.eco-table--list :is(th, td) { padding-inline: 16px; }
}
@container listpage (max-width: 1349px) { .eco-shell--deep.eco-shell--rail .eco-listpage--facets .eco-table--list :is(th, td) { padding-inline: 8px; } }
/* — listpage — */
.eco-listpage { --lp-px: 32px; --lp-py: 16px; --lp-chk: 48px; container: listpage / inline-size; position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; padding: 24px var(--lp-px) 16px; overflow: hidden; background: var(--eco-app-canvas); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); }
.eco-listpage[data-density="compact"] { --lp-py: 10px; }
.eco-listpage[data-density="comfy"] { --lp-py: 22px; }
.eco-listpage [hidden] { display: none !important; }
.eco-listpage > * { flex: none; }
.eco-listpage__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.eco-listpage__heading { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.eco-listpage__crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-listpage__crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--eco-text-quaternary); }
.eco-listpage__crumbs a { color: inherit; text-decoration: none; }
.eco-listpage__crumbs a:hover { color: var(--eco-text-secondary); }
.eco-listpage__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; font: var(--eco-font-display--weight, 500) 28px/34px var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing); color: var(--eco-text-primary); }
.eco-listpage__count { font: 500 var(--eco-text-md)/1 var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-listpage__sub { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-listpage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; color: var(--eco-text-tertiary); }
.eco-listpage__meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.eco-listpage__meta > span:not(:has(> svg)) { white-space: normal; }
.eco-listpage__meta > span > svg:not(.eco-listpage__mark) { width: 16px; height: 16px; color: var(--eco-fg-tertiary); }
.eco-listpage__meta .eco-listpage__mark { width: 18px; height: 18px; margin: 0; }
.eco-listpage__rowacts { display: flex; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.eco-listpage__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eco-listpage__acts > .eco-listpage__monly { display: none; }
.eco-listpage__sum { margin: 2px 0 4px; }
.eco-listpage__stat { min-width: 0; }
.eco-listpage__stat--aging { grid-column: span 2; }
.eco-listpage__stat--aging > dd { display: block; }
.eco-listpage__views { display: flex; align-items: center; gap: 4px 12px; min-width: 0; box-shadow: inset 0 -1px 0 var(--eco-border-tertiary); }
.eco-listpage__views > .eco-tabs { flex: 0 1 auto; min-width: 0; }
.eco-listpage__vn { font-weight: 500; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-listpage__views .eco-tab[aria-selected="true"] .eco-listpage__vn { color: var(--eco-text-secondary); }
.eco-listpage__views > .eco-btn { flex: none; }
.eco-listpage__views > .eco-listpage__pop--end { flex: none; margin-left: auto; }
.eco-listpage__bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eco-listpage__search { flex: 1 1 300px; min-width: 180px; max-width: 300px; }
.eco-listpage__bar > .eco-listpage__chips { flex: none; flex-wrap: nowrap; }
.eco-listpage__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.eco-listpage__chips > [data-lp-reset] { min-height: 36px; padding-inline: 10px; background: none; color: var(--eco-text-tertiary); }
.eco-listpage__chips > [data-lp-reset]:hover { background: var(--eco-app-control-hover); color: var(--eco-text-primary); }
.eco-listpage__spacer { flex: 1 1 0; }
.eco-listpage__pop { position: relative; }
.eco-listpage__pop > .eco-menu { position: absolute; z-index: 6; top: calc(100% + 8px); left: 0; }
.eco-listpage__pop--end > .eco-menu { left: auto; right: 0; }
.eco-listpage__opt { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.eco-listpage__opt .eco-check { pointer-events: none; }
.eco-listpage__opt > .eco-listpage__n { margin-left: auto; padding-left: 12px; font: 500 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-listpage__optrow { display: grid; gap: 8px; padding: 6px 12px 10px; }
.eco-listpage > .eco-listpage__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; flex: 1 1 auto; min-height: 0; }
.eco-listpage__scroll { padding: 8px; }
.eco-listpage__scroll { position: relative; min-height: 0; max-height: var(--lp-h, none); overflow: auto; overscroll-behavior: contain; border-radius: var(--eco-radius-xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-listpage__scroll:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-listpage .eco-table :is(td, th).eco-listpage__tx { white-space: normal; text-wrap: pretty; min-width: 88px; }
.eco-listpage .eco-table td.eco-listpage__mmain { min-width: 200px; max-width: 360px; white-space: normal; }
.eco-listpage .eco-table thead th { position: sticky; top: 0; z-index: 3; }
.eco-listpage .eco-table :is(th, td).eco-listpage__pin { position: sticky; left: var(--lp-pin-l, 0px); z-index: 2; background: var(--eco-app-card); }
.eco-listpage .eco-table:has(.eco-table__check) { --lp-pin-l: var(--lp-chk); }
.eco-listpage .eco-table thead :is(.eco-table__check, .eco-listpage__pin) { z-index: 4; background: var(--eco-app-well); }
.eco-listpage__scroll.is-x .eco-listpage__pin { box-shadow: 8px 0 8px -8px color-mix(in srgb, var(--eco-color-black) 24%, transparent); clip-path: inset(0 -16px 0 0); }
.eco-listpage .eco-table tbody tr:hover :is(.eco-table__check, .eco-listpage__pin) { background: var(--eco-app-card-hover); }
.eco-listpage__cell { display: grid; gap: 2px; min-width: 0; }
.eco-listpage__cell > b { font-weight: 500; color: var(--eco-text-primary); }
.eco-listpage__cell > small { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-listpage__cell > small.eco-listpage__msub { display: none; }
.eco-listpage__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eco-listpage__who > .eco-avatar { --s: 32px; flex: none; }
.eco-listpage__who b { white-space: nowrap; }
.eco-listpage__code { font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); font-variant-numeric: tabular-nums; color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-listpage .eco-table tr.eco-listpage__group > * { padding: 20px 24px 8px; border-bottom: 0; background: none; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-primary); cursor: default; }
.eco-listpage .eco-table tr.eco-listpage__group > :is(.eco-listpage__pin, .eco-table__check) { background: var(--eco-app-card); }
.eco-listpage .eco-table tr.eco-listpage__group > .eco-listpage__pin { overflow: visible; }
.eco-listpage .eco-table tr.eco-listpage__group .num { color: var(--eco-text-secondary); }
.eco-listpage__gn { margin-left: 8px; font-weight: 400; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-listpage .eco-table tfoot :is(td, th):is(.eco-listpage__pin, .eco-table__check) { z-index: 4; background: var(--eco-app-well); overflow: visible; }
.eco-listpage__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 40px; color: var(--eco-text-tertiary); }
.eco-listpage__foot > .eco-pagination { flex: 1 1 auto; }
.eco-listpage__state { display: grid; place-items: center; min-height: 280px; padding: 48px 24px; }
.eco-listpage .eco-table tr.eco-listpage__sk :is(td, th) { padding-block: 18px; cursor: default; }
.eco-listpage__scrim { position: absolute; inset: 0; z-index: 7; background: var(--eco-bg-overlay); opacity: 0; visibility: hidden; transition: opacity var(--eco-duration-slow) var(--eco-ease-standard), visibility 0s linear var(--eco-duration-slow); }
.eco-listpage__scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--eco-duration-slow) var(--eco-ease-standard); }
.eco-listpage .eco-sheet { z-index: 8; }
.eco-listpage__fgroup { display: grid; gap: 4px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.eco-listpage__fgroup > legend { padding: 0 0 6px; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-primary); }
.eco-listpage__fgroup .eco-listpage__opt { min-height: 36px; padding: 6px 8px; margin-inline: -8px; border-radius: var(--eco-radius-lg); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-listpage__fgroup .eco-listpage__opt:hover { background: var(--eco-bg-secondary); }
.eco-listpage__fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-listpage__range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eco-listpage__amt { margin: 4px 0 20px; font: var(--eco-font-display--weight, 500) 32px/38px var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing); font-variant-numeric: tabular-nums; }
.eco-listpage__amt small { margin-left: 6px; font: 500 var(--eco-text-sm)/1 var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); }
.eco-listpage__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-secondary); }
.eco-listpage__dl > div { min-width: 0; }
.eco-listpage__dl dt { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-listpage__dl dd { margin: 2px 0 0; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-primary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@container listpage (min-width: 1000px) {
  .eco-listpage--facets .eco-listpage__main { grid-template-columns: 200px minmax(0, 1fr); }
  .eco-listpage--facets .eco-listpage__filters { position: static; z-index: auto; width: auto; max-height: var(--lp-h, none); border-radius: 0; background: none; box-shadow: none; transform: none; visibility: visible; transition: none; --sheet-body-pad: 4px 4px 16px 0; }
  .eco-listpage--facets .eco-listpage__filters :is(.eco-sheet__head, .eco-sheet__foot) { display: none; }
  .eco-listpage--facets .eco-listpage__filters .eco-listpage__opt:hover { background: var(--eco-app-control); }
  .eco-listpage--facets [data-lp-open="filters"] { display: none; }
}
@container listpage (max-width: 999px) {
  .eco-listpage .eco-listpage__p3 { display: none; }
  .eco-listpage .eco-table td.eco-listpage__mmain { min-width: 160px; }
}
@container listpage (max-width: 1239px) {
  .eco-listpage--facets .eco-listpage__p3 { display: none; }
  .eco-listpage--facets { --lp-chk: 40px; }
  .eco-listpage--facets .eco-listpage__main { gap: 16px; }
  .eco-listpage--facets .eco-table td.eco-listpage__mmain { min-width: 160px; }
}
@container listpage (max-width: 819px) {
  .eco-listpage { --lp-px: 24px; }
  .eco-listpage .eco-listpage__p2 { display: none; }
  .eco-listpage__chips > .eco-listpage__pop:not(:first-child) { display: none; }
}
@container listpage (max-width: 639px) {
  .eco-listpage { --lp-px: 16px; gap: 12px; padding-top: 16px; }
  .eco-listpage__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
  .eco-listpage__heading { display: contents; }
  .eco-listpage__crumbs { grid-column: 1; grid-row: 1; flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
  .eco-listpage__title { grid-column: 1 / -1; grid-row: 2; font-size: 24px; line-height: 30px; }
  .eco-listpage__acts { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 6px; }
  .eco-listpage__sub, .eco-listpage__meta { grid-column: 1 / -1; }
  .eco-listpage .eco-table :is(th, td):is(.eco-listpage__pin, .eco-table__check) { position: static; left: auto; }
  .eco-listpage__acts .eco-listpage__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .eco-listpage__acts > .eco-listpage__monly { display: inline-flex; }
  .eco-listpage[data-selecting] .eco-listpage__monly, .eco-listpage[data-selecting] .eco-listpage__monly > svg { background: var(--eco-text-primary); color: var(--eco-bg-primary); }
  .eco-listpage__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--lp-px) * -1); padding-inline: var(--lp-px); }
  .eco-listpage__bar::-webkit-scrollbar { display: none; }
  .eco-listpage__search { flex: 0 0 auto; min-width: 0; }
  .eco-listpage__search > .eco-icon:first-child { left: 12px; }
  .eco-listpage__chips { flex-wrap: nowrap; }
  .eco-listpage__search { max-width: none; }
  .eco-listpage__chips > .eco-listpage__pop:not(:first-child) { display: block; }
  .eco-listpage__spacer, .eco-listpage__views > .eco-listpage__pop--end { display: none; }
  .eco-listpage__views { margin-inline: calc(var(--lp-px) * -1); padding-inline: var(--lp-px); }
  .eco-listpage__stat--aging { display: none; }
  .eco-listpage__scroll { padding: 0; border-radius: 0; margin-inline: calc(var(--lp-px) * -1); }
  .eco-listpage .eco-table thead { display: none; }
  .eco-listpage .eco-table tbody :is(td, th).eco-listpage__mk { display: block; position: static; }
  .eco-listpage .eco-table tbody td.eco-listpage__mk.num { grid-column: -2; grid-row: 1; font-weight: 500; }
  .eco-listpage .eco-table tbody td.eco-listpage__mk.is-empty { display: none; }
  .eco-listpage .eco-table tbody td.eco-listpage__mst { grid-column: -2; grid-row: 2; justify-self: end; }
  .eco-listpage .eco-table tbody td.eco-listpage__mk.is-in::before { content: "+"; }
  .eco-listpage .eco-table tbody td.eco-listpage__mk.is-in { color: var(--eco-text-success-primary); }
  .eco-listpage .eco-table tbody td.eco-listpage__mk.is-out::before { content: "\2212"; }
  .eco-listpage .eco-table tbody .eco-listpage__mk.eco-listpage__mmain { grid-column: 1 / -2; grid-row: 1 / span 2; min-width: 0; max-width: none; }
  .eco-listpage[data-selecting] .eco-table tbody .eco-listpage__mk.eco-listpage__mmain { grid-column: 2 / -2; }
  .eco-listpage__cell > small:not(.eco-listpage__msub) { display: none; }
  .eco-listpage__cell > :is(b, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eco-listpage__cell > small.eco-listpage__msub { display: block; }
  .eco-listpage__who > .eco-avatar { --s: 40px; }
  .eco-listpage .eco-table :is(tr.eco-listpage__group, tfoot tr) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; border: 0; }
  .eco-listpage .eco-table tr.eco-listpage__group { padding: 16px var(--lp-px) 6px; }
  .eco-listpage .eco-table :is(tr.eco-listpage__group, tfoot tr) > * { display: block; grid-column: 2; padding: 0; background: none; border-radius: 0; text-align: right; }
  .eco-listpage .eco-table :is(tr.eco-listpage__group, tfoot tr) > .eco-listpage__pin { grid-column: 1; grid-row: 1 / span 4; align-self: center; text-align: left; }
  .eco-listpage .eco-table :is(tr.eco-listpage__group, tfoot tr) > :empty { display: none; }
  .eco-listpage .eco-table :is(tr.eco-listpage__group, tfoot tr) > .num { font: 400 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); }
  .eco-listpage .eco-table :is(tr.eco-listpage__group, tfoot tr) > .num::before { content: attr(data-label) " "; }
  .eco-listpage .eco-table tfoot { position: sticky; bottom: 0; z-index: 3; }
  .eco-listpage .eco-table tfoot :is(td, th) { position: static; }
  .eco-listpage .eco-sheet.eco-listpage__filters, .eco-listpage .eco-sheet.eco-listpage__detail { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 86%; border-radius: var(--eco-radius-4xl) var(--eco-radius-4xl) 0 0; --sheet-out: translateY(calc(100% + 16px)); --sheet-grip: block; }
  .eco-listpage .eco-sheet .eco-sheet__foot > .eco-btn { flex: 1; }
  .eco-listpage__dl { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-listpage__scrim { transition-duration: 0s !important; }
}
.eco-shell__main > .eco-listpage { min-height: 0; padding-top: 8px; }
.eco-listpage__mark { display: inline-block; flex: none; width: 20px; height: 20px; margin: -2px 8px 0 0; vertical-align: middle; }
.eco-listpage [data-col="org"] { white-space: nowrap; }
.eco-listpage > .eco-callout { margin: 0; }
.eco-listpage__tabs { margin-bottom: -4px; }
.eco-listpage__panel { display: flex; flex-direction: column; gap: 20px; min-width: 0; min-height: 0; overflow: auto; }
.eco-listpage__panel[hidden] { display: none; }
.eco-listpage__panel:focus-visible { outline: none; }
.eco-listpage[data-lp-other] > :is(.eco-listpage__sum, .eco-listpage__views, .eco-listpage__bar, .eco-listpage__main, .eco-listpage__foot) { display: none !important; }
@container listpage (max-width: 1149px) {
  .eco-shell--deep.eco-shell--rail .eco-listpage .eco-listpage__p3 { display: none; }
  .eco-shell--deep.eco-shell--rail .eco-listpage .eco-table td.eco-listpage__mmain { min-width: 160px; }
}
/* — chart-kpi — */
.eco-kpi { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border-radius: var(--eco-radius-2xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); color: var(--eco-text-secondary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-kpi__label { margin: 0; overflow: hidden; color: var(--eco-text-secondary); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); text-overflow: ellipsis; white-space: nowrap; }
.eco-kpi__value { margin: 0; color: var(--eco-text-primary); font: 600 28px/34px var(--eco-font-body); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.eco-kpi__value > small { margin-left: 4px; color: var(--eco-text-tertiary); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); letter-spacing: 0; }
.eco-kpi__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-kpi__viz { margin-top: auto; padding-top: 4px; }
.eco-kpi__foot { margin: 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-kpi:is(.eco-kpi--success, .eco-kpi--warning, .eco-kpi--error) > .eco-kpi__label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: var(--eco-fg-success-primary); }
.eco-kpi.eco-kpi--warning > .eco-kpi__label::before { width: 10px; height: 9px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--eco-fg-warning-primary); }
.eco-kpi.eco-kpi--error > .eco-kpi__label::before { width: 7px; height: 7px; margin-inline: 1px 7px; vertical-align: 2px; rotate: 45deg; border-radius: 1px; background: var(--eco-fg-error-primary); }
.eco-kpi.eco-kpi--text > .eco-kpi__value { font: 500 var(--eco-text-md)/28px var(--eco-font-body); letter-spacing: 0; font-variant-numeric: normal; white-space: normal; overflow-wrap: anywhere; }
.eco-kpi__viz { --progress-track: var(--eco-viz-trackbg, var(--eco-bg-tertiary)); }
.eco-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--eco-app-gap, 16px); }
.eco-kpi:is(.eco-kpi--in, .eco-kpi--out) > .eco-kpi__label { display: flex; align-items: center; gap: 4px; }
.eco-kpi__dir { flex: none; width: 14px; height: 14px; color: currentColor; }
.eco-kpi--tile { display: grid; align-content: start; gap: 2px; padding: var(--eco-kpi-pad, 16px); background: var(--eco-kpi-bg, var(--eco-app-card)); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/1.45 var(--eco-font-body); }
.eco-kpi--tile :is(b, .eco-kpi__value) { margin: 0; color: inherit; font: var(--eco-font-display--weight-strong, 700) 28px/34px var(--eco-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: normal; overflow: visible; }
.eco-kpi--tile :is(b, .eco-kpi__value) small { margin-left: 2px; color: var(--eco-text-tertiary); font-size: 16px; letter-spacing: 0; }
.eco-kpi--tile > :is(span:not(.eco-kpi__ic), .eco-kpi__label) { margin: 0; overflow: visible; color: var(--eco-text-secondary); font-size: 13px; line-height: 18px; text-overflow: clip; white-space: normal; }
.eco-kpi--tile > :is(small, .eco-kpi__foot) { margin: 0; color: var(--eco-text-tertiary); font-size: 12px; line-height: 16px; }
.eco-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.eco-kpi__ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--eco-radius-lg); background: var(--eco-kpi-ic-bg, var(--eco-app-well)); color: var(--eco-fg-brand-primary); }
.eco-kpi__ic svg { display: block; flex: none; width: 18px; height: 18px; }
.eco-kpi__ic--brand { background: var(--eco-bg-brand-primary); }
/* — bulkbar — */
.eco-table-card:has(> .eco-bulkbar) { position: relative; }
.eco-bulkbar { position: absolute; left: 50%; bottom: 72px; z-index: 5; display: flex; align-items: center; gap: 4px; box-sizing: border-box; max-width: calc(100% - 32px); padding: 6px 6px 6px 16px; border-radius: var(--eco-radius-full); background: var(--eco-bg-primary-solid); color: var(--eco-text-white); box-shadow: var(--eco-shadow-xl); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); translate: -50% 0; white-space: nowrap; transition: opacity var(--eco-duration-base) var(--eco-ease-standard), transform var(--eco-duration-base) var(--eco-ease-emphasized); }
.eco-bulkbar--fixed { position: fixed; z-index: 30; bottom: 24px; }
.eco-bulkbar[hidden] { display: flex; opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
.eco-bulkbar__count { margin-right: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.eco-bulkbar { --eco-inverse-ink: var(--eco-text-white); --eco-focus-gap: var(--eco-bg-primary-solid); }
.eco-bulkbar__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--eco-radius-full); background: none; color: inherit; font: inherit; cursor: pointer; }
.eco-bulkbar__btn:hover { background: rgb(255 255 255 / .12); }
.eco-bulkbar__btn:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 1px; box-shadow: 0 0 0 1px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(1px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-bulkbar__btn svg { flex: none; width: 16px; height: 16px; }
.eco-bulkbar__close { width: 32px; padding: 0; justify-content: center; color: color-mix(in oklab, var(--eco-text-white) 70%, transparent); }
@media (max-width: 860px) { .eco-bulkbar__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .eco-bulkbar { transition: none; } }
.eco-bulkbar__sum { margin: 0 8px 0 4px; color: color-mix(in oklab, var(--eco-text-white) 70%, transparent); font-variant-numeric: tabular-nums; }
@container (max-width: 639px) {
  .eco-bulkbar { left: 12px; right: 12px; bottom: 12px; max-width: none; translate: none; border-radius: var(--eco-radius-3xl); }
  .eco-bulkbar__sum { display: none; }
  .eco-bulkbar__label { display: none; }
  .eco-bulkbar > :is(.eco-btn, .eco-bulkbar__btn):first-of-type { margin-left: auto; }
}
/* — status — */
.eco-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eco-status:not(.eco-status--icon)::before { content: ""; flex: none; width: 10px; height: 10px; }
.eco-status.eco-status--success::before { border-radius: 50%; background: var(--eco-fg-success-primary); }
.eco-status.eco-status--warning::before { width: 12px; height: 11px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--eco-fg-warning-primary); }
.eco-status.eco-status--error::before { width: 9px; height: 9px; margin: 0 1px; rotate: 45deg; border-radius: 1px; background: var(--eco-fg-error-primary); }
.eco-status.eco-status--neutral::before { width: 9px; height: 9px; border-radius: 2px; background: var(--eco-fg-quaternary, var(--eco-fg-tertiary)); }
.eco-status--neutral { color: var(--eco-text-tertiary); }
.eco-status--icon svg { flex: none; width: 18px; height: 18px; }
.eco-status--icon.eco-status--success svg { color: var(--eco-fg-success-primary); }
.eco-status--icon.eco-status--warning svg { color: var(--eco-fg-warning-primary); }
.eco-status--icon.eco-status--error svg { color: var(--eco-fg-error-primary); }
.eco-status--icon.eco-status--info svg { color: var(--eco-fg-secondary); }
.eco-status--icon.eco-status--neutral svg { color: var(--eco-fg-tertiary); }
.eco-status--icon.eco-status--pending svg { color: var(--eco-fg-info-primary); }
@media (forced-colors: active) { .eco-status:not(.eco-status--icon)::before { forced-color-adjust: none; background: CanvasText; } }
.eco-status.eco-status--muted { color: var(--eco-text-secondary); }
.eco-status.eco-status--ink { color: var(--eco-text-primary); }
.eco-status.eco-status--xs { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); }
.eco-status.eco-status--medium { font-weight: 500; }
.eco-status.eco-status--wrap { white-space: normal; }
.eco-status.eco-status--block { display: flex; min-width: 0; }
.eco-status.eco-status--sm::before { transform: scale(.85); }
/* — overview — */
.eco-overview { --ov-px: 32px; --ov-gap: var(--eco-app-gap, 16px); container: overview / inline-size; display: flex; flex-direction: column; gap: 24px; min-width: 0; min-height: 0; padding: 24px var(--ov-px) 32px; --progress-fill: var(--eco-fg-primary); overflow: auto; overscroll-behavior: contain; background: var(--eco-app-canvas); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); }
.eco-overview[hidden] { display: none; }
.eco-overview :is(h4, h5, p, ul, ol, dl, dd, figure) { margin: 0; }
.eco-overview :is(ul, ol) { padding: 0; list-style: none; }
.eco-overview__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.eco-overview__heading { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.eco-overview__title { font: var(--eco-font-display--weight, 500) 28px/34px var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing); color: var(--eco-text-primary); }
.eco-overview__sub { color: var(--eco-text-tertiary); }
.eco-overview__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eco-overview__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ov-gap); align-items: start; }
.eco-overview__card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); --progress-track: var(--eco-viz-trackbg, var(--eco-bg-tertiary)); --btn-t-bg: var(--eco-app-well); --btn-t-bg-hover: var(--eco-app-well-hover); }
.eco-overview__hero { grid-column: 1 / span 7; grid-row: 1; align-self: stretch; }
.eco-overview__kpis { grid-column: 1 / span 7; grid-row: 2; }
.eco-overview__inbox { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: stretch; }
.eco-overview__wide { grid-column: span 8; }
.eco-overview__side { grid-column: span 4; align-self: stretch; }
.eco-overview__half { grid-column: span 6; align-self: stretch; }
.eco-overview__full { grid-column: 1 / -1; }
.eco-overview__kpis--row { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.eco-overview__title > .eco-badge { margin-left: 12px; vertical-align: 5px; }
.eco-overview--screen > .eco-callout { flex: none; }
.eco-overview__chead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.eco-overview__ctitle { white-space: nowrap; }
.eco-overview__ctitle { font: 500 var(--eco-text-md)/24px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-overview__meta { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-overview :is(.eco-overview__big, .eco-overview__mid, .eco-overview__amt, .eco-overview__parts dd) { font-family: var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-overview :is(.eco-overview__big, .eco-overview__mid) small { margin-left: 6px; font: 500 var(--eco-text-sm)/1 var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); }
.eco-overview__herobody { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; container-type: inline-size; }
.eco-overview__lead { display: grid; gap: 8px; }
.eco-overview__big { font-weight: 600; font-size: min(44px, 12cqi); line-height: 1.1; letter-spacing: -.02em; color: var(--eco-text-primary); }
.eco-overview__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--eco-text-tertiary); }
.eco-overview__parts { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.eco-overview__parts > div { display: grid; gap: 2px; }
.eco-overview__parts dt { font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-overview__parts dd { font-weight: 500; color: var(--eco-text-primary); }
.eco-overview__parts dd.is-neg { color: var(--eco-text-tertiary); }
.eco-overview__group { display: flex; align-items: center; gap: 8px; margin-bottom: -8px; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-overview__group > span { padding: 0 6px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); color: var(--eco-text-secondary); font-variant-numeric: tabular-nums; }
.eco-overview__list { display: grid; gap: 4px; }
.eco-overview__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 56px; padding: 8px 8px 8px 0; border-radius: var(--eco-radius-xl); }
.eco-overview__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--eco-radius-full); background: var(--eco-app-well); color: var(--eco-fg-secondary); }
.eco-overview__ic > svg { width: 16px; height: 16px; }
.eco-overview__txt { display: grid; gap: 2px; min-width: 0; }
.eco-overview__txt > b { font-weight: 500; color: var(--eco-text-primary); }
.eco-overview__list .eco-overview__txt > small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eco-overview__list .eco-overview__txt > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eco-overview__txt > small { display: block; font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-overview__code { font-weight: 400; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-overview__mark { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.eco-overview__txt .eco-overview__mark { margin-right: 4px; }
.eco-overview__who { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.eco-overview__amt { font-weight: 500; color: var(--eco-text-primary); text-align: right; }
.eco-overview__item.is-done .eco-overview__txt > b { color: var(--eco-text-tertiary); }
.eco-overview__foot { display: flex; margin-top: auto; }
.eco-overview__foot > .eco-btn { flex: 1 1 auto; }
.eco-overview__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ov-gap); }
.eco-overview__klabel, .eco-overview__kval { min-width: 0; }
.eco-overview__kfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; }
.eco-overview__close { display: grid; gap: 16px; }
.eco-overview__close > li { display: grid; gap: 6px; }
.eco-overview__mid { font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: -.02em; }
.eco-overview__feed { display: grid; gap: 12px; }
.eco-overview__feed > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.eco-overview__feed .eco-overview__txt > b > span { font-weight: 400; color: var(--eco-text-secondary); }
.eco-overview__time { align-self: start; padding-top: 2px; font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-shell__main > .eco-overview { min-height: 0; padding-top: 8px; }
@container overview (max-width: 880px) {
  .eco-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-overview__hero, .eco-overview__kpis, .eco-overview__wide, .eco-overview__inbox, .eco-overview__full { grid-column: 1 / -1; grid-row: auto; }
  .eco-overview__side, .eco-overview__half { grid-column: span 1; }
}
@container overview (max-width: 640px) {
  .eco-overview { --ov-px: 16px; }
  .eco-overview__grid, .eco-overview__kpis { grid-template-columns: minmax(0, 1fr); }
  .eco-overview__side, .eco-overview__half { grid-column: 1 / -1; }
  .eco-overview__big { font-size: min(34px, 12cqi); line-height: 1.18; }
}
@container overview (max-width: 1000px) {
  .eco-overview--screen :is(.eco-overview__wide, .eco-overview__side) { grid-column: 1 / -1; }
}
.eco-overview__chead > .eco-overview__ctitle { margin-right: auto; }
.eco-overview__chead > .eco-btn { align-self: center; }
.eco-overview__state { display: none; }
.eco-overview[data-state] :is(.eco-overview__card, .eco-overview__kpi):not(.is-ok) > :not(.eco-overview__chead, .eco-overview__klabel, .eco-overview__state) { display: none; }
.eco-overview[data-state] :is(.eco-overview__card, .eco-overview__kpi):not(.is-ok) > .eco-overview__chead > :not(.eco-overview__ctitle) { visibility: hidden; }
.eco-overview[data-state] :is(.eco-overview__card, .eco-overview__kpi):not(.is-ok) > .eco-overview__state { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 0; }
.eco-overview__card > .eco-overview__state { min-height: 144px; }
.eco-overview__state > [data-st] { display: none; }
.eco-overview[data-state="load"] .eco-overview__state > [data-st="load"], .eco-overview__card.is-loading > .eco-overview__state > [data-st="load"], .eco-overview[data-state="empty"] .eco-overview__state > [data-st="empty"], .eco-overview[data-state="error"] .eco-overview__card:not(.is-loading) > .eco-overview__state > [data-st="error"], .eco-overview[data-state="error"] .eco-overview__kpi > .eco-overview__state > [data-st="error"] { display: block; }
.eco-overview:not([data-state="empty"]) .eco-overview__state > .eco-empty[data-st="empty"], .eco-overview:not([data-state="error"]) .eco-overview__state > .eco-empty[data-st="error"], .eco-overview__card.is-loading > .eco-overview__state > .eco-empty[data-st="error"] { display: none; }
.eco-overview__state .eco-empty__art { margin-bottom: var(--eco-spacing-md); }
.eco-overview__state .eco-empty__actions { margin-top: var(--eco-spacing-lg); }
.eco-overview__sk { display: grid; gap: 12px; align-content: start; }
.eco-overview__sk > .eco-skeleton:first-child { width: 42%; }
.eco-overview__sk > .eco-skeleton:nth-child(2) { width: 88%; }
.eco-overview__sk > .eco-skeleton:nth-child(3) { width: 72%; }
.eco-overview__sk > .eco-skeleton:nth-child(4) { width: 56%; }
.eco-overview__kpi > .eco-overview__state { justify-content: flex-start; }
.eco-overview__kpi .eco-overview__sk > .eco-skeleton:first-child { width: 56%; }
.eco-overview__kpi .eco-overview__state .eco-overview__kfoot { margin-top: 8px; }
/* — app — */
.eco-app { font-family: var(--eco-font-body); font-size: var(--eco-app-fs, 14px); line-height: var(--eco-app-lh, 1.45); color: var(--eco-text-primary); text-align: left; }
.eco-app :is(h1, h2, h3, h4, h5, p, ul, ol, figure) { margin: 0; padding: 0; }
.eco-app :is(ul, ol) { list-style: none; }
.eco-app :is(h1, h2, h3, h4, h5) { font-family: var(--eco-font-display); font-weight: var(--eco-font-display--weight, 600); color: var(--eco-text-primary); text-wrap: balance; }
.eco-app svg { display: block; flex: none; }
.eco-app--canvas { padding: var(--eco-app-canvas-pad, 16px); border-radius: var(--eco-app-canvas-r, 20px); background: var(--eco-app-canvas); }
/* — chart-state — */
.eco-chart__sk { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; padding: 0 4px; }
.eco-chart__sk > .eco-skeleton { width: min(var(--eco-viz-bar-max), 6%); }
.eco-chart__sk--rows { flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; padding: 0; }
.eco-chart__sk--rows > .eco-skeleton { width: var(--v); }
.eco-chart__msg { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; }
.eco-chart__msg > .eco-chart__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--eco-viz-track); color: var(--eco-text-tertiary); }
.eco-chart__msg > .eco-chart__ic > svg { width: 20px; height: 20px; }
.eco-chart__msg > p { margin: 0; max-width: 32ch; color: var(--eco-text-secondary); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-chart__msg > .eco-btn { margin-top: 4px; }
.eco-chart[data-state="empty"] .eco-chart__gl:not(.is-base), .eco-chart[data-state="error"] .eco-chart__gl:not(.is-base) { opacity: .5; }
.eco-chart[data-state="refresh"] :is(.eco-chart__fig, .eco-chart__rows, .eco-chart__share, .eco-chart__keys, .eco-chart__meter, .eco-chart__spark) { opacity: .5; transition: opacity var(--eco-duration-base) var(--eco-ease-standard); }
@media (prefers-reduced-motion: reduce) { .eco-chart[data-state="refresh"] * { transition: none; } }
/* — stepper — */
.eco-stepper { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.eco-stepper > li { position: relative; flex: 1 1 0; display: grid; justify-items: start; gap: 10px; min-width: 0; padding-right: 12px; counter-increment: st; }
.eco-stepper > li::after { content: ""; position: absolute; top: 15px; left: 44px; right: 12px; height: 2px; border-radius: 1px; background: var(--eco-bg-tertiary); }
.eco-stepper > li:last-child::after { display: none; }
.eco-stepper > li.is-done::after { background: var(--eco-bg-brand-solid); }
.eco-stepper__dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ic-tile, var(--eco-bg-secondary)); color: var(--eco-text-tertiary); font: 600 var(--eco-text-sm)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-stepper__dot::before { content: counter(st); }
.eco-stepper__dot svg { width: 16px; height: 16px; }
.is-done > .eco-stepper__dot { background: var(--eco-bg-brand-solid); color: var(--eco-text-primary_on-brand); }
.is-done > .eco-stepper__dot::before { content: none; }
.is-current > .eco-stepper__dot { background: var(--eco-bg-brand-primary); color: var(--eco-text-brand-secondary); }
.eco-stepper__t { font: 600 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-stepper__t small { display: block; font: 400 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); }
li:not(.is-done, .is-current) .eco-stepper__t { color: var(--eco-text-tertiary); }
@media (max-width: 640px) {
  .eco-stepper > li .eco-stepper__t small { display: none; }
  .eco-stepper > li:not(.is-current) .eco-stepper__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .eco-stepper > li::after { left: 40px; right: 4px; }
  .eco-stepper > li { padding-right: 4px; }
  .eco-stepper > li.is-current { flex-grow: 2.4; }
}
/* — auth — */
.eco-auth { position: relative; display: grid; width: var(--eco-auth-w, 100%); height: var(--eco-auth-h, auto); min-height: var(--eco-auth-minh, 100vh); min-height: var(--eco-auth-minh, 100dvh); overflow: hidden; zoom: var(--eco-auth-zoom, 1); container: eco-auth / inline-size; background: var(--eco-bg-primary); color: var(--eco-text-primary); font: 400 15px/1.5 var(--eco-font-body); }
.eco-auth h1, .eco-auth h2 { margin: 0; font: 500 40px/1.1 var(--eco-font-display); letter-spacing: -.04em; color: inherit; text-wrap: balance; }
.eco-auth p { margin: 0; }
.eco-auth__logo { display: block; width: 156px; height: 40px; }
.eco-auth__mark { display: block; width: 40px; height: 40px; }
.eco-auth__form { display: grid; gap: 20px; width: 100%; max-width: 400px; }
.eco-auth__head { display: grid; gap: 10px; }
.eco-auth__head p { color: var(--eco-text-tertiary); font-size: 16px; }
.eco-auth__or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--eco-text-tertiary); }
.eco-auth__or::before, .eco-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--eco-border-tertiary); }
.eco-auth__alt { font-size: 14px; text-align: center; color: var(--eco-text-tertiary); }
.eco-auth__alt a, .eco-auth__terms a { color: var(--eco-text-brand-secondary); text-decoration: none; font-weight: 500; }
.eco-auth__terms { font-size: 12.5px; line-height: 1.5; color: var(--eco-text-tertiary); }
.eco-auth__step[hidden] { display: none; }
.eco-auth__step { display: grid; gap: 20px; }
.eco-auth__top { position: absolute; inset: 32px 40px auto; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.eco-auth__foot { position: absolute; inset: auto 40px 28px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--eco-text-tertiary); z-index: 2; }
.eco-auth__foot span { display: flex; gap: 20px; }
.eco-auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eco-auth--a { place-items: center; background: var(--eco-bg-secondary); }
.eco-auth--a .eco-auth__card { display: grid; gap: 28px; width: min(480px, 100%); padding: 48px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary); }
.eco-auth--b { place-items: center; }
.eco-auth--b.eco-aurora { position: relative; }
.eco-auth--b .eco-auth__card { position: relative; z-index: 1; display: grid; gap: 28px; width: min(480px, 100%); padding: 48px; border-radius: var(--eco-radius-4xl); background: color-mix(in srgb, var(--eco-color-white) 82%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--eco-color-black); }
.eco-auth--b .eco-auth__hero { position: absolute; left: 40px; bottom: 96px; z-index: 1; max-width: 360px; font: 500 15px/1.5 var(--eco-font-body); color: var(--eco-color-black); }
.eco-auth--split { grid-template-columns: minmax(0, 1fr) 720px; }
.eco-auth--split > .eco-auth__pane { display: grid; place-items: center; padding: 120px 80px; }
.eco-auth__panel { position: relative; display: grid; align-content: space-between; margin: 16px; padding: 48px; border-radius: var(--eco-radius-4xl); overflow: hidden; }
.eco-auth--c .eco-auth__panel { color: var(--eco-text-primary); }
.eco-auth--c .eco-auth__panel > :not(.eco-aurora__bg) { position: relative; z-index: 1; }
.eco-auth--c .eco-auth__panel .eco-auth__sub { color: var(--eco-text-tertiary); }
.eco-auth--c .eco-auth__panel .eco-auth__fam { color: var(--eco-text-tertiary); }
.eco-auth--c .eco-auth__ben i { background: color-mix(in srgb, var(--eco-fg-brand-primary) 14%, transparent); color: var(--eco-fg-brand-primary); }
.eco-auth__panel h2 { font-size: 64px; line-height: 1.02; }
.eco-auth__panel .eco-auth__sub { max-width: 480px; margin-top: 20px; font-size: 18px; color: color-mix(in srgb, var(--eco-color-white) 72%, transparent); }
.eco-auth__ben { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; font-size: 16px; }
.eco-auth__ben li { display: flex; align-items: center; gap: 14px; }
.eco-auth__ben i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--eco-color-white) 16%, transparent); flex: none; }
.eco-auth__ben svg { width: 20px; height: 20px; }
.eco-auth__fam { font: 500 12px/1.4 var(--eco-font-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--eco-color-white) 64%, transparent); }
.eco-auth--d .eco-auth__panel { background: var(--eco-color-black); color: var(--eco-color-white); }
.eco-auth--d .eco-auth__panel > :not(.eco-aurora__bg) { position: relative; z-index: 1; }
.eco-auth__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.eco-auth__nums b { display: block; font: 500 48px/1 var(--eco-font-display); letter-spacing: -.04em; color: var(--eco-fg-brand-primary); }
.eco-auth__nums span { display: block; margin-top: 8px; font-size: 14px; color: color-mix(in srgb, var(--eco-color-white) 64%, transparent); }
.eco-auth--e { grid-template-columns: 400px minmax(0, 1fr); }
.eco-auth--e .eco-auth__rail { display: grid; align-content: space-between; margin: 16px; padding: 40px 32px; border-radius: var(--eco-radius-4xl); }
.eco-auth--e .eco-auth__rail .eco-auth__head p { color: color-mix(in srgb, var(--eco-color-white) 64%, transparent); }
.eco-auth--e .eco-auth__pane { display: grid; place-items: center; padding: 80px; }
.eco-auth__form--w { max-width: 520px; gap: 40px; }
.eco-auth--e .eco-auth__rail h2 { font-size: 36px; }
.eco-auth--f { place-items: center; }
.eco-auth--f .eco-auth__form { max-width: 560px; gap: 28px; }
.eco-auth--f h1 { font-size: 72px; line-height: 1; }
.eco-auth__kbd { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--eco-text-tertiary); }
.eco-auth--g .eco-auth__bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 16px; }
.eco-auth__tile { display: grid; align-content: space-between; gap: 16px; padding: 28px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-auth__tile b { font: 500 24px/1.15 var(--eco-font-display); letter-spacing: -.04em; }
.eco-auth__tile span { font-size: 14px; color: var(--eco-text-tertiary); }
.eco-auth__tile--brand { background: var(--eco-bg-brand-solid); color: var(--eco-color-white); }
.eco-auth__tile--brand span { color: color-mix(in srgb, var(--eco-color-white) 72%, transparent); }
.eco-auth__tile--ink { background: var(--eco-color-black); color: var(--eco-color-white); }
.eco-auth__tile--ink span { color: color-mix(in srgb, var(--eco-color-white) 64%, transparent); }
.eco-auth__tile.eco-auth__tile--lime { background: var(--eco-bg-brand-solid); color: var(--eco-text-primary_on-brand); }
.eco-auth__tile--lime span { color: color-mix(in srgb, var(--eco-color-black) 64%, transparent); }
.eco-auth__tile--wide { grid-column: span 2; }
.eco-auth__ti { width: 32px; height: 32px; }
.eco-auth--h8 { place-items: center; background: var(--eco-bg-secondary); }
.eco-auth--h8 .eco-auth__card { display: grid; gap: 28px; width: min(640px, 100%); padding: 48px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary); }
.eco-auth__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eco-auth--i { place-items: center; background: var(--eco-bg-secondary); }
.eco-auth--i .eco-auth__card { display: grid; grid-template-columns: 400px 1px 300px; gap: 48px; padding: 56px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary); }
.eco-auth__vr { background: var(--eco-border-tertiary); }
.eco-auth__qr { display: grid; align-content: center; justify-items: center; gap: 20px; text-align: center; }
.eco-auth__qr svg { width: 220px; height: 220px; padding: 16px; border-radius: var(--eco-radius-3xl); background: var(--eco-color-white); color: var(--eco-color-black); }
.eco-auth__qr p { font-size: 14px; color: var(--eco-text-tertiary); }
.eco-auth__qr b { font: 500 20px/1.2 var(--eco-font-display); letter-spacing: -.04em; }
.eco-auth--j { grid-template-columns: repeat(3, 360px); justify-content: center; align-content: center; gap: 48px; background: var(--eco-bg-secondary); }
.eco-auth__ph { position: relative; display: grid; align-content: space-between; height: 760px; padding: 72px 24px 40px; border-radius: 52px; background: var(--eco-bg-primary); overflow: hidden; }
.eco-auth__ph::before { content: ""; position: absolute; left: 50%; top: 14px; width: 110px; height: 30px; translate: -50% 0; border-radius: 20px; background: var(--eco-color-black); }
.eco-auth__ph h1 { font-size: 32px; }
.eco-auth__ph .eco-auth__form { max-width: none; }
.eco-auth--l .eco-auth__panel > *, .eco-auth--m > .eco-glass { position: relative; z-index: 1; }
.eco-auth__panel .eco-auth__sub--cv, .eco-auth__panel .eco-auth__fam--cv { color: inherit; opacity: .72; }
.eco-auth__gl { display: grid; gap: 4px; padding: 24px 28px; }
.eco-auth__gl small { font: 500 12px/1.4 var(--eco-font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.eco-auth__gl b { font: 500 24px/1.2 var(--eco-font-display); letter-spacing: -.04em; }
.eco-auth__gl span { font-size: 14px; opacity: .72; }
.eco-auth--m { place-items: center; }
.eco-auth__pad { width: min(480px, 100%); max-width: none; padding: 48px; }
.eco-auth--k { place-items: center; background: var(--eco-bg-secondary); }
.eco-auth--k .eco-auth__wrap { display: grid; gap: 32px; width: min(720px, 100%); }
.eco-auth--k .eco-auth__card { display: grid; gap: 28px; padding: 48px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary); }
.eco-auth__nav { display: flex; justify-content: space-between; gap: 12px; }
.eco-auth__cap { margin-top: 16px; font: 500 12px/1.4 var(--eco-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--eco-text-tertiary); text-align: center; }
@media (max-width: 1100px) {
  .eco-auth--split { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
  .eco-auth--e { grid-template-columns: 320px minmax(0, 1fr); }
  .eco-auth--j { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); gap: 24px; padding: 40px 24px; }
}
@media (max-width: 860px) { .eco-auth--split, .eco-auth--e { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .eco-auth { grid-template-rows: auto minmax(0, 1fr) auto; place-items: stretch; align-content: stretch; gap: 24px; padding: 16px; }
  .eco-auth:is(.eco-auth--split, .eco-auth--e) { grid-template-rows: auto; align-content: start; gap: 0; padding: 0; }
  .eco-auth--j { grid-template-rows: auto; padding: 0; }
}
@container eco-auth (max-width: 1100px) {
  .eco-auth--split > .eco-auth__pane { padding: 112px 48px; }
  .eco-auth__panel h2 { font-size: 48px; }
  .eco-auth--e .eco-auth__pane { padding: 96px 40px; }
}
@container eco-auth (max-width: 860px) {
  .eco-auth--split > .eco-auth__panel, .eco-auth--g .eco-auth__bento { display: none; }
  .eco-auth--e .eco-auth__rail { margin: 12px 12px 0; padding: 24px; gap: 16px; }
  .eco-auth--e .eco-auth__rail h2 { font-size: 28px; }
  .eco-auth--i .eco-auth__card { grid-template-columns: minmax(0, 1fr); width: min(480px, 100%); padding: 48px; }
  .eco-auth--i :is(.eco-auth__vr, .eco-auth__qr) { display: none; }
  .eco-auth--j > .eco-auth__ph:not(:first-child) { display: none; }
}
@container eco-auth (max-width: 560px) {
  .eco-auth :is(.eco-auth__top, .eco-auth__foot) { position: static; inset: auto; }
  .eco-auth__foot { flex-wrap: wrap; }
  .eco-auth :is(.eco-auth--split, .eco-auth--e) > .eco-auth__pane, .eco-auth:is(.eco-auth--split, .eco-auth--e) > .eco-auth__pane { place-items: start stretch; padding: 16px; }
  .eco-auth:is(.eco-auth--split, .eco-auth--e) .eco-auth__top { margin-bottom: 24px; }
  .eco-auth--e .eco-auth__rail { margin: 0; border-radius: 0; padding: 20px 16px; }
  .eco-auth--e .eco-auth__rail > :not(.eco-auth__head):not(.eco-cover__bg) { display: none; }
  .eco-auth h1, .eco-auth h2 { font-size: 30px; }
  .eco-auth--f h1 { font-size: 40px; }
  .eco-auth :is(.eco-auth__card, .eco-auth__pad) { align-self: center; width: 100%; padding: 24px 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .eco-auth--b .eco-auth__card { padding: 24px 20px; border-radius: var(--eco-radius-3xl); background: color-mix(in srgb, var(--eco-color-white) 82%, transparent); }
  .eco-auth--b .eco-auth__hero { display: none; }
  .eco-auth :is(.eco-auth__two, .eco-auth__roles) { grid-template-columns: minmax(0, 1fr); }
  .eco-auth .eco-stepper { overflow-x: auto; }
  .eco-auth__ph { height: auto; min-height: 100dvh; padding: 24px 16px; border-radius: 0; }
  .eco-auth__ph::before { display: none; }
}
/* — board — */
.eco-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; min-width: 0; min-height: 0; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; align-items: stretch; scrollbar-width: thin; scrollbar-color: var(--eco-fg-quaternary) transparent; }
.eco-board[hidden] { display: none; }
.eco-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-track); --board-card: color-mix(in srgb, var(--eco-bg-primary) var(--eco-app-k), var(--eco-bg-tertiary)); --btn-t-bg: var(--btn-t-bg-surface); --btn-t-bg-hover: var(--btn-t-bg-surface-hover); }
.eco-board__head { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 4px 4px; }
.eco-board__head > h5 { margin: 0; overflow: hidden; font: 600 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.eco-board__n { flex: none; min-width: 22px; padding: 0 6px; border-radius: var(--eco-radius-full); background: var(--board-card, var(--eco-bg-tertiary)); font: 500 11px/18px var(--eco-font-body); color: var(--eco-text-secondary); text-align: center; font-variant-numeric: tabular-nums; }
.eco-board__list { display: grid; align-content: start; gap: 8px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.eco-board__card { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--eco-radius-2xl); background: var(--board-card, var(--eco-bg-primary)); box-shadow: var(--eco-app-card-shadow); cursor: pointer; outline: var(--eco-focus-w) solid transparent; }
.eco-board__card:hover { background: color-mix(in srgb, var(--eco-bg-primary_hover) var(--eco-app-k), var(--eco-bg-quaternary)); }
.eco-board__card:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-board__who { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.eco-board__who b { display: block; font: 500 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-board__who small { display: block; font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-board__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-board__meta > span { white-space: nowrap; }
.eco-board__foot { margin: 0; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-board__add { justify-content: flex-start; width: 100%; }
.eco-board__col.is-muted .eco-board__head > h5 { color: var(--eco-text-tertiary); }
.eco-board__col.is-muted .eco-board__card { background: color-mix(in srgb, var(--board-card, var(--eco-bg-primary)) 60%, transparent); box-shadow: none; }
.eco-board__col.is-muted .eco-board__who b { color: var(--eco-text-secondary); }
.eco-board__amt { display: flex; align-items: baseline; gap: 4px; margin: 0; font: 600 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-board__amt > small { font: 500 var(--eco-text-xs)/1 var(--eco-font-body); color: var(--eco-text-tertiary); }
a.eco-board__card { color: inherit; text-decoration: none; }
/* — iconbtn — */
    .eco-iconbtn { display: inline-grid; place-items: center; flex: none; position: relative; width: 40px; height: 40px; border-radius: var(--eco-radius-full); background: var(--eco-iconbtn-bg, var(--eco-app-well)); color: var(--eco-fg-secondary); }
    .eco-iconbtn svg { width: 20px; height: 20px; }
    .eco-iconbtn--sm { width: 32px; height: 32px; }
    .eco-iconbtn--sm svg { width: 16px; height: 16px; }
    .eco-iconbtn--ghost { background: transparent; }
    .eco-iconbtn:hover { background: var(--eco-iconbtn-hover, var(--eco-bg-tertiary)); color: var(--eco-text-primary); }
    .eco-iconbtn__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--eco-fg-error-primary); box-shadow: 0 0 0 2px var(--eco-iconbtn-bg, var(--eco-app-well)); }
    .eco-monthbar { --eco-iconbtn-bg: var(--eco-app-card); --eco-iconbtn-hover: var(--eco-app-card); display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--eco-radius-full); background: var(--eco-tile-bg, var(--eco-app-well)); }
    .eco-monthbar > b { min-width: 124px; text-align: center; font: 500 14px/1 var(--eco-font-body); }
.eco-iconbtn--lg { width: 48px; height: 48px; }
.eco-iconbtn--lg svg { width: 22px; height: 22px; }
.eco-iconbtn--lg .eco-iconbtn__dot { top: 9px; right: 10px; }
/* — journal — */
.eco-journal { display: grid; gap: 14px; min-width: 0; }
.eco-journal__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.eco-journal__scroll { min-width: 0; overflow-x: auto; border-radius: var(--eco-radius-2xl); background: var(--eco-app-card); scrollbar-width: thin; }
.eco-journal__t { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.eco-journal__t th, .eco-journal__t td { font-weight: 500; padding: 0; text-align: center; vertical-align: middle; white-space: nowrap; }
.eco-journal__t thead th { height: 52px; padding: 6px 2px; background: var(--eco-app-well); font-weight: 500; }
.eco-journal__t thead th:first-child { border-radius: var(--eco-radius-lg) 0 0 var(--eco-radius-lg); }
.eco-journal__t thead th:last-child { border-radius: 0 var(--eco-radius-lg) var(--eco-radius-lg) 0; }
.eco-journal__d { display: grid; justify-items: center; gap: 2px; }
.eco-journal__d b { font: 500 13px/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-journal__d small { font-size: 11.5px; line-height: 14px; color: var(--eco-text-tertiary); }
.eco-journal__d i { padding: 1px 5px; border-radius: var(--eco-radius-full); background: var(--eco-bg-warning-primary); font: 500 10px/12px var(--eco-font-body); font-style: normal; color: color-mix(in oklab, var(--eco-fg-warning-primary), var(--eco-text-primary) 45%); }
.eco-journal__t .is-today .eco-journal__d small { color: var(--eco-text-brand-secondary); }
.eco-journal__t .is-today { background: var(--eco-bg-brand-primary); }
.eco-journal__t thead .is-today { background: var(--eco-bg-brand-secondary); }
.eco-journal__t .is-off { background: color-mix(in srgb, var(--eco-app-well) 55%, transparent); }
.eco-journal__t tbody td { height: 52px; padding: 4px 3px; }
.eco-journal__t tbody tr + tr td { box-shadow: inset 0 1px 0 var(--eco-app-well); }
.eco-journal__t .eco-journal__who { position: sticky; left: 0; z-index: 1; min-width: 212px; padding: 0 12px 0 10px; text-align: left; background: var(--eco-app-card); }
.eco-journal__t thead .eco-journal__who { background: var(--eco-app-well); z-index: 2; font: 500 12.5px/1 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-journal__p { display: flex; align-items: center; gap: 10px; }
.eco-journal__p b { display: block; font: 500 14px/18px var(--eco-font-body); white-space: normal; }
.eco-journal__p small { display: block; font-size: 12px; font-weight: 400; line-height: 15px; color: var(--eco-text-tertiary); }
.eco-journal__avg { min-width: 84px; padding: 0 12px !important; }
@container lms-page (max-width: 520px) { .eco-journal__t .eco-journal__who { min-width: 132px; padding: 0 8px; } .eco-journal__p .eco-avatar { display: none; } .eco-journal__p b { font-size: 13px; line-height: 16px; } }
.eco-journal__avg > span { display: inline-flex; align-items: center; gap: 8px; }
.eco-journal__avg b { font: 500 13px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-journal__avg i { font-style: normal; color: var(--eco-text-tertiary); }
.eco-journal__t tfoot :is(th, td) { height: 44px; padding: 0 3px; background: var(--eco-app-well); font: 500 13px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; color: var(--eco-text-secondary); }
.eco-journal__t tfoot th.eco-journal__who { background: var(--eco-app-well); font: 500 13px/1 var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-journal__t tfoot :is(th, td):first-child { border-radius: var(--eco-radius-lg) 0 0 var(--eco-radius-lg); }
.eco-journal__t tfoot :is(th, td):last-child { border-radius: 0 var(--eco-radius-lg) var(--eco-radius-lg) 0; }
.eco-journal__t tfoot .is-today { background: var(--eco-bg-brand-secondary); color: var(--eco-text-primary); }
.eco-journal__t tfoot .is-none { color: var(--eco-text-quaternary); }
.eco-journal__cell { position: relative; display: inline-grid; place-items: center; width: 44px; height: 40px; padding: 0; border: 0; border-radius: var(--eco-radius-lg); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.eco-journal__cell:hover { background: var(--eco-app-well); }
.eco-journal__cell { --eco-grade-w: 38px; }
.eco-journal__cell--empty::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--eco-app-well-2); }
.eco-journal__cell[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--eco-brand-button); }
.eco-journal .is-today { --eco-grade-bg: var(--eco-app-card); }
/* — schedule — */
.eco-week { display: grid; grid-template-columns: 56px repeat(6, minmax(112px, 1fr)); gap: 6px; min-width: 760px; }
.eco-week__h { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--eco-radius-lg); background: var(--eco-app-well); }
.eco-week__h b { font: 500 13px/16px var(--eco-font-body); }
.eco-week__h small { font: 500 12px/14px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-week__h.is-today { background: var(--eco-bg-brand-solid); }
.eco-week__h.is-today b, .eco-week__h.is-today small { color: var(--eco-color-white); }
.eco-week__t { display: grid; align-content: center; justify-items: end; padding-right: 4px; font: 500 12px/15px var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-week__t small { font-size: 11px; color: var(--eco-text-quaternary); }
.eco-week__lesson { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 68px; padding: 10px 12px; border-radius: var(--eco-radius-lg); background: var(--eco-app-well); }
.eco-week__lesson b { display: flex; align-items: center; gap: 6px; font: 500 13px/17px var(--eco-font-body); }
.eco-week__lesson b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--eco-fg-quaternary)); }
.eco-week__lesson small { font-size: 12px; line-height: 15px; color: var(--eco-text-tertiary); }
.eco-week__lesson--now { background: var(--eco-bg-brand-primary); }
.eco-week__lesson--now small { color: var(--eco-text-secondary); }
.eco-week__lesson--sub { background: var(--eco-bg-warning-primary); }
.eco-week__lesson--empty { background: transparent; box-shadow: none; }
.eco-week__lesson--empty::after { content: "—"; color: var(--eco-text-quaternary); justify-self: center; align-self: center; }
/* — lesson — */
.eco-lesson__syl { display: grid; align-content: start; gap: 6px; min-width: 0; }
.eco-lesson__mod { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--eco-radius-lg); background: var(--eco-app-well); font: 500 14px/18px var(--eco-font-body); }
.eco-lesson__mod > span { flex: 1; min-width: 0; }
.eco-lesson__mod small { font: 500 12px/1 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-lesson__mod svg { width: 16px; height: 16px; color: var(--eco-fg-tertiary); }
.eco-lesson__topic { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--eco-radius-lg); background: var(--eco-lesson-topic-bg, transparent); }
.eco-lesson__topic b { display: block; font: 500 14px/18px var(--eco-font-body); }
.eco-lesson__topic small { display: block; font-size: 12px; line-height: 16px; color: var(--eco-text-tertiary); }
.eco-lesson__state { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eco-app-well); color: var(--eco-fg-tertiary); }
.eco-lesson__state svg { width: 14px; height: 14px; }
.eco-lesson__topic.is-done .eco-lesson__state { background: var(--eco-bg-success-primary); color: var(--eco-fg-success-primary); }
.eco-lesson__topic.is-master .eco-lesson__state { background: var(--eco-bg-success-solid); color: var(--eco-color-white); }
.eco-lesson__topic.is-now { background: var(--eco-bg-brand-primary); }
.eco-lesson__topic.is-now .eco-lesson__state { background: var(--eco-bg-brand-solid); color: var(--eco-text-primary_on-brand); }
.eco-lesson__topic.is-lock b { color: var(--eco-text-tertiary); }
.eco-lesson__pct { font: 500 12px/1 var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 264px; min-width: 0; border-radius: 24px; overflow: hidden; background: var(--eco-app-card); }
.eco-lesson__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px; background: var(--eco-app-card); box-shadow: inset 0 -1px 0 var(--eco-app-well); }
.eco-lesson__bar > div { flex: 1; min-width: 0; display: grid; }
.eco-lesson__bar b { font: 500 15px/20px var(--eco-font-body); }
.eco-lesson__bar small { font-size: 12px; color: var(--eco-text-tertiary); }
.eco-lesson__bar .eco-progress { width: 140px; }
.eco-lesson__main { display: grid; align-content: start; gap: 18px; min-width: 0; padding: 24px 32px 28px; }
.eco-lesson__rail { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 18px 14px; background: var(--eco-app-canvas); }
.eco-lesson__hero { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-brand-primary); }
.eco-lesson__hero { --eco-eyebrow-ink: var(--eco-text-brand-secondary); }
.eco-lesson__hero h3 { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
.eco-lesson__ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 4px; }
@container lms-page (max-width: 700px) { .eco-lesson { grid-template-columns: minmax(0, 1fr); } .eco-lesson__main { padding: 18px 16px 20px; } .eco-lesson__bar .eco-progress { display: none; } }
@container lms-page (max-width: 860px) { .eco-lesson__main { padding: 20px; } }
.eco-lesson__hw { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--eco-radius-2xl); background: var(--eco-app-well); color: inherit; text-decoration: none; }
.eco-lesson__hw .eco-featured-icon { --fi-s: 40px; --fi-tile-bg: var(--eco-app-card); }
.eco-lesson__hw-b { display: grid; gap: 4px; min-width: 0; }
.eco-lesson__hw-b b { font: 500 14.5px/19px var(--eco-font-body); }
.eco-lesson__hw-r { display: grid; justify-items: end; gap: 6px; }
.eco-lesson__hw-r small { font-size: 12px; color: var(--eco-text-tertiary); }
@container lms-page (max-width: 560px) { .eco-lesson__hw { grid-template-columns: 40px minmax(0, 1fr); } .eco-lesson__hw-r { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } }
/* — rail — */
.eco-rail { display: grid; align-content: start; justify-items: center; gap: 12px; width: 80px; padding: 16px 0; background: var(--eco-bg-primary); border-radius: 20px; }
.eco-rail .eco-navbar__item { min-width: 0; width: 72px; }
.eco-rail .eco-fab { margin-bottom: 8px; }
/* — navbar — */
.eco-navbar { display: flex; justify-content: space-around; gap: 4px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); background: var(--eco-bg-secondary); }
.eco-navbar__item { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 64px; padding: 0 4px; border: 0; background: none; color: var(--eco-text-tertiary); font: 500 12px/16px var(--eco-font-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.eco-navbar__ico { position: relative; display: grid; place-items: center; width: 56px; height: 32px; border-radius: var(--eco-radius-full); transition: background-color var(--eco-duration-fast) linear; }
.eco-navbar__ico svg { width: 22px; height: 22px; }
.eco-navbar__item:hover .eco-navbar__ico { background: var(--btn-t-bg-hover); }
.eco-navbar__item:focus-visible { outline: none; box-shadow: none; }
.eco-navbar__item:focus-visible .eco-navbar__ico { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-navbar__item[aria-current="page"] { color: var(--eco-text-brand-primary); font-weight: 600; }
.eco-navbar__item[aria-current="page"] .eco-navbar__ico { background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-navbar__badge { position: absolute; top: -2px; left: 32px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--eco-bg-error-solid); color: var(--eco-text-white); font: 600 11px/18px var(--eco-font-body); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .eco-navbar__ico { transition: none; }
}
/* — fab — */
.eco-fab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: var(--btn-p-bg); color: var(--btn-p-fg); font: 500 var(--eco-text-md)/1 var(--eco-font-body); cursor: pointer; box-shadow: none; transition: background-color var(--eco-duration-fast) linear, width var(--eco-duration-base) var(--eco-ease-standard); }
.eco-fab svg { width: 22px; height: 22px; flex: none; }
.eco-fab:hover { background: var(--btn-p-bg-hover); }
.eco-fab:active { transform: scale(.975); }
.eco-fab:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-fab--ext { width: auto; padding: 0 var(--eco-spacing-2xl) 0 var(--eco-spacing-xl); }
.eco-fab--sm { width: 40px; height: 40px; border-radius: var(--eco-radius-full); }
.eco-fab--sm svg { width: 20px; height: 20px; }
.eco-fab--tonal { background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-fab--tonal:hover { background: color-mix(in srgb, var(--eco-bg-brand-primary) 88%, var(--eco-fg-brand-primary)); }
.eco-fab--lg { width: 56px; height: 56px; }
.eco-fab--lg svg { width: 24px; height: 24px; }
.eco-fab--ext.eco-fab--lg { width: auto; }
@media (prefers-reduced-motion: reduce) {
  .eco-fab { transition: none; }
}
/* — calendar — */
.eco-cal { --cell: 40px; display: inline-grid; gap: 12px; padding: var(--eco-cal-pad, 0); color: var(--eco-text-primary); font-family: var(--eco-font-body); }
.eco-cal__months { display: flex; gap: 28px; }
.eco-cal__month { display: grid; gap: 8px; width: calc(var(--cell) * 7); }
.eco-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.eco-cal__title { flex: 1; text-align: center; font: 600 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-cal__nav { visibility: hidden; }
.eco-cal__month:first-child .eco-cal__nav--next { visibility: var(--eco-cal-next-first, hidden); }
.eco-cal__month:first-child .eco-cal__nav--prev, .eco-cal__month:last-child .eco-cal__nav--next { visibility: visible; }
.eco-cal__grid { display: grid; grid-template-columns: repeat(7, var(--cell)); row-gap: 2px; }
.eco-cal__grid > [role="row"] { display: contents; }
.eco-cal__wd { display: grid; place-items: center; height: 32px; font: 500 var(--eco-text-xs)/1 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-cal__cell { position: relative; display: grid; place-items: center; height: var(--cell); }
.eco-cal__day { position: relative; display: grid; place-items: center; width: var(--cell); height: var(--cell); padding: 0; border: 0; border-radius: var(--eco-radius-full); background: none; color: inherit; font: 500 var(--eco-text-sm)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-cal__day:hover { background: var(--eco-bg-secondary); }
.eco-cal__day:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 1px; box-shadow: 0 0 0 1px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(1px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); z-index: 1; }
.eco-cal__day.is-out { color: var(--eco-text-quaternary); }
.eco-cal__day:disabled { color: var(--eco-text-disabled); cursor: not-allowed; background: none; }
.eco-cal__day.is-today { background: var(--ic-tile, var(--eco-bg-secondary)); font-weight: 600; }
.eco-cal__day.is-event::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--eco-bg-brand-solid); }
.eco-cal__cell.is-mid { background: var(--eco-bg-brand-primary); }
.eco-cal__cell.is-start:not(.is-end) { background: linear-gradient(90deg, transparent 50%, var(--eco-bg-brand-primary) 50%); }
.eco-cal__cell.is-end:not(.is-start) { background: linear-gradient(90deg, var(--eco-bg-brand-primary) 50%, transparent 50%); }
.eco-cal__cell.is-mid:is(:first-child, .is-m1), .eco-cal__cell.is-end:first-child { border-radius: var(--eco-radius-full) 0 0 var(--eco-radius-full); }
.eco-cal__cell.is-mid:is(:last-child, .is-mz), .eco-cal__cell.is-start:last-child { border-radius: 0 var(--eco-radius-full) var(--eco-radius-full) 0; }
.eco-cal__cell.is-mid .eco-cal__day:hover { background: color-mix(in srgb, var(--eco-bg-brand-primary) 70%, var(--eco-bg-brand-solid)); }
.eco-cal__day[aria-selected="true"] { background: var(--eco-bg-brand-solid); color: var(--eco-text-primary_on-brand); }
.eco-cal__day[aria-selected="true"]:hover { background: var(--eco-bg-brand-solid_hover); }
.eco-cal__day[aria-selected="true"].is-event::after { background: currentColor; }
.eco-cal--tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.eco-cal--tiles .eco-cal__wd { height: auto; min-height: 24px; }
.eco-cal--tiles .eco-cal__day { position: static; transition: none; width: auto; height: auto; min-height: 40px; border-radius: var(--eco-cal-radius, var(--eco-radius-lg)); font-size: 13px; cursor: default; }
.eco-cal--tiles .eco-cal__day:not(button):hover { background: none; }
.eco-cal--tiles .eco-cal__day.is-today { background: none; font-weight: 500; box-shadow: 0 0 0 1.5px var(--eco-cal-today, var(--eco-brand-button)); }
.eco-cal--tiles .eco-cal__day.eco-cal__day--tone, .eco-cal--tiles .eco-cal__day.eco-cal__day--tone:not(button):hover { background: var(--eco-cal-tone-bg, var(--eco-cal-tile, var(--eco-bg-secondary))); color: var(--eco-cal-tone-fg, var(--eco-text-secondary)); }
@media (max-width: 420px) {
  .eco-cal { --cell: 38px; }
}
@media (max-width: 340px) {
  .eco-cal { --cell: 34px; }
}
/* — popover — */
@media (prefers-reduced-motion: no-preference) { .eco-popover:not([hidden]) { animation: var(--eco-popover-anim, none); } }
.eco-popover { --ic-tile: var(--eco-bg-secondary); box-sizing: border-box; padding: 16px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-lg); color: var(--eco-text-primary); text-align: left; }
/* — datefield — */
.eco-datefield { --eco-popover-anim: eco-datefield-in var(--eco-duration-base) var(--eco-ease-emphasized); position: relative; }
.eco-datefield > .eco-popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; }
.eco-datefield > .eco-popover[hidden] { display: none; }
@keyframes eco-datefield-in { from { opacity: 0; transform: translateY(-4px); } }
.eco-datefield__trigger { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: var(--eco-field-radius-affix); background: var(--eco-bg-secondary); color: var(--eco-text-primary); font: 400 var(--eco-text-md)/1 var(--eco-font-body); text-align: left; cursor: pointer; }
.eco-datefield__trigger:hover { background: color-mix(in srgb, var(--eco-bg-secondary) 50%, var(--eco-bg-secondary_hover)); }
.eco-datefield__trigger:focus-visible, .eco-datefield__trigger[aria-expanded="true"] { outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-card:not(.eco-card--raised, .eco-card--app) .eco-datefield__trigger { background: var(--eco-bg-primary); }
.eco-datefield__trigger > svg { width: 20px; height: 20px; flex: none; color: var(--eco-fg-quaternary); }
.eco-datefield__value.is-empty { color: var(--eco-text-placeholder); }
.eco-datefield--sm .eco-datefield__trigger { height: 36px; gap: 8px; padding: 0 14px; font-size: var(--eco-text-sm); }
.eco-datefield--sm .eco-datefield__trigger > svg { width: 16px; height: 16px; }
.eco-datefield--end > .eco-popover { left: auto; right: 0; }
.eco-datefield > .eco-daterange { width: max-content; max-width: calc(100vw - 32px); }
@media (max-width: 640px) { .eco-datefield > .eco-daterange { width: min(320px, calc(100vw - 32px)); } }
.eco-daterange { display: grid; grid-template-columns: 148px auto; gap: 0; padding: 0; overflow: hidden; max-width: 100%; }
.eco-daterange .eco-cal { --cell: 34px; }
.eco-daterange__presets { display: grid; align-content: start; gap: 2px; padding: 12px 8px; background: var(--eco-bg-secondary); }
.eco-daterange__preset { display: flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--eco-radius-3xl); background: none; color: var(--eco-text-secondary); font: 500 var(--eco-text-sm)/24px var(--eco-font-body); text-align: left; cursor: pointer; }
.eco-daterange__preset:hover { background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); }
.eco-daterange__preset[aria-pressed="true"] { background: var(--eco-bg-brand-primary); color: var(--eco-text-primary); }
.eco-daterange__preset:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: -2px; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-daterange__main { display: grid; gap: 0; }
.eco-daterange__main { --eco-cal-pad: 16px 20px; }
.eco-daterange__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; }
.eco-daterange__foot output { margin-right: auto; font: 500 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-daterange__foot output small { display: block; font: 400 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); }
@media (max-width: 640px) {
  .eco-daterange { grid-template-columns: minmax(0, 1fr); }
  .eco-daterange__presets { display: flex; overflow-x: auto; padding: 10px; }
  .eco-daterange__preset { flex: none; }
  .eco-daterange__main { --eco-cal-pad: 12px; }
  .eco-daterange .eco-cal__month + .eco-cal__month { display: none; }
  .eco-daterange { --eco-cal-next-first: visible; }
}
/* — row — */
.eco-rows { display: grid; gap: 6px; }
.eco-rows > * { min-width: 0; }
.eco-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 10px 12px; border-radius: var(--eco-row-radius, var(--eco-radius-xl)); background: var(--eco-row-bg, var(--eco-bg-secondary)); opacity: var(--eco-row-opacity, 1); color: inherit; text-decoration: none; }
.eco-row__b { flex: 1 1 150px; min-width: 0; display: grid; gap: 2px; }
.eco-row__b b { font: 500 var(--eco-text-sm)/19px var(--eco-font-body); }
.eco-row__b small { font-size: 12.5px; line-height: 17px; color: var(--eco-text-tertiary); }
.eco-row__m { display: flex; align-items: center; gap: 8px; flex: none; }
.eco-row--link { flex-wrap: nowrap; }
.eco-row--link:hover { background: var(--eco-row-hover, var(--eco-bg-tertiary)); }
.eco-row--link:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-rows__t { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.eco-rows__t > span { display: grid; align-content: center; justify-items: end; font: 500 13px/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-rows__t > span small { font-size: 11px; color: var(--eco-text-tertiary); }
.eco-rows__t.is-past { --eco-row-opacity: .62; }
.eco-rows__t.is-now { --eco-row-bg: var(--eco-bg-brand-primary); }
/* — reaction — */
.eco-reaction { --reaction-bg: var(--eco-app-well, var(--eco-bg-secondary)); display: inline-flex; align-items: center; gap: 4px; flex: none; height: 26px; margin: 0; padding: 0 9px; border: 0; border-radius: var(--eco-radius-full); background: var(--reaction-bg); color: var(--eco-text-secondary); font: 500 var(--eco-text-xs)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-reaction > svg { flex: none; width: 14px; height: 14px; color: var(--eco-fg-tertiary); }
.eco-reaction:hover { background: color-mix(in srgb, var(--reaction-bg) 70%, var(--eco-bg-quaternary)); }
.eco-reaction:is(.is-mine, [aria-pressed="true"]) { background: var(--eco-bg-brand-primary); color: var(--eco-text-brand-secondary); }
.eco-reaction:is(.is-mine, [aria-pressed="true"]) > svg { color: var(--eco-fg-brand-primary); }
.eco-reaction--add { padding: 0 6px; }
.eco-reaction:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
@media (prefers-reduced-motion: reduce) { .eco-reaction { transition: none; } }
/* — wave — */
.eco-wave { --wave-on: var(--eco-fg-brand-primary); --wave-off: var(--eco-fg-quaternary); display: inline-flex; align-items: center; gap: 2px; flex: none; height: var(--wave-h, 28px); }
.eco-wave > i { flex: none; width: 3px; height: calc(var(--h, .5) * 100%); min-height: 3px; border-radius: var(--eco-radius-full); background: var(--wave-off); }
.eco-wave > i.is-on { background: var(--wave-on); }
.eco-wave--fill { justify-content: space-between; min-width: 0; overflow: hidden; }
/* — chat-shell — */
.eco-chat { --chat-rail-w: 72px; --chat-list-w: 340px; --chat-aside-w: 340px; --chat-col-w: 720px; box-sizing: border-box; display: grid; grid-template-columns: var(--chat-rail-w) var(--chat-list-w) minmax(0, 1fr); column-gap: var(--eco-app-gap, 16px); width: 100%; height: 100%; min-height: 0; padding: 8px 8px 8px 0; overflow: hidden; border-radius: var(--eco-chat-radius, var(--eco-radius-xl)); background: var(--eco-app-canvas); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); letter-spacing: 0; text-align: start; }
.eco-chat *, .eco-chat *::before, .eco-chat *::after { box-sizing: border-box; }
.eco-chat--aside { grid-template-columns: var(--chat-rail-w) var(--chat-list-w) minmax(0, 1fr) var(--chat-aside-w); }
.eco-chat__rail { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -8px 0; padding: 14px 0; background: var(--eco-rail-bg, var(--eco-color-black)); color: var(--eco-rail-ink, var(--eco-color-white)); }
.eco-chat__rail > .eco-chat__spacer { flex: 1; }
.eco-chat__list, .eco-chat__main, .eco-chat__aside { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--eco-radius-2xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); overflow: hidden; }
.eco-chat__bar { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 12px 12px 12px 20px; }
.eco-chat__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font: var(--eco-font-display--weight, 500) var(--eco-text-lg)/var(--eco-text-lg--line-height) var(--eco-font-display); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.eco-chat__tools { display: grid; gap: 10px; padding: 0 12px 10px; }
.eco-chat__list > .eco-chat-list { flex: 1; }
.eco-chat__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--chat-log-px, 20px); scrollbar-width: thin; }
.eco-chat__col { display: flex; flex-direction: column; width: 100%; max-width: var(--chat-col-w); margin-inline: auto; }
.eco-chat__foot { position: relative; padding: 8px 16px 16px; }
.eco-chat__foot > .eco-chat-composer { width: 100%; max-width: var(--chat-col-w); margin-inline: auto; }
.eco-chat__aside > .eco-chat__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.eco-chat__aside { --eco-row-bg: var(--eco-app-well); }
.eco-chat__aside .eco-chat__body { display: grid; align-content: start; gap: 16px; }
.eco-chat__about { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; text-align: center; }
.eco-chat__about > b { font: var(--eco-font-display--weight, 500) var(--eco-text-xl)/28px var(--eco-font-display); letter-spacing: -.04em; }
.eco-chat__about > span:last-child { color: var(--eco-text-tertiary); }
/* — chat-list — */
.eco-chat-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; margin: 0; padding: 0 8px 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.eco-chat-list__item { --chat-item-bg: transparent; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; box-sizing: border-box; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--eco-radius-xl); background: var(--chat-item-bg); color: var(--eco-text-primary); font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-chat-list__item:hover { --chat-item-bg: var(--eco-app-card-hover, var(--eco-bg-primary_hover)); }
.eco-chat-list__item:is(.is-selected, [aria-current="true"]) { --chat-item-bg: var(--eco-bg-brand-primary); }
.eco-chat-list__item:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-chat-list__body { display: grid; gap: 2px; min-width: 0; }
.eco-chat-list__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.eco-chat-list__name { flex: 1; min-width: 0; overflow: hidden; font: 500 var(--eco-text-md)/22px var(--eco-font-body); text-overflow: ellipsis; white-space: nowrap; }
.eco-chat-list__time { flex: none; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-chat-list__preview { flex: 1; min-width: 0; overflow: hidden; color: var(--eco-text-tertiary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); text-overflow: ellipsis; white-space: nowrap; }
.eco-chat-list__preview b { color: var(--eco-text-secondary); font-weight: 500; }
.eco-chat-list__ic { flex: none; width: 14px; height: 14px; color: var(--eco-fg-quaternary); }
.eco-chat-list__tick { flex: none; width: 16px; height: 16px; color: var(--eco-fg-brand-primary); }
.eco-chat-list__draft { color: var(--eco-text-brand-secondary); font-weight: 500; }
.eco-chat-list__typing { color: var(--eco-text-brand-secondary); }
.eco-chat-list__item:is(.is-selected, [aria-current="true"]) :is(.eco-chat-list__time, .eco-chat-list__preview) { color: var(--eco-text-secondary); }
.eco-chat-list__item.is-unread .eco-chat-list__name { font-weight: 600; }
.eco-chat-list__item.is-unread .eco-chat-list__time { color: var(--eco-text-brand-secondary); font-weight: 500; }
.eco-chat-list__item.is-unread .eco-chat-list__preview { color: var(--eco-text-secondary); }
.eco-chat-list__item.is-muted .eco-chat-list__name { color: var(--eco-text-secondary); }
@media (prefers-reduced-motion: reduce) { .eco-chat-list__item { transition: none; } }
/* — chat-head — */
.eco-chat-head { display: grid; gap: 0; min-width: 0; }
.eco-chat-head__row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 20px; }
.eco-chat-head__who { flex: 1; display: grid; gap: 1px; min-width: 0; }
.eco-chat-head__name { overflow: hidden; font: 600 var(--eco-text-md)/22px var(--eco-font-body); text-overflow: ellipsis; white-space: nowrap; }
.eco-chat-head__sub { overflow: hidden; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); text-overflow: ellipsis; white-space: nowrap; }
.eco-chat-head__sub.is-live { color: var(--eco-text-brand-secondary); }
.eco-chat-head__act { display: flex; align-items: center; gap: 2px; flex: none; }
.eco-chat-head__pin { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 6px 6px 6px 12px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-brand-primary); box-shadow: inset 3px 0 0 var(--eco-fg-brand-primary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-chat-head__pin > svg { flex: none; width: 16px; height: 16px; color: var(--eco-fg-brand-primary); }
.eco-chat-head__pin-t { flex: 1; display: grid; min-width: 0; }
.eco-chat-head__pin-t b { color: var(--eco-text-brand-secondary); font-weight: 600; }
.eco-chat-head__pin-t span { overflow: hidden; color: var(--eco-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
/* — chat-bubble — */
.eco-chat-bubble { --chat-in-bg: var(--eco-app-well, var(--eco-bg-secondary)); --chat-out-bg: var(--eco-bg-brand-primary); --chat-max-w: 75%; --chat-r: 18px; --chat-r-s: 6px; display: flex; align-items: flex-end; gap: 8px; margin-top: var(--chat-gap-new, 12px); color: var(--eco-text-primary); }
.eco-chat-bubble:is(.eco-chat-bubble--mid, .eco-chat-bubble--last) { margin-top: var(--chat-gap-grouped, 2px); }
.eco-chat-bubble--out { flex-direction: row-reverse; }
.eco-chat-bubble__av { flex: none; width: 32px; align-self: flex-end; }
.eco-chat-bubble__col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: var(--chat-max-w); }
.eco-chat-bubble--out .eco-chat-bubble__col { align-items: flex-end; }
.eco-chat-bubble__name { padding-inline: 12px; color: var(--eco-text-brand-secondary); font: 600 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-chat-bubble__body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 10px; max-width: 100%; padding: 8px 12px; border-radius: var(--chat-r) var(--chat-r) var(--chat-r) var(--chat-r-s); background: var(--chat-in-bg); font: 400 var(--chat-fs, var(--eco-text-md))/var(--chat-lh, 22px) var(--eco-font-body); overflow-wrap: anywhere; }
.eco-chat-bubble:is(.eco-chat-bubble--mid, .eco-chat-bubble--last) .eco-chat-bubble__body { border-top-left-radius: var(--chat-r-s); }
.eco-chat-bubble--out .eco-chat-bubble__body { border-radius: var(--chat-r) var(--chat-r) var(--chat-r-s) var(--chat-r); background: var(--chat-out-bg); }
.eco-chat-bubble--out:is(.eco-chat-bubble--mid, .eco-chat-bubble--last) .eco-chat-bubble__body { border-top-left-radius: var(--chat-r); border-top-right-radius: var(--chat-r-s); }
.eco-chat-bubble__text { flex: 1 1 auto; min-width: 0; margin: 0; }
.eco-chat-bubble__text a { color: var(--eco-text-brand-secondary); text-decoration: underline; text-underline-offset: 3px; }
.eco-chat-bubble__text .is-mention { color: var(--eco-text-brand-secondary); font-weight: 500; }
.eco-chat-bubble__meta { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-inline-start: auto; color: var(--eco-text-secondary); font: 400 11px/16px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-chat-bubble__tick { flex: none; width: 16px; height: 16px; color: var(--eco-text-secondary); }
.eco-chat-bubble__tick[data-s="read"] { color: var(--eco-text-brand-secondary); }
.eco-chat-bubble__tick[data-s="failed"] { color: var(--eco-fg-warning-primary); }
.eco-chat-bubble__fwd { display: flex; align-items: center; flex: 0 0 100%; gap: 4px; min-width: 0; color: var(--eco-text-brand-secondary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-chat-bubble__fwd > svg { flex: none; width: 14px; height: 14px; }
.eco-chat-bubble__quote { flex: 0 0 100%; min-width: 0; margin-bottom: 4px; }
.eco-chat-bubble__file { --eco-row-bg: color-mix(in srgb, var(--eco-text-primary) 6%, transparent); --ic-tile: var(--eco-bg-primary); flex: 0 0 100%; flex-wrap: nowrap; min-width: 220px; margin-block: 2px; }
.eco-chat-bubble__media { flex: 0 0 100%; overflow: hidden; border-radius: calc(var(--chat-r) - 3px); }
.eco-chat-bubble__media > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.eco-chat-bubble--media .eco-chat-bubble__body { width: min(320px, 100%); padding: 3px; }
.eco-chat-bubble--media .eco-chat-bubble__text { padding: 4px 9px 0; }
.eco-chat-bubble--media .eco-chat-bubble__meta { padding: 0 9px 4px; }
.eco-chat-bubble--media-only .eco-chat-bubble__meta { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--eco-radius-full); background: color-mix(in srgb, var(--eco-color-black) 50%, transparent); color: var(--eco-text-white); }
.eco-chat-bubble--media-only .eco-chat-bubble__tick { color: var(--eco-text-white); }
.eco-chat-bubble__voice { display: flex; align-items: center; flex: 1 1 232px; gap: 10px; min-width: 232px; }
.eco-chat-bubble__voice > .eco-wave { flex: 1; }
.eco-chat-bubble__dur { flex: none; color: var(--eco-text-secondary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-chat-bubble__reactions { display: flex; flex-wrap: wrap; gap: 4px; padding-inline: 2px; }
.eco-chat-bubble--out .eco-chat-bubble__reactions { justify-content: flex-end; }
.eco-chat-bubble.is-deleted .eco-chat-bubble__body { color: var(--eco-text-tertiary); font-style: italic; }
/* — chat-divider — */
.eco-chat-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: var(--eco-text-secondary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-chat-divider > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--eco-radius-full); background: var(--eco-app-well, var(--eco-bg-secondary)); text-align: center; }
.eco-chat-divider > span > svg { flex: none; width: 14px; height: 14px; color: var(--eco-fg-tertiary); }
.eco-chat-divider--system > span { background: none; color: var(--eco-text-tertiary); font-weight: 400; }
.eco-chat-divider--unread { color: var(--eco-text-brand-secondary); }
.eco-chat-divider--unread::before, .eco-chat-divider--unread::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--eco-fg-brand-primary) 35%, transparent); }
.eco-chat-divider--unread > span { background: var(--eco-bg-brand-primary); }
/* — chat-typing — */
.eco-chat-typing { display: inline-flex; align-items: center; gap: 8px; color: var(--eco-text-brand-secondary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-chat-typing__dots { display: inline-flex; align-items: center; gap: 3px; height: 14px; }
.eco-chat-typing__dots > i { width: 6px; height: 6px; border-radius: var(--eco-radius-full); background: var(--eco-fg-tertiary); animation: eco-chat-typing var(--eco-duration-slow) var(--eco-ease-standard) infinite alternate; }
.eco-chat-typing__dots > i:nth-child(2) { animation-delay: 150ms; }
.eco-chat-typing__dots > i:nth-child(3) { animation-delay: 300ms; }
@keyframes eco-chat-typing { from { transform: translateY(2px); opacity: .5; } to { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eco-chat-typing__dots > i { animation: none; } }
/* — chat-composer — */
.eco-chat-composer { position: relative; display: grid; gap: 8px; min-width: 0; }
.eco-chat-composer__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eco-chat-composer__row > .eco-input-group { flex: 1; min-width: 0; }
.eco-chat-composer__pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; width: min(320px, 100%); }
.eco-chat-composer__rec { display: flex; align-items: center; flex: 1; gap: 12px; min-width: 0; height: 44px; padding-inline: 16px 8px; border-radius: var(--eco-field-radius-affix, var(--eco-radius-full)); background: var(--eco-app-well); }
.eco-chat-composer__rec > .eco-wave { flex: 1; --wave-h: 24px; }
.eco-chat-composer__time { flex: none; color: var(--eco-text-primary); font: 500 var(--eco-text-sm)/20px var(--eco-font-mono); font-variant-numeric: tabular-nums; }
.eco-chat-composer__rec-dot { flex: none; width: 8px; height: 8px; border-radius: var(--eco-radius-full); background: var(--eco-fg-brand-primary); animation: eco-chat-pulse 1.2s ease-in-out infinite; }
.eco-chat-composer--locked .eco-chat-composer__row { justify-content: center; min-height: 44px; border-radius: var(--eco-field-radius-affix, var(--eco-radius-full)); background: var(--eco-app-well); color: var(--eco-text-secondary); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-chat-composer--locked .eco-chat-composer__row > svg { flex: none; width: 18px; height: 18px; color: var(--eco-fg-tertiary); }
@keyframes eco-chat-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .eco-chat-composer__rec-dot { animation: none; } }
/* — chat-skel — */
.eco-chat-skel { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0 8px; list-style: none; }
.eco-chat-skel__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; }
.eco-chat-skel__lines { display: grid; gap: 8px; min-width: 0; }
.eco-chat-skel--msgs { gap: 10px; padding: 16px 20px; }
.eco-chat-skel__msg { display: flex; align-items: flex-end; gap: 8px; }
.eco-chat-skel__msg--out { flex-direction: row-reverse; }
/* — hovercard — */
.eco-hovercard { --ic-tile: var(--eco-bg-secondary); box-sizing: border-box; width: 300px; max-width: 100%; padding: 16px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-lg); color: var(--eco-text-primary); text-align: left; font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-hovercard__head { display: flex; gap: 12px; align-items: center; }
.eco-hovercard__head > .eco-avatar { --s: 44px; }
.eco-hovercard__name { font: 600 var(--eco-text-md)/22px var(--eco-font-body); }
.eco-hovercard__role { color: var(--eco-text-tertiary); }
.eco-hovercard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.eco-hovercard__stats > span { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--eco-radius-lg); background: var(--ic-tile, var(--eco-bg-secondary)); color: var(--eco-text-tertiary); font-size: var(--eco-text-xs); }
.eco-hovercard__stats b { color: var(--eco-text-primary); font: 600 var(--eco-text-md)/22px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-hovercard__foot { display: flex; align-items: center; gap: 8px; color: var(--eco-text-tertiary); font-size: var(--eco-text-xs); }
.eco-hovercard__foot svg { width: 14px; height: 14px; }
/* — toaster — */
.eco-toaster { --gap: 10px; position: absolute; right: 20px; bottom: 20px; width: min(380px, calc(100% - 40px)); height: 0; list-style: none; margin: 0; padding: 0; }
.eco-toaster > li { position: absolute; right: 0; bottom: 0; left: 0; transition: transform var(--eco-duration-slow) var(--eco-ease-emphasized), opacity var(--eco-duration-slow) var(--eco-ease-standard); }
.eco-toaster .eco-toast { display: flex; width: 100%; box-sizing: border-box; align-items: flex-start; }
.eco-toaster .eco-toast > svg { margin-top: 1px; }
.eco-toaster .eco-toast.is-error > svg { color: var(--eco-color-error-400); }
.eco-toaster > li.is-new { transform: translateY(24px); opacity: 0; }
.eco-toaster > li.is-gone { transform: translateX(110%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .eco-toaster > li { transition-duration: 0s !important; }
}
.eco-toast__body { flex: 1; min-width: 0; }
.eco-toast__body small { display: block; font-weight: 400; color: color-mix(in oklab, var(--eco-text-white) 70%, transparent); }
.eco-toast__act { flex: none; margin: -4px 0; padding: 4px 10px; border: 0; border-radius: var(--eco-radius-md); background: color-mix(in srgb, var(--eco-color-white) 12%, transparent); color: var(--eco-text-white); font: 500 var(--eco-text-xs)/20px var(--eco-font-body); cursor: pointer; }
.eco-toast__act:hover { background: color-mix(in srgb, var(--eco-color-white) 20%, transparent); }
.eco-toast__x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -6px -2px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: color-mix(in oklab, var(--eco-text-white) 70%, transparent); cursor: pointer; }
.eco-toast__x:hover { color: var(--eco-text-white); background: color-mix(in srgb, var(--eco-color-white) 12%, transparent); }
.eco-toast__x svg { width: 14px; height: 14px; }
:is(.eco-toast__act, .eco-toast__x):focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 1px; box-shadow: 0 0 0 1px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(1px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
/* — toolbar — */
.eco-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eco-toolbar > [hidden] { display: none; }
.eco-table-card > .eco-toolbar { padding: 0 24px 12px; }
.eco-toolbar__search { flex: 0 1 260px; min-width: 180px; }
.eco-toolbar__spacer { flex: 1; }
.eco-filter { position: relative; }
.eco-filter { --eco-btn-gap: 6px; }
.eco-filter__count { margin-left: 2px; }
.eco-filter > .eco-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 220px; }
.eco-filter--end > .eco-menu { left: auto; right: 0; }
.eco-filter__opt { display: flex; align-items: center; gap: 10px; }
.eco-filter__opt .eco-check { pointer-events: none; }
.eco-filter__n { margin-left: auto; font: 500 var(--eco-text-xs)/20px var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .eco-table-card > .eco-toolbar { padding: 0 16px 12px; }
  .eco-toolbar__search { flex: 1 1 100%; }
}
/* — task-status — */
.eco-task-status { --ts-c: var(--eco-fg-quaternary); --ts-s: 16px; --p: 0; position: relative; flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--ts-s); height: var(--ts-s); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ts-c); color: var(--eco-brand-on-button, var(--eco-text-primary_on-brand)); }
.eco-task-status::before { content: ""; position: absolute; inset: calc(var(--ts-s) * .1875); border-radius: 50%; background: conic-gradient(var(--ts-c) calc(var(--p) * 1%), transparent 0); }
.eco-task-status > svg { position: relative; width: 62%; height: 62%; }
.eco-task-status--lg { --ts-s: 20px; }
.eco-task-status[data-s="backlog"] { box-shadow: none; border: 1.5px dashed var(--ts-c); }
.eco-task-status[data-s="todo"] { --ts-c: var(--eco-fg-tertiary); }
.eco-task-status[data-s="doing"] { --ts-c: var(--eco-fg-brand-primary); --p: 50; }
.eco-task-status[data-s="review"] { --ts-c: var(--eco-fg-brand-primary); --p: 75; }
.eco-task-status[data-s="done"] { box-shadow: none; background: var(--eco-brand-button, var(--eco-bg-brand-solid)); }
.eco-task-status[data-s="done"]::before { display: none; }
.eco-task-status[data-s="canceled"] { --ts-c: var(--eco-fg-quaternary); color: var(--eco-fg-quaternary); }
.eco-task-status[data-s="canceled"]::before { display: none; }
@media (forced-colors: active) { .eco-task-status { forced-color-adjust: none; --ts-c: CanvasText; } .eco-task-status[data-s="done"] { background: CanvasText; color: Canvas; } }
/* — task-priority — */
.eco-task-prio { --tp-on: var(--eco-fg-secondary); --tp-off: color-mix(in oklab, var(--eco-fg-quaternary) 45%, transparent); flex: none; display: inline-flex; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.eco-task-prio > i { flex: 1; display: block; border-radius: 1px; background: var(--tp-off); }
.eco-task-prio > i:nth-child(1) { height: 5px; }
.eco-task-prio > i:nth-child(2) { height: 9px; }
.eco-task-prio > i:nth-child(3) { height: 13px; }
.eco-task-prio[data-p="low"] > i:nth-child(-n+1), .eco-task-prio[data-p="medium"] > i:nth-child(-n+2), .eco-task-prio:is([data-p="high"], [data-p="urgent"]) > i { background: var(--tp-on); }
.eco-task-prio[data-p="urgent"] { --tp-on: var(--eco-fg-warning-primary); }
@media (forced-colors: active) { .eco-task-prio > i { forced-color-adjust: none; background: GrayText; } .eco-task-prio[data-p="low"] > i:nth-child(-n+1), .eco-task-prio[data-p="medium"] > i:nth-child(-n+2), .eco-task-prio:is([data-p="high"], [data-p="urgent"]) > i { background: CanvasText; } }
/* — task-row — */
.eco-task-groups { container: task-groups / inline-size; display: grid; gap: 10px; align-content: start; min-height: 0; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.eco-task-group { display: grid; gap: 2px; }
.eco-task-group__head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 8px; border-radius: var(--eco-radius-xl); background: var(--eco-app-well); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-task-group__toggle { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--eco-radius-md); background: none; color: var(--eco-fg-tertiary); cursor: pointer; }
.eco-task-group__toggle:hover { color: var(--eco-fg-primary); }
.eco-task-group__toggle:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-group__toggle > svg { width: 16px; height: 16px; transition: rotate var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-task-group__toggle[aria-expanded="false"] > svg { rotate: -90deg; }
.eco-task-group__n { color: var(--eco-text-tertiary); font-weight: 400; font-variant-numeric: tabular-nums; }
.eco-task-group__add { margin-left: auto; }
.eco-task-rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.eco-task-row { --task-row-bg: transparent; position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-width: 0; min-height: var(--task-row-h, 36px); padding: 4px 12px 4px 8px; border-radius: var(--eco-radius-lg); background: var(--task-row-bg); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-task-row:is(:hover, .is-hover) { --task-row-bg: var(--eco-app-card-hover, var(--eco-bg-primary_hover)); }
.eco-task-row:is(.is-selected, [aria-current="true"], .is-checked) { --task-row-bg: var(--eco-bg-brand-primary); }
.eco-task-row:is(:focus-visible, .is-focus) { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-row__lead { position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.eco-task-row__lead > * { grid-area: 1 / 1; }
.eco-task-row__sel { opacity: 0; pointer-events: none; }
.eco-task-row:is(:hover, :focus-within, .is-hover, .is-checked) .eco-task-row__sel, .eco-task-groups.has-sel .eco-task-row__sel { opacity: 1; pointer-events: auto; }
.eco-task-row:is(:hover, :focus-within, .is-hover, .is-checked) .eco-task-row__prio, .eco-task-groups.has-sel .eco-task-row__prio { opacity: 0; }
.eco-task-row__id { flex: none; min-width: 48px; color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); letter-spacing: 0; white-space: nowrap; }
.eco-task-row__title { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.eco-task-row:has(.eco-task-status[data-s="done"], .eco-task-status[data-s="canceled"]) .eco-task-row__title { color: var(--eco-text-secondary); font-weight: 400; }
.eco-task-row__proj { flex: none; max-width: 120px; overflow: hidden; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); text-overflow: ellipsis; white-space: nowrap; }
.eco-task-row__sub { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-row__sub > svg { width: 14px; height: 14px; }
.eco-task-row__labels { flex: none; display: inline-flex; gap: 4px; }
.eco-task-row__due { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 52px; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-task-row__due > svg { width: 14px; height: 14px; }
.eco-task-row__due.is-soon { color: var(--eco-text-secondary); font-weight: 500; }
.eco-task-row__due.is-late { color: var(--eco-text-warning-primary); font-weight: 500; }
.eco-task-row__who { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.eco-task-row__none { display: grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; border: 1.5px dashed var(--eco-fg-quaternary); border-radius: 50%; color: var(--eco-fg-quaternary); }
.eco-task-row__none > svg { width: 14px; height: 14px; }
.eco-task-row--sub { padding-left: 12px; }
@container task-groups (max-width: 619px) { .eco-task-row__labels, .eco-task-row__proj { display: none; } }
@container task-groups (max-width: 439px) { .eco-task-row__sub, .eco-task-row__id { display: none; } }
@media (prefers-reduced-motion: reduce) { .eco-task-row, .eco-task-group__toggle > svg { transition: none; } }
@media (forced-colors: active) { .eco-task-row:is(.is-selected, [aria-current="true"], .is-checked) { outline: 2px solid Highlight; } }
.eco-task-row__sync { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); white-space: nowrap; }
.eco-task-row__sync > svg { width: 14px; height: 14px; }
.eco-task-row--skel { cursor: default; }
/* — task-shell — */
.eco-task { --task-aside-w: 440px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--eco-app-gap, 16px); min-width: 0; min-height: 0; padding: 0 16px 16px; }
.eco-task--aside { grid-template-columns: minmax(0, 1fr) var(--task-aside-w); }
.eco-task--fill { height: 100%; padding: 0; }
.eco-task__list, .eco-task__aside { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--eco-radius-2xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); overflow: hidden; }
.eco-task__bar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 12px 8px 20px; }
.eco-task__title { margin: 0; font: var(--eco-font-display--weight, 500) var(--eco-text-lg)/var(--eco-text-lg--line-height) var(--eco-font-display); letter-spacing: -.04em; white-space: nowrap; }
.eco-task__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 12px 12px; }
.eco-task__sp { flex: 1; min-width: 0; }
.eco-task__list > .eco-bulkbar { bottom: 16px; }
.eco-task__empty { display: grid; flex: 1; place-items: center; padding: 32px 20px 56px; }
.eco-task-stage { position: relative; overflow: hidden; border-radius: inherit; }
.eco-task-scrim { position: absolute; inset: 0; z-index: 20; display: grid; justify-items: center; align-content: start; padding: 88px 16px 16px; background: var(--eco-bg-overlay); }
@media (prefers-reduced-motion: no-preference) { .eco-task-scrim > :first-child { animation: eco-task-in var(--eco-duration-base) var(--eco-ease-emphasized); } }
@keyframes eco-task-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.eco-task__page { display: grid; align-content: start; gap: var(--eco-app-gap, 16px); min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.eco-task__page--fill { grid-template-rows: auto minmax(0, 1fr); }
.eco-task__hidden { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 6px 8px 6px 12px; border-radius: var(--eco-radius-xl); background: var(--eco-app-well); color: var(--eco-text-tertiary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-task__hidden > svg { width: 16px; height: 16px; flex: none; }
.eco-task__hidden > .eco-btn { margin-left: auto; }
:is(.eco-task__page, .eco-task__surface) { --eco-row-bg: var(--eco-app-well); --eco-row-hover: var(--eco-app-well-hover); --btn-t-bg: var(--eco-app-well); --btn-t-bg-hover: var(--eco-app-well-hover); --ic-tile: var(--eco-app-well); --eco-focus-gap: var(--eco-app-card); }
/* — task-panel — */
.eco-task-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.eco-task-panel__bar { display: flex; align-items: center; gap: 2px; min-height: 56px; padding: 12px 12px 8px 20px; }
.eco-task-panel__crumb { display: flex; align-items: center; flex: 1; gap: 6px; min-width: 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); white-space: nowrap; }
.eco-task-panel__crumb > svg { width: 14px; height: 14px; flex: none; }
.eco-task-panel__crumb > b { color: var(--eco-text-secondary); font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); }
.eco-task-panel__body { display: grid; flex: 1; align-content: start; gap: 24px; min-height: 0; padding: 4px 20px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.eco-task-panel__title { margin: 0; font: var(--eco-font-display--weight, 500) var(--eco-text-xl)/30px var(--eco-font-display); letter-spacing: -.04em; text-wrap: balance; }
.eco-task-panel__desc { display: grid; gap: 8px; margin-top: -12px; color: var(--eco-text-secondary); font: 400 var(--eco-text-sm)/22px var(--eco-font-body); }
.eco-task-panel__desc > p { margin: 0; }
.eco-task-panel__desc > ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; list-style: disc; }
.eco-task-props { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 2px 8px; margin: 0; }
.eco-task-props > dt { color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-props > dd { min-width: 0; margin: 0; }
.eco-task-prop { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 32px; max-width: 100%; margin: 0 0 0 -10px; padding: 0 10px; border: 0; border-radius: var(--eco-radius-lg); background: none; color: var(--eco-text-primary); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); text-align: start; white-space: nowrap; cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-task-prop:hover { background: var(--eco-app-well); }
.eco-task-prop:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-prop > svg { width: 18px; height: 18px; flex: none; color: var(--eco-fg-tertiary); }
.eco-task-prop > .eco-task-prop__add { width: 16px; height: 16px; color: var(--eco-fg-quaternary); }
.eco-task-panel__sec { display: grid; gap: 8px; }
.eco-task-panel__h { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.eco-task-panel__h > h3 { margin: 0; font: 600 var(--eco-text-sm)/20px var(--eco-font-body); letter-spacing: 0; }
.eco-task-panel__cnt { flex: 1; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-panel__sec > .eco-task-rows { margin: 0; }
.eco-task-feed { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.eco-task-feed__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--eco-text-secondary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-task-feed__item p { margin: 0; }
.eco-task-feed__item b { color: var(--eco-text-primary); font-weight: 500; }
.eco-task-feed__item time { margin-left: 6px; color: var(--eco-text-tertiary); font-size: var(--eco-text-xs); white-space: nowrap; }
.eco-task-feed__item--event { align-items: center; font-size: var(--eco-text-xs); line-height: 16px; }
.eco-task-feed__body { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--eco-radius-xl); background: var(--eco-app-well); }
.eco-task-feed__who { display: flex; align-items: baseline; gap: 0; }
.eco-task-feed__body > p:last-child { color: var(--eco-text-primary); }
.eco-task-panel__foot { display: flex; align-items: center; gap: 8px; padding: 8px 16px 16px; }
.eco-task-panel__foot > .eco-input-group { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .eco-task-prop { transition: none; } }
.eco-task-prop--late { color: var(--eco-text-warning-primary); }
.eco-task-prop--late > svg { color: var(--eco-fg-warning-primary); }
/* — task-quick — */
.eco-task-quick { --ic-tile: var(--eco-bg-secondary); display: grid; gap: 4px; box-sizing: border-box; width: min(600px, 100%); border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-xl); color: var(--eco-text-primary); text-align: left; overflow: hidden; }
.eco-task-quick__head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 0 20px; color: var(--eco-text-tertiary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-task-quick__head > svg { width: 14px; height: 14px; flex: none; }
.eco-task-quick__head > b { color: var(--eco-text-secondary); font-weight: 500; }
.eco-task-quick__field { position: relative; min-height: 56px; padding: 12px 20px; font: 400 var(--eco-text-lg)/32px var(--eco-font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.eco-task-quick__field mark { padding: 1px 4px; border-radius: var(--eco-radius-sm); background: var(--eco-bg-brand-primary); color: var(--eco-text-brand-secondary); font-weight: 500; }
.eco-task-quick__ph { color: var(--eco-text-placeholder); }
.eco-task-quick__caret { display: inline-block; width: 2px; height: 22px; margin-left: 2px; border-radius: 1px; background: var(--eco-text-primary); vertical-align: -4px; }
.eco-task-quick__field.is-empty > .eco-task-quick__caret { position: absolute; left: 20px; top: 17px; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .eco-task-quick__caret { animation: eco-task-caret 1.1s steps(1) infinite; } }
@keyframes eco-task-caret { 50% { opacity: 0; } }
.eco-task-quick__parsed { display: grid; gap: 10px; padding: 0 20px 16px; }
.eco-task-quick__t { display: flex; align-items: baseline; gap: 10px; margin: 0; font: var(--eco-font-display--weight, 500) var(--eco-text-md)/24px var(--eco-font-display); letter-spacing: -.02em; }
.eco-task-quick__k { color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); letter-spacing: 0; }
.eco-task-quick__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-task-quick__hint { margin: 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/20px var(--eco-font-body); }
.eco-task-quick__hint > b { color: var(--eco-text-secondary); font-weight: 500; }
.eco-task-quick__foot { --ic-tile: var(--eco-bg-primary_alt); display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 20px; background: var(--eco-bg-secondary); color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/20px var(--eco-font-body); }
.eco-task-quick__keys { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.eco-task-quick__keys > span { display: inline-flex; align-items: center; gap: 4px; }
.eco-task-quick__keys > span > .eco-kbd:last-of-type { margin-right: 2px; }
/* — task-inbox — */
.eco-task-inbox, .eco-task-triage { display: grid; align-content: start; gap: 2px; min-height: 0; margin: 0; padding: 0 8px 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.eco-task-inbox__day { margin: 10px 0 2px; padding: 0 12px; color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/20px var(--eco-font-body); }
.eco-task-inbox__day:first-child { margin-top: 0; }
.eco-task-inbox__item { --ti-bg: transparent; position: relative; display: grid; grid-template-columns: 8px 32px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; box-sizing: border-box; min-width: 0; padding: 10px 12px 10px 8px; border-radius: var(--eco-radius-xl); background: var(--ti-bg); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-task-inbox__item:is(:hover, .is-hover) { --ti-bg: var(--eco-app-card-hover, var(--eco-bg-primary_hover)); }
.eco-task-inbox__item:is(.is-selected, [aria-current="true"]) { --ti-bg: var(--eco-bg-brand-primary); }
.eco-task-inbox__item:is(:focus-visible, .is-focus) { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-inbox__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--eco-fg-brand-primary); }
.eco-task-inbox__body { display: grid; gap: 2px; min-width: 0; }
.eco-task-inbox__text { margin: 0; overflow: hidden; color: var(--eco-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.eco-task-inbox__text b { color: var(--eco-text-primary); font-weight: 500; }
.eco-task-inbox__item.is-unread .eco-task-inbox__text { color: var(--eco-text-primary); }
.eco-task-inbox__item.is-unread .eco-task-inbox__text b { font-weight: 600; }
.eco-task-inbox__task { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-inbox__task > .eco-task-status { --ts-s: 14px; }
.eco-task-inbox__task > svg { width: 14px; height: 14px; flex: none; }
.eco-task-inbox__id { flex: none; font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); letter-spacing: 0; }
.eco-task-inbox__ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-task-inbox__item:is(.is-selected, [aria-current="true"]) :is(.eco-task-inbox__task, .eco-task-inbox__text) { color: var(--eco-text-secondary); }
.eco-task-inbox__end { display: grid; justify-items: end; align-items: center; }
.eco-task-inbox__end > * { grid-area: 1 / 1; }
.eco-task-inbox__time { color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-task-inbox__acts { display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity var(--eco-duration-fast) linear; }
.eco-task-inbox__item:is(:hover, :focus-within, .is-hover, .is-selected) .eco-task-inbox__acts { opacity: 1; pointer-events: auto; }
.eco-task-inbox__item:is(:hover, :focus-within, .is-hover, .is-selected) .eco-task-inbox__time { opacity: 0; }
.eco-task-inbox__item.is-read .eco-task-inbox__dot { visibility: hidden; }
.eco-task-inbox__item.is-snoozed .eco-task-inbox__task { color: var(--eco-text-secondary); }
.eco-task-triage__item { --tt-bg: transparent; display: grid; gap: 12px; padding: 12px 14px; border-radius: var(--eco-radius-2xl); background: var(--tt-bg); transition: background-color var(--eco-duration-fast) linear; cursor: pointer; }
.eco-task-triage__item:is(:hover, .is-hover) { --tt-bg: var(--eco-app-card-hover, var(--eco-bg-primary_hover)); }
.eco-task-triage__item.is-selected { --tt-bg: var(--eco-app-well); cursor: default; }
.eco-task-triage__item:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-triage__main { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.eco-task-triage__body { display: grid; gap: 4px; min-width: 0; }
.eco-task-triage__title { margin: 0; font: 500 var(--eco-text-md)/22px var(--eco-font-body); letter-spacing: 0; }
.eco-task-triage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-triage__desc { margin: 4px 0 0; color: var(--eco-text-secondary); font: 400 var(--eco-text-sm)/22px var(--eco-font-body); }
.eco-task-triage__sug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.eco-task-triage__k { color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-triage__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 44px; }
@media (prefers-reduced-motion: reduce) { .eco-task-inbox__item, .eco-task-inbox__acts, .eco-task-triage__item { transition: none; } }
@media (forced-colors: active) { .eco-task-inbox__item:is(.is-selected, [aria-current="true"]) { outline: 2px solid Highlight; } .eco-task-inbox__dot { forced-color-adjust: none; background: Highlight; } }
/* — task-card — */
.eco-task-board { --task-col-w: 248px; position: relative; display: flex; align-items: stretch; gap: 12px; min-width: 0; min-height: 0; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--eco-fg-quaternary) transparent; }
.eco-task-board > .eco-board__col { flex: 0 0 var(--task-col-w); width: var(--task-col-w); }
.eco-task-board > .eco-task-rail { flex: none; }
.eco-task-card { --tc-bg: var(--board-card, var(--eco-app-card)); position: relative; display: grid; gap: 8px; box-sizing: border-box; min-width: 0; padding: 12px; border-radius: var(--eco-radius-2xl); background: var(--tc-bg); box-shadow: var(--eco-app-card-shadow); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); cursor: pointer; transition: background-color var(--eco-duration-fast) linear; }
.eco-task-card:is(:hover, .is-hover) { --tc-bg: color-mix(in srgb, var(--eco-bg-primary_hover) var(--eco-app-k), var(--eco-bg-quaternary)); }
.eco-task-card:is(.is-selected, [aria-current="true"]) { --tc-bg: var(--eco-bg-brand-primary); }
.eco-task-card:is(:focus-visible, .is-focus) { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-card__top { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.eco-task-card__id { color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); letter-spacing: 0; }
.eco-task-card__who { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; }
.eco-task-card__title { display: -webkit-box; margin: 0; overflow: hidden; font: 500 var(--eco-text-sm)/20px var(--eco-font-body); letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-wrap: pretty; }
.eco-task-card:has(.eco-task-status[data-s="done"], .eco-task-status[data-s="canceled"]) .eco-task-card__title { color: var(--eco-text-secondary); font-weight: 400; }
.eco-task-card__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.eco-task-card__foot { display: flex; align-items: center; gap: 10px; min-height: 20px; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-card__sub { display: inline-flex; align-items: center; gap: 4px; }
.eco-task-card__sub > svg, .eco-task-card__due > svg { width: 14px; height: 14px; flex: none; }
.eco-task-card__due { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; }
.eco-task-card__due.is-soon { color: var(--eco-text-secondary); font-weight: 500; }
.eco-task-card__due.is-late { color: var(--eco-text-warning-primary); font-weight: 500; }
.eco-task-card.is-lifted { --tc-bg: var(--eco-bg-primary_alt); position: absolute; z-index: 5; left: var(--x, 0); top: var(--y, 0); width: calc(var(--task-col-w) - 24px); box-shadow: var(--eco-shadow-lg); cursor: grabbing; }
.eco-task-card.is-ghost { opacity: .4; }
.eco-task-card--skel { gap: 10px; cursor: default; }
.eco-task-drop { min-height: 96px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-brand-primary); }
.eco-task-drop--over { background: var(--eco-bg-warning-primary); }
.eco-task-wip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--eco-radius-xl); background: var(--board-card, var(--eco-app-card)); color: var(--eco-text-secondary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-wip > svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--eco-fg-tertiary); }
.eco-task-wip.is-over { background: var(--eco-bg-warning-primary); color: var(--eco-text-primary); }
.eco-task-wip.is-over > svg { color: var(--eco-fg-warning-primary); }
.eco-task-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; box-sizing: border-box; width: 52px; padding: 12px 0; border-radius: var(--eco-radius-3xl); background: var(--eco-app-track); }
.eco-task-rail__name { color: var(--eco-text-secondary); font: 600 var(--eco-text-sm)/20px var(--eco-font-body); white-space: nowrap; writing-mode: vertical-rl; }
@media (prefers-reduced-motion: reduce) { .eco-task-card { transition: none; } }
@media (forced-colors: active) { .eco-task-card:is(.is-selected, [aria-current="true"]) { outline: 2px solid Highlight; } .eco-task-card.is-lifted { outline: 1px solid CanvasText; } .eco-task-drop { outline: 2px dashed Highlight; } }
/* — task-project — */
.eco-task-avs { display: inline-flex; align-items: center; }
.eco-task-avs__i, .eco-task-avs__more { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--av-cut, var(--eco-app-card)); }
.eco-task-avs__i { display: inline-grid; }
.eco-task-avs__i:first-child { margin-left: 0; }
.eco-task-avs__more { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 6px; background: var(--eco-app-well); color: var(--eco-text-secondary); font: 500 11px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-hill { display: grid; gap: 8px; }
.eco-task-hill__svg { display: block; width: 100%; height: auto; overflow: visible; }
.eco-task-hill__base { stroke: var(--eco-viz-grid); stroke-width: 1; }
.eco-task-hill__mid { stroke: var(--eco-viz-base); stroke-width: 1; stroke-dasharray: 4 4; }
.eco-task-hill__curve { fill: none; stroke: var(--eco-viz-ctx); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eco-task-hill__dot { stroke: var(--eco-viz-surface); stroke-width: 2; }
.eco-task-hill__dot[data-c="ink"] { fill: var(--eco-viz-c1); }
.eco-task-hill__dot[data-c="green"] { fill: var(--eco-viz-c2); }
.eco-task-hill__dot[data-c="lime"] { fill: var(--eco-viz-c3); }
.eco-task-hill__n { font: 600 11px/1 var(--eco-font-body); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.eco-task-hill__n[data-c="ink"] { fill: var(--eco-viz-surface); }
.eco-task-hill__n[data-c="green"] { fill: var(--eco-color-black); }
.eco-task-hill__n[data-c="lime"] { fill: var(--eco-color-black); }
.eco-task-hill__axis { display: flex; justify-content: space-between; gap: 12px; color: var(--eco-viz-label); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-hill__axis > span:last-child { text-align: right; }
@media (forced-colors: active) { .eco-task-hill__svg { forced-color-adjust: none; } .eco-task-hill__curve { stroke: CanvasText; } .eco-task-hill__dot { fill: CanvasText; stroke: Canvas; } .eco-task-hill__n { fill: Canvas; } }
/* — accordion — */
.eco-accordion { display: grid; gap: 8px; }
.eco-accordion > details { border-radius: var(--eco-radius-2xl); background: var(--ic-tile, var(--eco-bg-secondary)); }
.eco-accordion > details > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px 14px 20px; border-radius: inherit; list-style: none; cursor: pointer; font: 600 var(--eco-text-md)/24px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-accordion > details > summary::-webkit-details-marker { display: none; }
.eco-accordion > details > summary:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-accordion > details > summary .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eco-bg-primary_alt); color: var(--accent-text, var(--eco-text-brand-secondary)); font: 600 var(--eco-text-xs)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-accordion > details > summary small { margin-left: auto; font: 400 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-accordion > details > summary > svg { flex: none; width: 18px; height: 18px; color: var(--eco-fg-tertiary); transition: rotate var(--eco-duration-base) var(--eco-ease-standard); }
.eco-accordion > details[open] > summary > svg { rotate: 180deg; }
.eco-accordion__body { padding: 0 20px 18px 60px; font: 400 var(--eco-text-sm)/22px var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-accordion__body ul { margin: 0; padding-left: 18px; }
.eco-accordion--faq .eco-accordion__body { padding-left: 20px; max-width: 72ch; }
@media (prefers-reduced-motion: no-preference) {
  .eco-accordion { interpolate-size: allow-keywords; }
  .eco-accordion > details::details-content { height: 0; overflow: clip; transition: height var(--eco-duration-slow) var(--eco-ease-emphasized), content-visibility var(--eco-duration-slow) allow-discrete; }
  .eco-accordion > details[open]::details-content { height: auto; }
}
@media (max-width: 640px) {
  .eco-accordion__body { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-accordion > details > summary > svg { transition: none; }
}
/* — tree — */
.eco-tree { --ind: 22px; margin: 0; padding: 8px; list-style: none; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-primary_alt); font: 500 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-tree ul { margin: 0; padding: 0; list-style: none; }
.eco-tree [role="treeitem"] { outline: 0; }
.eco-tree__row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px 6px calc(10px + var(--lv, 0) * var(--ind)); border-radius: var(--eco-radius-lg); cursor: pointer; user-select: none; }
.eco-tree__row:hover { background: var(--eco-bg-secondary); }
.eco-tree [role="treeitem"]:focus-visible > .eco-tree__row { outline: var(--eco-focus-w) solid transparent; outline-offset: -2px; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-tree [aria-selected="true"] > .eco-tree__row { background: var(--eco-bg-brand-primary); }
.eco-tree__row > svg { flex: none; width: 16px; height: 16px; color: var(--eco-fg-tertiary); }
.eco-tree__row > .chev { transition: rotate var(--eco-duration-base) var(--eco-ease-standard); }
.eco-tree [aria-expanded="true"] > .eco-tree__row > .chev { rotate: 90deg; }
.eco-tree__row > .sp { width: 16px; flex: none; }
.eco-tree__row > .eco-tree__meta { margin-left: auto; font: 400 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-tree__row > .ok { color: var(--eco-fg-success-primary); }
.eco-tree__row.is-locked { color: var(--eco-text-tertiary); }
.eco-tree [aria-expanded="false"] > ul { display: none; }
/* — carousel — */
.eco-carousel { display: grid; gap: 16px; width: 100%; min-width: 0; }
.eco-carousel__head { display: flex; align-items: center; gap: 8px; }
.eco-carousel__head h4 { margin: 0 auto 0 0; font: 600 var(--eco-text-lg)/26px var(--eco-font-body); letter-spacing: 0; }
.eco-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; border-radius: var(--eco-radius-2xl); }
.eco-carousel__track::-webkit-scrollbar { display: none; }
.eco-carousel__track:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-carousel__slide { scroll-snap-align: start; display: grid; align-content: space-between; gap: 18px; min-height: 220px; padding: 22px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-secondary); }
.eco-carousel__slide .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ic-tile, var(--eco-bg-primary_alt)); color: var(--eco-fg-primary); }
.eco-carousel__slide .ico svg { width: 22px; height: 22px; }
.eco-carousel__slide b { display: block; font: var(--eco-font-display--weight, 500) var(--eco-text-display-xs, 24px)/1.15 var(--eco-font-display); letter-spacing: -0.04em; }
.eco-carousel__slide span { font: 400 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-carousel__slide.is-dark { background: var(--eco-bg-primary-solid); color: var(--eco-text-white); }
.eco-carousel__slide.is-dark span { color: color-mix(in oklab, var(--eco-text-white) 70%, transparent); }
.eco-carousel__slide.is-dark .ico { background: var(--eco-brand-accent); color: var(--eco-brand-on-accent); }
.eco-carousel__dots { display: flex; justify-content: center; gap: 6px; }
.eco-carousel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--eco-bg-quaternary); cursor: pointer; transition: width var(--eco-duration-base) var(--eco-ease-standard), background-color var(--eco-duration-base) linear; }
.eco-carousel__dots button[aria-current="true"] { width: 24px; background: var(--eco-bg-brand-solid); }
.eco-carousel__dots button:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
@media (prefers-reduced-motion: no-preference) {
  .eco-carousel__track { scroll-behavior: smooth; }
}
@media (max-width: 960px) {
  .eco-carousel__track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
  .eco-carousel__track { grid-auto-columns: 86%; }
}
/* — resizable — */
.eco-resizable { --a: 28%; --b: 40%; display: grid; grid-template-columns: var(--a) 12px var(--b) 12px minmax(0, 1fr); height: 340px; width: 100%; padding: 8px; box-sizing: border-box; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-secondary); }
.eco-resizable__pane { min-width: 0; overflow: auto; padding: 16px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary_alt); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-resizable__pane h5 { margin: 0 0 10px; font: 600 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); letter-spacing: 0; }
.eco-resizable__pane p { margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-resizable__pane p.on { color: var(--eco-text-primary); font-weight: 500; }
.eco-resizable__handle { position: relative; display: grid; place-items: center; cursor: col-resize; touch-action: none; border-radius: 6px; }
.eco-resizable__handle::before { content: ""; width: 4px; height: 32px; border-radius: 2px; background: var(--eco-bg-quaternary); transition: background-color var(--eco-duration-fast) linear, height var(--eco-duration-base) var(--eco-ease-standard); }
.eco-resizable__handle:hover::before, .eco-resizable__handle.is-drag::before { height: 56px; background: var(--eco-fg-tertiary); }
.eco-resizable__handle:focus-visible { outline: var(--eco-focus-w) solid transparent; outline-offset: -2px; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-resizable__handle:focus-visible::before { background: var(--eco-bg-brand-solid); }
@media (max-width: 640px) {
  .eco-resizable { --a: 40%; grid-template-columns: var(--a) 12px minmax(0, 1fr); height: 300px; }
  .eco-resizable > :nth-child(4), .eco-resizable > :nth-child(5) { display: none; }
}
/* — number-input — */
.eco-num { --nm-h: 44px; --nm-b: 32px; --field-bg: var(--eco-bg-secondary); --affix-bg: var(--eco-bg-primary_alt); --nm-ring: transparent;
  display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; min-width: 0; height: var(--nm-h); padding: 0 6px; border-radius: var(--eco-field-radius-affix);
  background: var(--field-bg); color: var(--eco-text-primary); box-shadow: 0 0 0 var(--eco-field-focus-w) var(--nm-ring); outline: var(--eco-field-focus-w) solid transparent;
  transition: box-shadow var(--eco-duration-fast) linear, background-color var(--eco-duration-fast) linear; }
.eco-num--sm { --nm-h: 40px; --nm-b: 28px; }
.eco-num--block { display: flex; width: 100%; }
:is(.eco-card:not(.eco-card--raised, .eco-card--app)) .eco-num { --field-bg: var(--eco-bg-primary); --affix-bg: var(--eco-bg-secondary); }
.eco-num:focus-within, .eco-num.is-focus { --nm-ring: var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-num.is-error { --nm-ring: var(--eco-focus-ring-error); }
.eco-num__input { flex: 1 1 auto; width: 4ch; min-width: 0; height: 100%; padding: 0 4px; border: 0; outline: 0; background: none; color: inherit; text-align: center;
  font: 500 var(--eco-text-md)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-num--end .eco-num__input { order: -2; padding-left: 10px; text-align: left; }
.eco-num--end .eco-num__unit { order: -1; margin-right: auto; }
.eco-num__unit { flex: none; padding-right: 6px; font: 400 var(--eco-text-md)/1 var(--eco-font-body); color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-num__btn { flex: none; display: inline-grid; place-items: center; width: var(--nm-b); height: var(--nm-b); padding: 0; border: 0; border-radius: var(--eco-radius-full);
  background: var(--affix-bg); color: var(--eco-text-primary); cursor: pointer; touch-action: manipulation; transition: background-color var(--eco-duration-fast) linear, opacity var(--eco-duration-fast) linear; }
.eco-num__btn svg { width: 16px; height: 16px; }
.eco-num__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--affix-bg), var(--eco-text-primary) 6%); }
.eco-num__btn:active:not(:disabled) { background: color-mix(in srgb, var(--affix-bg), var(--eco-text-primary) 12%); }
.eco-num__btn:disabled { opacity: .4; cursor: not-allowed; }
.eco-num__btn:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-num.is-disabled { opacity: .5; }
.eco-num.is-disabled * { cursor: not-allowed; }
.eco-num.is-readonly .eco-num__btn { display: none; }
.eco-num.is-readonly { padding-inline: 10px; }
.eco-num.is-readonly .eco-num__input { text-align: left; }
@media (forced-colors: active) {
  .eco-num { border: 1px solid CanvasText; }
}
/* — rating — */
.eco-rating { --rt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E");
  --rt-s: 24px; --rt-on: var(--eco-brand-button); --rt-off: var(--eco-bg-quaternary); --rt-gap: 4px; display: inline-flex; align-items: center; gap: var(--rt-gap); margin: 0; padding: 0; border: 0; min-width: 0; }
.eco-rating--sm { --rt-s: 16px; --rt-gap: 2px; }
.eco-rating--lg { --rt-s: 32px; --rt-gap: 6px; }
.eco-rating__star { flex: none; width: var(--rt-s); height: var(--rt-s); background: var(--rt-off);
  -webkit-mask: var(--rt-mask) center / contain no-repeat; mask: var(--rt-mask) center / contain no-repeat; }
.eco-rating--read { position: relative; width: max-content; justify-self: start; }
.eco-rating--read .eco-rating__fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: var(--rt-gap); width: calc(var(--v) / 5 * 100%); overflow: hidden; }
.eco-rating--read .eco-rating__fill .eco-rating__star { background: var(--rt-on); }
.eco-rating--input { position: relative; }
.eco-rating--input input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eco-rating--input label { display: inline-grid; place-items: center; width: max(40px, calc(var(--rt-s) + 12px)); height: max(40px, calc(var(--rt-s) + 12px)); margin: calc((var(--rt-s) + 12px - max(40px, var(--rt-s) + 12px)) / 2); border-radius: var(--eco-radius-full); cursor: pointer; }
.eco-rating--input { gap: 0; margin-inline: -8px; }
.eco-rating--input label .eco-rating__star { transition: background-color var(--eco-duration-fast) linear, transform var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-rating--input :is(label:has(~ input:checked), input:checked + label) .eco-rating__star { background: var(--rt-sel, var(--rt-on)); }
.eco-rating--input:hover { --rt-sel: var(--rt-off); }
.eco-rating--input:hover :is(label:has(~ label:hover), label:hover) .eco-rating__star { background: var(--rt-on); }
.eco-rating--input label:hover .eco-rating__star { transform: scale(1.08); }
.eco-rating--input input:focus-visible + label { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-rating--input:has(input:disabled) { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .eco-rating--input label .eco-rating__star { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .eco-rating__star { background: GrayText; }
  .eco-rating--read .eco-rating__fill .eco-rating__star, .eco-rating--input input:checked + label .eco-rating__star { background: CanvasText; }
}
.eco-rating-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: center; width: 100%; }
.eco-rating-sum__big { display: grid; gap: 8px; justify-items: start; }
.eco-rating-sum__big b { font: var(--eco-font-display--weight, 500) var(--eco-text-display-lg)/1 var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing, -.04em); font-variant-numeric: tabular-nums; }
.eco-rating-sum__bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.eco-rating-sum__bars li { display: grid; grid-template-columns: 2.6ch minmax(0, 1fr) 4.5ch; gap: 10px; align-items: center; font-size: var(--eco-text-sm); font-variant-numeric: tabular-nums; color: var(--eco-text-tertiary); }
.eco-rating-sum__bars li > span:last-child { text-align: right; }
.eco-rating-sum__bar { height: 8px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); overflow: hidden; }
.eco-rating-sum__bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--eco-brand-button); }
@media (max-width: 560px) {
  .eco-rating-sum { grid-template-columns: minmax(0, 1fr); }
}
/* — scale — */
.eco-scale { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; width: 100%; min-width: 0; }
.eco-scale legend { padding: 0; margin-bottom: 6px; font: 500 var(--eco-text-md)/1.4 var(--eco-font-body); }
.eco-scale__row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.eco-scale__row input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.eco-scale__row label { display: grid; place-items: center; min-width: 0; height: 44px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-secondary); color: var(--eco-text-primary);
  font: 500 var(--eco-text-sm)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-scale__row label:hover { background: var(--eco-bg-tertiary); }
.eco-scale__row input:checked + label { background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-scale__row input:focus-visible + label { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-scale__ends { display: flex; justify-content: space-between; gap: 16px; font-size: var(--eco-text-xs); color: var(--eco-text-tertiary); }
:is(.eco-card:not(.eco-card--raised, .eco-card--app)) .eco-scale__row label { background: var(--eco-bg-primary); }
@media (max-width: 560px) {
  .eco-scale__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* — helpful — */
.eco-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: 100%; }
.eco-helpful > p { margin: 0 auto 0 0; font: 500 var(--eco-text-md)/1.4 var(--eco-font-body); }
.eco-helpful__acts { display: inline-flex; gap: 8px; }
.eco-helpful__more { display: grid; gap: 10px; width: 100%; }
.eco-helpful__more[hidden], .eco-helpful [hidden] { display: none; }
.eco-helpful__done { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--eco-text-sm); color: var(--eco-text-secondary); }
.eco-helpful__done svg { width: 18px; height: 18px; color: var(--eco-fg-success-primary); }
/* — countdown — */
.eco-countdown { --cd-tile: var(--eco-bg-secondary); --cd-num: var(--eco-text-primary); --cd-lab: var(--eco-text-tertiary); --cd-n: var(--eco-text-display-md); --cd-w: 88px;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--cd-w), 1fr); gap: 8px; margin: 0; }
.eco-countdown--sm { --cd-n: var(--eco-text-display-xs); --cd-w: 64px; gap: 6px; }
.eco-countdown--lg { --cd-n: var(--eco-text-display-lg); --cd-w: 112px; gap: 10px; }
.eco-countdown__unit { display: grid; justify-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: var(--eco-radius-2xl); background: var(--cd-tile); }
.eco-countdown__unit b { font: var(--eco-font-display--weight, 500) var(--cd-n)/1 var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing, -.04em); font-variant-numeric: tabular-nums; color: var(--cd-num); }
.eco-countdown__unit span { font: 500 11px/1 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cd-lab); }
:is(.eco-card:not(.eco-card--raised, .eco-card--app)) .eco-countdown { --cd-tile: var(--eco-bg-primary); }
.eco-countdown--on-dark { --cd-tile: color-mix(in srgb, var(--eco-color-white) 8%, transparent); --cd-num: var(--eco-brand-accent); --cd-lab: color-mix(in srgb, var(--eco-color-white) 64%, transparent); }
.eco-deadline { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--eco-radius-full); font: 500 var(--eco-text-sm)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--eco-bg-secondary); color: var(--eco-text-secondary); }
.eco-deadline svg { width: 16px; height: 16px; flex: none; }
.eco-deadline--soon { background: var(--eco-bg-warning-primary); color: var(--eco-text-warning-primary); }
.eco-deadline--today { background: var(--eco-bg-error-primary); color: var(--eco-text-error-primary); }
.eco-deadline--live { background: var(--eco-bg-brand-primary); color: var(--eco-text-brand-primary); }
.eco-deadline--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eco-fg-brand-secondary); }
.eco-deadline--off { color: var(--eco-text-tertiary); }
@media (max-width: 560px) {
  .eco-countdown--lg { --cd-n: var(--eco-text-display-sm); --cd-w: 0px; display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; }
  .eco-countdown { --cd-w: 0px; }
}
/* — timegrid — */
.eco-timegrid { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.eco-timegrid__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); }
.eco-timegrid__legend > li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eco-timegrid__legend .eco-timegrid__c { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--eco-radius-sm); background: var(--eco-app-control); font: 600 11px/1 var(--eco-font-body); color: var(--eco-text-primary); }
.eco-timegrid__scroll { padding: 8px; }
.eco-timegrid__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: var(--eco-radius-xl); outline: var(--eco-focus-w) solid transparent; background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-timegrid__scroll:focus-visible { box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-timegrid__t { border-collapse: separate; border-spacing: 0; }
.eco-timegrid__t thead { position: sticky; top: 0; z-index: 3; }
.eco-timegrid__t thead th { padding: 6px 4px; }
.eco-timegrid__t thead th.num, .eco-timegrid__t thead th:last-child { padding-inline: 12px; }
.eco-timegrid__t :is(td, tbody th) { padding: 6px 4px; border-bottom: 0; }
.eco-timegrid__t tbody tr:hover :is(td, th) { background: var(--eco-app-card-hover); }
.eco-timegrid__first { position: sticky; left: 0; z-index: 2; min-width: 232px; padding-inline: 12px 16px !important; background: var(--eco-app-card); text-align: left; }
thead .eco-timegrid__first { z-index: 4; background: var(--eco-app-well); }
.eco-timegrid__day { width: 30px; min-width: 30px; text-align: center !important; }
.eco-timegrid__day > span { display: block; font: 600 var(--eco-text-xs)/16px var(--eco-font-body); color: var(--eco-text-secondary); font-variant-numeric: tabular-nums; }
.eco-timegrid__day > small { display: block; font: 400 10px/14px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-timegrid__day.is-today > span { width: 22px; margin: 0 auto; border-radius: var(--eco-radius-full); background: var(--eco-fg-primary); color: var(--eco-bg-primary); }
.eco-timegrid__c { width: 30px; height: 32px; text-align: center; font: 500 var(--eco-text-xs)/1 var(--eco-font-body); color: var(--eco-text-primary); font-variant-numeric: tabular-nums; }
td.eco-timegrid__c { padding: 3px 2px !important; }
td.eco-timegrid__c.is-off, .eco-timegrid__day.is-off { background: color-mix(in srgb, var(--eco-app-well) 70%, transparent); }
thead .eco-timegrid__day.is-off { background: var(--eco-app-well-hover); }
td.eco-timegrid__c:is(.is-leave, .is-sick, .is-trip, .is-risk) { background-clip: content-box; border-radius: 8px; }
.eco-timegrid__c.is-leave, .eco-timegrid__c.is-sick, .eco-timegrid__c.is-trip { background-color: var(--eco-bg-tertiary); font-weight: 600; }
.eco-timegrid__c.is-risk { background-color: var(--eco-bg-error-solid); color: var(--eco-text-white); font-weight: 600; }
.eco-timegrid__c.is-off:empty::after { content: ""; }
.eco-timegrid__grp th { position: sticky; left: 0; padding: 14px 12px 6px !important; background: var(--eco-app-card); font: 600 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); text-align: left; }
.eco-timegrid__t tbody tr.eco-timegrid__grp:hover th { background: var(--eco-app-card); }
.eco-timegrid__t td.num, .eco-timegrid__t td:last-child { padding-inline: 12px; white-space: nowrap; }
.eco-timegrid--month { gap: 4px; }
.eco-timegrid__wk, .eco-timegrid__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.eco-timegrid__wk > li { padding: 4px 12px; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-timegrid__cal > li { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 104px; padding: 10px 12px; border-radius: var(--eco-radius-xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-timegrid__cal > li.is-off { background: color-mix(in srgb, var(--eco-app-card) 55%, transparent); box-shadow: none; }
.eco-timegrid__cal > li.is-out { background: none; }
.eco-timegrid__cal > li.is-past .eco-timegrid__d { color: var(--eco-text-quaternary); }
.eco-timegrid__d { font: 600 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-secondary); font-variant-numeric: tabular-nums; }
.eco-timegrid__cal > li.is-today .eco-timegrid__d { width: 28px; border-radius: var(--eco-radius-full); background: var(--eco-fg-primary); color: var(--eco-bg-primary); text-align: center; }
.eco-timegrid__ev { min-width: 0; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); }
.eco-timegrid__evt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* — task-calendar — */
.eco-task-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 0; min-height: 0; margin: 0; padding: 0; list-style: none; }
.eco-task-week > li { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 8px 8px; border-radius: var(--eco-radius-xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-task-week > li.is-off { background: color-mix(in srgb, var(--eco-app-card) 55%, transparent); box-shadow: none; }
.eco-task-week__hd { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 4px; color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-week__d { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: var(--eco-radius-full); color: var(--eco-text-secondary); font: 600 var(--eco-text-sm)/20px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-week > li.is-today .eco-task-week__d { background: var(--eco-fg-primary); color: var(--eco-bg-primary); }
.eco-task-week > li.is-past .eco-task-week__d { color: var(--eco-text-quaternary); }
.eco-task-week__n { margin-left: auto; font-variant-numeric: tabular-nums; }
.eco-task-week__list { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 0; margin: 0; padding: 0; list-style: none; }
.eco-task-week__none { margin: auto 0; color: var(--eco-text-quaternary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); text-align: center; }
.eco-task-cal__item { --ci-bg: var(--eco-app-well); position: relative; display: grid; gap: 6px; box-sizing: border-box; min-width: 0; margin: 0; padding: 8px 6px; border: 0; border-radius: var(--eco-radius-lg); background: var(--ci-bg); color: var(--eco-text-primary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); text-align: left; cursor: pointer; transition: background-color var(--eco-duration-fast) var(--eco-ease-standard); }
.eco-task-cal__item:is(:hover, .is-hover) { --ci-bg: var(--eco-app-well-hover); }
.eco-task-cal__item:is(.is-selected, [aria-current="true"]) { --ci-bg: var(--eco-bg-brand-primary); }
.eco-task-cal__item:is(:focus-visible, .is-focus) { outline: var(--eco-focus-w) solid transparent; box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-task-cal__top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.eco-task-cal__id { color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); letter-spacing: 0; white-space: nowrap; }
.eco-task-cal__top > .eco-task-prio { margin-left: auto; }
.eco-task-cal__ttl { display: -webkit-box; overflow: hidden; font-weight: 500; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-wrap: pretty; }
.eco-task-cal__item:has(.eco-task-status[data-s="done"], .eco-task-status[data-s="canceled"]) .eco-task-cal__ttl { color: var(--eco-text-secondary); font-weight: 400; }
.eco-task-cal__due { display: inline-flex; align-items: center; gap: 4px; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-task-cal__due > svg { width: 14px; height: 14px; flex: none; }
.eco-task-cal__due.is-late { color: var(--eco-text-warning-primary); font-weight: 500; }
.eco-task-week__list > li { min-width: 0; }
.eco-task-cal__item--tiny { display: flex; width: 100%; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--eco-radius-md); }
.eco-task-cal__item--tiny > .eco-task-status { --ts-s: 14px; }
.eco-task-cal__item--tiny .eco-task-cal__ttl { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eco-task-cal__item--note { --ci-bg: transparent; display: flex; align-items: center; gap: 6px; padding: 4px 6px; color: var(--eco-text-secondary); font-weight: 500; cursor: default; }
.eco-task-cal__item--note > svg { width: 14px; height: 14px; flex: none; color: var(--eco-fg-tertiary); }
.eco-task-day { --hr: 48px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 16px 12px 12px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.eco-task-day__hd { display: flex; align-items: flex-start; gap: 8px; }
.eco-task-day__hd h3 { margin: 0; font: var(--eco-font-display--weight, 500) var(--eco-text-lg)/var(--eco-text-lg--line-height) var(--eco-font-display); letter-spacing: -.04em; }
.eco-task-day__hd p { margin: 2px 0 0; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-day__hd > .eco-badge { margin-left: auto; }
.eco-task-day__tray { display: grid; gap: 6px; }
.eco-task-day__lbl { margin: 0; color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-day__grid { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); flex: none; height: calc(var(--hr) * 10); border-radius: var(--eco-radius-lg); }
.eco-task-day__hours { display: grid; grid-auto-rows: var(--hr); margin: 0; padding: 0; list-style: none; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-day__slots { position: relative; border-radius: var(--eco-radius-lg); background: repeating-linear-gradient(to bottom, var(--eco-app-well) 0 var(--hr), transparent var(--hr) calc(var(--hr) * 2)); }
.eco-task-day__b { position: absolute; left: 4px; right: 4px; top: calc((var(--t) - 9) * var(--hr)); height: calc(var(--d) * var(--hr) - 2px); box-sizing: border-box; overflow: hidden; padding: 4px 8px; border-radius: var(--eco-radius-md); background: var(--eco-app-track); color: var(--eco-text-secondary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); }
.eco-task-day__b > small { display: block; color: var(--eco-text-tertiary); font: 400 var(--eco-text-xs)/16px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-day__b > b { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.eco-task-day__b > b > svg { width: 14px; height: 14px; flex: none; }
.eco-task-day__b--task { background: var(--eco-bg-brand-primary); color: var(--eco-text-primary); }
.eco-task-day__b--drop { background: var(--eco-bg-brand-primary); color: var(--eco-text-primary); }
.eco-task-day__now { position: absolute; z-index: 3; left: 0; right: 0; top: calc((var(--t) - 9) * var(--hr) - 1px); height: 2px; background: var(--eco-bg-brand-solid); pointer-events: none; }
.eco-task-day__now > span {  position: absolute; right: 4px; top: -9px; padding: 0 6px; border-radius: var(--eco-radius-full); background: var(--eco-bg-brand-solid); color: var(--eco-color-black); font: 600 10px/18px var(--eco-font-body); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .eco-task-cal__item { transition: none; } }
@media (forced-colors: active) { .eco-task-cal__item:is(.is-selected, [aria-current="true"]) { outline: 2px solid Highlight; } .eco-task-day__b { outline: 1px solid CanvasText; } .eco-task-day__now { background: Highlight; } }
/* — task-timeline — */
.eco-task-tl { --tl-dw: 40px; --tl-rh: 40px; --tl-name-w: 280px; --tl-hh: 28px; display: grid; grid-template-columns: var(--tl-name-w) minmax(0, 1fr); flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.eco-task-tl__names { display: grid; align-content: start; margin: 0; padding: 0 0 0 8px; list-style: none; }
.eco-task-tl__names > li { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: var(--tl-rh); min-width: 0; padding: 0 8px; border-radius: var(--eco-radius-lg); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-task-tl__names > li:first-child { height: calc(var(--tl-hh) * 2); }
.eco-task-tl__names > li.is-grp { background: var(--eco-app-well); font-weight: 500; }
.eco-task-tl__names > li.is-grp > .eco-task-tl__n { margin-left: auto; color: var(--eco-text-tertiary); font-weight: 400; font-variant-numeric: tabular-nums; }
.eco-task-tl__names > li > .eco-task-status { flex: none; }
.eco-task-tl__id { flex: none; min-width: 44px; color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); letter-spacing: 0; }
.eco-task-tl__t { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.eco-task-tl__names > li.is-late .eco-task-tl__t { color: var(--eco-text-warning-primary); }
.eco-task-tl__chev { width: 16px; height: 16px; flex: none; color: var(--eco-fg-tertiary); }
.eco-task-tl__scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--eco-fg-quaternary) transparent; padding-right: 8px; }
.eco-task-tl__canvas { position: relative; width: calc(var(--tl-days) * var(--tl-dw)); }
.eco-task-tl__hd { position: sticky; top: 0; z-index: 4; background: var(--eco-app-card); }
.eco-task-tl__mo, .eco-task-tl__dy { display: grid; grid-template-columns: repeat(var(--tl-days), var(--tl-dw)); height: var(--tl-hh); margin: 0; padding: 0; list-style: none; }
.eco-task-tl__mo > li { grid-column: span var(--c); display: flex; align-items: center; padding-left: 8px; color: var(--eco-text-secondary); font: 600 var(--eco-text-xs)/16px var(--eco-font-body); white-space: nowrap; }
.eco-task-tl__dy > li { display: grid; place-items: center; align-content: center; color: var(--eco-text-tertiary); font: 400 10px/12px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-task-tl__dy > li > b { font: 600 var(--eco-text-xs)/16px var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-task-tl__dy > li.is-off { color: var(--eco-text-quaternary); }
.eco-task-tl__dy > li.is-off > b { color: var(--eco-text-quaternary); }
.eco-task-tl__dy > li.is-today > b { min-width: 24px; border-radius: var(--eco-radius-full); background: var(--eco-bg-brand-solid); color: var(--eco-color-black); }
.eco-task-tl--wk .eco-task-tl__dy > li > b { padding: 0 2px; }
.eco-task-tl__body { position: relative; display: grid; grid-auto-rows: var(--tl-rh); }
.eco-task-tl__we { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * var(--tl-dw)); width: calc(var(--tl-dw) * 2); background: color-mix(in srgb, var(--eco-app-well) 60%, transparent); pointer-events: none; }
.eco-task-tl__today { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc((var(--i) + .5) * var(--tl-dw) - 1px); width: 2px; background: var(--eco-bg-brand-solid); pointer-events: none; }
.eco-task-tl__r { position: relative; z-index: 1; }
.eco-task-tl__bar { position: absolute; top: 10px; left: calc(var(--s) * var(--tl-dw) + 2px); width: calc(var(--l) * var(--tl-dw) - 4px); height: calc(var(--tl-rh) - 20px); box-sizing: border-box; overflow: hidden; border-radius: var(--eco-radius-md); background: color-mix(in srgb, var(--eco-viz-c1) 18%, transparent); cursor: grab; }
.eco-task-tl__bar > i { display: block; width: calc(var(--p, 0) * 1%); height: 100%; background: var(--eco-viz-c1); }
.eco-task-tl__bar[data-s="done"] > i { background: var(--eco-viz-c2); }
.eco-task-tl__bar.is-late { background: var(--eco-bg-warning-primary); }
.eco-task-tl__bar.is-late > i { background: var(--eco-fg-warning-primary); }
.eco-task-tl__bar:is(:hover, .is-hover) { background: color-mix(in srgb, var(--eco-viz-c1) 28%, transparent); }
.eco-task-tl__bar.is-late:is(:hover, .is-hover) { background: var(--eco-bg-warning-primary); }
.eco-task-tl__bar:focus-visible, .eco-task-tl__bar.is-focus { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 2px var(--eco-app-card), 0 0 0 calc(2px + var(--eco-focus-w)) var(--eco-focus-ring); }
.eco-task-tl__bar.is-drag { z-index: 2; box-shadow: var(--eco-shadow-lg); cursor: grabbing; }
.eco-task-tl__bar.is-drag::before, .eco-task-tl__bar.is-drag::after { content: ""; position: absolute; top: 25%; bottom: 25%; width: 3px; border-radius: 2px; background: var(--eco-bg-primary); opacity: .9; }
.eco-task-tl__bar.is-drag::before { left: 4px; }
.eco-task-tl__bar.is-drag::after { right: 4px; }
.eco-task-tl__tip { position: absolute; z-index: 5; top: 50%; left: calc(var(--s) * var(--tl-dw) + var(--l, 7) * var(--tl-dw) + 8px); translate: 0 -50%; padding: 2px 8px; border-radius: var(--eco-radius-md); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-md); color: var(--eco-text-primary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-task-tl__flag { position: absolute; top: 50%; left: calc((var(--s) + var(--l)) * var(--tl-dw) + 2px); translate: 0 -50%; display: inline-flex; align-items: center; gap: 4px; color: var(--eco-text-warning-primary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); white-space: nowrap; }
.eco-task-tl__flag > svg { width: 14px; height: 14px; flex: none; }
.eco-task-tl__sum { position: absolute; top: 16px; left: calc(var(--s) * var(--tl-dw) + 2px); width: calc(var(--l) * var(--tl-dw) - 4px); height: 8px; border-radius: var(--eco-radius-full); background: color-mix(in srgb, var(--eco-viz-c1) 38%, transparent); }
.eco-task-tl__sum > i { display: block; width: calc(var(--p, 0) * 1%); height: 100%; border-radius: inherit; background: var(--eco-viz-c1); }
.eco-task-tl__sum[data-s="done"] > i { background: var(--eco-viz-c2); }
.eco-task-tl__ms { position: absolute; top: 50%; left: calc((var(--s) + .5) * var(--tl-dw)); display: flex; align-items: center; gap: 16px; translate: -8px -50%; color: var(--eco-text-secondary); font: 500 var(--eco-text-xs)/16px var(--eco-font-body); white-space: nowrap; }
.eco-task-tl__ms.is-end { flex-direction: row-reverse; translate: calc(-100% + 8px) -50%; }
.eco-task-tl__ms > i { flex: none; width: 16px; height: 16px; border-radius: 3px; background: var(--eco-viz-c1); rotate: 45deg; scale: .78; }
.eco-task-tl__ms[data-s="done"] > i { background: var(--eco-viz-c2); }
.eco-task-tl__dep { position: absolute; z-index: 1; top: 0; left: 0; overflow: visible; pointer-events: none; }
.eco-task-tl__dl { fill: none; stroke: var(--eco-viz-label); stroke-width: 1.5; stroke-linejoin: round; }
.eco-task-tl__da { fill: var(--eco-viz-label); }
@media (forced-colors: active) { .eco-task-tl__bar { forced-color-adjust: none; background: GrayText; } .eco-task-tl__bar > i { background: CanvasText; } .eco-task-tl__today { background: Highlight; } .eco-task-tl__dl { stroke: CanvasText; } .eco-task-tl__da { fill: CanvasText; } }
/* — player — */
.eco-player { --vp-ink: var(--eco-color-white); --vp-dim: color-mix(in srgb, var(--eco-color-white) 72%, transparent); --vp-track: color-mix(in srgb, var(--eco-color-white) 26%, transparent);
  --vp-buf: color-mix(in srgb, var(--eco-color-white) 42%, transparent); --vp-hover: color-mix(in srgb, var(--eco-color-white) 14%, transparent); --vp-fill: var(--eco-brand-button, var(--eco-fg-brand-primary));
  position: relative; container: vp / inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--eco-radius-2xl); background: var(--eco-color-black); color: var(--vp-ink); isolation: isolate; outline: var(--eco-focus-w) solid transparent; }
.eco-player:focus-visible { box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.eco-player__video, .eco-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eco-player__poster { z-index: 0; display: block; overflow: hidden; background: var(--eco-color-black); }
.eco-player__poster > span { position: absolute; left: 6%; top: 9%; display: grid; gap: 6px; max-width: 56%; }
.eco-player__poster small { font: 500 clamp(11px, 1.6cqi, 14px)/1.2 var(--eco-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vp-dim); }
.eco-player__poster b { font: var(--eco-font-display--weight, 500) clamp(20px, 4.4cqi, 44px)/1.05 var(--eco-font-display); letter-spacing: -.04em; color: var(--vp-ink); }
.eco-player.is-started .eco-player__poster > span { visibility: hidden; }
.eco-player__scrim { position: absolute; inset: auto 0 0; z-index: 1; height: 46%; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--eco-color-black) 72%, transparent), transparent); transition: opacity var(--eco-duration-base) var(--eco-ease-standard); }
.eco-player__big { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 72px; height: 72px; translate: -50% -50%; padding: 0; }
.eco-player__big svg { width: 28px; height: 28px; margin-left: 3px; }
.eco-player.is-started .eco-player__big { display: none; }
.eco-player:not(.is-started) :is(.eco-player__ui, .eco-player__scrim) { display: none; }
.eco-player__resume { position: absolute; left: 50%; top: calc(50% + 56px); z-index: 3; translate: -50% 0; white-space: nowrap; }
.eco-player.is-started .eco-player__resume { display: none; }
.eco-player__center { position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%; display: grid; justify-items: center; gap: 12px; max-width: 80%; text-align: center; }
.eco-player__center p { margin: 0; font: 500 var(--eco-text-md)/1.4 var(--eco-font-body); }
.eco-player__center span { font-size: var(--eco-text-sm); color: var(--vp-dim); }
.eco-player__center > svg { width: 32px; height: 32px; }
.eco-player__cc { position: absolute; left: 50%; bottom: 16px; z-index: 2; translate: -50% 0; max-width: 84%; padding: 4px 12px; border-radius: var(--eco-radius-md); background: color-mix(in srgb, var(--eco-color-black) 76%, transparent);
  font: 500 clamp(13px, 2.1cqi, 20px)/1.45 var(--eco-font-body); text-align: center; color: var(--vp-ink); transition: bottom var(--eco-duration-base) var(--eco-ease-standard); }
.eco-player__cc:empty, .eco-player__cc[hidden] { display: none; }
.eco-player.is-ui .eco-player__cc { bottom: 96px; }
.eco-player__ui { position: absolute; inset: auto 0 0; z-index: 4; display: grid; gap: 4px; padding: 0 12px 8px; transition: opacity var(--eco-duration-base) var(--eco-ease-standard); }
.eco-player:not(.is-ui) :is(.eco-player__ui, .eco-player__scrim) { opacity: 0; }
.eco-player:not(.is-ui) .eco-player__ui { pointer-events: none; }
.eco-player__row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.eco-player__btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--eco-radius-full); background: transparent; color: var(--vp-ink); cursor: pointer;
  font: 600 13px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; outline: var(--eco-focus-w) solid transparent; transition: background-color var(--eco-duration-fast) linear; }
.eco-player__btn svg { width: 22px; height: 22px; }
.eco-player__btn:hover { background: var(--vp-hover); }
.eco-player__btn:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--vp-ink); }
.eco-player__btn[aria-pressed="true"] { background: var(--vp-ink); color: var(--eco-color-black); }
.eco-player__btn--txt { width: auto; min-width: 40px; padding: 0 10px; }
.eco-player__btn small { position: absolute; right: 2px; top: 5px; padding: 0 3px; border-radius: 4px; background: var(--vp-fill); color: var(--eco-color-black); font: 700 8px/12px var(--eco-font-body); }
.eco-player__time { flex: none; padding: 0 8px; font: 500 var(--eco-text-sm)/1 var(--eco-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-player__time span { color: var(--vp-dim); }
.eco-player__chap { min-width: 0; margin-right: auto; overflow: hidden; padding: 0 4px; font-size: var(--eco-text-sm); color: var(--vp-dim); white-space: nowrap; text-overflow: ellipsis; }
.eco-player__pop { position: relative; flex: none; }
.eco-player__pop > .eco-menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 6; min-width: 176px; }
.eco-player__pop { --eco-menu-label-pt: 6px; }
.eco-player__scrub { position: relative; display: flex; align-items: center; gap: 3px; height: 20px; cursor: pointer; touch-action: none; outline: var(--eco-focus-w) solid transparent; border-radius: var(--eco-radius-full); }
.eco-player__scrub:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--vp-ink); }
.eco-player__seg { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--vp-track); transition: height var(--eco-duration-fast) linear; }
.eco-player__seg::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--b, 0) * 100%); background: var(--vp-buf); }
.eco-player__seg::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--vp-fill); }
.eco-player__scrub:is(:hover, :focus-visible, .is-drag) .eco-player__seg { height: 6px; }
.eco-player__seg.is-hover { height: 8px !important; }
.eco-player__thumb { position: absolute; left: calc(var(--x, 0) * 100%); top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--vp-fill); pointer-events: none; }
.eco-player__tip { position: absolute; left: calc(var(--hx, 0) * 100%); bottom: 22px; translate: -50% 0; display: grid; gap: 2px; justify-items: center; padding: 6px 10px; border-radius: var(--eco-radius-lg); background: var(--eco-bg-primary_alt); color: var(--eco-text-primary);
  font: 500 12px/1.3 var(--eco-font-body); white-space: nowrap; pointer-events: none; box-shadow: var(--eco-shadow-lg); }
.eco-player__tip b { font: 600 13px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-player__tip[hidden] { display: none; }
.eco-player__end { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--eco-color-black) 78%, transparent); }
.eco-player__end[hidden] { display: none; }
.eco-player__next { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 20px; align-items: center; width: min(560px, 100%); }
.eco-player__next figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--eco-radius-xl); background: var(--eco-color-black); }
.eco-player__next figure { background: var(--eco-color-neutral-800); }
.eco-player__next figure img { width: 100%; height: 100%; padding: 8%; box-sizing: border-box; object-fit: contain; }
.eco-player__next figure span { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--eco-color-black) 76%, transparent); font: 500 11px/1.4 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-player__next > div { display: grid; gap: 8px; align-content: center; }
.eco-player__next small { font: 500 11px/1 var(--eco-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vp-fill); }
.eco-player__next b { font: var(--eco-font-display--weight, 500) clamp(20px, 3cqi, 24px)/1.15 var(--eco-font-display); letter-spacing: -.04em; }
.eco-player__next p { margin: 0; font-size: var(--eco-text-sm); color: var(--vp-dim); }
@container vp (max-width: 560px) {
  .eco-player__btn--opt, .eco-player__chap { display: none; }
  .eco-player__row { justify-content: flex-start; }
  .eco-player__row > .eco-player__time { margin-right: auto; }
  .eco-player__next { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .eco-player__next figure, .eco-player__next p { display: none; }
  .eco-player__big { width: 56px; height: 56px; }
  .eco-player.is-ui .eco-player__cc { bottom: 84px; }
}
@container vp (max-width: 380px) {
  .eco-player__btn--mid { display: none; }
  .eco-player__poster > span { display: none; }
  .eco-player.is-ui .eco-player__cc { bottom: 76px; }
}
.eco-chapters { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; counter-reset: ch; }
.eco-chapter { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--eco-radius-xl); background: transparent; color: var(--eco-text-primary);
  font: 500 var(--eco-text-sm)/1.35 var(--eco-font-body); text-align: left; cursor: pointer; outline: var(--eco-focus-w) solid transparent; transition: background-color var(--eco-duration-fast) linear; }
.eco-chapter:hover { background: var(--eco-bg-secondary); }
.eco-chapter:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-chapter > i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eco-bg-secondary); font: 500 12px/1 var(--eco-font-mono); font-style: normal; color: var(--eco-text-tertiary); }
.eco-chapter > i svg { width: 14px; height: 14px; }
.eco-chapter > span { min-width: 0; }
.eco-chapter > time { font: 400 12px/1 var(--eco-font-mono); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-chapter.is-done > i { background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-chapter[aria-current="true"] { background: var(--eco-bg-brand-primary); }
.eco-chapter[aria-current="true"] > i { background: var(--eco-brand-button); color: var(--eco-text-primary_on-brand, var(--eco-color-white)); }
@media (prefers-reduced-motion: reduce) {
  :is(.eco-player__ui, .eco-player__scrim, .eco-player__cc, .eco-player__seg) { transition: none; }
}
@media (forced-colors: active) {
  .eco-player__seg::after { background: Highlight; }
  .eco-player__btn { border: 1px solid ButtonText; }
}
/* — transcript — */
.eco-transcript { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.eco-transcript button { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--eco-radius-lg); background: transparent; color: var(--eco-text-secondary);
  font: 400 var(--eco-text-sm)/1.5 var(--eco-font-body); text-align: left; cursor: pointer; outline: var(--eco-focus-w) solid transparent; }
.eco-transcript button:hover { background: var(--eco-bg-secondary); }
.eco-transcript button:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-transcript time { font: 400 12px/1.9 var(--eco-font-mono); color: var(--eco-text-tertiary); }
.eco-transcript button[aria-current="true"] { background: var(--eco-bg-brand-primary); color: var(--eco-text-primary); }
/* — task-cycle — */
.eco-task-cycle { display: grid; gap: var(--eco-app-gap, 16px); align-content: start; min-width: 0; }
.eco-task-cycle__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--eco-app-gap, 16px); align-items: start; min-width: 0; }
.eco-task-cycle__cols > * { min-width: 0; }
.eco-task-cycle__cols > .eco-task__list { overflow: visible; }
@container (max-width: 900px) { .eco-task-cycle__cols { grid-template-columns: minmax(0, 1fr); } }
.eco-task-cycle { container: task-cycle / inline-size; }
.eco-task-cycle__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--eco-text-tertiary); font: 400 var(--eco-text-sm)/20px var(--eco-font-body); }
.eco-task-cycle__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.eco-task-cycle__meta svg { width: 16px; height: 16px; flex: none; }
.eco-task-cycle__t { display: grid; gap: 2px; min-width: 0; }
/* — gallery — */
.eco-gallery { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.eco-gallery--feature > li:first-child { grid-column: span 2; grid-row: span 2; }
.eco-gallery__item { position: relative; display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-secondary); cursor: zoom-in; outline: var(--eco-focus-w) solid transparent; }
.eco-gallery--feature > li:first-child .eco-gallery__item { aspect-ratio: auto; }
.eco-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--eco-duration-fast) linear; }
.eco-gallery__item::after { content: ""; position: absolute; inset: 0; background: var(--eco-color-black); opacity: 0; transition: opacity var(--eco-duration-fast) linear; }
.eco-gallery__item:hover::after { opacity: .12; }
.eco-gallery__item:focus-visible { box-shadow: 0 0 0 2px var(--eco-focus-gap, var(--eco-bg-primary)), 0 0 0 calc(2px + var(--eco-focus-w)) var(--focus-c, var(--eco-focus-ring)); }
.eco-gallery__more { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: color-mix(in srgb, var(--eco-color-black) 56%, transparent); color: var(--eco-color-white); font: var(--eco-font-display--weight, 500) var(--eco-text-display-xs)/1 var(--eco-font-display); letter-spacing: -.04em; }
@media (max-width: 900px) {
  .eco-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* — lightbox — */
.eco-lightbox { --lb-bg: var(--eco-bg-primary); --btn-t-bg: var(--eco-bg-secondary); box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px;
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 12px 16px 16px; border: 0; background: var(--lb-bg); color: var(--eco-text-primary); }
dialog.eco-lightbox { position: fixed; inset: 0; }
dialog.eco-lightbox:not([open]) { display: none; }
dialog.eco-lightbox::backdrop { background: var(--eco-bg-overlay); }
.eco-lightbox--inline { position: relative; height: auto; aspect-ratio: 16 / 10; border-radius: var(--eco-radius-3xl); }
.eco-lightbox__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eco-lightbox__count { margin-right: auto; padding: 0 8px; font: 500 13px/1 var(--eco-font-mono); letter-spacing: .04em; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-lightbox__count b { font-weight: 500; color: var(--eco-text-primary); }
.eco-lightbox__stage { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; min-height: 0; touch-action: pan-y; }
.eco-lightbox__frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: var(--eco-radius-xl); cursor: zoom-in; outline: var(--eco-focus-w) solid transparent; }
.eco-lightbox__frame:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-lightbox__frame img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--eco-radius-lg); transition: opacity var(--eco-duration-fast) linear; }
.eco-lightbox__frame.is-loading img { opacity: 0; }
.eco-lightbox__frame > .eco-loader { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.eco-lightbox__frame:not(.is-loading) > .eco-loader { display: none; }
.eco-lightbox__frame.is-zoom { display: block; overflow: auto; overscroll-behavior: contain; cursor: grab; touch-action: pan-x pan-y; }
.eco-lightbox__frame.is-zoom.is-pan { cursor: grabbing; }
.eco-lightbox__frame.is-zoom img { max-width: none; max-height: none; width: calc(var(--zw, 1600) * 1px); border-radius: 0; }
.eco-lightbox__nav { justify-self: center; }
.eco-lightbox__nav:disabled { opacity: .4; }
.eco-lightbox__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 16px; padding: 0 8px; }
.eco-lightbox__cap { display: grid; gap: 2px; min-width: 0; }
.eco-lightbox__cap b { font: 500 var(--eco-text-md)/1.4 var(--eco-font-body); }
.eco-lightbox__cap span { font-size: var(--eco-text-sm); color: var(--eco-text-tertiary); }
.eco-lightbox__thumbs { display: flex; gap: 6px; max-width: 50vw; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.eco-lightbox__thumbs button { flex: none; width: 56px; height: 40px; padding: 0; overflow: hidden; border: 0; border-radius: var(--eco-radius-md); background: var(--eco-bg-secondary); opacity: .5; cursor: pointer; outline: var(--eco-focus-w) solid transparent; transition: opacity var(--eco-duration-fast) linear; }
.eco-lightbox__thumbs button:hover { opacity: .8; }
.eco-lightbox__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--eco-brand-button); }
.eco-lightbox__thumbs button:focus-visible { opacity: 1; box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.eco-lightbox__hint { display: none; position: absolute; left: 50%; bottom: 12px; z-index: 2; translate: -50% 0; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--eco-radius-full); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-lg); font-size: var(--eco-text-sm); font-weight: 500; white-space: nowrap; pointer-events: none; }
.eco-lightbox__hint svg { width: 18px; height: 18px; }
@media (pointer: coarse) {
  .eco-lightbox__hint:not([hidden]) { display: inline-flex; }
}
.eco-lightbox--inline .eco-lightbox__hint.is-demo { display: inline-flex; }
.eco-lightbox__hint[hidden] { display: none !important; }
@media (max-width: 640px) {
  .eco-lightbox { padding: 8px 8px 12px; }
  .eco-lightbox__stage { grid-template-columns: minmax(0, 1fr); }
  .eco-lightbox__nav { display: none; }
  .eco-lightbox__bottom { grid-template-columns: minmax(0, 1fr); }
  .eco-lightbox__thumbs { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.eco-lightbox__frame img, .eco-gallery__item img, .eco-gallery__item::after, .eco-lightbox__thumbs button) { transition: none; }
}
@media (forced-colors: active) {
  .eco-lightbox__thumbs button[aria-current="true"] { outline: 2px solid Highlight; }
}
/* — task-table — */
.eco-task-tbl { padding: 0 8px 8px; min-width: 0; }
.eco-task-tbl--scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.eco-table :is(td, th).eco-task-cell { position: relative; padding: 4px 10px; white-space: nowrap; }
.eco-table th.eco-task-cell { padding: 9px 10px; }
.eco-table td.eco-task-cell { font-size: var(--eco-text-sm); }
.eco-table td.eco-task-cell--id { color: var(--eco-text-tertiary); font: 500 var(--eco-text-xs)/16px var(--eco-font-mono); letter-spacing: 0; font-weight: 500; }
.eco-table td.eco-task-cell--title { max-width: 380px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.eco-table td.eco-task-cell--due { font-variant-numeric: tabular-nums; }
.eco-table td.eco-task-cell.is-edit { background: var(--eco-bg-brand-primary); box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); border-radius: var(--eco-radius-md); }
.eco-table tbody tr:hover td.eco-task-cell.is-edit { background: var(--eco-bg-brand-primary); }
.eco-task-pop { position: absolute; z-index: 8; top: calc(100% + 4px); left: 2px; display: block; }
.eco-task-pop--end { left: auto; right: 2px; }
.eco-task-vchips { display: inline-flex; flex-wrap: nowrap; gap: 6px; }
/* — time — */
.eco-time { display: grid; gap: 16px; width: 100%; max-width: 340px; padding: 24px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); }
.eco-time__label { font: 500 var(--eco-text-sm)/1.3 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-time__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.eco-time__f { display: grid; gap: 6px; }
.eco-time__f input { width: 100%; height: 72px; border: 0; border-radius: var(--eco-radius-2xl); background: var(--btn-t-bg); color: var(--eco-text-primary); font: var(--eco-font-display--weight, 500) 44px/1 var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing, 0); text-align: center; font-variant-numeric: tabular-nums; }
.eco-time__f input:hover { background: var(--btn-t-bg-hover); }
.eco-time__f input:focus-visible, .eco-time__f input.is-on { outline: var(--eco-field-focus-w) solid transparent; outline-offset: 0; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-time__f small { text-align: center; font-size: 12px; color: var(--eco-text-tertiary); }
.eco-time__sep { font: var(--eco-font-display--weight, 500) 40px/1 var(--eco-font-display); color: var(--eco-text-tertiary); padding-bottom: 22px; }
.eco-time__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.eco-time__acts { display: flex; justify-content: flex-end; gap: 8px; }
/* — appbar — */
.eco-appbar { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 4px 4px 8px; background: var(--eco-bg-primary); color: var(--eco-text-primary); }
.eco-appbar__title { flex: 1; min-width: 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--eco-text-lg)/1.3 var(--eco-font-body); }
.eco-appbar { --eco-btn-ghost-fg: var(--eco-fg-secondary); }
.eco-appbar--lg { flex-wrap: wrap; padding-bottom: 12px; }
.eco-appbar--lg .eco-appbar__title { flex-basis: 100%; order: 9; padding: 16px 12px 0; white-space: normal; font: var(--eco-font-display--weight, 500) var(--eco-text-display-xs)/1.2 var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing, 0); }
.eco-appbar--lg .sp { flex: 1; }
.eco-appbar__sub { order: 10; flex-basis: 100%; padding: 4px 12px 0; font-size: 14px; color: var(--eco-text-tertiary); }
/* — rtip — */
.eco-rtip { display: grid; gap: 6px; width: max-content; max-width: min(320px, 100%); padding: 14px 16px 10px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); box-shadow: inset 0 0 0 1px var(--menu-edge, transparent), var(--eco-shadow-lg); }
.eco-rtip__title { font: 600 var(--eco-text-sm)/1.35 var(--eco-font-body); }
.eco-rtip__text { font-size: 14px; line-height: 1.5; color: var(--eco-text-tertiary); }
.eco-rtip__acts { display: flex; gap: 4px; margin: 4px -8px 0; }
/* — actionbar — */
.eco-actionbar { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--eco-radius-full); background: var(--eco-bg-primary_alt); box-shadow: var(--eco-shadow-lg); color: var(--eco-text-primary); }
.eco-actionbar__sep { flex: none; align-self: stretch; width: 1px; margin: 6px 4px; background: var(--eco-border-tertiary); }
/* — tile — */
.eco-tile { padding: var(--eco-tile-pad, 12px 14px); border-radius: var(--eco-tile-r, var(--eco-radius-2xl)); background: var(--eco-tile-bg, var(--eco-app-well)); }
.eco-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
.eco-counts > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--eco-radius-2xl); background: var(--eco-app-well); }
.eco-counts b { font: 500 18px/1 var(--eco-font-display); font-variant-numeric: tabular-nums; }
.eco-counts span { font-size: 13px; color: var(--eco-text-secondary); }
.eco-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.eco-strip > div { display: grid; justify-items: center; gap: 6px; padding: 8px 0; border-radius: var(--eco-radius-lg); background: var(--eco-app-well); font-size: 11.5px; color: var(--eco-text-tertiary); }
/* — select — */
.eco-select { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px 0 16px; border-radius: var(--eco-radius-full); background: var(--eco-select-bg, var(--eco-bg-secondary)); color: var(--eco-text-primary); font: 500 14px/1 var(--eco-font-body); white-space: nowrap; }
.eco-select > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eco-select > small { color: var(--eco-text-tertiary); font-size: 12px; }
.eco-select svg { width: 16px; height: 16px; color: var(--eco-fg-tertiary); }
.eco-select--empty > span { color: var(--eco-text-placeholder); }
/* — facts — */
.eco-facts { display: grid; gap: 2px; }
.eco-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 2px; font-size: 14px; }
.eco-facts > div + div { box-shadow: inset 0 1px 0 var(--eco-facts-line, var(--eco-app-well)); }
.eco-facts dt, .eco-facts > div > span:first-child { color: var(--eco-text-tertiary); }
.eco-facts b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* — hero — */
.eco-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 22px 24px; border-radius: var(--eco-hero-r, var(--eco-radius-3xl)); background: var(--eco-hero-bg, var(--eco-bg-brand-solid)); color: var(--eco-hero-ink, var(--eco-text-primary_on-brand)); }
.eco-hero__who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.eco-hero { --eco-eyebrow-ink: var(--eco-hero-ink-2, color-mix(in srgb, var(--eco-hero-ink, var(--eco-text-primary_on-brand)) 72%, transparent)); }
.eco-hero p { color: var(--eco-hero-ink-2, color-mix(in srgb, var(--eco-hero-ink, var(--eco-text-primary_on-brand)) 72%, transparent)); }
:is(.eco-hero, .eco-app .eco-hero) h2 { margin-top: 2px; font-weight: var(--eco-font-display--weight-strong, 700); font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: inherit; }
.eco-hero p { margin-top: 4px; font-size: 14px; }
.eco-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.eco-hero__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--eco-radius-full); background: var(--eco-hero-fill, color-mix(in srgb, var(--eco-hero-ink, var(--eco-text-primary_on-brand)) 14%, transparent)); font: 500 12px/1 var(--eco-font-body); color: inherit; }
.eco-hero__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.eco-hero__stat { display: grid; gap: 2px; min-width: 104px; padding: 10px 14px; border-radius: var(--eco-radius-2xl); background: var(--eco-hero-fill, color-mix(in srgb, var(--eco-hero-ink, var(--eco-text-primary_on-brand)) 14%, transparent)); }
.eco-hero__stat b { font: var(--eco-font-display--weight-strong, 700) 26px/30px var(--eco-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.eco-hero__stat span { font-size: 12px; line-height: 16px; color: var(--eco-hero-ink-2, color-mix(in srgb, var(--eco-hero-ink, var(--eco-text-primary_on-brand)) 72%, transparent)); }
.eco-hero__stat--hot { background: var(--eco-color-white); color: var(--eco-color-black); }
.eco-hero__stat--hot span { color: var(--eco-color-black); opacity: .72; }
.eco-hero__act { display: flex; flex-wrap: wrap; gap: 8px; }
/* — more — */
.eco-more { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/20px var(--eco-font-body); color: var(--eco-text-brand-secondary); text-decoration: none; white-space: nowrap; }
.eco-more svg { width: 14px; height: 14px; }
.eco-more:hover { color: var(--eco-text-brand-secondary_hover); }
/* — gauge — */
.eco-gauge { display: grid; gap: 10px; align-content: center; justify-self: stretch; width: 100%; min-width: 0; flex: 1 1 200px; }
.eco-gauge > small { font-size: 13px; line-height: 18px; color: var(--eco-text-tertiary); }
.eco-gauge > b { font: var(--eco-font-display--weight, 500) 44px/1 var(--eco-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
/* — tour — */
.eco-tour-spot { position: absolute; z-index: 5; left: var(--x, 0); top: var(--y, 0); width: var(--w, 0); height: var(--h, 0); border-radius: var(--r, 16px); pointer-events: none;
  box-shadow: 0 0 0 9999px var(--eco-bg-overlay); transition: left var(--eco-duration-base) var(--eco-ease-standard), top var(--eco-duration-base) var(--eco-ease-standard), width var(--eco-duration-base) var(--eco-ease-standard), height var(--eco-duration-base) var(--eco-ease-standard); }
.eco-tour-spot[hidden], .eco-tour[hidden] { display: none; }
.eco-tour { position: absolute; z-index: 6; left: var(--cx, 0); top: var(--cy, 0); display: grid; gap: 10px; box-sizing: border-box; width: min(320px, calc(100% - 24px)); padding: 18px 18px 16px; border-radius: var(--eco-radius-4xl);
  background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); box-shadow: var(--eco-shadow-lg); transition: left var(--eco-duration-base) var(--eco-ease-standard), top var(--eco-duration-base) var(--eco-ease-standard); }
.eco-tour:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: var(--eco-shadow-lg), 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-tour__step { margin: 0; font: 500 11px/1 var(--eco-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--eco-text-brand-primary); }
.eco-tour__title { margin: 0; padding-right: 32px; font: 600 var(--eco-text-md)/1.35 var(--eco-font-body); }
.eco-tour__text { margin: 0; font-size: var(--eco-text-sm); line-height: 1.5; color: var(--eco-text-secondary); }
.eco-tour__foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.eco-tour__dots { display: inline-flex; gap: 6px; margin-right: auto; }
.eco-tour__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--eco-bg-quaternary); transition: width var(--eco-duration-base) var(--eco-ease-standard), background-color var(--eco-duration-base) linear; }
.eco-tour__dots i.is-on { width: 18px; border-radius: 3px; background: var(--eco-brand-button); }
.eco-tour__close { position: absolute; right: 10px; top: 10px; }
.eco-tour__skip { margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  .eco-tour-spot, .eco-tour, .eco-tour__dots i { transition: none; }
}
@media (forced-colors: active) {
  .eco-tour-spot { outline: 2px solid Highlight; }
  .eco-tour { border: 1px solid CanvasText; }
}
/* — tag-input — */
.eco-tags { --tg-h: 44px; --tg-in: 6px; --tg-pill: calc(var(--tg-h) - 2 * var(--tg-in)); --tg-r: calc(var(--tg-h) / 2); --field-bg: var(--eco-bg-secondary); --affix-bg: var(--eco-bg-primary_alt); --tg-ring: transparent;
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--tg-h); padding: var(--tg-in); border-radius: var(--tg-r);
  background: var(--field-bg); color: var(--eco-text-primary); cursor: text; box-shadow: 0 0 0 var(--eco-field-focus-w) var(--tg-ring); outline: var(--eco-field-focus-w) solid transparent;
  transition: box-shadow var(--eco-duration-fast) linear, background-color var(--eco-duration-fast) linear; }
.eco-tags--sm { --tg-h: 40px; }
:is(.eco-card:not(.eco-card--raised, .eco-card--app)) .eco-tags { --field-bg: var(--eco-bg-primary); --affix-bg: var(--eco-bg-secondary); }
.eco-tags:hover:not(:focus-within, .is-disabled) { background: color-mix(in srgb, var(--field-bg) 50%, var(--eco-bg-secondary_hover)); }
.eco-tags:focus-within, .eco-tags.is-focus { --tg-ring: var(--eco-brand-button, var(--eco-focus-ring)); }
.eco-tags.is-error { --tg-ring: var(--eco-focus-ring-error); }
.eco-tags.is-disabled { opacity: .5; cursor: not-allowed; }
.eco-tags.is-disabled * { pointer-events: none; }
.eco-tags__list { display: contents; list-style: none; margin: 0; padding: 0; }
.eco-tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: var(--tg-pill); padding: 0 4px 0 12px; border-radius: var(--eco-radius-full); background: var(--affix-bg); color: var(--eco-text-primary);
  font: 500 var(--eco-text-sm)/1 var(--eco-font-body); white-space: nowrap; }
.eco-tag > span { overflow: hidden; text-overflow: ellipsis; }
.eco-tag__new { padding-left: 4px; font-weight: 400; color: var(--eco-text-tertiary); }
.eco-tags--sm .eco-tag { padding-left: 10px; font-size: var(--eco-text-xs); }
.eco-tag__x { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--eco-fg-quaternary); cursor: pointer;
  outline: var(--eco-focus-w) solid transparent; transition: background-color var(--eco-duration-fast) linear, color var(--eco-duration-fast) linear; }
.eco-tags--sm .eco-tag__x { width: 20px; height: 20px; }
.eco-tag__x svg { width: 14px; height: 14px; }
.eco-tag__x:hover { background: color-mix(in srgb, var(--affix-bg), var(--eco-text-primary) 8%); color: var(--eco-fg-primary); }
.eco-tag__x:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); color: var(--eco-fg-primary); }
.eco-tags__input { flex: 1 0 64px; min-width: 0; height: var(--tg-pill); margin: 0; padding: 0 calc(16px - var(--tg-in)); border: 0; outline: 0; background: none; color: inherit; font: 400 var(--eco-text-md)/1 var(--eco-font-body); }
.eco-tags--sm .eco-tags__input { padding-inline: calc(14px - var(--tg-in)); font-size: var(--eco-text-sm); }
.eco-tag + .eco-tags__input, .eco-tags__list:not(:empty) + .eco-tags__input { padding-left: 6px; }
.eco-tags__input::placeholder { color: var(--eco-text-placeholder); opacity: 1; }
.eco-tags__list:not(:empty) + .eco-tags__input::placeholder { color: transparent; }
.eco-tags__input:disabled { cursor: not-allowed; }
.eco-tags:has(> .eco-tags__count) { padding-right: 50px; }
.eco-tags__input:is(:focus, :focus-visible) { outline: 0; box-shadow: none; }
.eco-tags__count { position: absolute; right: 16px; top: calc(var(--tg-h) / 2); translate: 0 -50%; pointer-events: none; right: 14px; font: 500 12px/1 var(--eco-font-mono); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-tags.is-full .eco-tags__count { color: var(--eco-text-primary); }
.eco-tags { --eco-menu-max-h: 280px; }
.eco-tags > .eco-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; min-width: 0; max-width: none; }
.eco-tags > .eco-menu.is-static { position: static; margin-top: 8px; flex-basis: 100%; }
.eco-tags .eco-menu__item[hidden] { display: none; }
.eco-tags__empty { padding: 10px 12px; font: 400 var(--eco-text-sm)/24px var(--eco-font-body); color: var(--eco-text-tertiary); }
@media (forced-colors: active) {
  .eco-tags { border: 1px solid CanvasText; }
  .eco-tag { border: 1px solid CanvasText; }
}
/* — miniapp — */
.eco-miniapp[hidden] { display: none; }
.eco-miniapp { display: grid; gap: 14px; align-content: start; }
.eco-miniapp__h { margin: 6px 0 0; font: var(--eco-font-display--weight, 500) 28px/1.1 var(--eco-font-display); letter-spacing: -.04em; }
.eco-miniapp__h--sm { font-size: 22px; }
.eco-miniapp__sub { margin: -6px 0 0; font-size: 14px; line-height: 1.45; color: var(--eco-text-tertiary); }
.eco-miniapp__cap { margin: 4px 0 -6px 4px; font: 500 12px/1 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--eco-text-tertiary); }
.eco-miniapp__card { display: grid; gap: 10px; padding: 16px; border-radius: var(--eco-radius-2xl); background: var(--tm-card); }
.eco-miniapp__list { display: grid; padding: 0 16px; border-radius: var(--eco-radius-2xl); background: var(--tm-card); }
.eco-miniapp__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; font-size: 15px; line-height: 1.3; }
.eco-miniapp__row + .eco-miniapp__row { box-shadow: 0 -1px 0 var(--tm-sep); }
button.eco-miniapp__row, a.eco-miniapp__row { width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.eco-miniapp__row > span:not(.eco-miniapp__ic):not(.eco-avatar):not(.eco-miniapp__dot):not(.eco-miniapp__time) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.eco-miniapp__row small { font-size: 13px; color: var(--eco-text-tertiary); }
.eco-miniapp__row > em { font-style: normal; font-size: 14px; color: var(--eco-text-tertiary); white-space: nowrap; }
.eco-miniapp__row > svg { flex: none; width: 18px; height: 18px; color: var(--eco-fg-quaternary); }
.eco-miniapp__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-miniapp__ic svg { width: 20px; height: 20px; }
.eco-miniapp__ic--n { background: var(--tm-page); color: var(--eco-fg-secondary); }
.eco-miniapp__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--eco-brand-button); }
.eco-miniapp__dot.is-read { background: transparent; }
.eco-miniapp__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px; padding: 4px 16px; }
.eco-miniapp__chips::-webkit-scrollbar { display: none; }
.eco-miniapp__chip { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: var(--eco-radius-full); background: var(--tm-card); color: var(--eco-text-secondary); font: 500 14px/1 var(--eco-font-body); cursor: pointer; }
.eco-miniapp__chip[aria-pressed="true"] { background: var(--tm-inv-bg); color: var(--tm-inv-fg); }
.eco-miniapp__chip:focus-visible, .eco-miniapp__course:focus-visible, button.eco-miniapp__row:focus-visible, .eco-miniapp__day:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 2px var(--tm-page), 0 0 0 calc(2px + var(--eco-focus-w)) var(--eco-focus-ring); }
.eco-miniapp__search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: var(--eco-radius-full); background: var(--tm-card); color: var(--eco-text-tertiary); font-size: 15px; }
.eco-miniapp__search svg { width: 18px; height: 18px; }
.eco-miniapp__course { display: grid; gap: 0; overflow: hidden; padding: 0; border: 0; border-radius: var(--eco-radius-3xl); background: var(--tm-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.eco-miniapp__course[hidden] { display: none; }
.eco-miniapp__cover { position: relative; display: block; height: 128px; overflow: hidden; background: var(--cv, var(--eco-bg-brand-solid)); }
.eco-miniapp__cover img { position: absolute; right: -10px; top: 50%; width: 150px; height: 150px; margin-top: -75px; object-fit: contain; }
.eco-miniapp__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--eco-radius-full); background: var(--eco-color-white); color: var(--eco-color-black); font: 500 12px/1 var(--eco-font-body); }
.eco-miniapp__cover--b { --cv: var(--eco-color-neutral-900); }
.eco-miniapp__cover--g { --cv: var(--eco-bg-tertiary); }
.eco-miniapp__cover--lg { height: 184px; border-radius: var(--eco-radius-3xl); }
.eco-miniapp__cover--lg img { width: 210px; height: 210px; margin-top: -105px; right: -14px; }
.eco-miniapp__cinfo { display: grid; gap: 6px; padding: 14px 16px 16px; }
.eco-miniapp__cinfo b { font: var(--eco-font-display--weight, 500) 20px/1.15 var(--eco-font-display); letter-spacing: -.04em; }
.eco-miniapp__meta { font-size: 13px; color: var(--eco-text-tertiary); }
.eco-miniapp__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eco-miniapp__price small { font-size: 13px; font-weight: 400; color: var(--eco-text-tertiary); }
.eco-miniapp__sk { display: grid; gap: 12px; }
.eco-miniapp__sk[hidden] { display: none; }
.eco-miniapp__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eco-miniapp__facts > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--eco-radius-2xl); background: var(--tm-card); }
.eco-miniapp__facts span { font-size: 12px; color: var(--eco-text-tertiary); }
.eco-miniapp__facts b { font-size: 15px; font-weight: 600; }
.eco-miniapp__learn { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.eco-miniapp__learn li { display: flex; gap: 10px; }
.eco-miniapp__learn svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--eco-fg-brand-primary); }
.eco-miniapp__card > b { font-size: 15px; font-weight: 600; }
.eco-miniapp__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.eco-miniapp__steps i { height: 4px; border-radius: 2px; background: var(--eco-bg-quaternary); }
.eco-miniapp__steps i.is-on { background: var(--eco-brand-button); }
.eco-miniapp__step { margin: 0; font: 500 12px/1 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--eco-text-tertiary); }
.eco-miniapp { --eco-choice-bg: var(--tm-page); }
.eco-miniapp .eco-input, .eco-miniapp .eco-input-group { --field-bg: var(--tm-page); --field-bg-hover: var(--tm-page); }
.eco-miniapp__sum { display: grid; gap: 0; margin: 0; }
.eco-miniapp__sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.eco-miniapp__sum > div + div { box-shadow: 0 -1px 0 var(--tm-sep); }
.eco-miniapp__sum dt { color: var(--eco-text-tertiary); }
.eco-miniapp__sum dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.eco-miniapp__sum .is-total dt, .eco-miniapp__sum .is-total dd { color: var(--eco-text-primary); font-size: 16px; font-weight: 600; }
.eco-miniapp__ok { display: grid; justify-items: center; gap: 12px; padding: 40px 8px 8px; text-align: center; }
.eco-miniapp__ok .eco-miniapp__ic { width: 72px; height: 72px; border-radius: 50%; background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-miniapp__ok .eco-miniapp__ic svg { width: 36px; height: 36px; }
.eco-miniapp__ok p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--eco-text-secondary); }
.eco-miniapp__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.eco-miniapp__day { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border: 0; border-radius: var(--eco-radius-xl); background: var(--tm-card); color: var(--eco-text-tertiary); font: 500 11px/1 var(--eco-font-body); cursor: pointer; }
.eco-miniapp__day b { font: 600 16px/1 var(--eco-font-body); color: var(--eco-text-primary); font-variant-numeric: tabular-nums; }
.eco-miniapp__day[aria-pressed="true"] { background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-miniapp__day[aria-pressed="true"] b { color: inherit; }
.eco-miniapp__day i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.eco-miniapp__day:not(.has) i { visibility: hidden; }
.eco-miniapp__next { display: grid; gap: 6px; padding: 16px; border-radius: var(--eco-radius-2xl); background: var(--tm-inv-bg); color: var(--tm-inv-fg); }
.eco-miniapp__next span { font: 500 12px/1 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .64; }
.eco-miniapp__next b { font: var(--eco-font-display--weight, 500) 22px/1.15 var(--eco-font-display); letter-spacing: -.04em; }
.eco-miniapp__next small { font-size: 13px; opacity: .72; }
.eco-miniapp__time { flex: none; width: 48px; font: 600 14px/1.2 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-miniapp__time small { display: block; font-weight: 400; }
.eco-miniapp__me { display: grid; justify-items: center; gap: 8px; padding-top: 8px; text-align: center; }
.eco-miniapp__me b { font: var(--eco-font-display--weight, 500) 22px/1.15 var(--eco-font-display); letter-spacing: -.04em; }
.eco-miniapp__me small { font-size: 13px; color: var(--eco-text-tertiary); }
.eco-miniapp__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eco-miniapp__stats > div { display: grid; gap: 4px; padding: 12px; border-radius: var(--eco-radius-2xl); background: var(--tm-card); text-align: center; }
.eco-miniapp__stats b { font: var(--eco-font-display--weight, 500) 22px/1 var(--eco-font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.eco-miniapp__stats span { font-size: 12px; color: var(--eco-text-tertiary); }
.eco-miniapp__cert { --on: var(--eco-brand-on-button); display: grid; gap: 12px; padding: 16px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-brand-solid); color: var(--on); }
.eco-miniapp__cert span { font: 500 12px/1 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--on) 72%, transparent); }
.eco-miniapp__cert b { font: var(--eco-font-display--weight, 500) 24px/1.1 var(--eco-font-display); letter-spacing: -.04em; }
.eco-miniapp__cert small { font-size: 13px; color: color-mix(in srgb, var(--on) 72%, transparent); font-variant-numeric: tabular-nums; }
.eco-miniapp__cert-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--eco-radius-full); background: var(--on); color: var(--eco-bg-brand-solid); font: 600 14px/1 var(--eco-font-body); cursor: pointer; }
.eco-miniapp__cert-btn svg { width: 18px; height: 18px; }
.eco-miniapp__cert-btn:focus-visible { outline: var(--eco-focus-w) solid transparent; box-shadow: 0 0 0 2px var(--eco-bg-brand-solid), 0 0 0 calc(2px + var(--eco-focus-w)) var(--on); }
@media (forced-colors: active) { .eco-miniapp__card, .eco-miniapp__list, .eco-miniapp__course { border: 1px solid CanvasText; } }
/* — phone — */
.eco-phone { position: relative; display: flex; flex-direction: column; flex: none; width: 393px; height: 852px; overflow: hidden; border-radius: 55px; zoom: var(--eco-phone-zoom);
  background: var(--eco-phone-bg, var(--eco-bg-primary)); color: var(--eco-text-primary); font: 400 17px/22px var(--eco-font-body); text-align: left; isolation: isolate; -webkit-font-smoothing: antialiased; }
.eco-phone[data-os="and"] { width: 412px; height: 915px; border-radius: 34px; font-size: 16px; line-height: 24px; }
.eco-phone[data-os="ios"] .eco-phone__and, .eco-phone[data-os="and"] .eco-phone__ios { display: none !important; }
.eco-phone * { box-sizing: border-box; }
.eco-phone svg { flex: none; }
.eco-phone--grey { --eco-phone-bg: var(--eco-bg-secondary); }
.eco-phone__sb { position: relative; z-index: 6; display: flex; flex: none; align-items: center; justify-content: space-between; height: 54px; padding: 4px 30px 0 46px; font: 600 17px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-phone[data-os="and"] .eco-phone__sb { height: 44px; padding: 0 22px 0 26px; font: 500 14px/1 var(--eco-font-body); }
.eco-phone__sb::before { content: ""; position: absolute; left: 50%; top: 11px; width: 125px; height: 37px; margin-left: -62.5px; border-radius: 19px; background: var(--eco-color-black); }
.eco-phone[data-os="and"] .eco-phone__sb::before { top: 12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; }
.eco-phone__sb-ic { width: 78px; height: 13px; background: currentColor; -webkit-mask: var(--eco-phone-sb-ios) center / contain no-repeat; mask: var(--eco-phone-sb-ios) center / contain no-repeat; }
.eco-phone[data-os="and"] .eco-phone__sb-ic { width: 50px; height: 15px; -webkit-mask-image: var(--eco-phone-sb-and); mask-image: var(--eco-phone-sb-and); }
.eco-phone { --eco-phone-sb-ios: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 13'%3E%3Crect x='0' y='8.5' width='3.2' height='4.5' rx='1'/%3E%3Crect x='4.6' y='6' width='3.2' height='7' rx='1'/%3E%3Crect x='9.2' y='3.4' width='3.2' height='9.6' rx='1'/%3E%3Crect x='13.8' y='.8' width='3.2' height='12.2' rx='1'/%3E%3Cpath d='M30 12.6l-2.6-2.6a3.7 3.7 0 0 1 5.2 0z'/%3E%3Cpath d='M24.8 7.4a7.4 7.4 0 0 1 10.4 0' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M21.9 4.5a11.5 11.5 0 0 1 16.2 0' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Crect x='48' y='.7' width='25' height='11.6' rx='3.6' fill='none' stroke='black' stroke-opacity='.45' stroke-width='1.1'/%3E%3Crect x='50' y='2.7' width='19' height='7.6' rx='2'/%3E%3Crect x='74.4' y='4.4' width='1.6' height='4.2' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E");
  --eco-phone-sb-and: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 15'%3E%3Cpath d='M8 14.5L.4 5.6a11.6 11.6 0 0 1 15.2 0z'/%3E%3Cpath d='M20 14.5h13V1.5z'/%3E%3Crect x='40' y='1.6' width='8.4' height='13' rx='1.6'/%3E%3Crect x='42.2' y='0' width='4' height='2' rx='.6'/%3E%3C/svg%3E"); }
.eco-phone__hi { position: absolute; z-index: 9; left: 50%; bottom: 8px; width: 139px; height: 5px; margin-left: -69.5px; border-radius: 3px; background: var(--eco-text-primary); }
.eco-phone[data-os="and"] .eco-phone__hi { bottom: 9px; width: 108px; height: 4px; margin-left: -54px; opacity: .9; }
.eco-phone__scr { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.eco-phone__pad { padding: 0 16px; }
.eco-phone__col { display: grid; align-content: start; gap: 12px; }
.eco-phone__h { margin: 0; font: var(--eco-font-display--weight, 500) 22px/28px var(--eco-font-display); letter-spacing: -.04em; }
.eco-phone[data-os="and"] .eco-phone__h { font-size: 24px; line-height: 32px; }
.eco-phone__sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 0; font: var(--eco-font-display--weight-strong, 600) 20px/25px var(--eco-font-display); letter-spacing: -.04em; }
.eco-phone__sh a, .eco-phone__sh span { font: 500 15px/1 var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-brand-primary); text-decoration: none; }
.eco-phone__t { font-weight: 600; }
.eco-phone__m { color: var(--eco-text-tertiary); }
.eco-phone__s { font-size: 15px; line-height: 20px; }
.eco-phone__xs { font-size: 13px; line-height: 18px; }
.eco-phone[data-os="and"] .eco-phone__s { font-size: 14px; line-height: 20px; }
.eco-phone[data-os="and"] .eco-phone__xs { font-size: 12px; line-height: 16px; }
.eco-phone__lbl { font: 500 12px/1 var(--eco-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--eco-text-brand-primary); }
.eco-phone__top { position: relative; z-index: 5; display: flex; flex: none; align-items: center; gap: 8px; min-height: 52px; padding: 4px 16px; }
.eco-phone[data-os="and"] .eco-phone__top { min-height: 64px; padding: 8px 4px 8px 4px; gap: 0; }
.eco-phone__top-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 600 17px/22px var(--eco-font-body); }
.eco-phone[data-os="and"] .eco-phone__top-t { padding: 0 8px; text-align: left; font: var(--eco-font-display--weight, 500) 22px/28px var(--eco-font-display); letter-spacing: -.04em; }
.eco-phone__top-sp { flex: 1; }
.eco-phone__lt { flex: none; margin: 0; padding: 2px 16px 10px; font: var(--eco-font-display--weight, 500) 34px/41px var(--eco-font-display); letter-spacing: -.04em; }
.eco-phone[data-os="and"] .eco-phone__lt { padding: 4px 16px 12px; font-size: 28px; line-height: 36px; }
.eco-phone__lt small { display: block; margin-top: 2px; font: 400 15px/20px var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); }
.eco-phone__ib { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: none; cursor: pointer; }
.eco-phone__ib svg { width: 22px; height: 22px; }
.eco-phone[data-os="ios"] .eco-phone__ib.eco-glass { background: var(--eco-glass-fill); }
.eco-phone[data-os="and"] .eco-phone__ib { width: 48px; height: 48px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.eco-phone[data-os="and"] .eco-phone__ib::before { display: none; }
.eco-phone__ib--fill { background: var(--eco-bg-secondary); }
.eco-phone[data-os="and"] .eco-phone__ib--fill { background: var(--eco-bg-secondary); }
.eco-phone__ib-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--eco-bg-error-solid); }
.eco-phone__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--eco-radius-full); font: 600 17px/1 var(--eco-font-body); text-decoration: none; cursor: pointer; background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-phone[data-os="and"] .eco-phone__btn { min-height: 48px; font-size: 16px; }
.eco-phone__btn svg { width: 20px; height: 20px; }
.eco-phone__btn--block { display: flex; width: 100%; }
.eco-phone__btn--t { background: var(--eco-bg-secondary); color: var(--eco-text-primary); }
.eco-phone__btn--ink { background: var(--eco-bg-primary-solid); color: var(--eco-text-white); }
.eco-phone__btn--sm { min-height: 36px; padding: 0 16px; font-size: 15px; }
.eco-phone[data-os="and"] .eco-phone__btn--sm { min-height: 40px; font-size: 14px; }
.eco-phone__btn--link { min-height: 44px; padding: 0 8px; background: none; color: var(--eco-text-brand-primary); }
.eco-phone__card { position: relative; display: grid; gap: 6px; padding: 16px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-phone--grey .eco-phone__card, .eco-phone--grey .eco-phone__list { background: var(--eco-bg-primary); }
.eco-phone__list { display: grid; overflow: hidden; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-phone[data-os="and"] .eco-phone__list { gap: 2px; overflow: visible; background: none; }
.eco-phone__row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; }
.eco-phone[data-os="ios"] .eco-phone__row + .eco-phone__row::before { content: ""; position: absolute; top: 0; left: var(--eco-phone-inset, 58px); right: 0; height: 1px; background: var(--eco-border-tertiary); }
.eco-phone[data-os="and"] .eco-phone__row { min-height: 56px; padding: 12px 16px; border-radius: 4px; background: var(--eco-bg-secondary); }
.eco-phone[data-os="and"] .eco-phone__row:first-child { border-radius: var(--eco-radius-3xl) var(--eco-radius-3xl) 4px 4px; }
.eco-phone[data-os="and"] .eco-phone__row:last-child { border-radius: 4px 4px var(--eco-radius-3xl) var(--eco-radius-3xl); }
.eco-phone[data-os="and"] .eco-phone__row:only-child { border-radius: var(--eco-radius-3xl); }
.eco-phone--grey[data-os="and"] .eco-phone__row { background: var(--eco-bg-primary); }
.eco-phone__row-b { display: grid; flex: 1; min-width: 0; gap: 1px; }
.eco-phone__row-b > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-phone__row-v { flex: none; font-size: 15px; color: var(--eco-text-tertiary); }
.eco-phone__row > svg.eco-phone__chev { width: 16px; height: 16px; color: var(--eco-text-quaternary); }
.eco-phone[data-os="and"] .eco-phone__row > svg.eco-phone__chev { display: none; }
.eco-phone__tile { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-phone__tile svg { width: 18px; height: 18px; }
.eco-phone__tile--ink { background: var(--eco-bg-primary-solid); color: var(--eco-text-white); }
.eco-phone__tile--lg { width: 44px; height: 44px; border-radius: 14px; }
.eco-phone__tile--lg svg { width: 22px; height: 22px; }
.eco-phone__av { display: inline-block; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; }
.eco-phone__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eco-phone__av--sm { width: 32px; height: 32px; }
.eco-phone__av--lg { width: 72px; height: 72px; }
.eco-phone__sw { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--eco-bg-quaternary); }
.eco-phone__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--eco-color-white); }
.eco-phone__sw.is-on { background: var(--eco-brand-button); }
.eco-phone__sw.is-on::after { left: 22px; background: var(--eco-brand-on-button); }
.eco-phone[data-os="ios"] .eco-phone__sw.is-on::after { background: var(--eco-color-white); }
.eco-phone[data-os="and"] .eco-phone__sw { width: 52px; height: 32px; }
.eco-phone[data-os="and"] .eco-phone__sw::after { top: 8px; left: 8px; width: 16px; height: 16px; background: var(--eco-fg-tertiary); }
.eco-phone[data-os="and"] .eco-phone__sw.is-on::after { top: 4px; left: 24px; width: 24px; height: 24px; background: var(--eco-brand-on-button); }
.eco-phone__prog { height: 6px; overflow: hidden; border-radius: 3px; background: var(--eco-phone-prog-bg, var(--eco-bg-tertiary)); }
.eco-phone__prog > i { display: block; width: var(--v, 50%); height: 100%; border-radius: inherit; background: var(--eco-phone-prog-fill, var(--eco-brand-button)); }
.eco-phone__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--eco-radius-full); background: var(--eco-bg-secondary); font: 500 15px/1 var(--eco-font-body); white-space: nowrap; }
.eco-phone[data-os="and"] .eco-phone__chip { font-size: 14px; }
.eco-phone__chip svg { width: 16px; height: 16px; }
.eco-phone__chip.is-on { background: var(--eco-bg-primary-solid); color: var(--eco-text-white); }
.eco-phone__chip--brand { background: var(--eco-bg-brand-primary); color: var(--eco-text-primary); }
.eco-phone__badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); font: 500 13px/1 var(--eco-font-body); white-space: nowrap; }
.eco-phone__badge svg { width: 14px; height: 14px; }
.eco-phone__badge--ok { background: var(--eco-bg-success-primary); color: var(--eco-text-success-primary); }
.eco-phone__badge--warn { background: var(--eco-bg-warning-primary); color: var(--eco-text-warning-primary); }
.eco-phone__badge--info { background: color-mix(in srgb, var(--eco-fg-info-primary) 14%, transparent); color: var(--eco-fg-info-primary); }
.eco-phone__badge--err { background: var(--eco-bg-error-primary); color: var(--eco-text-error-primary); }
.eco-phone__seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); }
.eco-phone__seg > span { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--eco-radius-full); font: 500 14px/1 var(--eco-font-body); white-space: nowrap; color: var(--eco-text-secondary); }
.eco-phone__seg > span.is-on { background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); font-weight: 600; }
.eco-phone[data-os="and"] .eco-phone__seg { gap: 2px; padding: 0; background: none; }
.eco-phone[data-os="and"] .eco-phone__seg > span { height: 40px; border-radius: 6px; background: var(--eco-bg-secondary); }
.eco-phone[data-os="and"] .eco-phone__seg > span:first-child { border-radius: 20px 6px 6px 20px; }
.eco-phone[data-os="and"] .eco-phone__seg > span:last-child { border-radius: 6px 20px 20px 6px; }
.eco-phone[data-os="and"] .eco-phone__seg > span.is-on { border-radius: 20px; background: var(--eco-bg-primary-solid); color: var(--eco-text-white); }
.eco-phone__seg svg { width: 16px; height: 16px; }
.eco-phone[data-os="ios"] .eco-phone__seg svg { display: none; }
.eco-phone__search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--eco-radius-full); background: var(--eco-bg-secondary); color: var(--eco-text-tertiary); font-size: 17px; }
.eco-phone__search svg { width: 20px; height: 20px; }
.eco-phone__search > span:not(.eco-phone__av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-phone[data-os="and"] .eco-phone__search { height: 56px; padding: 0 6px 0 18px; gap: 14px; font-size: 16px; }
.eco-phone__search .eco-phone__av { width: 32px; height: 32px; }
.eco-phone__tb { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 21px 25px; pointer-events: none; }
.eco-phone__tb-bar { display: flex; flex: 1; justify-content: space-around; height: 62px; padding: 4px; border-radius: var(--eco-radius-full); pointer-events: auto; box-shadow: var(--eco-shadow-md); }
.eco-phone__tb-bar:not(.eco-glass), .eco-phone__tb-s:not(.eco-glass) { background: var(--eco-glass-fill); -webkit-backdrop-filter: var(--eco-glass-backdrop); backdrop-filter: var(--eco-glass-backdrop); }
.eco-phone__tb-i { display: grid; flex: 1 1 0; justify-items: center; align-content: center; gap: 2px; min-width: 0; border-radius: var(--eco-radius-full); font: 500 10px/12px var(--eco-font-body); color: var(--eco-text-primary); white-space: nowrap; }
.eco-phone__tb-i svg { width: 26px; height: 26px; }
.eco-phone__tb-i.is-on { background: color-mix(in srgb, var(--eco-text-primary) 8%, transparent); color: var(--eco-text-brand-primary); font-weight: 600; }
.eco-phone__tb-i b { position: relative; display: block; }
.eco-phone__tb-i b i { position: absolute; top: -3px; left: 17px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--eco-bg-error-solid); color: var(--eco-text-white); font: 600 11px/18px var(--eco-font-body); font-style: normal; text-align: center; }
.eco-phone__tb-s { display: grid; place-items: center; flex: none; width: 62px; height: 62px; border-radius: 50%; pointer-events: auto; box-shadow: var(--eco-shadow-md); }
.eco-phone__tb-s svg { width: 24px; height: 24px; }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb { position: relative; padding: 0 0 24px; gap: 0; background: var(--eco-bg-secondary); pointer-events: auto; }
.eco-phone--grey.eco-phone--flat[data-os="and"] .eco-phone__tb { background: var(--eco-bg-primary); }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-bar { height: 64px; padding: 6px 0 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-bar::before, .eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-s { display: none; }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-i { align-content: start; gap: 4px; font-size: 12px; line-height: 16px; color: var(--eco-text-secondary); background: none; font-weight: 500; }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-i b { display: grid; place-items: center; width: 56px; height: 32px; border-radius: var(--eco-radius-full); }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-i svg { width: 24px; height: 24px; }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-i.is-on { color: var(--eco-text-brand-primary); font-weight: 600; }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-i.is-on b { background: var(--eco-bg-brand-primary); color: var(--eco-fg-brand-primary); }
.eco-phone.eco-phone--flat[data-os="and"] .eco-phone__tb-i b i { top: 0; left: 30px; }
.eco-phone__tb-i .eco-phone__f { display: none; }
.eco-phone__tb-i.is-on .eco-phone__f { display: block; }
.eco-phone__tb-i.is-on .eco-phone__r { display: none; }
.eco-phone__fab { position: absolute; z-index: 7; right: 16px; bottom: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 56px; height: 56px; padding: 0 16px; border-radius: var(--eco-radius-full); background: var(--eco-brand-button); color: var(--eco-brand-on-button); font: 600 16px/1 var(--eco-font-body); }
.eco-phone__fab svg { width: 24px; height: 24px; }
.eco-phone__fab--ext { padding: 0 20px 0 16px; }
.eco-phone__scrim { position: absolute; z-index: 10; inset: 0; background: var(--eco-bg-overlay); }
.eco-phone__sheet { position: absolute; z-index: 11; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 14px; padding: 8px 20px 28px; border-radius: 40px; background: var(--eco-bg-primary_alt); color: var(--eco-text-primary); }
.eco-phone[data-os="and"] .eco-phone__sheet { left: 0; right: 0; bottom: 0; padding: 0 16px 40px; border-radius: 28px 28px 0 0; }
.eco-phone__sheet-grab { justify-self: center; width: 36px; height: 5px; margin-top: 2px; border-radius: 3px; background: var(--eco-bg-quaternary); }
.eco-phone[data-os="and"] .eco-phone__sheet-grab { width: 32px; height: 4px; margin: 22px 0 8px; }
.eco-phone__sheet-head { display: flex; align-items: center; gap: 8px; }
.eco-phone__sheet-head .eco-phone__top-t { text-align: center; }
.eco-phone[data-os="and"] .eco-phone__sheet-head .eco-phone__top-t { text-align: left; padding: 0; font-size: 22px; }
.eco-phone__snack { position: absolute; z-index: 9; left: 16px; right: 16px; bottom: 104px; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 16px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary); color: var(--eco-text-primary); font-size: 14px; line-height: 20px; }
.eco-phone__snack span { flex: 1; }
.eco-phone__snack .eco-phone__btn--link { min-height: 36px; color: var(--eco-text-brand-primary); }
.eco-phone__toast { position: absolute; z-index: 9; left: 50%; top: 62px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 14px; border-radius: var(--eco-radius-full); transform: translateX(-50%); white-space: nowrap; background: var(--eco-bg-primary); color: var(--eco-text-primary); font: 600 15px/1 var(--eco-font-body); }
.eco-phone__toast svg { width: 22px; height: 22px; color: var(--eco-fg-success-primary); }
.eco-phone__field { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-radius: var(--eco-radius-full); background: var(--eco-bg-secondary); font-size: 20px; font-variant-numeric: tabular-nums; }
.eco-phone__field.is-focus { box-shadow: 0 0 0 var(--eco-field-focus-w, 1.5px) var(--eco-brand-button); }
.eco-phone__field-pre { display: inline-flex; align-items: center; height: 44px; margin-left: -14px; padding: 0 14px; border-radius: var(--eco-radius-full); background: var(--eco-bg-primary_alt); font-weight: 500; }
.eco-phone__field-ph { color: var(--eco-text-placeholder); }
.eco-phone__caret { display: inline-block; width: 2px; height: 26px; margin-left: -8px; border-radius: 1px; background: var(--eco-brand-button); }
.eco-phone__kb { flex: none; display: grid; gap: 8px; padding: 8px 6px 34px; background: var(--eco-bg-tertiary); }
.eco-phone[data-os="and"] .eco-phone__kb { padding-bottom: 28px; background: var(--eco-bg-secondary); }
.eco-phone__kb-sug { display: flex; justify-content: center; align-items: center; gap: 8px; height: 40px; font: 500 15px/1 var(--eco-font-body); }
.eco-phone__kb-sug b { font-weight: 600; letter-spacing: .08em; }
.eco-phone__kb-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.eco-phone__kb-keys > span { display: grid; place-items: center; align-content: center; height: 46px; border-radius: 8px; background: var(--eco-bg-primary_alt); font: 400 25px/1 var(--eco-font-body); }
.eco-phone__kb-keys > span small { font: 600 9px/1 var(--eco-font-body); letter-spacing: .14em; }
.eco-phone__kb-keys > span.is-x { background: none; }
.eco-phone[data-os="and"] .eco-phone__kb-keys > span { height: 50px; border-radius: var(--eco-radius-full); font-size: 22px; }
.eco-phone__hero { position: relative; display: grid; gap: 10px; padding: 18px; overflow: hidden; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-primary-solid); color: var(--eco-text-white); }
:is(.eco-phone, .eco-phone__wg)[data-theme="dark"] .eco-phone__hero { background: var(--eco-bg-brand-secondary); color: var(--eco-text-primary); }
.eco-phone__hero-m { color: color-mix(in srgb, currentColor 64%, transparent); }
.eco-phone__hero .eco-phone__prog { background: color-mix(in srgb, currentColor 18%, transparent); }
:root[data-brand="ecosystem"] .eco-phone__hero .eco-phone__prog > i { background: var(--eco-color-lime); }
:root[data-brand="ecosystem"] .eco-phone__hero .eco-phone__lbl { color: var(--eco-color-lime); }
.eco-phone__hero-art { position: absolute; right: -18px; top: -14px; width: 132px; height: 132px; object-fit: contain; pointer-events: none; }
.eco-phone__hero .eco-phone__btn { justify-self: start; }
.eco-phone__hero .eco-phone__btn { background: var(--eco-color-white); color: var(--eco-color-black); }
.eco-phone__course { display: grid; gap: 10px; padding: 8px 8px 14px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-phone__course-cv { position: relative; display: grid; place-items: center; height: 118px; overflow: hidden; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-brand-primary); }
.eco-phone__course-cv img { width: 112px; height: 112px; object-fit: contain; }
.eco-phone__course-cv .eco-phone__badge { position: absolute; left: 10px; top: 10px; background: var(--eco-bg-primary); }
.eco-phone__course-b { display: grid; gap: 6px; padding: 0 8px; }
.eco-phone__course-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eco-phone__row--hl { background: var(--eco-bg-brand-primary) !important; }
@media (forced-colors: active) { .eco-phone { border: 1px solid CanvasText; } .eco-phone__sw, .eco-phone__prog, .eco-phone__seg > span.is-on, .eco-phone__tb-i.is-on { border: 1px solid CanvasText; } }
.eco-phone__xs--links a { color: var(--eco-text-brand-primary); text-decoration: none; font-weight: 500; }
.eco-phone__t--clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-phone__ib.eco-phone__ib--on-dark { color: var(--eco-color-white); }
.eco-phone__badge--plain { background: var(--eco-bg-primary); }
.eco-phone__badge--mono { font-family: var(--eco-font-mono); }
.eco-phone__row--multi { align-items: flex-start; }
.eco-phone__row--multi .eco-phone__row-b > * { white-space: normal; }
.eco-phone__row--multi .eco-phone__row-v { font-size: 13px; }
.eco-phone--wall { --eco-phone-bg: none; }
/* — appscreen — */
.eco-appscreen__ob { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: 6px 24px 46px; }
.eco-appscreen__ob-art { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; margin: 0 -8px; border-radius: var(--eco-radius-4xl); background: var(--eco-bg-brand-primary); overflow: hidden; }
.eco-appscreen__ob-art img { width: 260px; height: 260px; object-fit: contain; }
.eco-appscreen__ob h4 { margin: 4px 0 0; font: var(--eco-font-display--weight, 500) 32px/38px var(--eco-font-display); letter-spacing: -.04em; }
.eco-appscreen__ob p { margin: 0; color: var(--eco-text-tertiary); }
.eco-appscreen__dots { display: flex; gap: 6px; }
.eco-appscreen__dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--eco-bg-quaternary); }
.eco-appscreen__dots i.is-on { width: 20px; background: var(--eco-brand-button); }
.eco-appscreen__auth { display: grid; align-content: start; gap: 14px; flex: 1; padding: 8px 24px 0; }
.eco-appscreen__auth h4 { margin: 0; font: var(--eco-font-display--weight, 500) 30px/36px var(--eco-font-display); letter-spacing: -.04em; }
.eco-appscreen__auth p { margin: 0; color: var(--eco-text-tertiary); }
.eco-appscreen__otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.eco-appscreen__otp span { display: grid; place-items: center; height: 60px; border-radius: var(--eco-radius-xl); background: var(--eco-bg-secondary); font: 500 26px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-appscreen__otp span.is-focus { box-shadow: 0 0 0 var(--eco-field-focus-w, 1.5px) var(--eco-brand-button); }
.eco-appscreen__auth-foot { padding: 0 16px 10px; }
.eco-appscreen__pin { display: grid; justify-items: center; align-content: start; gap: 14px; flex: 1; padding: 40px 32px 0; text-align: center; }
.eco-appscreen__pin h4 { margin: 6px 0 0; font: var(--eco-font-display--weight, 500) 26px/32px var(--eco-font-display); letter-spacing: -.04em; }
.eco-appscreen__pin-dots { display: flex; gap: 18px; margin: 10px 0 18px; }
.eco-appscreen__pin-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--eco-bg-quaternary); }
.eco-appscreen__pin-dots i.is-on { background: var(--eco-text-primary); }
.eco-appscreen__pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 28px; }
.eco-appscreen__pad span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--eco-bg-secondary); font: 400 30px/1 var(--eco-font-body); }
.eco-appscreen__pad span.is-x { background: none; font-size: 14px; font-weight: 500; color: var(--eco-text-brand-primary); }
.eco-appscreen__pad span svg { width: 30px; height: 30px; }
.eco-appscreen__hi { display: flex; align-items: center; gap: 12px; padding: 6px 16px 10px; }
.eco-appscreen__hi b { display: block; font: var(--eco-font-display--weight, 500) 22px/26px var(--eco-font-display); letter-spacing: -.04em; }
.eco-appscreen__hi span { font-size: 15px; color: var(--eco-text-tertiary); }
.eco-appscreen__hi > div { flex: 1; min-width: 0; }
.eco-phone__card.eco-appscreen__week { display: grid; gap: 10px; }
.eco-appscreen__week-d { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.eco-appscreen__week-d span { display: grid; justify-items: center; gap: 6px; font: 500 12px/1 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-appscreen__week-d i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--eco-bg-tertiary); color: var(--eco-text-primary); }
.eco-appscreen__week-d i.is-on { background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-appscreen__week-d i svg { width: 16px; height: 16px; }
.eco-appscreen__time { display: grid; flex: none; justify-items: center; width: 52px; padding: 8px 0; border-radius: var(--eco-radius-xl); background: var(--eco-bg-primary); font: 600 15px/18px var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-appscreen__time small { font: 400 12px/14px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-phone--grey .eco-appscreen__time, .eco-appscreen__time--alt { background: var(--eco-bg-tertiary); }
.eco-appscreen__cl { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-appscreen__cl-cv { display: grid; place-items: center; flex: none; width: 84px; height: 84px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-brand-primary); }
.eco-appscreen__cl-cv img { width: 78px; height: 78px; object-fit: contain; }
.eco-appscreen__cl-b { display: grid; flex: 1; min-width: 0; gap: 6px; }
.eco-phone .eco-appscreen__video { position: relative; flex: none; display: grid; place-items: center; height: 232px; margin-top: -54px; padding-top: 54px; overflow: hidden; background: var(--eco-color-black); color: var(--eco-color-white); }
.eco-phone[data-os="and"] .eco-appscreen__video { margin-top: -44px; padding-top: 44px; height: 240px; }
.eco-appscreen__video > img { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -68px 0 0 -95px; object-fit: contain; opacity: .5; }
.eco-appscreen__video-play { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.eco-appscreen__video-play svg { width: 28px; height: 28px; }
.eco-appscreen__video-tl { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 6px; font: 500 12px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-appscreen__video-tl > div { display: flex; gap: 3px; height: 4px; }
.eco-appscreen__video-tl > div i { flex: var(--f, 1); border-radius: 2px; background: color-mix(in srgb, var(--eco-color-white) 28%, transparent); }
.eco-appscreen__video-tl > div i.is-on { background: var(--eco-brand-button); }
.eco-appscreen__video-tl > div i.is-half { background: linear-gradient(90deg, var(--eco-brand-button) 40%, color-mix(in srgb, var(--eco-color-white) 28%, transparent) 40%); }
.eco-appscreen__video-tl > span { display: flex; justify-content: space-between; color: color-mix(in srgb, var(--eco-color-white) 72%, transparent); }
.eco-appscreen__video-top { position: absolute; left: 12px; right: 12px; top: 60px; display: flex; justify-content: space-between; }
.eco-phone[data-os="and"] .eco-appscreen__video-top { top: 48px; }
.eco-appscreen__acts { display: flex; gap: 8px; overflow: hidden; }
.eco-appscreen__ch-row { display: flex; align-items: center; gap: 12px; }
.eco-appscreen__ch-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--eco-bg-tertiary); color: var(--eco-text-tertiary); }
.eco-appscreen__ch-ic svg { width: 14px; height: 14px; }
.eco-appscreen__ch-ic--ok { background: var(--eco-bg-success-primary); color: var(--eco-fg-success-primary); }
.eco-appscreen__ch-ic--on { background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-appscreen__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.eco-appscreen__days span { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: var(--eco-radius-2xl); font: 500 12px/1 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-appscreen__days b { font: 600 18px/1 var(--eco-font-body); color: var(--eco-text-primary); font-variant-numeric: tabular-nums; }
.eco-appscreen__days span.is-on { background: var(--eco-bg-primary-solid); color: color-mix(in srgb, var(--eco-text-white) 64%, transparent); }
.eco-appscreen__days span.is-on b { color: var(--eco-text-white); }
.eco-appscreen__days span i { width: 5px; height: 5px; border-radius: 50%; background: var(--eco-brand-button); }
.eco-appscreen__days span i.is-no { background: none; }
.eco-appscreen__slot { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-appscreen__slot-b { display: grid; flex: 1; min-width: 0; gap: 4px; }
.eco-appscreen__slot-b .eco-appscreen__r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.eco-appscreen__slot--now { background: var(--eco-bg-brand-primary); }
.eco-appscreen__slot--now .eco-appscreen__time { background: var(--eco-brand-button); color: var(--eco-brand-on-button); }
.eco-appscreen__slot--now .eco-appscreen__time small { color: inherit; opacity: .8; }
.eco-appscreen__file { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--eco-radius-2xl); background: var(--eco-bg-secondary); }
.eco-appscreen__file-b { display: grid; flex: 1; min-width: 0; gap: 6px; }
.eco-appscreen__note { min-height: 92px; padding: 14px 18px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); color: var(--eco-text-placeholder); }
.eco-appscreen__dock { flex: none; padding: 10px 16px 42px; }
.eco-phone[data-os="and"] .eco-appscreen__dock { padding-bottom: 36px; }
.eco-appscreen__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eco-appscreen__stat { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-appscreen__stat b { font: var(--eco-font-display--weight, 500) 30px/1.1 var(--eco-font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.eco-appscreen__stat span { font-size: 13px; line-height: 17px; color: var(--eco-text-tertiary); }
.eco-appscreen__chart { display: grid; gap: 10px; padding: 16px; border-radius: var(--eco-radius-3xl); background: var(--eco-bg-secondary); }
.eco-appscreen__chart-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 10px; height: 110px; }
.eco-appscreen__chart-bars i { height: var(--h); border-radius: 6px; background: var(--eco-bg-quaternary); }
.eco-appscreen__chart-bars i.is-on { background: var(--eco-brand-button); }
.eco-appscreen__chart-x { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; font: 500 12px/1 var(--eco-font-body); color: var(--eco-text-tertiary); text-align: center; }
.eco-appscreen__prof { display: grid; justify-items: center; gap: 6px; padding: 8px 16px 14px; text-align: center; }
.eco-appscreen__prof b { font: var(--eco-font-display--weight, 500) 24px/30px var(--eco-font-display); letter-spacing: -.04em; }
.eco-appscreen__grp { margin: 6px 0 -4px; font: 600 15px/20px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-appscreen__unread { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--eco-brand-button); }
/* — push — */
.eco-push__wall { position: absolute; inset: 0; z-index: -1; }
.eco-push__lock { display: grid; justify-items: center; gap: 2px; padding: 6px 16px 12px; text-align: center; color: var(--eco-text-primary); }
.eco-push__lock small { font: 600 18px/1.2 var(--eco-font-body); }
.eco-push__lock b { font: var(--eco-font-display--weight, 500) 96px/1 var(--eco-font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.eco-push__acc { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.eco-push__acc-c { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--eco-text-primary) 0 80%, color-mix(in srgb, var(--eco-text-primary) 22%, transparent) 80% 100%); font: 600 14px/1 var(--eco-font-body); }
.eco-push__acc-c::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: color-mix(in srgb, var(--eco-bg-primary) 82%, transparent); }
.eco-push__acc-c span { position: relative; }
.eco-push__acc-r { display: grid; align-content: center; gap: 1px; min-width: 150px; padding: 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--eco-text-primary) 12%, transparent); text-align: left; font-size: 13px; line-height: 17px; }
.eco-push__acc-r b { font-size: 15px; font-weight: 600; }
.eco-push__app { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 22.37%; background: var(--eco-push-app); }
.eco-push__app svg { width: 64%; height: 64%; overflow: visible; }
.eco-push__app, .eco-push__dot { --lg-ray: var(--eco-push-lime); --lg-dot: var(--eco-color-white); --lg-core: var(--eco-color-white); }
.eco-push__stack { display: grid; gap: 8px; padding: 0 10px; margin-top: auto; }
.eco-push__n { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 24px; text-align: left; }
.eco-push__n-b { display: grid; flex: 1; min-width: 0; gap: 1px; font-size: 15px; line-height: 20px; }
.eco-push__n-h { display: flex; justify-content: space-between; gap: 8px; }
.eco-push__n-h b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-push__n-h span { flex: none; font-size: 13px; color: color-mix(in srgb, currentColor 60%, transparent); }
.eco-push__n-lv { font: 600 12px/16px var(--eco-font-body); letter-spacing: .02em; text-transform: uppercase; color: color-mix(in srgb, currentColor 64%, transparent); }
.eco-push__av { position: relative; flex: none; width: 38px; height: 38px; }
.eco-push__av img { width: 38px; height: 38px; border-radius: 50%; }
.eco-push__av .eco-push__app { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 5px; }
.eco-push__n--grp { margin-bottom: 8px; }
.eco-push__n--grp::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 10px; border-radius: 0 0 18px 18px; background: var(--eco-glass-fill); -webkit-backdrop-filter: var(--eco-glass-backdrop); backdrop-filter: var(--eco-glass-backdrop); z-index: -1; }
.eco-push__la { display: grid; gap: 10px; padding: 14px 16px; border-radius: 24px; text-align: left; }
.eco-push__la-h { display: flex; align-items: center; gap: 10px; }
.eco-push__la-h > div { flex: 1; min-width: 0; display: grid; font-size: 15px; line-height: 19px; }
.eco-push__la-h b { font-weight: 600; }
.eco-push__la-t { font: var(--eco-font-display--weight, 500) 28px/1 var(--eco-font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.eco-push__la { --eco-phone-prog-bg: color-mix(in srgb, currentColor 18%, transparent); }
.eco-push__isl-c { display: flex; align-items: center; justify-content: space-between; width: 250px; height: 37px; padding: 0 14px 0 8px; border-radius: 19px; background: var(--eco-color-black); color: var(--eco-color-white); font: 600 15px/1 var(--eco-font-body); font-variant-numeric: tabular-nums; }
.eco-push__isl-c .eco-push__dot { display: grid; place-items: center; width: 24px; height: 24px; }
.eco-push__isl-c .eco-push__dot svg { width: 22px; height: 22px; overflow: visible; }
.eco-push__isl-c em { font-style: normal; color: var(--eco-push-lime); }
.eco-push__isl-e { display: grid; gap: 10px; width: 370px; max-width: 100%; padding: 16px 20px 18px; border-radius: 44px; background: var(--eco-color-black); color: var(--eco-color-white); }
.eco-push__isl-e .eco-push__la-h > div span { color: color-mix(in srgb, var(--eco-color-white) 60%, transparent); }
.eco-push__isl-e .eco-push__la-t { color: var(--eco-push-lime); }
.eco-push__isl-e { --eco-phone-prog-bg: color-mix(in srgb, var(--eco-color-white) 18%, transparent); --eco-phone-prog-fill: var(--eco-push-lime); }
.eco-push__home { display: grid; grid-template-columns: repeat(2, 158px); gap: 22px; justify-content: center; padding: 10px 0 0; }
.eco-phone[data-os="and"] .eco-push__home { grid-template-columns: repeat(2, 170px); gap: 16px; }
.eco-push__wg { display: grid; align-content: start; gap: 4px; height: 158px; padding: 16px; overflow: hidden; border-radius: 22px; background: var(--eco-bg-primary); color: var(--eco-text-primary); text-align: left; }
.eco-phone[data-os="and"] .eco-push__wg { height: 170px; border-radius: 26px; }
.eco-push__wg--m { grid-column: 1 / -1; }
.eco-push__wg-lbl { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--eco-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--eco-text-brand-primary); }
.eco-push__wg-lbl .eco-push__app { width: 18px; height: 18px; border-radius: 5px; }
.eco-push__wg-big { margin-top: 6px; font: var(--eco-font-display--weight, 500) 34px/1 var(--eco-font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.eco-push__wg-m { font-size: 13px; line-height: 17px; color: var(--eco-text-tertiary); }
.eco-push__wg-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; line-height: 18px; }
.eco-push__wg-row b { flex: none; width: 44px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eco-push__wg-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-push__wg-row i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--eco-bg-quaternary); }
.eco-push__wg-row i.is-on { background: var(--eco-brand-button); }
.eco-push__ring { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 4px auto 0; border-radius: 50%; background: conic-gradient(var(--eco-brand-button) 0 80%, var(--eco-bg-tertiary) 80% 100%); }
.eco-push__ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--eco-bg-primary); }
.eco-push__ring b { position: relative; font: var(--eco-font-display--weight, 500) 22px/1 var(--eco-font-display); letter-spacing: -.04em; }
.eco-push__iconrow { display: flex; justify-content: center; gap: 24px; margin-top: 18px; }
.eco-push__iconrow .eco-push__app { width: 62px; height: 62px; }
.eco-push__iconrow > span { display: grid; justify-items: center; gap: 6px; font: 500 12px/1 var(--eco-font-body); color: var(--eco-text-primary); }
.eco-push__shade { display: grid; gap: 2px; padding: 8px 12px 0; }
.eco-push__shade-h { display: flex; justify-content: space-between; padding: 8px 8px 14px; font: 500 15px/1 var(--eco-font-body); }
.eco-push__an { display: grid; gap: 8px; padding: 14px 16px; border-radius: 6px; background: var(--eco-bg-primary_alt); text-align: left; }
.eco-push__an:first-of-type { border-radius: 26px 26px 6px 6px; }
.eco-push__an:last-child { border-radius: 6px 6px 26px 26px; }
.eco-push__an-h { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--eco-text-tertiary); }
.eco-push__an-h .eco-push__si { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--eco-push-app); }
.eco-push__an-h .eco-push__si svg { width: 15px; height: 15px; overflow: visible; --lg-ray: var(--eco-color-white); --lg-dot: var(--eco-color-white); --lg-core: var(--eco-color-white); }
.eco-push__an-h b { font-weight: 500; color: var(--eco-text-secondary); }
.eco-push__an-c { display: flex; gap: 12px; align-items: flex-start; }
.eco-push__an-c > div { display: grid; flex: 1; min-width: 0; gap: 2px; font-size: 14px; line-height: 20px; }
.eco-push__an-c > div b { font-size: 15px; font-weight: 600; }
.eco-push__an-c > div span { color: var(--eco-text-tertiary); }
.eco-push__an-c img { width: 40px; height: 40px; border-radius: 50%; }
.eco-push__an-a { display: flex; gap: 8px; }
.eco-push__an-a span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); font: 500 14px/1 var(--eco-font-body); }
.eco-push__seg { display: flex; align-items: center; gap: 3px; }
.eco-push__seg i { flex: var(--f, 1); height: 6px; border-radius: 3px; background: var(--eco-bg-tertiary); }
.eco-push__seg i.is-on { background: var(--eco-brand-button); }
.eco-push__seg svg { width: 18px; height: 18px; color: var(--eco-fg-brand-primary); }
.eco-push__seg em { width: 14px; height: 14px; border-radius: 50%; background: var(--eco-brand-button); flex: none; }
@media (max-width: 600px) { .eco-push__isl-e { box-sizing: border-box; width: 100%; } }
/* — native — */
.eco-native__ios-back { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 14px 0 8px; border-radius: var(--eco-radius-full); font: 400 17px/1 var(--eco-font-body); }
.eco-native__ios-back svg { width: 22px; height: 22px; }
.eco-native__day { display: flex; gap: 6px; }
.eco-native__day > span { display: grid; justify-items: center; gap: 2px; flex: 1; padding: 8px 0; border-radius: var(--eco-radius-xl); background: var(--eco-bg-secondary); font: 500 13px/1.2 var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-native__day > span b { font: 600 18px/1.2 var(--eco-font-body); color: var(--eco-text-primary); }
.eco-native__day > span.is-on { background: var(--eco-bg-primary-solid); color: color-mix(in srgb, var(--eco-text-white) 64%, transparent); }
.eco-native__day > span.is-on b { color: var(--eco-text-white); }
.eco-phone[data-theme="dark"] .eco-native__day > span.is-on { background: var(--eco-bg-brand-secondary); color: var(--eco-text-secondary); }
.eco-phone[data-theme="dark"] .eco-native__day > span.is-on b { color: var(--eco-text-primary); }
.eco-native__alert { width: 270px; overflow: hidden; border-radius: 14px; background: var(--eco-bg-primary_alt); text-align: center; }
.eco-native__alert b { display: block; padding: 20px 16px 4px; font: 600 17px/22px var(--eco-font-body); }
.eco-native__alert p { margin: 0; padding: 0 16px 18px; font-size: 13px; line-height: 18px; color: var(--eco-text-secondary); }
.eco-native__alert-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-top: 1px; background: var(--eco-border-tertiary); }
.eco-native__alert-btns span { padding: 12px 0; background: var(--eco-bg-primary_alt); font-size: 17px; line-height: 22px; color: var(--eco-text-brand-primary); }
.eco-native__alert-btns span.is-bad { font-weight: 600; color: var(--eco-text-error-primary); }
.eco-native__dlg { display: grid; gap: 16px; width: 312px; padding: 24px; border-radius: 28px; background: var(--eco-bg-primary_alt); }
.eco-native__dlg > svg { width: 24px; height: 24px; justify-self: center; color: var(--eco-fg-error-primary); }
.eco-native__dlg b { font: var(--eco-font-display--weight, 500) 24px/32px var(--eco-font-display); letter-spacing: -.04em; text-align: center; }
.eco-native__dlg p { margin: 0; font-size: 14px; line-height: 20px; color: var(--eco-text-secondary); }
.eco-native__dlg-btns { display: flex; justify-content: flex-end; gap: 8px; }
.eco-native__dlg-btns span { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--eco-radius-full); font: 600 14px/1 var(--eco-font-body); color: var(--eco-text-brand-primary); }
.eco-native__dlg-btns span.is-bad { color: var(--eco-text-error-primary); }
.eco-native__ty { display: grid; gap: 4px; padding: 0 16px; }
.eco-native__ty > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; }
.eco-native__ty > div + div { box-shadow: 0 -1px 0 var(--eco-border-tertiary); }
.eco-native__ty i { flex: none; font: 500 12px/1 var(--eco-font-mono); font-style: normal; color: var(--eco-text-tertiary); }
.eco-native__ty .eco-native__ty-1 { font: var(--eco-font-display--weight, 500) 34px/41px var(--eco-font-display); letter-spacing: -.04em; }
.eco-native__ty .eco-native__ty-2 { font: var(--eco-font-display--weight-strong, 600) 22px/28px var(--eco-font-display); letter-spacing: -.04em; }
.eco-native__ty .eco-native__ty-3 { font: 400 17px/22px var(--eco-font-body); }
.eco-native__ty .eco-native__ty-4 { font: 400 13px/18px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-native__ty .eco-native__ty-5 { font: 600 17px/1 var(--eco-font-body); }
.eco-phone[data-os="and"] .eco-native__ty .eco-native__ty-1 { font-size: 28px; line-height: 36px; }
.eco-phone[data-os="and"] .eco-native__ty .eco-native__ty-2 { font-weight: 500; font-size: 22px; line-height: 28px; }
.eco-phone[data-os="and"] .eco-native__ty .eco-native__ty-3 { font-size: 16px; line-height: 24px; }
.eco-phone[data-os="and"] .eco-native__ty .eco-native__ty-4 { font-size: 12px; line-height: 16px; }
.eco-phone[data-os="and"] .eco-native__ty .eco-native__ty-5 { font-size: 14px; font-weight: 500; }
/* — ptable — */
.eco-ptable { --pt-ink: var(--eco-text-primary); --pt-mut: var(--eco-text-tertiary); --pt-line: var(--eco-border-secondary); --pt-sub: var(--eco-bg-secondary); --pt-acc: var(--eco-text-brand-secondary);
  width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--eco-font-body); font-variant-numeric: tabular-nums; color: var(--pt-ink); }
.eco-ptable caption { caption-side: top; text-align: left; padding: 0 0 12px; font: 600 15px/1.35 var(--eco-font-body); }
.eco-ptable__unit { margin-left: 8px; font: 400 12px/1 var(--eco-font-mono); color: var(--pt-mut); }
.eco-ptable thead th { padding: 0 0 8px 14px; text-align: right; font: 500 11px/1.2 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pt-mut); border-bottom: 1.5px solid var(--pt-ink); white-space: nowrap; }
.eco-ptable :is(td, tbody th) { padding: 8px 0 8px 14px; text-align: right; font-weight: 400; border-bottom: 1px solid var(--pt-line); white-space: nowrap; vertical-align: middle; }
.eco-ptable :is(thead th, td, tbody th):first-child { padding-left: 0; text-align: left; }
.eco-ptable tbody th[scope="row"] { text-align: left; white-space: normal; font-variant-numeric: normal; }
.eco-ptable .is-l { text-align: left; }
.eco-ptable .is-group th { padding-top: 16px; border-bottom: 0; font: 500 11px/1.2 var(--eco-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pt-acc); text-align: left; }
.eco-ptable .is-sub :is(th, td) { font-weight: 600; background: var(--pt-sub); }
.eco-ptable .is-sub th { padding-left: 10px; }
.eco-ptable .is-total :is(th, td) { font-weight: 600; font-size: 1.08em; border-top: 1.5px solid var(--pt-ink); border-bottom: 0; padding-top: 10px; }
.eco-ptable .is-up { color: var(--pt-acc); }
.eco-ptable :is(tfoot td, caption) { font-variant-numeric: normal; }
.eco-ptable tfoot td { padding: 12px 0 0; border: 0; text-align: left; white-space: normal; font-size: 12px; color: var(--pt-mut); }
.eco-ptable__meter { position: relative; display: block; width: 100%; min-width: 80px; height: 8px; border-radius: 4px; background: var(--eco-bg-tertiary); }
.eco-ptable__meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--eco-chart-2); }
.eco-ptable__meter b { position: absolute; left: 83.33%; top: -3px; bottom: -3px; width: 1.5px; background: var(--eco-chart-1); }
@media print {
  .eco-ptable thead { display: table-header-group; }
  .eco-ptable tfoot { display: table-row-group; }
  .eco-ptable tr { break-inside: avoid; }
  .eco-ptable caption { break-after: avoid; }
}
/* — page — */
.eco-page { --pg-px: 32px; container: page / inline-size; display: flex; flex-direction: column; gap: 20px; min-width: 0; min-height: 0; padding: 24px var(--pg-px) 32px; overflow: auto; overscroll-behavior: contain; background: var(--eco-app-canvas); color: var(--eco-text-primary); font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); }
.eco-page[hidden] { display: none; }
.eco-page > * { flex: none; }
:is(.eco-page, .eco-page__sheet, .eco-listpage__panel) :is(h4, h5, h6, p, ul, ol, dl, dd, figure) { margin: 0; }
:is(.eco-page, .eco-page__sheet, .eco-listpage__panel) :is(ul, ol) { padding: 0; list-style: none; }
.eco-shell__main > .eco-page { min-height: 0; padding-top: 8px; }
.eco-page--fill { overflow: hidden; }
.eco-page--fill > .eco-page__body { flex: 1 1 auto; min-height: 0; }
.eco-page--fill > .eco-page__body > .eco-page__main { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.eco-page--fill > .eco-page__body > .eco-page__main > :is(.eco-report, .eco-timegrid, .eco-board, [data-pg-pane]) { flex: 1 1 auto; min-height: 0; }
.eco-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.eco-page__heading { display: grid; gap: 6px; flex: 1 1 360px; min-width: 0; }
.eco-page__back { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 24px; border-radius: var(--eco-radius-xs); font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); text-decoration: none; outline: var(--eco-focus-w) solid transparent; }
.eco-page__back:hover { color: var(--eco-text-primary); }
.eco-page__back > svg { width: 14px; height: 14px; flex: none; }
.eco-page__title { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; min-width: 0; font: var(--eco-font-display--weight, 500) 28px/34px var(--eco-font-display); letter-spacing: var(--eco-font-display--letter-spacing); color: var(--eco-text-primary); }
.eco-page__title:has(> span:first-child + *) { display: block; }
.eco-page__title:has(> span:first-child + *) > :not(:first-child) { display: inline-flex; margin-left: 10px; vertical-align: 4px; }
.eco-page__title > span:first-child { min-width: 0; }
.eco-page__sub { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-page__title > :not(:first-child) { flex: none; }
.eco-page__title > .eco-badge { align-self: center; }
.eco-page__count { font: 500 var(--eco-text-md)/1 var(--eco-font-body); letter-spacing: 0; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-page__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; color: var(--eco-text-tertiary); }
.eco-page__meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.eco-page__meta > span > svg:not(.eco-page__mark) { width: 16px; height: 16px; color: var(--eco-fg-tertiary); }
.eco-page__mark { display: inline-block; flex: none; width: 18px; height: 18px; vertical-align: -4px; }
.eco-page__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eco-page :is(.eco-page__back, .eco-page__link, .eco-page__tile):focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-page__facts { margin: 0; }
.eco-page__fact { min-width: 0; }
.eco-page__steps { max-width: 880px; }
.eco-page__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.eco-page__search { flex: 0 1 300px; min-width: 180px; }
.eco-page__sp { flex: 1 1 0; }
.eco-page__secs { display: flex; flex-wrap: wrap; gap: 6px; }
.eco-page__secs .eco-page__n { margin-left: 6px; }
:is(.eco-page__bar, .eco-report__bar) .eco-chip[aria-pressed="true"] .eco-page__n { color: inherit; opacity: .7; }
.eco-page__tabs { display: flex; min-width: 0; box-shadow: inset 0 -1px 0 var(--eco-border-tertiary); }
.eco-page__tabs > .eco-tabs { flex: 0 1 auto; min-width: 0; }
.eco-page__tn { margin-left: 2px; font-weight: 500; color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-page__tabs .eco-tab[aria-selected="true"] .eco-page__tn { color: var(--eco-text-secondary); }
.eco-page__panel { min-width: 0; }
.eco-page__panel[hidden] { display: none; }
.eco-page__panel:focus-visible { outline: none; }
.eco-page__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px 32px; align-items: start; min-width: 0; }
.eco-page__body--single { grid-template-columns: minmax(0, 1fr); }
.eco-page__main, .eco-page__aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.eco-page__sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.eco-page__sec[hidden], .eco-page__sec.is-empty { display: none; }
.eco-page__sh { display: flex; align-items: baseline; gap: 8px 10px; min-width: 0; }
.eco-page__sh > h5 { font: 600 var(--eco-text-md)/24px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-page__sh > .eco-btn { margin-left: auto; align-self: center; }
.eco-page__n { font: 500 var(--eco-text-xs)/1 var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-page__card { padding: 20px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); --ic-tile: var(--eco-app-well); --btn-t-bg: var(--eco-app-well); --btn-t-bg-hover: var(--eco-app-well-hover); }
.eco-page__sec:not(.eco-page__card):has(> :is(.eco-page__feed, .eco-page__checks, .eco-page__changes)) { padding: 20px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); --ic-tile: var(--eco-app-well); --btn-t-bg: var(--eco-app-well); --btn-t-bg-hover: var(--eco-app-well-hover); }
.eco-page__none { color: var(--eco-text-quaternary); }
.eco-page__link { color: var(--eco-text-primary); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; border-radius: var(--eco-radius-xs); outline: var(--eco-focus-w) solid transparent; }
.eco-page__link:hover { text-decoration-color: currentColor; }
.eco-page__org { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eco-page__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.eco-page__tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); font: 500 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-secondary); white-space: nowrap; }
.eco-page__delta { font-variant-numeric: tabular-nums; color: var(--eco-text-primary); white-space: nowrap; }
.eco-page__delta.is-neg { color: var(--eco-text-error-primary); }
.eco-page__lock { display: inline-flex; margin-left: 6px; vertical-align: -2px; color: var(--eco-fg-quaternary); }
.eco-page__lock > svg { width: 14px; height: 14px; }
.eco-page__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 20px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-page__fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eco-page__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-page__fields--1 { grid-template-columns: minmax(0, 1fr); }
.eco-page__fields > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.eco-page__fields dt { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-page__fields dd { margin: 0; font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); color: var(--eco-text-primary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.eco-page__fields dd > small { margin-left: 4px; font-weight: 400; color: var(--eco-text-tertiary); }
.eco-page__fields dd > .eco-page__mark { margin-right: 6px; }
.eco-page__tbl { padding: 8px; }
.eco-page__tbl { min-width: 0; overflow-x: auto; border-radius: var(--eco-radius-xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); outline: var(--eco-focus-w) solid transparent; }
.eco-page__tbl:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-page__feed { display: grid; gap: 16px; }
.eco-page__feed > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.eco-page__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--eco-radius-full); background: var(--eco-app-well); color: var(--eco-fg-secondary); }
.eco-page__ic > svg { width: 16px; height: 16px; }
.eco-page__ftxt { display: grid; gap: 2px; min-width: 0; }
.eco-page__ftxt > b { font-weight: 500; color: var(--eco-text-primary); }
.eco-page__ftxt > b > span { font-weight: 400; color: var(--eco-text-secondary); }
.eco-page__ftxt > small { font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-page__time { padding-top: 2px; font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-page__checks { display: grid; gap: 4px; }
.eco-page__checks > li { display: grid; gap: 2px; padding: 10px 0; }
.eco-page__checks > li > small { padding-left: 18px; font: 400 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-page__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--eco-text-tertiary); }
.eco-page__legend > li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eco-page__perm { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.eco-page__perm > span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--eco-radius-full); background: var(--eco-bg-tertiary); font: 600 var(--eco-text-xs)/1 var(--eco-font-body); color: var(--eco-text-secondary); }
.eco-page__perm > span.is-full { background: var(--eco-fg-primary); color: var(--eco-bg-primary); }
.eco-page__matrix tbody td { white-space: nowrap; }
.eco-page__matrix thead th:not(:first-child), .eco-page__matrix tbody td { text-align: left; }
.eco-page__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.eco-page__wide { grid-column: 1 / -1; }
.eco-page__orgsel > .eco-page__mark { width: 18px; height: 18px; }
.eco-page__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.eco-page__tile { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 12px; height: 100%; padding: 16px; border-radius: var(--eco-radius-2xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); color: inherit; text-decoration: none; outline: var(--eco-focus-w) solid transparent; }
.eco-page__tile:hover { background: var(--eco-app-card-hover); }
.eco-page__tile > .eco-page__ic { background: var(--eco-app-well); }
.eco-page__changes { display: grid; gap: 20px; }
.eco-page__changes > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.eco-page__changes > li > ul { display: grid; gap: 12px; }
.eco-page__changes > li > ul > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.eco-page__cdate { font: 500 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-page__terms { table-layout: fixed; }
.eco-page__terms thead th:first-child { width: 32%; }
.eco-page__terms thead th:nth-child(3) { width: 20%; }
.eco-page__emptycard { padding: 32px 20px; }
.eco-page__soon { flex: 1 1 auto; display: grid; place-items: center; min-height: 360px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); --ic-tile: var(--eco-app-well); }
.eco-page__path { padding: 0; background: none; font: 400 var(--eco-text-xs)/18px var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-page__foot { position: sticky; bottom: -32px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 calc(var(--pg-px) * -1) -32px; padding: 16px var(--pg-px) 24px; background: var(--eco-app-canvas); }
.eco-page__fnote { margin-right: auto; color: var(--eco-text-tertiary); }
.eco-page__sheet .eco-listpage__amt { margin: 4px 0 0; }
.eco-page__sheet .eco-page__fields { padding: 16px; background: var(--eco-bg-secondary); box-shadow: none; }
@container page (max-width: 1080px) {
  .eco-page__body { grid-template-columns: minmax(0, 1fr); }
  .eco-page__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container page (max-width: 820px) {
  .eco-page__fields, .eco-page__fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-page__form { grid-template-columns: minmax(0, 1fr); }
}
@container page (max-width: 640px) {
  .eco-page { --pg-px: 16px; }
  .eco-page__fields, .eco-page__fields--3, .eco-page__fields--2 { grid-template-columns: minmax(0, 1fr); }
  .eco-page__changes > li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
:is(.eco-overview__card, .eco-page__card) .eco-page__tbl { padding: 0; background: none; box-shadow: none; }
.eco-page__sec:not(.eco-page__card):has(> :is(.eco-page__feed, .eco-page__checks, .eco-page__changes)) .eco-page__tbl { padding: 0; background: none; box-shadow: none; }
:is(.eco-overview__card, .eco-page__card) .eco-page__tbl .eco-table { --table-line: color-mix(in srgb, var(--eco-border-secondary) 70%, transparent); }
.eco-page__nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.eco-page__none-found { min-height: 240px; }
.eco-page__none-found[hidden] { display: none; }
.eco-page__delta.is-neg { color: var(--eco-text-error-primary); }
.eco-page__tbl .eco-table tbody tr[hidden], .eco-page__cards > li[hidden], .eco-page__changes li[hidden] { display: none; }
.eco-page--fill > .eco-page__panel:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; }
.eco-page--fill > .eco-page__panel--fill:not([hidden]) { overflow: hidden; }
.eco-page--fill > .eco-page__panel--fill > .eco-page__body { flex: 1 1 auto; min-height: 0; }
.eco-page--fill > .eco-page__panel--fill > .eco-page__body > .eco-page__main { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.eco-page--fill > .eco-page__panel--fill > .eco-page__body > .eco-page__main > :is(.eco-report, .eco-timegrid, .eco-board) { flex: 1 1 auto; min-height: 0; }
.eco-page__tcard { display: grid; gap: 4px; padding: 20px 20px 12px; border-radius: var(--eco-radius-3xl); background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-page > .eco-page__tcard, .eco-page > .eco-page__sec > .eco-page__tcard { flex: none; }
@container page (max-width: 1150px) {
  .eco-page { --pg-px: 24px; }
}
/* — report — */
@container page (max-width: 1150px) {
  .eco-page .eco-report__table :is(td, th), .eco-page .eco-report__table thead th { padding-inline: 10px; }
  .eco-report__table :is(tbody, tfoot) th { min-width: 200px; padding-left: calc(10px + var(--lv, 0) * 16px); }
  .eco-report__table tbody tr.eco-report__h > th { padding-inline: 10px; }
}
.eco-report { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.eco-report__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.eco-report__sp { flex: 1 1 0; }
.eco-report__grp { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.eco-report__lbl { font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); }
.eco-report__checks { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.eco-report__scroll { padding: 8px; }
.eco-report__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: var(--eco-radius-xl); outline: var(--eco-focus-w) solid transparent; background: var(--eco-app-card); box-shadow: var(--eco-app-card-shadow); }
.eco-report__scroll:focus-visible { box-shadow: inset 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-report__table { min-width: 960px; color: var(--eco-text-secondary); }
.eco-report__table :is(td, th) { padding: 9px 16px; }
.eco-report__table tbody :is(td, th) { border-bottom: 0; }
.eco-report__table thead { position: sticky; top: 0; z-index: 3; }
.eco-report__table thead th { padding: 8px 16px; }
.eco-report__table thead tr + tr th { padding-top: 0; }
.eco-table.eco-report__table thead th { border-radius: 0; }
.eco-table.eco-report__table thead tr:first-child > th:first-child { border-radius: var(--eco-radius-xl) 0 0 var(--eco-radius-xl); }
.eco-table.eco-report__table thead tr:first-child > th:last-child { border-top-right-radius: var(--eco-radius-xl); }
.eco-table.eco-report__table thead tr:last-child > th:last-child { border-bottom-right-radius: var(--eco-radius-xl); }
.eco-report__colg { text-align: right; color: var(--eco-text-secondary); }
.eco-report__first { width: 30%; }
.eco-report__table :is(tbody, tfoot) th { position: sticky; left: 0; z-index: 1; padding-left: calc(16px + var(--lv, 0) * 20px); background: var(--eco-app-card); font-weight: 400; color: var(--eco-text-primary); white-space: normal; min-width: 240px; }
.eco-report__table tbody tr:hover :is(td, th) { background: var(--eco-app-card-hover); }
.eco-report__table .num { white-space: nowrap; color: var(--eco-text-primary); }
.eco-report__table .eco-report__tx { min-width: 120px; text-align: left; white-space: normal; color: var(--eco-text-secondary); }
.eco-report__acc { display: inline-flex; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; border-radius: var(--eco-radius-xs); outline: var(--eco-focus-w) solid transparent; }
a.eco-report__acc:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a.eco-report__acc:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-report__code { flex: none; min-width: 36px; font: 500 var(--eco-text-xs)/var(--eco-text-xs--line-height) var(--eco-font-body); color: var(--eco-text-tertiary); font-variant-numeric: tabular-nums; }
.eco-report__table .eco-report__g :is(td, th) { padding-top: 16px; background: var(--eco-app-card); }
.eco-report__g th { font-weight: 600; }
.eco-report__g td > span { font-weight: 600; }
.eco-report__g.has-sub:not(.is-closed) td > span { visibility: hidden; }
.eco-report__tog { display: inline-flex; align-items: center; gap: 6px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--eco-radius-xs); background: none; font: 600 var(--eco-text-sm)/20px var(--eco-font-body); color: var(--eco-text-primary); cursor: pointer; outline: var(--eco-focus-w) solid transparent; }
.eco-report__tog > svg { width: 14px; height: 14px; flex: none; color: var(--eco-fg-tertiary); transition: rotate var(--eco-duration-base) var(--eco-ease-standard); }
.eco-report__tog[aria-expanded="false"] > svg { rotate: -90deg; }
.eco-report__tog:focus-visible { box-shadow: 0 0 0 var(--eco-focus-w) var(--focus-c, var(--eco-focus-ring)); }
.eco-report__table .eco-report__sub :is(td, th) { background: var(--eco-app-well); font-weight: 600; color: var(--eco-text-primary); }
.eco-report__table .eco-report__sub th { border-radius: var(--eco-radius-xl) 0 0 var(--eco-radius-xl); }
.eco-report__sub td:last-child { border-radius: 0 var(--eco-radius-xl) var(--eco-radius-xl) 0; }
.eco-report__table tbody tr.eco-report__sub:hover :is(td, th) { background: var(--eco-app-well); }
.eco-report__table .eco-report__total :is(td, th) { position: sticky; bottom: 0; z-index: 2; padding-block: 12px; background: color-mix(in srgb, var(--eco-bg-secondary_hover) var(--eco-app-k), var(--eco-bg-tertiary)); font-weight: 600; color: var(--eco-text-primary); }
.eco-report__table .eco-report__total th { z-index: 3; border-radius: var(--eco-radius-xl) 0 0 var(--eco-radius-xl); }
.eco-report__total td:last-child { border-radius: 0 var(--eco-radius-xl) var(--eco-radius-xl) 0; }
.eco-report__table tr[hidden] { display: none; }
.eco-report__scroll:has(.eco-report__total) {
  --rp-r: var(--eco-radius-xl); --rp-t: var(--eco-report-tray-h, 52px); --rp-c: var(--eco-app-card);
  --rp-tray: var(--eco-report-tray, color-mix(in srgb, var(--eco-text-primary) calc(8% + var(--eco-app-k) * .04), var(--eco-app-card)));
  flex-grow: 0; padding-bottom: 0;
  background:
    linear-gradient(var(--rp-c), var(--rp-c)) left top / 100% calc(100% - var(--rp-t) - var(--rp-r) + 1px) no-repeat,
    linear-gradient(var(--rp-c), var(--rp-c)) left var(--rp-r) bottom var(--rp-t) / calc(100% - 2 * var(--rp-r) + 1px) var(--rp-r) no-repeat,
    radial-gradient(circle at 100% 0, var(--rp-c) var(--rp-r), transparent calc(var(--rp-r) + .5px)) left 0 bottom var(--rp-t) / var(--rp-r) var(--rp-r) no-repeat,
    radial-gradient(circle at 0 0, var(--rp-c) var(--rp-r), transparent calc(var(--rp-r) + .5px)) right 0 bottom var(--rp-t) / var(--rp-r) var(--rp-r) no-repeat,
    var(--rp-tray);
}
.eco-report__scroll .eco-report__table .eco-report__total :is(td, th) { height: var(--rp-t, 52px); padding-block: 0; border-radius: 0; background: var(--rp-tray); box-shadow: 0 0 0 1px var(--rp-tray); }
.eco-report__scroll:has(.eco-report__total) .eco-report__table { background: transparent; }
@media (prefers-reduced-motion: reduce) { .eco-report__tog > svg { transition: none; } }
.eco-report__table tbody tr.eco-report__h > th { position: sticky; left: 0; padding: 24px 16px 8px; background: var(--eco-app-card); font: 600 var(--eco-text-md)/24px var(--eco-font-body); color: var(--eco-text-primary); }
.eco-report__table tbody tr.eco-report__h:first-child > th { padding-top: 8px; }
.eco-report__table tbody tr.eco-report__h:hover > th, .eco-report__table tbody tr.eco-report__chk:hover > th { background: var(--eco-app-card); }
.eco-report__table tbody tr.eco-report__chk > th { padding-block: 12px; font-weight: 500; }
.eco-report__acc > .eco-avatar { --s: 24px; flex: none; align-self: center; }
.eco-report__acc:has(> .eco-avatar) { align-items: center; }
.eco-report__scroll .eco-table .eco-report__total > * { box-shadow: 0 8px 0 var(--eco-app-card); }