/* Extended mode of the LDT planner. Tokens come from emx-app.css.
   Motion: one curve (--emx-ease), only transform / opacity / colour. */

/* extra line icons, same drawing rules as the .lx set in emx-app.css */
body .lx-grip { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9' cy='6' r='1.5'/%3E%3Ccircle cx='15' cy='6' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='18' r='1.5'/%3E%3Ccircle cx='15' cy='18' r='1.5'/%3E%3C/svg%3E"); }
body .lx-lock { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 15v2'/%3E%3C/svg%3E"); }
body .lx-unlock { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.5-1.9'/%3E%3Cpath d='M12 15v2'/%3E%3C/svg%3E"); }
body .lx-pin { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3.5H7L10 10z'/%3E%3Cpath d='M12 13.5V21'/%3E%3C/svg%3E"); }
body .lx-grid { --lx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='4.5' height='14' rx='1'/%3E%3Crect x='9.75' y='5' width='4.5' height='14' rx='1'/%3E%3Crect x='16' y='5' width='4.5' height='14' rx='1'/%3E%3C/svg%3E"); }

/* ── mode switch: a glass pill beside the title, the highlight slides ── */
body .ldt-fs-header { gap: 20px; }
body .lx-mode {
    position: relative; display: inline-flex; align-items: center;
    margin-right: auto; padding: 4px;
    border-radius: 999px; border: 1px solid var(--emx-line-2);
    background: rgba(255, 255, 255, .035);
}
body .lx-mode-thumb {
    position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0;
    border-radius: 999px; background: var(--emx-tint-2);
    box-shadow: inset 0 0 0 1px rgba(31, 164, 194, .45);
    transition: transform .45s var(--emx-ease), width .45s var(--emx-ease);
    pointer-events: none;
}
body .lx-mode-tab {
    position: relative; z-index: 1;
    min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none;
    font-family: var(--emx-font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0;
    color: var(--emx-text-2); cursor: pointer;
    transition: color .25s var(--emx-ease);
}
body .lx-mode-tab:hover, body .lx-mode-tab.is-active { color: var(--emx-text); }
body .lx-mode-tab:focus-visible { outline: 2px solid var(--emx-accent-base); outline-offset: 2px; }

/* ── parts that exist only in extended mode ── */
body .lx-only, body .lx-ctx-only { display: none; }
body .lx-extended .lx-only { display: block; }
body .lx-extended #ldt-context-menu .lx-ctx-only { display: flex; }
body .lx-extended #lx-fleet { animation: lx-in .5s var(--emx-ease) both; }
@keyframes lx-in { from { opacity: 0; transform: translateY(-10px); } }

/* ── vehicle list ── */
body #lx-fleet h4 { display: flex; align-items: center; }
body .lx-fleet-count { margin-left: auto; font-size: 11.5px; letter-spacing: .04em; color: var(--emx-text-3); font-variant-numeric: tabular-nums; }
body .lx-fleet-list { display: flex; flex-direction: column; gap: 6px; }
body .lx-car {
    position: relative; display: flex; align-items: stretch; gap: 2px;
    border-radius: 12px; border: 1px solid var(--emx-line); background: var(--emx-bg);
    transition: border-color .25s var(--emx-ease), background-color .25s var(--emx-ease), opacity .25s var(--emx-ease), transform .3s var(--emx-ease);
}
body .lx-fleet-list.no-anim .lx-car { transition: none; }
body .lx-car.is-new { opacity: 0; transform: translateY(-8px); }
body .lx-car.is-out { opacity: 0; transform: scale(.97); pointer-events: none; }
body .lx-car:hover { border-color: var(--emx-line-2); }
body .lx-car.is-active { border-color: rgba(31, 164, 194, .55); background: var(--emx-tint); }
body .lx-car.is-drag { z-index: 2; transition: none; border-color: var(--emx-accent-base); box-shadow: var(--emx-shadow-sm); }
body .lx-car-grip {
    display: grid; place-items: center; width: 22px; flex: none;
    color: var(--emx-text-3); cursor: grab; touch-action: none; opacity: .55;
    transition: opacity .2s, color .2s;
}
body .lx-car-grip .lx { width: 14px; height: 14px; }
body .lx-car:hover .lx-car-grip { opacity: 1; }
body .lx-car.is-only .lx-car-grip { visibility: hidden; }
body .lx-car.is-drag .lx-car-grip { cursor: grabbing; color: var(--emx-accent); }
body .lx-car-main {
    flex: 1; min-width: 0; padding: 10px 6px 10px 0; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 5px; text-align: left; font: inherit; color: var(--emx-text);
}
body .lx-car-main:focus-visible { outline: 2px solid var(--emx-accent-base); outline-offset: -2px; border-radius: 10px; }
body .lx-car-top { display: flex; align-items: center; gap: 7px; }
body .lx-car-name { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
body .lx-car-input {
    width: 130px; height: 24px; padding: 0 7px; border-radius: 7px; border: 1px solid var(--emx-accent-base);
    background: var(--emx-bg-2); color: var(--emx-text); font: inherit; font-size: 13.5px; outline: none;
    box-shadow: 0 0 0 3px var(--emx-tint-2);
}
body .lx-car-warn { width: 14px; height: 14px; color: var(--emx-warn); display: none; }
body .lx-car.has-warn .lx-car-warn { display: inline-block; }
body .lx-car-pct { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--emx-text-2); font-variant-numeric: tabular-nums; }
body .lx-car.is-active .lx-car-pct { color: var(--emx-accent); }
body .lx-car-meta { font-size: 12px; color: var(--emx-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .lx-car-bar { display: block; height: 3px; border-radius: 3px; background: var(--emx-line); overflow: hidden; }
body .lx-car-bar i {
    display: block; height: 100%; border-radius: 3px; background: var(--emx-accent-base);
    transform-origin: left; transform: scaleX(0); transition: transform .6s var(--emx-ease);
}
body .lx-car-tools { display: grid; grid-template-columns: repeat(2, 26px); align-content: center; gap: 2px; padding: 4px 6px 4px 0; }
body .lx-car-tool {
    width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: 8px; background: none; color: var(--emx-text-3); cursor: pointer;
    opacity: 0; transition: opacity .2s, color .2s, border-color .2s, background-color .2s;
}
body .lx-car-tool .lx { width: 14px; height: 14px; }
body .lx-car:hover .lx-car-tool, body .lx-car.is-active .lx-car-tool, body .lx-car-tool:focus-visible, body .lx-car-tool.is-on { opacity: 1; }
body .lx-car-tool:hover { color: var(--emx-accent); border-color: var(--emx-line-2); background: var(--emx-tint); }
body .lx-car-tool.is-on { color: var(--emx-accent); }
body .lx-car-tool.lx-tool-del:hover { color: var(--emx-bad); border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .06); }
body .lx-car-tool:disabled { opacity: .25 !important; pointer-events: none; }
body .lx-car.is-only .lx-tool-del { visibility: hidden; }
body .lx-fleet-add {
    width: 100%; margin-top: 8px; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px; border: 1px dashed var(--emx-line-2); background: none;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--emx-text-2); cursor: pointer;
    transition: border-color .25s var(--emx-ease), color .25s var(--emx-ease), background-color .25s var(--emx-ease);
}
body .lx-fleet-add .lx { width: 15px; height: 15px; }
body .lx-fleet-add:hover { border-color: var(--emx-accent-base); color: var(--emx-accent); background: var(--emx-tint); }
body .lx-fleet-add[hidden] { display: none; }

body .lx-for {
    margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--emx-tint-2);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--emx-accent);
}
body .lx-unpin { width: 100%; margin-top: 8px; }
body .lx-unpin[hidden] { display: none; }
body .ldt-fs-btn.is-busy { opacity: .6; pointer-events: none; }

/* ── labels over vehicles ── */
body .lx-extended .lx-tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
body .lx-tag {
    position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
    border-radius: 999px; border: 1px solid var(--emx-line-2);
    background: rgba(24, 24, 28, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--emx-text); white-space: nowrap; cursor: pointer;
    transition: opacity .35s var(--emx-ease), border-color .25s var(--emx-ease), color .25s var(--emx-ease);
    animation: lx-tag-in .5s var(--emx-ease) .55s both;
}
@keyframes lx-tag-in { from { opacity: 0; } }
body .lx-tag:hover { border-color: var(--emx-accent-base); }
body .lx-tag.is-active { border-color: rgba(31, 164, 194, .6); }
body .lx-tag.is-dim { opacity: .45; }
body .lx-tag-pct { color: var(--emx-text-3); font-variant-numeric: tabular-nums; }
body .lx-tag.is-active .lx-tag-pct { color: var(--emx-accent); }
body .lx-tag .lx { width: 13px; height: 13px; display: none; }
body .lx-tag.is-locked .lx-tag-lock { display: inline-block; color: var(--emx-text-3); }
body .lx-tag.has-warn .lx-tag-warn { display: inline-block; color: var(--emx-warn); }

/* ── view button and lot counter ── */
body .lx-extended .lx-hud { position: absolute; top: 16px; left: 16px; z-index: 4; display: flex; gap: 8px; pointer-events: none; }
body .lx-hud-btn, body .lx-hud-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px;
    border-radius: 999px; border: 1px solid var(--emx-line-2);
    background: rgba(24, 24, 28, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--emx-text); cursor: pointer;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .35s var(--emx-ease), transform .45s var(--emx-ease), border-color .25s, color .25s;
}
body .lx-hud-btn .lx, body .lx-hud-chip .lx { width: 15px; height: 15px; }
body .lx-hud-btn .lx { color: var(--emx-accent); }
body .lx-hud .is-in { opacity: 1; transform: none; pointer-events: auto; }
body .lx-hud-btn:hover { border-color: var(--emx-accent-base); color: var(--emx-accent); }
body .lx-hud-chip { color: var(--emx-warn); border-color: rgba(232, 163, 61, .35); font-variant-numeric: tabular-nums; }
body .lx-hud-chip:not(.is-in), body .lx-hud-btn:not(.is-in) { position: absolute; }
body .lx-hud-go { border-color: var(--emx-accent-base); color: var(--emx-accent); }
body .lx-hud-go:hover { background: rgba(60, 191, 218, .12); }

body .lx-toast {
    position: absolute; left: 50%; bottom: 22px; z-index: 6; max-width: min(520px, calc(100% - 32px));
    padding: 11px 18px; border-radius: 14px; border: 1px solid var(--emx-line-2);
    background: rgba(24, 24, 28, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font-size: 13.5px; line-height: 1.45; color: var(--emx-text); text-align: center;
    opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
    transition: opacity .35s var(--emx-ease), transform .45s var(--emx-ease);
}
body .lx-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ── legend rows in extended mode ── */
body .lx-lg-row .lx-lg-pin { color: var(--emx-accent); }
body .lx-lg-row .lx-lg-pin .lx { width: 15px; height: 15px; }
body .lx-lg-row .ldt-lg-status { font-variant-numeric: tabular-nums; }
body #ldt-context-menu #ctx-van:has(+ .ctx-sublist:not([hidden])) .ctx-chev { transform: none; }
body #ldt-context-menu .ctx-sub .lx { width: 14px; height: 14px; }

/* ── group editor: split between vehicles ── */
body .lx-split { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--emx-line); display: flex; flex-direction: column; gap: 10px; }
body .lx-split-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--emx-text); }
body .lx-split-yard { font-weight: 500; color: var(--emx-text-3); font-variant-numeric: tabular-nums; }
body .lx-split-yard.is-bad { color: var(--emx-bad); }

/* ── summary window in extended mode ── */
body #ldt-summary-modal.lx-sum .ldt-summary-body > .ldt-fs-section { display: none; }
body #lx-summary { display: flex; flex-direction: column; gap: 16px; }
body #lx-summary .ldt-summary-block { flex-direction: row; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; }
body #lx-summary .ldt-lg-swatch { display: inline-block; width: 11px; height: 11px; margin: 0 8px 0 0; vertical-align: -1px; }
body .lx-sum-warn {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid rgba(232, 163, 61, .35); background: rgba(232, 163, 61, .08);
    font-size: 13px; color: var(--emx-warn);
}
body .lx-sum-warn .lx { width: 15px; height: 15px; }

/* ── trash target while dragging: family glass instead of the navy gradient ── */
body .vl-trash-bin {
    width: 84px; height: 84px; left: 28px; bottom: 28px;
    background: rgba(24, 24, 28, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--emx-line-2); box-shadow: var(--emx-shadow-sm);
    color: var(--emx-text-3); font-size: 26px;
    transition: opacity .3s var(--emx-ease), transform .4s var(--emx-ease), color .2s, border-color .2s, background-color .2s;
}
body .vl-trash-bin.hovered {
    color: var(--emx-bad); border-color: rgba(248, 113, 113, .6); background: rgba(60, 22, 22, .85);
    box-shadow: var(--emx-shadow-sm); transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    body .lx-mode-thumb, body .lx-mode-tab, body .lx-car, body .lx-car-bar i, body .lx-tag,
    body .lx-hud-btn, body .lx-hud-chip, body .lx-toast, body .vl-trash-bin { transition: none; animation: none; }
    body .lx-extended #lx-fleet { animation: none; }
}

@media (max-width: 768px) {
    body .lx-mode { order: 3; margin-right: 0; }
    body .lx-mode-tab { min-height: 36px; padding: 0 14px; }
    body .lx-car-tool { opacity: 1; }
    body .lx-extended .lx-hud { top: 10px; left: 10px; flex-wrap: wrap; right: 10px; }
    /* the vehicle list right above already shows names and fill; on a
       280px-high view the labels would only cover the vehicles */
    body .lx-extended .lx-tags { display: none; }
    body .lx-extended .ldt-fs-main { min-height: 340px; }
    body .lx-extended .ldt-legend { top: 56px; }
}

body .lx-lg-tools { display: flex; align-items: flex-start; gap: 0; }
body .lx-extended .ldt-legend { width: 320px; }

body #lx-fleet h4 > span[data-i18n], body #lx-summary h4 span { text-transform: uppercase; }
body #lx-summary th { text-transform: uppercase; }
body #ldt-summary-modal.lx-sum .ldt-summary-container { width: min(900px, 94vw); max-width: none; }
body #lx-summary td { vertical-align: top; }




/* one main action: on the lot the summary is a quiet button */
body .lx-extended .ldt-fs-load-section .ldt-fs-btn.primary[onclick="ldtOpenSummaryModal()"] {
    background: rgba(255, 255, 255, .035); border: 1px solid var(--emx-line-2); color: var(--emx-text); box-shadow: none;
}
body .lx-extended .ldt-fs-load-section .ldt-fs-btn.primary[onclick="ldtOpenSummaryModal()"]:hover { border-color: var(--emx-accent-base); color: var(--emx-accent); }

/* cargo buttons in the middle of the header, in both modes. The header also
   holds the title, the mode switch and the close button, so the true centre
   is free only on wide screens; below that the bar sits between the switch
   and the close button, and on small laptops it takes a row of its own. */
body .ldt-fs-close .lx-close-short { display: none; }
body .ldt-fs-header .ldt-fs-title-group { white-space: nowrap; }
@media (min-width: 1800px) {
    body .ldt-fs-header .ldt-cargo-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (min-width: 1320px) and (max-width: 1799.98px) {
    body .ldt-fs-header .ldt-cargo-bar { margin-right: auto; }
}
@media (min-width: 769px) and (max-width: 1439.98px) {
    body .ldt-fs-close .lx-close-long { display: none; }
    body .ldt-fs-close .lx-close-short { display: inline-block; text-transform: lowercase; }
    body .ldt-fs-close .lx-close-short::first-letter { text-transform: uppercase; }
}
@media (min-width: 769px) and (max-width: 1319.98px) {
    body .ldt-fs-header { flex-wrap: wrap; row-gap: 12px; }
    body .ldt-fs-header .ldt-cargo-bar { order: 2; width: 100%; justify-content: center; }
}

/* how the scene is steered: one quiet line in the corner */
body .lx-keys {
    position: absolute; right: 16px; bottom: 12px; z-index: 3; max-width: calc(100% - 120px);
    font-size: 11px; line-height: 1.4; color: var(--emx-text); opacity: .42; text-align: right; pointer-events: none;
}
@media (max-width: 1180px), (max-height: 620px) { body .lx-keys { display: none; } }

/* payload */
body .lx-payload-box { margin-top: 10px; }
body .lx-over { color: var(--emx-warn) !important; }
body .lx-car-kg { display: block; margin-top: 2px; font-size: 12px; color: var(--emx-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .lx-car-kg[hidden] { display: none; }
body .lx-limit-note { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--emx-text-3); white-space: nowrap; }

/* cargo forms never run off the screen: they scroll inside instead */
body .ldt-fs-header .ldt-cargo-menu.open { max-height: calc(100vh - 132px); max-height: calc(100dvh - 132px); overflow-y: auto; overscroll-behavior: contain; }

/* three answers fit one row (remove a vehicle with cargo) */
body .ldt-dialog { width: min(500px, calc(100vw - 32px)); }

/* phones: a compact header and a shorter settings column, so the 3D view
   keeps most of the screen */
@media (max-width: 768px) {
    body .ldt-fs-header { padding: 10px 14px; gap: 8px 10px; }
    body .ldt-fs-header .ldt-fs-title-group { font-size: 17px; }
    body .ldt-fs-header .lx-mode { order: 0; margin-left: auto; }
    /* no scrolling here: the forms drop down from this bar and must not be clipped */
    body .ldt-fs-header .ldt-cargo-bar { order: 2; width: 100%; flex-wrap: wrap; gap: 6px; }
    body .ldt-fs-header .ldt-cargo-tab { min-height: 36px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
    body .ldt-fs-layout .ldt-fs-sidebar { max-height: 32vh; }
}

/* an open cargo form lies above the neighbouring tabs (they wrap on phones) */
body .ldt-fs-header .ldt-cargo-item:has(.ldt-cargo-menu.open) { z-index: 6; }

/* phones: the round close button sits in the top right corner, so the mode
   switch keeps to the left, and the three cargo tabs share one row */
@media (max-width: 480px) {
    body .ldt-fs-header .ldt-fs-title-group { padding-right: 48px; }
    body .ldt-fs-header .lx-mode { margin-left: 0; margin-right: auto; }
    body .ldt-fs-header .ldt-cargo-bar { flex-wrap: nowrap; }
    body .ldt-fs-header .ldt-cargo-tab { padding: 0 9px; font-size: 11.5px; }
    body .ldt-fs-header .ldt-cargo-tab .ldt-type-icon { display: none; }
}

/* "Moje auta": saved vehicle sizes, a pill in the corner of the dimensions
   card with a list dropping over the cards below */
body .lx-dims-section { position: relative; }
body .lx-dims-section:has(.lx-presets-menu:not([hidden])) { z-index: 8; }
/* heading and pill share a row; when a long title (German) leaves no room,
   the pill moves under it instead of covering it */
body .lx-dims-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-bottom: 12px; }
body .lx-dims-head > h4 { flex: 1 1 auto; margin: 0; }
body .lx-dims-head > h4 .lx-for { white-space: nowrap; }
body .lx-dims-head > .lx-presets { position: relative; margin-left: auto; }
body .lx-presets-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 12px;
    border: 1px solid var(--emx-line-2); border-radius: 999px; background: rgba(255, 255, 255, .035);
    font: inherit; font-size: 12px; font-weight: 600; color: var(--emx-text-2); cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
body .lx-presets-btn .lx { width: 14px; height: 14px; transition: transform .3s var(--emx-ease); }
body .lx-presets-btn:hover, body .lx-presets-btn[aria-expanded="true"] { color: var(--emx-text); border-color: var(--emx-accent-base); background: var(--emx-tint); }
body .lx-presets-btn[aria-expanded="true"] .lx { transform: rotate(180deg); }
body .lx-presets-btn:focus-visible { outline: 2px solid var(--emx-accent-base); outline-offset: 2px; }
body .lx-presets-menu {
    position: absolute; top: calc(100% + 6px); right: 0; width: min(300px, calc(100vw - 48px));
    display: flex; flex-direction: column; gap: 4px; padding: 6px;
    background: var(--emx-surface-2); border: 1px solid var(--emx-line-2); border-radius: 14px;
    box-shadow: var(--emx-shadow-sm); animation: lx-presets-in .18s var(--emx-ease);
}
body .lx-presets-menu[hidden] { display: none; }
@keyframes lx-presets-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
body .lx-presets-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
body .lx-preset { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
body .lx-preset:hover { background: rgba(255, 255, 255, .04); }
body .lx-preset.is-on { background: var(--emx-tint-2); }
body .lx-preset-pick {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 8px 10px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--emx-text);
}
body .lx-preset-name { max-width: 100%; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .lx-preset-dims { font-size: 11.5px; color: var(--emx-text-3); font-variant-numeric: tabular-nums; }
body .lx-preset.is-on .lx-preset-name { color: var(--emx-accent); }
body .lx-preset-del {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 4px;
    border: 0; border-radius: 8px; background: none; color: var(--emx-text-3); cursor: pointer; transition: color .2s, background .2s;
}
body .lx-preset-del .lx { width: 15px; height: 15px; }
body .lx-preset-del:hover { color: var(--emx-bad); background: rgba(248, 113, 113, .08); }
body .lx-presets-note { margin: 0; padding: 10px; font-size: 12.5px; line-height: 1.5; color: var(--emx-text-3); }
body .lx-presets-save {
    display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; margin-top: 2px;
    border: 0; border-top: 1px solid var(--emx-line); border-radius: 0 0 10px 10px; background: none;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--emx-accent); cursor: pointer; text-align: left;
}
body .lx-presets-save .lx { width: 15px; height: 15px; }
body .lx-presets-save:hover { background: var(--emx-tint); }
body .lx-presets-dialog-dims { margin: 0; font-size: 14px; color: var(--emx-text-2); font-variant-numeric: tabular-nums; }
body .lx-presets-dialog-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--emx-text-2); }
body .ldt-dialog-note[hidden] { display: none; }

/* group editor: a select looks like the inputs; the limit is greyed out
   while the group cannot be stacked */
body .ldt-dialog-field select {
    width: 100%; min-height: 44px; padding: 0 38px 0 13px; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
    border: 1px solid var(--emx-line-2); border-radius: 12px;
    background: var(--emx-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
    font: inherit; font-size: 15px; color: var(--emx-text); cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
body .ldt-dialog-field select:hover { border-color: rgba(255, 255, 255, .24); }
body .ldt-dialog-field select option { background: var(--emx-surface-2); color: var(--emx-text); }
body .ldt-dialog-field select:focus { outline: none; border-color: var(--emx-accent-base); box-shadow: 0 0 0 3px var(--emx-tint-2); }
body .ldt-dialog-field input:disabled { opacity: .45; cursor: not-allowed; }