:root {
  --banana: #f1ba27; --tongue: #e96a53; --ink: #0a0a09; --paper: #fff; --soft: #f7f4ec; --line: #ece7da; --muted: #6b6455;
  --word: 'Dela Gothic One', 'Arial Black', Impact, sans-serif; --body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rail: 232px; --r: 14px; --fast: 120ms; color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--word); font-weight: 400; line-height: 1.1; }
.muted { color: var(--muted); }

.top { display: flex; align-items: center; gap: 32px; padding: 16px 28px; position: sticky; top: 0; background: var(--paper); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; font: 400 18px var(--word); white-space: nowrap; color: inherit; text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 50%; }
.tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs a { color: inherit; text-decoration: none; border-bottom: 3px solid transparent; padding: 2px 0; white-space: nowrap; font-weight: 700; transition: border-color var(--fast); }
.tabs a:hover, .tabs a.on { border-bottom-color: var(--banana); }
.top-right { display: flex; gap: 6px; margin-left: auto; flex: none; }
.side-link { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border-radius: 12px; color: inherit; text-decoration: none; font-weight: 700; transition: background var(--fast); }
.side-link:hover, .side-link.on { background: var(--soft); }
.side-link svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.side-link .n { color: var(--muted); font-weight: 500; font-size: 14px; }
#toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 12px; width: max-content; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity var(--fast), transform var(--fast); max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#toast button { background: none; border: 0; color: var(--banana); font-weight: 700; cursor: pointer; padding: 4px; }
.ch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.view-switch { display: inline-flex; flex: none; margin-left: auto; border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.ch-acts + .view-switch { margin-left: 0; }
.view-switch button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: background var(--fast), color var(--fast); }
.view-switch svg { fill: currentColor; }
.view-switch button:hover { color: var(--ink); }
.view-switch button[aria-pressed="true"] { background: var(--banana); color: var(--ink); }
body.flowing { overflow: hidden; }
body.flowing .layout { padding-bottom: 0; }
body.flowing .rail { max-height: calc(100vh - 84px); overflow-y: auto; }
.flow { overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.flow::-webkit-scrollbar { display: none; }
.clip { display: flex; justify-content: center; align-items: flex-end; gap: 12px; height: 100%; padding-bottom: 10px; scroll-snap-align: start; scroll-snap-stop: always; }
.clip-frame { position: relative; height: 100%; aspect-ratio: 9/16; max-width: 100%; background: #000; border-radius: var(--r); overflow: hidden; }
.clip video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.clip-sound { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(10 10 9 / .55); color: var(--paper); cursor: pointer; }
.clip-sound svg { fill: currentColor; }
.clip-play { position: absolute; left: 50%; top: 50%; display: inline-flex; padding: 14px; border-radius: 50%; background: rgb(10 10 9 / .55); color: var(--paper); opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity var(--fast); }
.clip-play svg { width: 32px; height: 32px; fill: currentColor; }
.clip.paused .clip-play { opacity: 1; }
.clip-off { display: none; position: absolute; inset: 0; place-items: center; margin: 0; padding: 16px; color: var(--paper); font-weight: 700; text-align: center; background: rgb(10 10 9 / .6); pointer-events: none; }
.clip.off .clip-off { display: grid; }
.clip.off .clip-play { display: none; }
.clip-meta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 48px 14px 14px; color: var(--paper); background: linear-gradient(transparent, rgb(10 10 9 / .7)); font-size: 15px; pointer-events: none; }
.clip-meta a { justify-self: start; color: inherit; font-weight: 700; font-size: 17px; text-decoration: none; pointer-events: auto; overflow-wrap: anywhere; }
.clip-meta a:hover { text-decoration: underline; }
.clip-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.clip-side .heart { border: 1px solid var(--line); }
.clip-more { padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color var(--fast); }
.clip-more:hover { border-color: var(--ink); }

.layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 12px; padding: 8px 28px 40px; }
.rail { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 72px; align-self: start; z-index: 4; }
.label { font-weight: 700; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.field { width: 100%; padding: 11px 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; transition: border-color var(--fast); }
.field:hover, .field:focus { border-color: var(--ink); outline: none; }
:focus-visible { outline: 3px solid var(--banana); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--banana); box-shadow: 0 3px 0 var(--ink); font-weight: 700; cursor: pointer; transition: transform var(--fast), box-shadow var(--fast); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.ghost { background: var(--paper); box-shadow: none; border: 1px solid var(--line); min-height: 40px; padding: 0 14px; font-weight: 500; }
.btn.ghost:hover { border-color: var(--ink); transform: none; }
.scope { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 8px 12px; background: none; border: 0; border-radius: 10px; cursor: pointer; text-align: left; align-items: center; }
.scope:hover { background: var(--soft); }
.scope { overflow-wrap: anywhere; }
.scope.on { background: var(--soft); font-weight: 700; }
.scope .n { font-size: 14px; color: var(--muted); font-weight: 400; }
.note { font-size: 14px; margin-top: 8px; color: var(--muted); }
.note.err { color: #b83a22; }

.main { min-width: 0; }
.bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.bar .grow { flex: 1 1 220px; min-width: 160px; }
.bar:has(.ch-acts) .grow { flex-basis: 160px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 700; }
.switch input { position: absolute; opacity: 0; }
.switch.off { opacity: .5; cursor: not-allowed; }
.switch i { width: 42px; height: 24px; border-radius: 12px; position: relative; display: block; background: var(--line); transition: background var(--fast); }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); transition: transform var(--fast); }
.switch input:checked + i { background: var(--banana); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 3px solid var(--banana); outline-offset: 2px; }
.count { font-size: 14px; color: var(--muted); }
.dr { padding: 16px 0; border-top: 1px solid var(--line); }
.dr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; cursor: grab; }
.dr-name { font-weight: 700; font-size: 18px; text-decoration: none; overflow-wrap: anywhere; }
.dr-name:hover { text-decoration: underline; }
.dr-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dr-acts .dd-btn { min-height: 44px; }
.dr-x { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color var(--fast), color var(--fast); }
.dr-x:hover { border-color: var(--ink); color: var(--ink); }
.dr-strip { display: flex; gap: 8px; min-height: 284px; overflow-x: auto; scrollbar-width: thin; }
.dr-strip > p { margin: 0; }
.st { position: relative; flex: none; width: 160px; aspect-ratio: 9/16; background: var(--soft) center/cover no-repeat; border-radius: 10px; overflow: hidden; }
.st-views { position: absolute; left: 6px; bottom: 6px; padding: 4px 7px; border-radius: 7px; background: var(--paper); font: 700 13px/1 var(--body); }
.st video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
body.dragging .scope-row { outline: 2px dashed var(--line); outline-offset: -1px; border-radius: 10px; }
body.dragging .scope-row.drop { outline-color: var(--ink); background: var(--banana); }
.from-top { padding: 6px 4px; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
#before .more { margin: 0 0 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 16px; }
.reel { position: relative; min-width: 0; }
.reel-open { display: block; width: 100%; color: inherit; text-decoration: none; }
a.scope { color: inherit; text-decoration: none; }
a.btn { text-decoration: none; color: inherit; }
.heart { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer; transition: transform var(--fast); }
.heart svg { fill: none; stroke: var(--ink); stroke-width: 2; transition: fill var(--fast), stroke var(--fast); }
.heart:hover { transform: scale(1.08); }
.heart:active { transform: scale(.92); }
.heart.on svg { fill: var(--tongue); stroke: var(--tongue); }
.reel > .heart { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; }
.reel > .hider { top: 52px; opacity: 0; transition: opacity var(--fast), transform var(--fast); }
.reel:hover > .hider, .reel > .hider:focus-visible { opacity: 1; }
.hider svg { stroke-linecap: round; }
.hider.on { background: var(--ink); }
.hider.on svg { fill: none; stroke: var(--paper); }
@media (hover: none) { .reel > .hider { opacity: 1; } }
.in-work { position: absolute; left: 8px; bottom: 8px; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--body); padding: 6px 9px; border-radius: 9px; }
.view-title { font-size: 24px; }
.el-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.el-title h3 { margin: 0; }
.el-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.el-actions .btn { min-height: 40px; }
.el-summary { background: var(--soft); border-radius: var(--r); padding: 6px 14px; }
.el-sum { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; padding: 5px 0; }
.el-sum + .el-sum { border-top: 1px solid var(--line); }
.el-sum-k { display: inline-flex; gap: 8px; color: var(--muted); font-size: 15px; font-weight: 500; }
.el-sum-v { font-weight: 700; font-size: 17px; }
.el-sum-v::first-letter { text-transform: uppercase; }
.el-sum-v small { color: var(--muted); font-weight: 400; font-size: 14px; }
.el-sum .dd-btn { font-weight: 700; background: var(--banana); border-color: var(--ink); }
.el-note { color: var(--muted); }
.take { min-height: 44px; padding: 0 16px; box-shadow: none; }
.take:hover { box-shadow: none; transform: none; background: #f7cb52; }
.take:active { transform: translateY(1px); box-shadow: none; }
.take.on { background: var(--ink); color: var(--paper); }
.take.on:hover { background: #2b2a26; }
.el-tag { display: inline-flex; align-items: baseline; gap: 5px; background: var(--soft); border-radius: 9px; padding: 5px 10px; font-size: 15px; font-weight: 500; }
.el-tag em { font-style: normal; color: var(--muted); font-weight: 400; }
.el-tag.warn { background: #fbe1da; }
.el-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.el-row { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.el-row:first-of-type { margin-top: 14px; }
.el-row h4 { display: flex; gap: 7px; margin: 3px 0 0; font: 700 14px/1.3 var(--body); color: var(--muted); }
.block p.el-line { margin: 0 0 4px; }
.block > p.el-line { margin-top: 10px; }
.el-line b { font-weight: 700; }
.el-steps { margin: 8px 0 0; padding-left: 20px; }
.el-strip { display: flex; gap: 2px; height: 12px; margin-top: 14px; border-radius: 6px; overflow: hidden; }
.el-strip i, .el-parts i { background: var(--banana); }
i.k1 { background: var(--ink); } i.k2 { background: var(--tongue); } i.k3 { background: var(--muted); }
.el-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.el-parts i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.page-acts { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.page-acts .heart { border: 1px solid var(--line); }
.cover { position: relative; aspect-ratio: 9/16; background: var(--soft) center/cover no-repeat; border-radius: var(--r); overflow: hidden; transition: transform var(--fast); }
.reel:hover .cover { transform: translateY(-3px); }
.v { position: absolute; left: 8px; top: 8px; background: var(--paper); font: 700 15px/1 var(--body); padding: 6px 9px; border-radius: 9px; }
.v.hot { background: var(--banana); }
.meta { padding: 8px 2px 0; }
.meta .views { font-weight: 700; font-size: 17px; }
.meta .who { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 40px 0; max-width: 560px; }
.empty h2 { font-size: 26px; margin-bottom: 10px; }
.more { margin: 24px 0; }

.page { position: fixed; inset: 0; background: var(--paper); z-index: 10; overflow-y: auto; }
.page-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 28px; position: sticky; top: 0; background: var(--paper); z-index: 2; }
.page-body { max-width: 1160px; margin: 0 auto; padding: 8px 28px 48px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.side { position: sticky; top: 74px; }
.side video, .side .poster { width: 100%; aspect-ratio: 9/16; max-height: calc(100vh - 170px); background: #000 center/contain no-repeat; display: block; border-radius: var(--r); object-fit: contain; }
.side p { margin: 10px 0 0; }
.score { font: 400 52px/1 var(--word); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; margin: 20px 0; }
.kv b { display: block; font-size: 19px; }
.kv span { font-size: 14px; color: var(--muted); }
.block { margin-top: 28px; }
.block h3 { font-size: 20px; margin-bottom: 10px; }
.block p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 56px 72px minmax(0, 1fr); gap: 14px; padding: 8px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 10px; align-items: start; width: 100%; }
.tl:hover { background: var(--soft); }
.tl .t { font-weight: 700; color: var(--muted); font-size: 15px; }
.tl img { width: 72px; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px; background: var(--soft); display: block; }
.tl .say { font-weight: 500; }
.tl .see { color: var(--muted); font-size: 15px; margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--soft); border-radius: 9px; padding: 3px 9px; font-size: 14px; }
.chip button { border: 0; background: none; cursor: pointer; padding: 0 2px; color: var(--muted); font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--ink); }
.chip-add { width: 150px; padding: 4px 10px; font-size: 14px; border-radius: 9px; }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 700; font-size: 14px; color: var(--muted); padding: 6px 14px 8px 0; white-space: nowrap; }
td { padding: 12px 14px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }
.tag { font-size: 14px; padding: 2px 8px; border-radius: 8px; background: var(--soft); white-space: nowrap; }
.tag.running, .tag.queued { background: #fdf1cf; } .tag.waiting { background: #fdf1cf; } .tag.failed { background: #fbe1da; }
.best td { background: #fdf6e0; }
.best td:first-child { border-radius: 10px 0 0 10px; padding-left: 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 12px 0 8px; }
.stats b { display: block; font: 400 30px var(--word); }
.section { margin-bottom: 40px; max-width: 1000px; }
.section h2 { font-size: 26px; margin-bottom: 14px; }
.section p { max-width: 68ch; }

.chat { max-width: 800px; display: flex; flex-direction: column; gap: 14px; }
.chat h2 { font-size: 26px; }
#log { display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 12px 16px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { background: var(--soft); margin-left: 15%; font-weight: 500; }
.msg.ai-msg { padding-left: 0; }
.msg .src { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; }
.ask { display: flex; gap: 10px; align-items: flex-end; }
.ask textarea { flex: 1; min-height: 64px; resize: vertical; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(340px, 100%); display: grid; gap: 12px; justify-items: stretch; }
.login img { width: 72px; height: 72px; border-radius: 50%; justify-self: center; }
.login h1 { font-size: 28px; text-align: center; margin-bottom: 8px; }

@media (max-width: 800px) {
  .top { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; }
  .ch-acts { width: 100%; margin-left: 0; }
  .brand span { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 32px; gap: 18px; }
  .rail { position: static; gap: 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .page-top { padding: 12px 16px; }
  .hide-sm { display: none; }
  .st { width: 130px; }
  .dr-strip { min-height: 231px; }
  body.flowing .rail, body.flowing .bar > :not(.view-switch):not(#cnt):not(#from-top) { display: none; }
  body.flowing .layout { gap: 0; }
  body.flowing .bar { margin-bottom: 8px; }
  .clip { position: relative; gap: 0; }
  .clip-frame { width: 100%; aspect-ratio: auto; }
  .clip-side { position: absolute; right: 8px; bottom: 96px; }
  .el-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .el-sum { grid-template-columns: 112px minmax(0, 1fr); }
  .take { padding: 0 12px; }
  .page-acts { gap: 10px; }
  .page-body { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 32px; gap: 18px; }
  .side { position: static; max-width: 260px; }
  .tl { grid-template-columns: 44px 56px minmax(0, 1fr); gap: 10px; padding: 8px 2px; }
  .tl img { width: 56px; }
  .msg.user { margin-left: 8%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.page:not(.show-orig) .orig, .page.show-orig .ru { display: none; }
.lang { display: inline-flex; margin-bottom: 12px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.lang button { padding: 8px 14px; min-height: 40px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.lang button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.lang button.on { background: var(--banana); }

.dd { position: relative; display: inline-block; }
.dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; white-space: nowrap; transition: border-color var(--fast); }
.dd-btn:hover, .dd-btn:focus-visible, .dd.open .dd-btn { border-color: var(--ink); outline: none; }
.chev { flex: none; transition: transform var(--fast); }
.dd.open .chev { transform: rotate(180deg); }
.dd-menu { position: fixed; z-index: 40; margin: 0; padding: 6px; list-style: none; max-width: calc(100vw - 32px); overflow-y: auto; background: var(--paper); border: 1px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
.dd-menu li { padding: 9px 12px; min-height: 40px; display: flex; align-items: center; border-radius: 8px; cursor: pointer; white-space: nowrap; outline: none; }
.dd-menu li:hover, .dd-menu li:focus { background: var(--soft); }
.dd-menu li[aria-selected="true"] { font-weight: 700; background: var(--soft); }
.dd-menu li[aria-disabled="true"] { color: var(--muted); cursor: default; background: none; }
.scope-row { position: relative; display: flex; align-items: center; }
.scope-row .scope { padding-right: 40px; }
.more-dd { position: absolute; right: 2px; }
.dd-btn.dots { min-height: 36px; width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--muted); fill: currentColor; }
.dd-btn.dots:hover, .dd-btn.dots:focus-visible, .dd.open .dd-btn.dots { border-color: transparent; background: var(--line); color: var(--ink); }
.scope-row .scope .n { margin-left: auto; }
.dlg { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); color: var(--ink); }
.dlg::backdrop { background: rgb(10 10 9 / .35); }
.dlg h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.dlg p { margin: 0 0 16px; }
.dlg-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn.danger { background: var(--tongue); }
@media (max-width: 480px) { .bar .dd { flex: 1 1 calc(50% - 6px); min-width: 0; } .bar .dd-btn { width: 100%; } .bar .dd-btn span { overflow: hidden; text-overflow: ellipsis; } }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }