:root { --ek-ease: cubic-bezier(.2, .8, .2, 1); }

.ek-tone--amber { --ek-tone: var(--sh-amber-text); }
.ek-tone--blue { --ek-tone: var(--sh-blue-text); }
.ek-tone--purple { --ek-tone: var(--sh-purple-text); }
.ek-tone--green { --ek-tone: var(--sh-green-text); }
.ek-tone--red { --ek-tone: var(--sh-red-text); }
.ek-tone--gray { --ek-tone: var(--sh-text-secondary); }

.ek-kind { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--sh-radius-full); font-size: 12px; font-weight: 500; color: var(--ek-tone); background: color-mix(in srgb, var(--ek-tone) 12%, transparent); white-space: nowrap; }
.ek-kind i[data-lucide] { width: 13px; height: 13px; }
.ek-kicon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex: none; color: var(--ek-tone); background: color-mix(in srgb, var(--ek-tone) 12%, transparent); }
.ek-kicon i[data-lucide] { width: 14px; height: 14px; }

.ek-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sh-text-primary); white-space: nowrap; }
.ek-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-text-tertiary); }
.ek-dot--success::before { background: var(--sh-green-text); }
.ek-dot--warning::before { background: var(--sh-amber-text); }
.ek-dot--danger::before { background: var(--sh-red-text); }
.ek-dot--info::before { background: var(--sh-blue-text); }
.ek-dot--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sh-text-tertiary); }

.ek-link { color: var(--sh-text-primary); font-weight: 500; text-decoration: none; cursor: pointer; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .18s var(--ek-ease); }
.ek-link:hover { background-size: 100% 1px; color: var(--sh-text-primary); text-decoration: none; }
.ek-muted { color: var(--sh-text-tertiary); }
.ek-id { white-space: nowrap; flex: none; font-family: var(--sh-font-mono); font-size: 12px; color: var(--sh-text-tertiary); }
.ek-verified { width: 14px; height: 14px; color: var(--sh-blue-text); flex: none; }
.ek-unverified { font-size: 11px; color: var(--sh-amber-text); white-space: nowrap; }

.ek-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.ek-person--row, .ek-person--head { display: flex; gap: 10px; }
.ek-person--head { gap: 12px; }
.ek-person__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ek-person__name { display: flex; align-items: center; gap: 5px; font-size: 14px; min-width: 0; }
.ek-person__plain { font-weight: 500; color: var(--sh-text-primary); }
.ek-person--head .ek-person__name { font-size: 16px; font-weight: 600; }
.ek-person__meta { display: flex; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--sh-text-tertiary); flex-wrap: wrap; }
.ek-person--line .ek-link, .ek-person--line .ek-person__plain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ek-role { font-size: 12px; font-weight: 500; white-space: nowrap; }
.ek-role--sender { color: var(--sh-blue-text); }
.ek-role--carrier { color: var(--sh-purple-text); }
.ek-role--member { color: var(--sh-text-secondary); }
.ek-person--line .ek-role { margin-left: 2px; }
.ek-pair { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.ek-pair__arrow { width: 13px; height: 13px; color: var(--sh-text-tertiary); }

.ek-route { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.ek-route__line { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; color: var(--sh-text-primary); }
.ek-route__line i[data-lucide] { width: 13px; height: 13px; color: var(--sh-text-tertiary); }
.ek-route__meta { font-size: 12px; color: var(--sh-text-tertiary); }

.ek-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--sh-border); border-radius: var(--sh-radius-lg); }
.ek-money > div { padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ek-money > div + div { border-left: 1px solid var(--sh-border); }
.ek-money small { font-size: 11px; color: var(--sh-text-tertiary); }
.ek-money b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ek-money span { font-size: 11px; color: var(--sh-text-tertiary); }
.ek-money-inline { position: relative; display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; font-size: 13px; cursor: help; white-space: nowrap; outline-offset: 2px; }
.ek-money-inline b { font-weight: 600; }
.ek-tip { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 180px; padding: 8px 10px; border-radius: var(--sh-radius-md); background: var(--sh-text-primary); color: var(--sh-bg-surface); font-size: 12px; line-height: 1.4; white-space: nowrap; box-shadow: var(--sh-shadow-md); opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .12s var(--ek-ease), transform .12s var(--ek-ease); }
.ek-tip b { font-weight: 600; }
.ek-tip small { font-size: 11px; opacity: .75; }
.ek-money-inline:hover .ek-tip, .ek-money-inline:focus-visible .ek-tip { opacity: 1; transform: none; transition-delay: .15s; }

.ek-when { font-size: 12px; color: var(--sh-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ek-attn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.ek-attn i[data-lucide] { width: 14px; height: 14px; flex: none; }
.ek-attn--amber { color: var(--sh-amber-text); }
.ek-attn--red { color: var(--sh-red-text); }

.ek-iconbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--sh-radius-md); background: transparent; color: var(--sh-text-secondary); cursor: pointer; text-decoration: none; flex: none; transition: background .12s, color .12s, transform .1s; }
.ek-iconbtn:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.ek-iconbtn:active:not(:disabled) { transform: scale(.94); }
.ek-iconbtn:disabled { cursor: not-allowed; color: var(--sh-text-disabled); background: transparent; }
.ek-iconbtn:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: 1px; }
.ek-iconbtn i[data-lucide] { width: 15px; height: 15px; }
.ek-iconbtn.is-done, .ek-iconbtn.is-done:hover { color: var(--sh-green-text); }

.ek-menu-sep { border: 0; border-top: 1px solid var(--sh-border); margin: 4px 0; }
.sh-popup__item.is-danger, .sh-popup__item.is-danger:hover { color: var(--sh-red-text); }
.sh-popup__item.is-danger .sh-popup__item-icon { color: var(--sh-red-text); }

.ek-list { display: grid; gap: 8px; align-content: start; }
.ek-list--grid { grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); align-items: start; }
.ek-day { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--sh-text-primary); }
.ek-day:first-child { margin-top: 0; }
.ek-day span { font-weight: 400; font-size: 12px; color: var(--sh-text-tertiary); }

.ek-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; background: var(--sh-bg-surface); border: 1px solid var(--sh-border); border-radius: var(--sh-radius-lg); transition: border-color .15s var(--ek-ease), background .15s var(--ek-ease), transform .1s var(--ek-ease); }
.ek-card.is-clickable { cursor: pointer; }
.ek-card:hover { border-color: var(--sh-border-strong); }
.ek-card.is-clickable:active { transform: scale(.997); }
.ek-card:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: 2px; }
.ek-card.is-selected { background: var(--sh-active); border-color: var(--sh-border-strong); }
.ek-card.is-open { border-color: var(--sh-text-primary); box-shadow: inset 3px 0 0 var(--sh-text-primary); }
.ek-card__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ek-card__title { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-card__status { margin-left: auto; display: flex; transition: opacity .12s; }
.ek-card__row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ek-card__foot { display: flex; align-items: center; gap: 2px 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--sh-border); }
.ek-card__meta { margin-left: auto; font-size: 12px; color: var(--sh-text-tertiary); }
.ek-hover-actions { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 2px; padding: 2px; border-radius: var(--sh-radius-md); background: var(--sh-bg-surface); box-shadow: var(--sh-shadow-sm), 0 0 0 1px var(--sh-border); opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity .14s var(--ek-ease), transform .14s var(--ek-ease); }
.ek-card:hover .ek-hover-actions, .ek-card:focus-within .ek-hover-actions { opacity: 1; transform: none; pointer-events: auto; }
.ek-card:hover .ek-card__status, .ek-card:focus-within .ek-card__status { opacity: 0; }
.ek-check { position: absolute; left: -9px; top: 13px; z-index: 1; width: 18px; height: 18px; opacity: 0; transform: scale(.85); transition: opacity .14s var(--ek-ease), transform .14s var(--ek-ease); }
.ek-check .sh-bulk-check { width: 18px; height: 18px; border-radius: 5px; box-shadow: var(--sh-shadow-sm); }
.ek-check .sh-bulk-check[aria-checked="true"] { background: var(--sh-text-primary); border-color: var(--sh-text-primary); }
[data-theme="dark"] .ek-check .sh-bulk-check[aria-checked="true"]::after { border-color: #000; }
.ek-card:hover .ek-check, .ek-card:focus-within .ek-check, .ek-card.is-selected .ek-check, .ek-list.is-selecting .ek-check { opacity: 1; transform: none; }
.ek-list:has(.ek-check) { padding-left: 12px; }

.ek-phead { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--sh-border); }
.ek-phead__top { display: flex; align-items: center; gap: 8px; }
.ek-phead__sp { flex: 1; }
.ek-phead__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ek-phead__title h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ek-phead__sub { font-size: 13px; color: var(--sh-text-secondary); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ek-phead__sub .ek-route__line { font-size: 13px; }
.ek-phead__sub .ek-attn, .ek-phead__sub .sh-peek__trail { flex: 1 1 100%; }
.ek-sec { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.ek-sec + .ek-sec { border-top: 1px solid var(--sh-border); }
.ek-sec__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--sh-text-tertiary); }
.ek-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.ek-kv dt { color: var(--sh-text-tertiary); }
.ek-kv dd { margin: 0; color: var(--sh-text-primary); min-width: 0; }

.ek-flow { display: block; width: 100%; height: auto; margin-top: 4px; }
.ek-flow__source { fill: var(--sh-text-primary); }
.ek-flow__t { font-size: 12px; fill: var(--sh-text-secondary); font-family: inherit; }
.ek-flow__v { fill: var(--sh-text-primary); font-weight: 600; }

.ek-glyph { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.ek-size { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
[data-theme="dark"] .ek-size { filter: saturate(.9) brightness(.92); }
.ek-cats { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ek-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sh-text-primary); min-width: 0; }
.ek-cat .ek-glyph { color: var(--sh-text-secondary); }
.ek-cat__sizes { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.ek-cat__price { font-size: 12px; color: var(--sh-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ek-cat__price.is-off, .ek-cat.is-off .ek-cat__price { color: var(--sh-amber-text); }
.ek-cat--chip { height: 26px; padding: 0 8px; border: 1px solid var(--sh-border); border-radius: var(--sh-radius-md); background: var(--sh-bg-surface); white-space: nowrap; }
.ek-cat--chip.is-off { border-color: var(--sh-amber-border); }
.ek-cat--row { display: grid; grid-template-columns: 28px auto 1fr auto; gap: 10px; width: 100%; padding: 6px 0; }
.ek-cat--row + .ek-cat--row { border-top: 1px solid var(--sh-border); }
.ek-cat__tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sh-bg-sunken); }
.ek-cat__name { font-weight: 500; }
.ek-cat--row .ek-cat__price { font-size: 13px; color: var(--sh-text-primary); }

@media (hover: none) {
    .ek-hover-actions { opacity: 1; transform: none; pointer-events: auto; position: static; box-shadow: none; padding: 0; margin-left: auto; }
    .ek-check { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ek-card, .ek-hover-actions, .ek-check, .ek-tip, .ek-link, .ek-iconbtn { transition: none; }
}