/* Product UI primitives + widget styles (mirrors src/ui/primitives & src/ui/widgets) */
/* ───────────── Product UI primitives (mirrors src/ui/primitives) ───────────── */
.stage * { font-size: inherit; }
.stage { font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, transform .1s; user-select: none; }
.btn:hover { background: color-mix(in srgb, var(--primary) 82%, var(--background)); }
.btn.press, .btn:active { transform: translateY(1px); }
.btn.outline { background: var(--background); border-color: var(--border); color: var(--foreground); }
.btn.outline:hover { background: var(--muted); }
.btn.secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn.ghost { background: transparent; color: var(--foreground); }
.btn.ghost:hover { background: var(--muted); }
.btn.destructive { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
.btn.destructive:hover { background: color-mix(in srgb, var(--destructive) 20%, transparent); }
.btn.solid-destructive { background: var(--destructive); color: var(--card); }
.btn.xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 8px; gap: 4px; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn.icon { width: 36px; padding: 0; }
.btn.icon.xs { width: 24px; }
.btn.icon.sm { width: 32px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--primary); color: var(--primary-foreground); white-space: nowrap; }
.badge.secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge.outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.badge.tone { background: color-mix(in srgb, var(--c) 15%, var(--card)); color: var(--c); }
.badge.tone .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.input, .select, .textarea { width: 100%; min-height: 36px; border: 1px solid var(--input); border-radius: 10px; background: var(--field-empty); padding: 0 10px; font-size: 14px; color: var(--foreground); display: flex; align-items: center; gap: 6px; transition: border-color .15s, box-shadow .15s; outline: 0; }
.input.filled, .select.filled { background: var(--field-filled); }
.input.focus, .select.focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.input .ph { color: var(--muted-foreground); opacity: .8; }
.input .caret.on::after, .caret.on::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; background: var(--primary); margin-inline-start: 1px; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.field { margin-bottom: 11px; position: relative; }
.field .hint { font-size: 11.5px; color: var(--muted-foreground); margin-top: 3px; }
.sep { height: 1px; background: var(--border); border: 0; margin: 8px 0; }
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: none; color: #fff; }
.avatar.sm { width: 20px; height: 20px; font-size: 9.5px; }

/* widget shell (WidgetLayout / Title / Actions / Body) */
.w { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--card-foreground); overflow: hidden; --widget-spacing: 12px; }
.w-title { display: flex; align-items: center; gap: 8px; padding: 12px; font-family: "Morabba"; font-size: 17px; font-weight: 500; line-height: 1.3; }
.w-actions { display: flex; align-items: center; padding: 12px 0 0 12px; }
.w-body { grid-column: 1 / -1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; position: relative; overflow: hidden; }
.toolbar { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; padding: 2px; background: var(--muted); }
.seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--muted-foreground); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1px var(--border); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--card); font-size: 12.5px; cursor: pointer; transition: opacity .2s, background .2s; }
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.status-chip.off { opacity: .45; background: var(--muted); }
.status-chip.off .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }

/* floating layers: popover / dialog / toast */
.layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; border-radius: 12px; }
.pop { position: absolute; width: 292px; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 14px; pointer-events: auto; opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .18s, transform .18s; z-index: 3; }
.pop.show { opacity: 1; transform: none; }
.pop h5 { font-family: "Morabba"; font-size: 17px; font-weight: 500; margin: 0 0 2px; }
.pop .sub { font-size: 12px; color: var(--muted-foreground); margin-bottom: 12px; display: flex; gap: 6px; align-items: center; }
.pop .foot { display: flex; gap: 8px; margin-top: 4px; align-items: center; }
.pop .foot .more { margin-inline-start: auto; font-size: 12px; color: var(--muted-foreground); }
.dlg-back { position: absolute; inset: 0; background: rgb(0 0 0 / .18); backdrop-filter: blur(1.5px); opacity: 0; transition: opacity .18s; pointer-events: none; z-index: 5; }
.dlg-back.show { opacity: 1; pointer-events: auto; }
.dlg { position: absolute; top: 50%; inset-inline-start: 50%; width: 380px; translate: 50% -50%; transform: scale(.95); opacity: 0; background: var(--popover); border-radius: 14px; box-shadow: var(--shadow-pop); border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); padding: 18px; transition: opacity .18s, transform .18s; pointer-events: none; z-index: 6; }
.dlg.show { opacity: 1; transform: none; pointer-events: auto; }
.dlg h5 { font-family: "Morabba"; font-size: 19px; font-weight: 500; margin: 0 0 4px; }
.dlg .desc { font-size: 13px; color: var(--muted-foreground); margin-bottom: 14px; line-height: 1.8; }
.dlg .foot { display: flex; gap: 8px; justify-content: flex-start; margin-top: 14px; }
.toast-zone { position: absolute; inset-inline-start: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 30; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 360px; background: var(--popover); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-pop); font-size: 13px; animation: toast-in .3s cubic-bezier(.22, 1, .36, 1) both; }
.toast.out { animation: toast-out .25s ease both; }
.toast .ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--success)) 20%, transparent); color: var(--c, var(--success-ink)); flex: none; }
.toast .ic svg { width: 12px; height: 12px; stroke-width: 3; }
.toast .act { margin-inline-start: auto; color: var(--primary); font-weight: 600; font-size: 12.5px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* skeleton */
.sk { background: var(--skeleton-fill); border-radius: 6px; position: relative; overflow: hidden; }
.sk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, transparent, var(--skeleton-highlight), transparent); animation: shine 1.6s ease-in-out infinite; }
@keyframes shine { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.reveal { animation: reveal .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes reveal { from { opacity: 0; filter: blur(2px); transform: translateY(4px); } }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: -360deg; } }
.enter { animation: ev-in .36s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ev-in { from { opacity: 0; transform: scale(.92); } }
.leave { animation: ev-out .24s ease both !important; pointer-events: none; }
@keyframes ev-out { to { opacity: 0; transform: scale(.92); } }
.shake { animation: shake .42s ease; }
@keyframes shake { 20%,60% { translate: -5px 0; } 40%,80% { translate: 5px 0; } }
.flash { animation: flash 1.1s ease; }
@keyframes flash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); } }

/* fake cursor + stage chrome */
.cursor { position: absolute; top: 0; left: 0; z-index: 100; pointer-events: none; width: 26px; height: 26px; transition: transform calc(var(--cm, 600ms) / var(--spd, 1)) cubic-bezier(.45, .05, .25, 1); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }
.cursor svg { width: 26px; height: 26px; transition: transform .12s; transform-origin: 3px 3px; }
.cursor.down svg { transform: scale(.82); }
.ripple { position: absolute; z-index: 99; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--primary); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.crud-ribbon { position: absolute; top: 14px; left: 50%; translate: -50% 0; z-index: 90; display: flex; gap: 4px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 99px; padding: 3px; pointer-events: none; }
.crud-ribbon span { height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; color: var(--muted-foreground); transition: all .25s; }
.crud-ribbon span.on { color: #fff; background: var(--c); }
.caption { position: absolute; bottom: 14px; inset-inline: 0; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.caption > div { max-width: 78%; background: #17181a; color: #f4f2ec; border-radius: 12px; padding: 9px 16px; font-size: 14px; line-height: 1.8; box-shadow: 0 8px 24px rgb(0 0 0 / .3); display: flex; gap: 10px; align-items: center; animation: cap-in .35s cubic-bezier(.22, 1, .36, 1) both; }
.caption .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
@keyframes cap-in { from { opacity: 0; transform: translateY(10px); } }

/* ───────────── Calendar widget ───────────── */
.cal-head { display: flex; flex: none; border-bottom: 1px solid var(--border); margin-top: 4px; }
.cal-gutter { width: 54px; flex: none; }
.cal-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dh { padding: 6px 0 8px; text-align: center; display: grid; justify-items: center; gap: 1px; font-size: 12px; color: var(--muted-foreground); }
.cal-dh b { font-size: 17px; font-weight: 600; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--foreground); }
.cal-dh.today b { background: var(--primary); color: var(--primary-foreground); }
.cal-dh.today { color: var(--primary); }
.cal-dh.off { opacity: .55; }
.cal-scroll { flex: 1; min-height: 0; position: relative; display: flex; overflow: hidden; }
.cal-hours { width: 54px; flex: none; position: relative; }
.cal-hours span { position: absolute; inset-inline-end: 8px; font-size: 11px; color: var(--muted-foreground); transform: translateY(-50%); }
.cal-grid { position: relative; flex: 1; }
.cal-col-bg { position: absolute; top: 0; bottom: 0; border-inline-start: 1px solid var(--border); width: calc(100% / 7); }
.cal-col-bg.off { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--foreground) 4%, transparent) 6px 7px); }
.cal-hline { position: absolute; inset-inline: 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.cal-hline.half { border-top-style: dashed; opacity: .45; }
.cal-now { position: absolute; z-index: 4; height: 0; border-top: 2px solid var(--primary); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; inset-inline-start: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.ev { position: absolute; z-index: 2; top: var(--top); height: var(--h); inset-inline-start: calc(var(--col) * (100% / 7) + 3px + var(--lane) * ((100% / 7 - 6px) / var(--lanes))); width: calc((100% / 7 - 6px) / var(--lanes) - 2px);
  border-radius: 8px; background: color-mix(in srgb, var(--c) 13%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--card)); border-inline-start: 3px solid var(--c);
  padding: 4px 7px; overflow: hidden; cursor: grab; font-size: 12px; line-height: 1.45;
  transition: top .28s cubic-bezier(.22, 1, .36, 1), height .28s cubic-bezier(.22, 1, .36, 1), inset-inline-start .28s cubic-bezier(.22, 1, .36, 1), width .28s, background .3s, border-color .3s, opacity .2s; }
.ev.dragging { transition: none; z-index: 8; cursor: grabbing; box-shadow: var(--shadow-pop); opacity: .96; }
.ev.saving::after { content: ""; position: absolute; inset-inline-end: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); border-top-color: transparent; animation: spin .7s linear infinite; }
.ev .t1 { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--foreground); }
.ev .t2 { color: var(--muted-foreground); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .t3 { color: var(--muted-foreground); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .grab { position: absolute; inset-inline: 0; bottom: 0; height: 8px; cursor: ns-resize; display: grid; place-items: end center; }
.ev .grab::after { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--c); opacity: 0; transition: opacity .2s; margin-bottom: 2px; }
.ev:hover .grab::after, .ev.dragging .grab::after, .ev.sel .grab::after { opacity: .7; }
.ev.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); z-index: 6; }
.ev.ghost { background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1.5px dashed var(--primary); border-inline-start: 1.5px dashed var(--primary); pointer-events: none; transition: none; z-index: 7; }
.ev.ghost .t1 { color: var(--primary); }
.ev.cancelled .t1 { text-decoration: line-through; opacity: .65; }
.ev.snapback { transition-duration: .5s; }
.ev .warn { position: absolute; inset-inline-end: 4px; top: 4px; color: var(--chart-4); }

/* ───────────── Gantt widget ───────────── */
.g-wrap { flex: 1; min-height: 0; display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); position: relative; }
.g-list { width: 264px; flex: none; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; background: var(--card); z-index: 3; }
.g-list-h, .g-tl-h { height: 46px; flex: none; border-bottom: 1px solid var(--border); background: var(--muted); }
.g-list-h { display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: var(--muted-foreground); font-weight: 600; gap: 8px; }
.g-rows { position: relative; flex: 1; overflow: hidden; }
.g-row { position: absolute; inset-inline: 0; height: var(--rh, 38px); top: calc(var(--i) * var(--rh, 38px)); display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 13px; transition: top .3s, background .2s, opacity .3s; }
.g-row.sel { background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.g-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.g-row .du { font-size: 11.5px; color: var(--muted-foreground); }
.g-row .sd { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.g-row.add { color: var(--muted-foreground); }
.g-tl { flex: 1; position: relative; overflow: hidden; }
.g-tl-h { position: relative; }
.g-tl-h .wk { position: absolute; top: 0; height: 22px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--muted-foreground); border-inline-start: 1px solid var(--border); white-space: nowrap; }
.g-tl-h .dy { position: absolute; top: 22px; height: 22px; display: grid; place-items: center; font-size: 10.5px; color: var(--muted-foreground); }
.g-tl-h .dy.today { color: var(--primary); font-weight: 700; }
.g-body { position: absolute; top: 46px; bottom: 0; inset-inline: 0; }
.g-col { position: absolute; top: 0; bottom: 0; }
.g-col.off { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--foreground) 4%, transparent) 6px 7px); }
.g-rowline { position: absolute; inset-inline: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.g-today { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 2px solid var(--primary); z-index: 4; }
.g-today::before { content: "امروز"; position: absolute; top: 2px; right: 4px; font-size: 10px; background: var(--primary); color: #fff; padding: 0 5px; border-radius: 4px; }
.bar { position: absolute; z-index: 3; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--c) 22%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 55%, var(--card)); cursor: grab; display: flex; align-items: center; overflow: visible;
  right: calc(var(--s) * var(--dw)); width: calc(var(--n) * var(--dw) - 3px); top: calc(var(--i) * var(--rh, 38px) + 7px);
  transition: right .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), top .3s, background .3s, opacity .3s; }
.bar .fill { position: absolute; inset: 0; border-radius: 6px; width: calc(var(--p) * 1%); background: color-mix(in srgb, var(--c) 55%, var(--card)); right: 0; left: auto; transition: width .4s; }
.bar .lb { position: relative; padding: 0 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--foreground); }
.bar.dragging { transition: none; z-index: 8; box-shadow: var(--shadow-pop); }
.bar.preview { border-style: dashed; background: color-mix(in srgb, var(--chart-4) 18%, var(--card)); border-color: var(--chart-4); }
.bar.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
.bar .hd { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.bar .hd.r { right: -2px; } .bar .hd.l { left: -2px; }
.bar .hd::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--c); opacity: 0; transition: opacity .2s; inset-inline-start: 3px; }
.bar:hover .hd::after, .bar.sel .hd::after { opacity: .8; }
.bar .lk { position: absolute; left: -11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--card); border: 2px solid var(--c); opacity: 0; transition: opacity .15s, transform .15s; cursor: crosshair; z-index: 5; }
.bar:hover .lk, .bar.sel .lk, .bar.linking .lk, .lk.on { opacity: 1; }
.bar.target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-2-line) 45%, transparent); }
.bar.badtarget { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 45%, transparent); }
.bar.ghost { background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1.5px dashed var(--primary); transition: none; pointer-events: none; }
.g-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.g-svg path { fill: none; stroke: color-mix(in srgb, var(--foreground) 45%, transparent); stroke-width: 1.5; transition: d var(--dt, .35s); }
.g-svg path.new { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw .7s ease forwards; stroke: var(--primary); }
.g-svg path.rub { stroke: var(--primary); stroke-dasharray: 5 4; transition: none; }
.g-svg path.rub.bad { stroke: var(--red); }
.g-svg path.hot { stroke: var(--chart-4); stroke-width: 2; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confirm-bar { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 20; background: var(--popover); border: 1px solid color-mix(in srgb, var(--chart-4) 45%, var(--border)); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-pop); transform: translateY(130%); transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s .35s; visibility: hidden; }
.confirm-bar.show { transform: none; visibility: visible; transition-delay: 0s; }
.confirm-bar .txt { flex: 1; font-size: 13px; }
.confirm-bar .txt b { color: var(--chart-4); }
.tip { position: absolute; z-index: 30; background: #17181a; color: #f4f2ec; font-size: 12px; border-radius: 8px; padding: 6px 10px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.tip.show { opacity: 1; }
.tip.bad { background: var(--destructive); color: #fff; }

/* ───────────── Tree widget ───────────── */
.t-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 12px; }
.t-tree { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; background: var(--card); }
.t-tree-body { position: relative; flex: 1; overflow: hidden; }
.t-row { position: absolute; inset-inline: 0; height: 36px; top: calc(var(--i) * 36px); display: flex; align-items: center; gap: 6px; padding-inline-end: 8px; padding-inline-start: calc(8px + var(--d) * 22px); cursor: pointer; border-radius: 0; transition: top .3s cubic-bezier(.22, 1, .36, 1), background .15s, opacity .2s; font-size: 13.5px; }
.t-row:hover { background: var(--muted); }
.t-row.sel { background: var(--accent); }
.t-row.sel::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--primary); }
.t-row .chev { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; color: var(--muted-foreground); flex: none; transition: rotate .2s; }
.t-row .chev:hover { background: var(--accent); }
.t-row .chev.open { rotate: -90deg; }
.t-row .ico { color: var(--muted-foreground); flex: none; }
.t-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.t-row .nm mark { background: color-mix(in srgb, var(--primary) 25%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.t-row.dim { opacity: .38; }
.t-row .cnt { font-size: 11.5px; color: var(--muted-foreground); min-width: 20px; text-align: center; }
.t-row .acts { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.t-row:hover .acts, .t-row.hov .acts { opacity: 1; }
.t-row.drop { background: color-mix(in srgb, var(--primary) 14%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--primary); border-radius: 6px; }
.t-row.nodrop { background: color-mix(in srgb, var(--red) 12%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--red); border-radius: 6px; }
.t-row.dragsrc { opacity: .4; }
.t-row .inp { flex: 1; }
.t-ghost { position: absolute; z-index: 20; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--card); border: 1px solid var(--primary); border-radius: 8px; box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 500; pointer-events: none; }
.t-detail { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; overflow: hidden; position: relative; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted-foreground); flex-wrap: wrap; }
.t-detail h3 { font-size: 26px; margin-top: 4px; }
.det { display: flex; gap: 16px; border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 14px; align-items: center; }
.det:last-of-type { border-bottom: 0; }
.det .k { width: 112px; flex: none; color: var(--muted-foreground); font-size: 13px; }
.det .v { flex: 1; min-width: 0; }
.kids { display: flex; flex-wrap: wrap; gap: 6px; }
.kid { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); background: var(--muted); border-radius: 8px; font-size: 12.5px; }
.empty-d { display: grid; place-items: center; text-align: center; gap: 6px; color: var(--muted-foreground); flex: 1; }
.combo-list { position: absolute; z-index: 10; inset-inline: 0; top: calc(100% + 4px); background: var(--popover); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px; display: none; }
.combo-list.show { display: block; animation: reveal .2s both; }
.combo-list div { padding: 6px 8px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.combo-list div.hl { background: var(--accent); }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; transition: all .2s; }
.radio .rd { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--input); margin-top: 4px; flex: none; display: grid; place-items: center; transition: all .2s; }
.radio.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.radio.on .rd { border-color: var(--primary); }
.radio.on .rd::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.radio b { display: block; font-size: 13.5px; }
.radio span { font-size: 12px; color: var(--muted-foreground); }

.g-svg path.leave { animation: fade-out .25s forwards !important; }
@keyframes fade-out { to { opacity: 0; } }
.pop .det { padding: 5px 0; }