/* Obrys — video editor (CapCut-like), Color page (DaVinci-like), music studio (FL Studio-like),
   Satzspiegel dialog and interior styles */

/* ---------- shared dark workspace ---------- */
.ve-root, .st-root {
  --w-bg: #141417; --w-panel: #1C1C21; --w-panel-2: #24242B; --w-line: #2E2E37; --w-fg: #E8E8EE; --w-fg-2: #A3A3B0; --w-fg-3: #6E6E7C; --w-acc: #19C3B6; --w-acc-2: #0D99FF;
  position: fixed; inset: 0; z-index: 900; background: var(--w-bg); color: var(--w-fg); display: flex; flex-direction: column;
  font: 12px/1.35 Inter, system-ui, sans-serif; user-select: none;
}
.ve-root .btn, .st-root .btn { background: var(--w-panel-2); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 6px; padding: 5px 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.ve-root .btn:hover, .st-root .btn:hover { border-color: var(--w-fg-3); }
.ve-root .btn.primary, .st-root .btn.primary { background: var(--w-acc); border-color: var(--w-acc); color: #04231F; font-weight: 700; }
.ve-root .btn:disabled { opacity: .45; cursor: default; }
.ve-root select, .ve-root input[type="number"], .ve-root input[type="text"], .ve-root textarea,
.st-root select, .st-root input[type="number"], .st-root input[type="text"] { background: var(--w-panel-2); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 5px; padding: 4px 6px; font: inherit; min-width: 0; }
.ve-root input[type="color"], .st-root input[type="color"] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--w-line); border-radius: 5px; background: none; }
.ve-root input[type="range"], .st-root input[type="range"] { accent-color: var(--w-acc); min-width: 0; }
.ve-root .sp, .st-root .sp { flex: 1; }
.ve-ib { background: none; border: 0; color: var(--w-fg); font: inherit; font-size: 15px; width: 30px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; }
.ve-ib:hover { background: var(--w-panel-2); }
.ve-chk { display: inline-flex; align-items: center; gap: 6px; color: var(--w-fg-2); }

/* ---------- video editor ---------- */
.ve-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--w-line); background: var(--w-panel); }
.ve-logo { font-size: 13px; margin-right: 6px; }
.ve-mid { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr 300px; }
.ve-root.color .ve-mid { grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.ve-bin { border-right: 1px solid var(--w-line); display: flex; flex-direction: column; min-height: 0; background: var(--w-panel); }
.ve-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--w-line); }
.ve-tabs button { background: none; border: 0; color: var(--w-fg-2); font: inherit; font-weight: 600; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.ve-tabs button:hover { color: var(--w-fg); background: var(--w-panel-2); }
.ve-tabs button.on { color: var(--w-acc); background: rgba(25, 195, 182, .12); }
.ve-bin-b { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ve-imp { width: 100%; }
.ve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ve-item { position: relative; background: var(--w-panel-2); border-radius: 8px; overflow: hidden; aspect-ratio: 1; cursor: grab; display: flex; flex-direction: column; }
.ve-item img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.ve-item em { font-style: normal; font-size: 10px; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--w-fg-2); }
.ve-ico { flex: 1; display: grid; place-items: center; font-size: 26px; color: var(--w-fg-3); }
.ve-add { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--w-acc); color: #04231F; font-weight: 800; cursor: pointer; opacity: 0; transition: opacity .12s; }
.ve-item:hover .ve-add, .ve-add:focus-visible { opacity: 1; }
.ve-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ve-list button { background: var(--w-panel-2); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 8px; padding: 10px 6px; font: inherit; cursor: pointer; text-align: center; }
.ve-list button:hover { border-color: var(--w-fg-3); }
.ve-list button.on { border-color: var(--w-acc); color: var(--w-acc); }
.ve-tp { font-size: 15px !important; }
.ve-stk { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.ve-stk button { font-size: 26px; background: var(--w-panel-2); border: 1px solid var(--w-line); border-radius: 8px; aspect-ratio: 1; cursor: pointer; }
.ve-stk button:hover { border-color: var(--w-acc); }
.ve-note { color: var(--w-fg-3); font-size: 11px; }
.ve-empty { color: var(--w-fg-3); grid-column: 1 / -1; padding: 20px 4px; text-align: center; }
.ve-sec { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--w-line); font-size: 11px; font-weight: 700; color: var(--w-fg-2); text-transform: uppercase; letter-spacing: .04em; }
.ve-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ve-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ve-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #0B0B0D; }
.ve-cv { background: #000; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.ve-ctl { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-top: 1px solid var(--w-line); background: var(--w-panel); }
.ve-time { font-variant-numeric: tabular-nums; color: var(--w-fg-2); }
.ve-insp { border-left: 1px solid var(--w-line); background: var(--w-panel); overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ve-insp h4 { margin: 0 0 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-f { display: grid; grid-template-columns: 1fr minmax(0, 120px) auto; align-items: center; gap: 6px; color: var(--w-fg-2); }
.ve-f > input, .ve-f > select { width: 100%; }
.ve-f.col { grid-template-columns: 1fr; }
.ve-f textarea { width: 100%; resize: vertical; }
.ve-kfb { background: none; border: 0; color: var(--w-fg-3); cursor: pointer; font-size: 12px; padding: 2px; }
.ve-kfb.on { color: #FFCD29; }
.ve-color { display: none; }
.ve-root.color .ve-insp { display: none; }
.ve-root.color .ve-color { display: block; grid-column: 1 / -1; border-top: 1px solid var(--w-line); background: var(--w-panel); overflow: auto; max-height: 46vh; padding: 10px 12px; }
.ve-tl { height: 34vh; min-height: 180px; display: flex; flex-direction: column; border-top: 1px solid var(--w-line); background: var(--w-panel); }
.ve-root.color .ve-tl { height: 22vh; }
.ve-tl-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--w-line); }
.ve-tl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 120px 1fr; overflow: auto; }
.ve-tl-heads { border-right: 1px solid var(--w-line); position: sticky; left: 0; z-index: 2; background: var(--w-panel); }
.ve-ruler-h, .ve-ruler { height: 22px; border-bottom: 1px solid var(--w-line); }
.ve-ruler { position: relative; cursor: pointer; }
.ve-tick { position: absolute; top: 4px; font-size: 10px; color: var(--w-fg-3); padding-left: 3px; border-left: 1px solid var(--w-line); height: 18px; }
.ve-beat { position: absolute; bottom: 0; width: 2px; height: 8px; margin-left: -1px; background: #FFCD29; border-radius: 1px; }
.ve-th { height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-bottom: 1px solid var(--w-line); color: var(--w-fg-2); }
.ve-th span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-th.main { height: 64px; color: var(--w-fg); }
.ve-tl-lanes { position: relative; min-width: 0; }
.ve-lane { position: relative; height: 44px; border-bottom: 1px solid var(--w-line); }
.ve-lane.main { height: 64px; background: rgba(255, 255, 255, .02); }
.ve-clip { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: #3B4A7A; background-size: auto 100%; background-repeat: repeat-x; overflow: hidden; cursor: grab; border: 1px solid rgba(255, 255, 255, .12); }
.ve-clip.k-audio { background-color: #2F6B4F; }
.ve-clip.k-text { background-color: #8A5A2B; }
.ve-clip.k-image, .ve-clip.k-frame { background-color: #4A3B7A; }
.ve-clip.k-color { background-color: #555; }
.ve-clip.sel { height: auto; padding: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--w-acc); }
.ve-cn { position: absolute; left: 6px; top: 3px; right: 6px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 1; }
.ve-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ve-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.ve-h.l { left: 0; } .ve-h.r { right: 0; }
.ve-clip:hover .ve-h { background: rgba(255, 255, 255, .25); }
.ve-kf { position: absolute; bottom: 3px; width: 8px; height: 8px; margin-left: -4px; background: #FFCD29; transform: rotate(45deg); pointer-events: none; z-index: 1; }
.ve-tr { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); font-style: normal; background: #fff; color: #111; border-radius: 4px; font-size: 10px; padding: 0 3px; z-index: 2; }
.ve-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; z-index: 3; }
.ve-ph::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: #fff; }
.ve-exp { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 10; }
.ve-exp > div { background: var(--w-panel); border: 1px solid var(--w-line); border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 300px; }
.ve-exp progress { width: 100%; accent-color: var(--w-acc); }
@media (max-width: 1000px) { .ve-mid { grid-template-columns: 220px 1fr; } .ve-insp { grid-column: 1 / -1; max-height: 30vh; border-left: 0; border-top: 1px solid var(--w-line); } }
@media (max-width: 640px) { .ve-mid { grid-template-columns: 1fr; } .ve-bin { max-height: 26vh; } .ve-tl-body { grid-template-columns: 80px 1fr; } }

/* ---------- Color page (DaVinci-like) ---------- */
.gc-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.gc-nodes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gc-node { display: inline-flex; align-items: center; gap: 6px; background: var(--w-panel-2); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 8px; padding: 6px 10px; font: inherit; cursor: pointer; position: relative; }
.gc-node b { color: var(--w-acc); font-variant-numeric: tabular-nums; }
.gc-node.on { border-color: var(--w-acc); box-shadow: 0 0 0 1px var(--w-acc) inset; }
.gc-node.off { opacity: .5; }
.gc-node + .gc-node::before { content: ''; position: absolute; left: -7px; top: 50%; width: 6px; height: 1px; background: var(--w-fg-3); }
.gc-node.add { font-size: 16px; padding: 4px 12px; }
.gc-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gc-main { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto; gap: 14px; align-items: start; }
.gc-wheels { display: flex; gap: 10px; flex-wrap: wrap; }
.gc-prim { display: grid; grid-template-columns: 1fr; gap: 4px; }
.gc-s { display: grid; grid-template-columns: 96px 1fr 40px; gap: 6px; align-items: center; color: var(--w-fg-2); }
.gc-s em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--w-fg); }
.gc-scopes { display: flex; flex-direction: column; gap: 6px; }
.ve-scope { background: #0B0B0D; border: 1px solid var(--w-line); border-radius: 6px; width: 300px; height: 170px; }
.gw { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px; }
.gw-l { font-weight: 700; color: var(--w-fg-2); font-size: 11px; }
.gw-c { width: 132px; height: 132px; border-radius: 50%; cursor: crosshair; touch-action: none; }
.gw-y { width: 120px; }
.gw-v { font-size: 10px; color: var(--w-fg-3); font-variant-numeric: tabular-nums; }
.gcv { display: flex; flex-direction: column; gap: 4px; }
.gcv-tabs { display: flex; gap: 3px; }
.gcv-tabs button { background: var(--w-panel-2); color: var(--w-fg-2); border: 1px solid var(--w-line); border-radius: 5px; font: inherit; font-weight: 700; padding: 2px 8px; cursor: pointer; }
.gcv-tabs button.on { color: #fff; border-color: var(--w-acc); }
.gcv-tabs button[data-ch="r"].on { background: #7A2A2A; } .gcv-tabs button[data-ch="g"].on { background: #2A6A3A; } .gcv-tabs button[data-ch="b"].on { background: #2A3F7A; }
.gcv canvas { width: 240px; height: 240px; background: #0B0B0D; border: 1px solid var(--w-line); border-radius: 6px; cursor: crosshair; touch-action: none; }
@media (max-width: 1200px) { .gc-main { grid-template-columns: 1fr 1fr; } }

/* ---------- music studio (FL Studio-like) ---------- */
.st-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--w-line); background: var(--w-panel); flex-wrap: wrap; }
.st-top > button:not(.btn) { background: var(--w-panel-2); border: 1px solid var(--w-line); color: var(--w-fg); border-radius: 6px; min-width: 30px; height: 28px; cursor: pointer; font: inherit; font-size: 14px; }
.st-top > button.on, .st-modes button.on { background: var(--w-acc); color: #04231F; border-color: var(--w-acc); }
.st-play { font-size: 15px !important; min-width: 40px !important; }
.st-modes { display: inline-flex; border: 1px solid var(--w-line); border-radius: 6px; overflow: hidden; }
.st-modes button { background: var(--w-panel-2); color: var(--w-fg-2); border: 0; padding: 5px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.st-bpm, .st-sw { display: inline-flex; align-items: center; gap: 6px; color: var(--w-fg-2); }
.st-bpm input { width: 62px; }
.st-sw input { width: 80px; }
.st-pos { font-variant-numeric: tabular-nums; background: #0B0B0D; color: #7CFFB2; padding: 4px 8px; border-radius: 5px; font-family: ui-monospace, Consolas, monospace; }
.st-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
.st-browser { border-right: 1px solid var(--w-line); background: var(--w-panel); overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.st-browser h5 { margin: 10px 0 4px; font-size: 11px; color: var(--w-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.st-browser button { background: none; border: 0; color: var(--w-fg); text-align: left; padding: 4px 6px; border-radius: 5px; font: inherit; cursor: pointer; }
.st-browser button:hover { background: var(--w-panel-2); }
.st-browser .st-imp { border: 1px dashed var(--w-line); text-align: center; }
.st-smp { display: flex; align-items: center; gap: 4px; }
.st-smp span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-smp button { font-size: 10px; color: var(--w-acc); padding: 2px 4px; }
.st-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.st-tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--w-line); }
.st-tabs button { background: none; border: 0; color: var(--w-fg-2); font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.st-tabs button.on { background: rgba(25, 195, 182, .12); color: var(--w-acc); }
.st-pane { flex: 1; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.st-rack-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--w-fg-2); }
.st-rack-top > button { background: var(--w-panel-2); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 5px; padding: 3px 8px; font: inherit; cursor: pointer; }
.st-rack-top > button.on { border-color: var(--w-acc); color: var(--w-acc); }
.st-hint { color: var(--w-fg-3); font-size: 11px; }
.st-chk { display: inline-flex; gap: 4px; align-items: center; }
.st-rack { display: flex; flex-direction: column; gap: 3px; }
.st-row { display: grid; grid-template-columns: 16px 20px 60px 44px 42px 130px 1fr; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; background: var(--w-panel); }
.st-row.sel { height: auto; padding: 3px 6px; border: 0; background: var(--w-panel-2); box-shadow: 0 0 0 1px var(--w-acc) inset; }
.st-row input[type="range"] { width: 100%; }
.st-led { width: 12px; height: 12px; border-radius: 50%; border: 0; background: #3A3A44; cursor: pointer; padding: 0; }
.st-led.on { background: #7CFFB2; box-shadow: 0 0 6px #7CFFB2; }
.st-solo { width: 20px; height: 18px; border: 1px solid var(--w-line); border-radius: 4px; background: var(--w-panel-2); color: var(--w-fg-2); font-size: 10px; font-weight: 800; cursor: pointer; padding: 0; }
.st-solo.on { background: #FFCD29; color: #111; }
.st-name { text-align: left; background: var(--w-panel-2); color: var(--w-fg); border: 0; border-left: 4px solid var(--c, #888); border-radius: 4px; padding: 5px 8px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-steps { display: flex; gap: 3px; min-width: 0; overflow-x: auto; }
.st-step { flex: 0 0 auto; width: 24px; height: 30px; border-radius: 4px; border: 0; background: #3A3A44; cursor: pointer; padding: 0; }
.st-step.alt { background: #4A3A44; }
.st-step.on { background: color-mix(in srgb, #FF8A3D calc(var(--v, 1) * 100%), #4A3A44); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.st-step.cur { outline: 2px solid #fff; outline-offset: -2px; }
.st-steps.pr { display: block; }
.st-prmini { width: 100%; background: repeating-linear-gradient(90deg, #2B3550 0 23px, #26304A 23px 24px); color: #BFD3FF; border: 1px solid var(--w-line); border-radius: 4px; height: 30px; font: inherit; cursor: pointer; }
.st-add { padding: 4px 0; }
.st-params { border-top: 1px solid var(--w-line); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.st-ph { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.st-kn { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.st-k { display: flex; flex-direction: column; gap: 3px; color: var(--w-fg-2); font-size: 11px; min-width: 110px; }
.st-k em { font-style: normal; color: var(--w-fg); font-variant-numeric: tabular-nums; }
.st-k.mini { min-width: 0; }
.st-osc { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; background: var(--w-panel); padding: 6px 8px; border-radius: 6px; width: 100%; }
.st-osc b { color: var(--w-acc); align-self: center; }
.st-pr { flex: 1; min-height: 240px; overflow: auto; border: 1px solid var(--w-line); border-radius: 6px; background: #18181C; }
.st-prc { display: block; }
.st-pl { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 1fr; border: 1px solid var(--w-line); border-radius: 6px; overflow: hidden; }
.st-plh { background: var(--w-panel); padding-top: 22px; border-right: 1px solid var(--w-line); }
.st-plt { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--w-line); color: var(--w-fg-2); }
.st-plh .btn { margin: 6px; }
.st-plw { position: relative; overflow: auto; }
.st-plc { display: block; cursor: pointer; }
.st-phl { position: absolute; top: 0; bottom: 0; width: 2px; background: #7CFFB2; pointer-events: none; }
.st-mix { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; align-items: flex-start; padding-bottom: 6px; }
.st-strip { flex: 0 0 132px; background: var(--w-panel); border: 1px solid var(--w-line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-strip.master { border-color: var(--w-acc); }
.st-sn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-meter { width: 16px; height: 140px; border-radius: 3px; background: #0B0B0D; border: 1px solid var(--w-line); }
.st-fader { writing-mode: vertical-lr; direction: rtl; height: 120px; width: 22px; }
.st-strip > input[type="range"]:not(.st-fader) { width: 100%; }
.st-ms { display: flex; gap: 4px; }
.st-ms button { width: 26px; height: 22px; border-radius: 4px; border: 1px solid var(--w-line); background: var(--w-panel-2); color: var(--w-fg-2); font-weight: 800; cursor: pointer; }
.st-ms button.on { background: #FFCD29; color: #111; }
.st-fx { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.st-fx select { width: 100%; }
.st-fxi { background: var(--w-panel-2); border-radius: 6px; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.st-fxi.off { opacity: .5; }
.st-fxh { display: flex; align-items: center; gap: 4px; }
.st-fxh b { flex: 1; font-size: 11px; }
.st-fxh button:last-child { background: none; border: 0; color: var(--w-fg-3); cursor: pointer; }
.st-route { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.st-route i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
@media (max-width: 760px) { .st-body { grid-template-columns: 1fr; } .st-browser { max-height: 24vh; } .st-row { grid-template-columns: 16px 20px 44px 0 0 96px 1fr; } .st-row .st-pan, .st-row select { display: none; } }

/* media buttons in the top bar */
.media-btn { font-size: 15px; }

/* ---------- Satzspiegel dialog ---------- */
.dlg.sz-dlg { width: min(900px, 100%); }
.dlg.sz-dlg .dlg-row select[data-k="method"] { min-width: 240px; max-width: 100%; }
.sz { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--panel-2); border-radius: 10px; padding: 10px; }
.sz-pv svg { display: block; }
.sz-info { font-size: 12px; line-height: 1.6; color: var(--fg-2); }
.sz-info b { color: var(--fg); }

/* ---------- interior styles ---------- */
.dlg.in-dlg { width: min(1120px, 100%); }
.in { display: grid; grid-template-columns: 1fr 320px; gap: 14px; min-height: 0; }
.in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 62vh; overflow: auto; align-content: start; padding: 2px; }
.in-card { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; padding: 8px; cursor: pointer; text-align: left; font: inherit; }
.in-card:hover { border-color: var(--fg-3); }
.in-card.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.in-card b { font-size: 12px; }
.in-sw { display: flex; height: 22px; border-radius: 5px; overflow: hidden; }
.in-sw i { flex: 1; }
.in-mt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.in-mt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.in-side { border-left: 1px solid var(--line); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; max-height: 62vh; }
.in-side h3 { margin: 0; font-size: 24px; }
.in-side p { margin: 0; color: var(--fg-2); }
.in-pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.in-pal span { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--fg-2); font-family: ui-monospace, Consolas, monospace; }
.in-pal i { height: 34px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .08); }
.in-mats, .in-matgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.in-matgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 60vh; overflow: auto; }
.in-mats button, .in-matgrid button { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px; cursor: pointer; font: inherit; color: var(--fg); }
.in-mats button:hover, .in-matgrid button:hover { border-color: var(--acc); }
.in-mats img, .in-matgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; }
.in-mats em, .in-matgrid em { font-style: normal; font-size: 10px; line-height: 1.2; color: var(--fg-2); }
.in-kw { display: flex; flex-wrap: wrap; gap: 4px; }
.in-kw span { background: var(--panel-2); border-radius: 12px; padding: 2px 9px; font-size: 11px; }
.in-f { font-size: 12px; color: var(--fg-2); }
.in-act { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 820px) { .in { grid-template-columns: 1fr; } .in-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; max-height: none; } .in-grid { max-height: 36vh; } }