:root {
  --bg: #0f0f10; --panel: #161618; --panel2: #1c1c1f; --line: #2a2a2e; --line2: #36363b;
  --fg: #efece6; --soft: #c9c5bd; --mute: #8b877f; --accent: #7fb2ff; --accent-ink: #0b1a33;
  --warm: #f08a5d; --ok: #43c47a; --warn: #f0b35e; --err: #ef6a6a;
  --r: 10px; --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.boot { padding: 40px; color: var(--mute); }
.muted { color: var(--mute); }
.warn { color: var(--warn); } .ok { color: var(--ok); }

.app { display: grid; grid-template-columns: 236px 1fr; height: 100vh; }
.main { min-width: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* Sidebar */
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px; gap: 14px; min-height: 0; }
.side__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 4px 8px 10px; border-bottom: 1px solid var(--line); }
.side__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warm); }
.side__sub { color: var(--mute); font-weight: 500; margin-left: auto; font-size: 12px; }
.side__group { display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.side__group--grow { flex: 1; }
.side__scroll { overflow: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.side__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; color: var(--mute); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.side__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--soft); }
.side__link:hover { background: var(--panel2); color: var(--fg); }
.side__link.is-active { background: #25252a; color: var(--fg); }
.side__proj { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { color: var(--mute); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--mute); }
.status-dot--published { background: var(--ok); }

/* Buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: #4a4a50; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--ghost { background: transparent; }
.btn--danger { background: transparent; color: var(--err); border-color: #5a2a2a; }
.btn--small { height: 26px; padding: 0 10px; font-size: 12px; }
.btn--add { margin: 10px 12px 14px; height: 40px; border-style: dashed; background: transparent; color: var(--soft); }
.icon-btn { width: 26px; height: 26px; border-radius: 6px; border: 0; background: transparent; color: var(--mute); display: inline-grid; place-items: center; font-size: 13px; }
.icon-btn:hover:not(:disabled) { background: #2a2a2f; color: var(--fg); }
.icon-btn--danger:hover:not(:disabled) { color: var(--err); }
.input { width: 100%; min-height: 34px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line2); background: #121214; color: var(--fg); font: inherit; }
.input:focus { border-color: var(--accent); outline: none; }
textarea.input { resize: vertical; line-height: 1.5; }
.input--mono { font-family: ui-monospace, monospace; }
select.input { appearance: auto; }
.swatch-input { width: 40px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--line2); background: #121214; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .input { flex: 1; min-width: 160px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--tight { gap: 6px; }
.seg { display: inline-flex; background: #121214; border: 1px solid var(--line2); border-radius: 9px; padding: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; color: var(--mute); font-weight: 600; }
.seg button.is-on { background: #2a2a2f; color: var(--fg); }
.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; background: #3a2a14; color: var(--warn); }
.badge--published { background: #173424; color: var(--ok); }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
.topbar__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__title strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { color: var(--mute); }
.topbar__end { display: flex; gap: 8px; align-items: center; }

/* Editor */
.editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.editor__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px 1fr 340px; }
.outline { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; display: flex; flex-direction: column; }
.outline__head { padding: 12px 12px 0; }
.tab { width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; font-weight: 600; }
.tab.is-on { border-color: var(--accent); background: rgba(127, 178, 255, .08); }
.outline__label { margin: 16px 16px 6px; color: var(--mute); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.outline__list { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-direction: column; gap: 3px; }
.outline__item { display: flex; align-items: center; gap: 6px; padding: 7px 6px 7px 4px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.outline__item:hover { background: var(--panel2); }
.outline__item.is-selected { border-color: var(--accent); background: rgba(127, 178, 255, .08); }
.outline__item.is-hidden .outline__text { opacity: .45; }
.outline__item.is-dragging { opacity: .4; }
.outline__item.is-over { box-shadow: inset 0 2px 0 var(--accent); }
.outline__grip { color: #55555b; cursor: grab; font-size: 11px; letter-spacing: -2px; padding: 0 4px; }
.outline__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.outline__text strong { font-weight: 600; font-size: 13px; }
.outline__sum { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline__tools { display: none; gap: 0; }
.outline__item.is-selected .outline__tools { display: inline-flex; }

.preview { background: #08080a; overflow: auto; display: flex; justify-content: center; }
.preview__viewport { width: 100%; height: 100%; transition: width .3s; }
.preview[data-device="tablet"] .preview__viewport { width: 834px; padding: 16px 0; }
.preview[data-device="mobile"] .preview__viewport { width: 390px; padding: 16px 0; }
.preview__frame { width: 100%; height: 100%; border: 0; background: #111010; display: block; }
.preview[data-device="tablet"] .preview__frame, .preview[data-device="mobile"] .preview__frame { border-radius: 18px; box-shadow: 0 0 0 1px var(--line2), 0 30px 60px -30px #000; }

.inspector { border-left: 1px solid var(--line); background: var(--panel); overflow: auto; }
.insp { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.insp__head h2 { margin: 0 0 4px; font-size: 16px; }
.insp__head p { margin: 0; color: var(--mute); font-size: 13px; }
.insp__adv { border-top: 1px solid var(--line); padding-top: 10px; }
.insp__adv summary { cursor: pointer; color: var(--soft); font-weight: 600; margin-bottom: 10px; }
.insp__danger { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }

/* Form */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: 12px; font-weight: 600; color: var(--soft); }
.field__help { font-size: 12px; color: var(--mute); }
.field--md textarea { font-family: ui-monospace, monospace; font-size: 13px; }
.check { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 13px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12px; cursor: pointer; }
.chip-check:has(input:checked) { border-color: var(--accent); background: rgba(127, 178, 255, .1); }
.link-field { display: grid; gap: 6px; }
.field--list { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; gap: 8px; }
.list__head { display: flex; justify-content: space-between; align-items: center; }
.list__item { border: 1px solid var(--line); border-radius: 8px; background: #131315; }
.list__item > summary { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; cursor: pointer; list-style: none; }
.list__item > summary::-webkit-details-marker { display: none; }
.list__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13px; }
.list__tools { display: inline-flex; }
.list__item > .form { padding: 4px 10px 12px; }
.pl-item { display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 10px; border: 1px solid var(--line); border-radius: 8px; }
.pl-item span { flex: 1; }

/* Media fields & thumbnails */
.thumb { display: inline-block; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #26262b; flex-shrink: 0; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb--tiny { width: 26px; height: 26px; }
.thumb--sm { width: 64px; height: 64px; }
.thumb--md { width: 72px; height: 48px; }
.thumb--fill { width: 100%; height: 100%; border-radius: 0; }
.thumb--missing { display: inline-grid; place-items: center; color: var(--mute); background: repeating-linear-gradient(135deg, #1f2023 0 8px, #25262a 8px 16px); }
.thumb--video::after { content: '▶'; position: absolute; right: 3px; bottom: 2px; font-size: 9px; color: #fff; text-shadow: 0 0 3px #000; }
.media-field { display: flex; align-items: center; gap: 6px; }
.media-field__pick { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; border: 1px solid var(--line2); background: #121214; text-align: left; min-width: 0; }
.media-field__pick:hover { border-color: var(--accent); }
.media-field__meta { display: flex; flex-direction: column; min-width: 0; }
.media-field__meta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-field__meta span { color: var(--mute); font-size: 12px; }
.media-list { display: flex; flex-wrap: wrap; gap: 6px; }
.media-list__item { position: relative; }
.media-list__tools { position: absolute; right: 0; top: 0; display: none; background: rgba(0, 0, 0, .7); border-radius: 6px; }
.media-list__item:hover .media-list__tools { display: flex; }
.media-list__add { width: 64px; height: 64px; border-radius: 6px; border: 1px dashed var(--line2); background: transparent; color: var(--mute); }

/* Media library */
.media-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.media-view.is-drop { outline: 2px dashed var(--accent); outline-offset: -8px; }
.media-view__bar { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.media-view__bar .input { max-width: 360px; }
.media-view > .mgrid { overflow: auto; padding: 16px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; align-content: start; }
.mgrid--pick { max-height: 60vh; overflow: auto; }
.mcard { display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); text-align: left; overflow: hidden; }
.mcard:hover { border-color: #4a4a50; }
.mcard.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.mcard.is-missing { border-style: dashed; }
.mcard__img { position: relative; aspect-ratio: 4 / 3; display: block; background: #222; }
.mcard__badge { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, .7); padding: 2px 6px; border-radius: 5px; font-size: 11px; }
.mcard__title { padding: 4px 10px 0; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard__meta { padding: 0 10px; color: var(--mute); font-size: 12px; }
.detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.detail__media { width: 100%; max-height: 60vh; object-fit: contain; background: #000; border-radius: 10px; }
.detail__posterbox { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--line2); border-radius: 10px; }
.detail__posterbox p { margin: 0; font-size: 13px; }
.detail__poster { width: 140px; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 6px; flex-shrink: 0; }
.detail__doc { height: 60vh; border: 0; background: #fff; }
.thumb--doc { display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mute); background: var(--line2); }
.detail__ph { display: grid; place-items: center; min-height: 260px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--mute); text-align: center; padding: 20px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #25252a; text-decoration: none; font-size: 12px; }

/* Palette modal */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 24px; }
.modal__box { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 40px 80px -30px #000; }
.modal__box--wide { width: min(1040px, 100%); }
.modal__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal__head h2 { margin: 0; font-size: 16px; }
.modal__body { padding: 16px; overflow: auto; }
.palette { display: flex; flex-direction: column; gap: 18px; }
.palette__cat h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.palette__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.palette__item { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; border: 1px solid var(--line2); background: #131315; text-align: left; }
.palette__item:hover { border-color: var(--accent); background: rgba(127, 178, 255, .06); }
.palette__item strong { font-size: 14px; }
.palette__item span { color: var(--mute); font-size: 12px; }

/* Settings & publish */
.settings { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto; }
.settings__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; padding: 16px; align-items: start; }
.card-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-sec h3 { margin: 0; font-size: 15px; }
.card-sec p { margin: 0; }
.card-sec--log { margin: 0 16px 16px; }
.log { margin: 0; min-height: 160px; max-height: 360px; overflow: auto; background: #09090b; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 12px/1.5 ui-monospace, monospace; color: var(--soft); white-space: pre-wrap; }
.issue { font-size: 12px; color: var(--mute); margin: 0; }
.issue--error { color: var(--err); }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 14px; border-radius: 10px; background: #26262b; border: 1px solid var(--line2); box-shadow: 0 16px 30px -16px #000; transition: opacity .4s, transform .4s; max-width: 380px; }
.toast--error { border-color: #6a2f2f; color: #ffb4b4; } .toast--ok { border-color: #245a3a; }
.toast.is-out { opacity: 0; transform: translateY(8px); }

@media (max-width: 1200px) { .editor__cols { grid-template-columns: 240px 1fr 300px; } }

/* Clients */
.settings__grid--one { grid-template-columns: minmax(0, 960px); }
.delivery { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.delivery.is-drop { border-color: var(--accent, #f08a5d); background: rgba(240, 138, 93, .06); }
.delivery__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.delivery__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.delivery__files li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.delivery__files li > span:first-child { overflow-wrap: anywhere; }
.input--short { flex: 0 0 80px !important; min-width: 0 !important; }

/* Clients v2: folder tree, folder panel, drop zone, activity */
.ca-clientcard { text-decoration: none; color: inherit; }
.ca-clientcard:hover { border-color: var(--line2); }
.ca-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: 16px; padding: 16px; align-items: start; }
.ca-tree { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 72px; }
.ca-node { text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--soft); font: inherit; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.ca-node:hover { background: #1d1d22; color: var(--fg); }
.ca-node.is-on { background: #26262c; color: var(--fg); font-weight: 600; }
.ca-main { min-width: 0; }
.ca-main h2 { margin: 0; font-size: 18px; }
.ca-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ca-name { flex: 1 1 240px; font-size: 18px !important; font-weight: 600; }
.ca-status { width: auto !important; flex: 0 0 auto !important; }
.ca-date { flex: 0 0 150px !important; }
.ca-crumbs { font-size: 13px; color: var(--mute); }
.linkbtn { padding: 0; border: 0; background: none; color: var(--mute); font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--fg); text-decoration: underline; }
.ca-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ca-settings > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.ca-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--soft); }
.ca-drop { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 2px dashed var(--line2); border-radius: 12px; }
.ca-drop.is-drop { border-color: #f08a5d; background: rgba(240, 138, 93, .06); }
.ca-opts { gap: 6px 18px; }
.ca-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-height: 260px; overflow: auto; }
.ca-queue li { display: flex; justify-content: space-between; gap: 12px; }
.ca-queue li > span:first-child { overflow-wrap: anywhere; }
.ca-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ca-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ca-row:last-child { border-bottom: 0; }
.ca-row:hover { background: #1a1a1f; }
.ca-row__name { font-weight: 600; overflow-wrap: anywhere; }
.ca-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ca-file { border-bottom: 1px solid var(--line); }
.ca-file:last-child { border-bottom: 0; }
.ca-file__main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; font-size: 13px; }
.ca-file__name { font-weight: 600; overflow-wrap: anywhere; }
.ca-msg { grid-column: 1 / -3; }
.ca-vers summary { cursor: pointer; color: #f08a5d; font-weight: 600; }
.ca-vers[open] { grid-column: 1 / -1; order: 9; display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.ca-ver { display: grid; grid-template-columns: 34px 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ca-act { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ca-act:last-child { border-bottom: 0; }
.ca-side { min-width: 0; }
@media (max-width: 1200px) { .ca-grid { grid-template-columns: 200px minmax(0, 1fr); } .ca-side { grid-column: 1 / -1; } }

/* File cards: thumbnail, drop a file on one for a new version, drag one onto another to merge */
.ca-fcard { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: grab; min-width: 0; }
.ca-fcard.is-dragging { opacity: .4; }
.ca-fcard.is-over { border-color: #f08a5d; box-shadow: 0 0 0 2px rgba(240, 138, 93, .35); }
.ca-fwrap { position: relative; }
.ca-fthumb { aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden; background: #1d1d22; display: flex; align-items: center; justify-content: center; }
.ca-fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ca-ext { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--mute); }
.ca-fdrop { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 7px; background: rgba(240, 138, 93, .88); color: #111; font-weight: 700; font-size: 13px; }
.ca-fcard.is-over .ca-fdrop { display: flex; }
.ca-fbadge { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(15, 15, 16, .8); color: #f08a5d; font-size: 11px; font-weight: 700; }
.ca-fmeta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.ca-fcard .ca-vers { font-size: 12px; }
.ca-fcard .ca-vers[open] { display: flex; flex-direction: column; gap: 6px; }
.ca-fcard .ca-ver { grid-template-columns: 48px minmax(0, 1fr) auto; }
.ca-verthumb { width: 48px; height: 36px; border-radius: 4px; object-fit: cover; background: #1d1d22; }
.ca-fcard .row { flex-wrap: nowrap; }
.ca-fcard .ca-status { min-width: 0; flex: 1 1 auto !important; width: 100% !important; font-size: 12px; }
/* Upload preview */
.ca-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 55vh; overflow: auto; }
.ca-plan__item { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; min-width: 0; }
.ca-plan__item .ca-file__name { overflow-wrap: anywhere; }
.ca-plan__badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #26262c; color: var(--soft); }
.ca-plan__item--version .ca-plan__badge { background: rgba(240, 138, 93, .18); color: #f3b37e; }
.ca-plan__item--version { border-color: rgba(240, 138, 93, .5); }
.ca-plan__item--folder .ca-plan__badge { background: rgba(127, 209, 160, .15); color: #9be0b8; }
.side__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.side__toggle:hover { color: var(--fg); }
.side__caret { width: 10px; }

/* decks: slides drawn in shadow roots, scaled by --k (admin.js › slideView) */
.dk-slide { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111010; }
/* library */
.dkl { display: flex; flex-direction: column; height: 100%; }
.dkl .topbar__end .input[type=search] { width: 260px; max-width: 40vw; }
.dkl-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.dkl-tree { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.dkl-node { display: flex; align-items: center; gap: 2px; border-radius: 7px; padding-right: 8px; }
.dkl-node:hover { background: #1f1f23; }
.dkl-node.is-on { background: #26262b; }
.dkl-node.is-on .dkl-name { color: var(--fg); font-weight: 600; }
.dkl-node.is-over { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(127, 178, 255, .08); }
.dkl-caret { width: 20px; flex: none; border: 0; background: none; color: var(--mute); padding: 0; text-align: center; }
.dkl-name { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 6px 4px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkl-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.dkl-main { overflow: auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
.dkl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dkl-head h2 { margin: 0 8px 0 0; font-size: 22px; letter-spacing: -0.02em; }
.dkl-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.dkl-sub { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel); font-weight: 600; }
.dkl-sub:hover { border-color: var(--accent); }
.dkl-subicon { width: 14px; height: 11px; border-radius: 2px 2px 3px 3px; background: var(--mute); }
.dkl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.dkl-card { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.dkl-card:hover { border-color: #4a4a50; }
.dkl-open { border: 0; padding: 0; background: none; display: block; text-align: left; }
.dkl-thumb { position: relative; border-radius: 7px; overflow: hidden; }
.dkl-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 4px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.dkl-thumb:hover .dkl-dots { opacity: 1; }
.dkl-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.dkl-dots i.is-on { background: #fff; }
.dkl-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dkl-info strong { font-size: 14px; }
.dkl-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dkl-acts a.btn { text-decoration: none; }
.dkl-more { margin-left: auto; }
/* editor */
.dk .editor__cols { grid-template-columns: 236px 1fr 372px; }
.dk-thumbs { list-style: none; margin: 0; padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 12px; }
.dk-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 6px; cursor: pointer; }
.dk-item.is-dragging { opacity: .4; }
.dk-item.is-over .dk-item__box { box-shadow: 0 -3px 0 var(--accent); }
.dk-code { font-size: 11px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 2px; }
.dk-item.is-selected .dk-code { color: var(--accent); }
.dk-item__box { position: relative; border-radius: 5px; outline: 1px solid var(--line); }
.dk-item.is-selected .dk-item__box { outline: 2px solid var(--accent); outline-offset: 1px; }
.dk-item.is-hidden .dk-thumb { opacity: .35; }
.dk-item__label { grid-column: 2; font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-badge { position: absolute; right: 4px; top: 4px; padding: 0 5px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; }
.dk-item__tools { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.dk-item__tools .icon-btn { background: rgba(15, 15, 16, .85); }
.dk-item:hover .dk-item__tools, .dk-item:focus-within .dk-item__tools { opacity: 1; }
.dk-preview { background: #08080a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; min-width: 0; overflow: hidden; }
.dk-stage { width: 100%; max-width: calc((100vh - 190px) * 16 / 9); box-shadow: 0 0 0 1px var(--line2), 0 30px 60px -30px #000; }
.dk-steps { width: 100%; max-width: calc((100vh - 190px) * 16 / 9); min-height: 32px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.dk-steps__bar { flex: 1; display: flex; gap: 4px; }
.dk-steps__bar button { flex: 1; height: 8px; border: 0; border-radius: 4px; background: var(--line2); padding: 0; }
.dk-steps__bar button.is-on { background: var(--accent); }
.dk-tabs { align-self: flex-start; }
.dk-builds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dk-build { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 8px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); }
.dk-build:hover { border-color: var(--accent); }
.dk-build__n { font-weight: 700; color: var(--accent); text-align: center; }
.dk-build__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dk-build__tools { display: flex; gap: 2px; }
.dk-build__opts { grid-column: 2 / -1; display: flex; gap: 6px; }
.dk-build__opts .input { flex: 1; padding: 5px 8px; }
.dk-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.dk-pick__item { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 8px; border: 2px solid transparent; background: none; text-align: left; }
.dk-pick__item[aria-pressed="true"] { border-color: var(--accent); background: rgba(127, 178, 255, .08); }
.dk-img { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px dashed var(--line2); background: #121214; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dk-img:not(.is-empty) { border-style: solid; }
.dk-img img { width: 100%; height: 100%; object-fit: contain; }
.dk-img.is-over { border-color: var(--accent); background: rgba(127, 178, 255, .08); }
.dk-img.is-busy > :not(.dk-img__note) { opacity: .35; }
.dk-img__frame { position: absolute; cursor: crosshair; }
.dk-img__focus { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); pointer-events: none; }
.dk-img__badge { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .7); font-size: 11px; font-weight: 600; }
.dk-img__note { position: absolute; font-weight: 600; }
.dk-img__tools { flex-wrap: wrap; gap: 6px; }
.dk-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.dk-files__item { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); text-align: left; font-size: 12px; }
.dk-files__item:hover { border-color: var(--accent); }
.dk-files__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: #121214; }

/* notes threads (client notes + replies) */
.nts { display: flex; flex-direction: column; gap: 10px; }
.nt-thread { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.nt-thread.is-resolved { opacity: .65; }
.nt { display: flex; flex-direction: column; gap: 3px; }
.nt--reply { margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--line2); }
.nt--me .nt__head strong { color: var(--accent); }
.nt__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12px; }
.nt__text { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.nt__tools { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.nt__tools .icon-btn { margin-left: auto; }
.nt-compose { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.nt-compose .input { width: 100%; }
.nt-done summary { cursor: pointer; color: var(--mute); font-size: 13px; padding: 4px 0; }
.nt-done[open] { display: flex; flex-direction: column; gap: 10px; }
.dk-notes { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(240, 179, 94, .35); background: rgba(240, 179, 94, .05); }
.dk-notes h3 { margin: 0; font-size: 13px; }
.dk-badge--note { top: auto; bottom: 4px; right: 4px; background: var(--warn); color: #2a1b05; }
.dk-notesbtn { color: var(--warn); border-color: rgba(240, 179, 94, .45); }
.ca-notes.has-open { border-color: rgba(240, 179, 94, .6); color: var(--warn); }
.ca-note { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; text-align: left; font-size: 13px; }
.ca-note:hover { border-color: var(--warn); }
.ca-note__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* builds grouped by click, ambient motion */
.dk-click { display: flex; flex-direction: column; gap: 6px; }
.dk-click__head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dk-click__n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.dk-click .dk-builds { margin-left: 11px; padding-left: 18px; border-left: 2px solid var(--line2); }
.dk-build { grid-template-columns: minmax(0, 1fr) auto; }
.dk-amb { align-items: flex-start; line-height: 1.4; }
.dk-amb input { margin-top: 3px; }
/* themes */
.dk-contrast { display: grid; grid-template-columns: 1fr; gap: 4px; }
.dk-contrast__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.dk-contrast__row b { font-variant-numeric: tabular-nums; color: var(--ok); }
.dk-contrast__row.is-low b { color: var(--warn); }
.dk-contrast__chip { height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dk-linked { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 178, 255, .08); border: 1px solid rgba(127, 178, 255, .3); font-size: 13px; }
.dkt { display: flex; flex-direction: column; height: 100%; }
.dkt-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.dkt-main { overflow: auto; background: #08080a; padding: 24px; }
.dkt-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.dkt-preview .dk-slide { border-radius: 6px; box-shadow: 0 0 0 1px var(--line2), 0 20px 40px -24px #000; }
.dkt-sws { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dkt-sw { width: 20px; height: 20px; border-radius: 5px; border: 0; padding: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); cursor: pointer; }
.dkt-sw:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.dkt-sws--big .dkt-sw { width: 32px; height: 32px; border-radius: 7px; }
.dkt-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.dkl-new { align-items: flex-start; justify-content: center; gap: 6px; min-height: 180px; border-style: dashed; text-decoration: none; color: inherit; padding: 20px; }
.dkl-new:hover { border-color: var(--accent); }

/* media library polish: rows never squash, sizes, selection, unused badge, drop overlay */
.mgrid { grid-auto-rows: max-content; }
.mgrid--s { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mgrid--m { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.mgrid--l { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mgrid--s .mcard__meta { display: none; }
.mcard { position: relative; cursor: pointer; transition: border-color .15s, transform .15s; }
.mcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mcard__img { flex: none; overflow: hidden; }
.mcard__img .thumb--fill img { transition: transform .4s ease; }
.mcard:hover .mcard__img .thumb--fill img { transform: scale(1.03); }
.mcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard__pick { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); opacity: 0; transition: opacity .15s; cursor: pointer; }
.mcard:hover .mcard__pick, .mcard__pick:checked, .mcard__pick:focus-visible { opacity: 1; }
.mcard__unused { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .7); color: var(--warn); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.media-view { position: relative; }
.media-view__bar { flex-wrap: wrap; align-items: center; }
.media-view__bar > .muted { margin-left: auto; font-size: 12px; }
.mlib-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.mlib-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(127, 178, 255, .08); border-bottom: 1px solid rgba(127, 178, 255, .3); }
.mlib-bulk[hidden] { display: none; }
.mlib-bulk strong { margin-right: 6px; }
.media-view__drop { position: absolute; inset: 8px; z-index: 5; display: none; align-items: center; justify-content: center; border: 2px dashed var(--accent); border-radius: 14px; background: rgba(11, 26, 51, .72); pointer-events: none; font-size: 18px; }
.media-view.is-drop { outline: 0; }
.media-view.is-drop .media-view__drop { display: flex; }
.ca-clientcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.ca-clientcard:hover { border-color: var(--accent); }
.ca-clientcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ca-clientcard__top h3 { margin: 0; }
.ca-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--soft); }
.ca-stats b { color: var(--fg); }
.ca-last { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ca-pill--warn { background: rgba(240, 179, 94, .14); color: var(--warn); }
.dk-notesbtn[hidden], .btn[hidden] { display: none; }
.dk-build .dk-build__opts { grid-column: 1 / -1; }
.dk-build__opts select { min-width: 0; }
.dk-build__opts .input.input--short { width: auto; max-width: none; flex: 1 1 0; }
/* admin review view */
.rv { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; min-height: 60vh; }
.rv-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rv-right { max-height: 72vh; overflow: auto; }
.rv-media { position: relative; align-self: center; max-width: 100%; background: #000; border-radius: 6px; overflow: hidden; }
.rv-media img, .rv-media video { display: block; max-width: 100%; max-height: 66vh; }
.rv-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-ink polyline { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rv-pins { position: absolute; inset: 0; pointer-events: none; }
.rv-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--warm); border: 2px solid #fff; color: transparent; font-size: 0; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.rv-pin.is-sel { background: #fff; }
.nt-thread.is-clickable { cursor: pointer; }
.nt-thread.is-sel { border-color: var(--warm); }
.ca-review { display: inline-flex; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ca-review--approved { background: rgba(67, 196, 122, .15); color: var(--ok); }
.ca-review--changes { background: rgba(240, 179, 94, .15); color: var(--warn); }
.ca-warn b, .ca-warn { color: var(--warn); }
@media (max-width: 1100px) { .rv { grid-template-columns: minmax(0, 1fr); } }
.dk-warn { width: 100%; max-width: calc((100vh - 190px) * 16 / 9); margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(240, 179, 94, .12); color: var(--warn); font-size: 13px; } .dk-warn[hidden] { display: none; }
.mcard__alt { margin: 4px 8px 0; width: calc(100% - 16px); height: 32px; font-size: 12px; } .mcard.is-done { border-color: var(--ok); }
/* clients v3: tasks, share links, reactions */
.nt__reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.nt__react { height: 24px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; font-size: 12px; cursor: pointer; }
.nt__react.is-mine { border-color: var(--accent); background: rgba(127, 178, 255, .12); }
.nt__react--add { opacity: .45; } .nt__react--add:hover { opacity: 1; }
.nt__done { font-size: 12px; font-weight: 700; color: var(--ok); }
.nt__tools { flex-wrap: wrap; }
.ca-node--tasks { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ca-todo { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.ca-todo__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.ca-todo__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.ca-todo__row input { margin-top: 3px; accent-color: var(--ok); }
.ca-todo__row.is-done .ca-todo__text > span:first-child { text-decoration: line-through; color: var(--mute); }
.ca-todo__text { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.ca-todo__text .muted { font-size: 12px; }
.ca-todo__row > .muted, .ca-todo__row > .nt__done { font-size: 12px; white-space: nowrap; }
.ca-share { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ca-share__name { font-weight: 600; }
.ca-share .muted { font-size: 12px; }
.ca-fixrow { align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--panel2); }
.ca-fixrow > span { display: flex; flex-direction: column; gap: 2px; }
/* slides in any format: boxes take the deck's proportions (--ar, set per deck) */
.dk-slide { aspect-ratio: var(--ar, 16 / 9); }
.dk-stage, .dk-steps, .dk-warn { max-width: calc((100vh - 190px) * var(--ar, 1.7778)); }
.dk-thumbs .dk-slide { width: min(100%, calc(130px * var(--ar, 1.7778))); margin: 0 auto; }
.dkl-thumb { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #0b0b0d; }
.dkl-thumb > .dk-slide { height: 100%; width: auto; max-width: 100%; }
.dk-pick__item .dk-slide { width: min(100%, calc(110px * var(--ar, 1.7778))); margin: 0 auto; }
.dkt-preview .dk-slide { width: 100%; }

/* ---------- desk ---------- */
.count--hot { background: var(--warm); color: #1a0d05; border-radius: 999px; padding: 0 7px; font-weight: 700; font-size: 11px; line-height: 18px; }
.count--hot[hidden] { display: none; }
.toast--undo { display: flex; gap: 14px; align-items: center; }
.toast--undo .linkbtn { color: var(--accent); font-weight: 600; }
.desk { overflow: auto; }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 16px; align-items: start; max-width: 1400px; }
.desk-main { min-width: 0; }
.desk-h { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.desk-capture { gap: 8px; }
.desk-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.desk-tab { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--soft); }
.desk-tab:hover { border-color: var(--line2); color: var(--fg); }
.desk-tab.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.desk-tab.is-on .count { color: inherit; opacity: .7; }
.desk-clearall { margin-left: auto; font-size: 13px; }
.desk-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); border-left: 3px solid var(--line2); }
.desk-item--comment { border-left-color: var(--accent); }
.desk-item--ok { border-left-color: var(--ok); }
.desk-item--changes { border-left-color: var(--warn); }
.desk-item--upload { border-left-color: var(--warm); }
.desk-item.is-resolved { opacity: .85; }
.desk-thumb { width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: #0b0b0c; border: 1px solid var(--line); padding: 0; display: grid; place-items: center; }
.desk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.desk-thumb--icon { font-size: 26px; color: var(--warm); }
.desk-item__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.desk-item__head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.desk-client { font-weight: 700; text-decoration: none; padding: 1px 8px; border-radius: 999px; background: #24242a; }
.desk-client:hover { background: #2e2e35; }
.desk-file { color: var(--fg); font-weight: 600; }
.desk-when { margin-left: auto; }
.desk-msg { padding: 8px 12px; border-radius: 10px; background: var(--panel2); }
.desk-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.desk-msg--me { background: #18202e; }
.desk-more { margin: 0; font-size: 12px; }
.desk-line { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.desk-quote { margin: 0; padding: 6px 12px; border-left: 2px solid var(--line2); color: var(--soft); white-space: pre-wrap; }
.desk-files { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-actions { gap: 6px; }
.desk-empty { padding: 48px 20px; border: 1px dashed var(--line2); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.desk-side { position: sticky; top: 0; }
.desk-dues { gap: 10px; }
.desk-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 600; margin-top: 4px; }
.desk-due { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--panel2); border-left: 3px solid var(--line2); }
.desk-due:hover { background: #222227; }
.desk-due--feedback { border-left-color: var(--accent); }
.desk-due--deliverable { border-left-color: var(--warm); }
.desk-due--milestone { border-left-color: var(--ok); }
.desk-due.is-late .desk-due__date { color: var(--err); }
.desk-due__date { font-weight: 700; font-size: 12px; color: var(--soft); }
.desk-due__main { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.desk-due__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-due__kind { font-size: 11px; color: var(--mute); }
.desk-proj { --brand: var(--accent); display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); border-top: 3px solid var(--brand); }
.desk-proj__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.desk-proj__name { font-weight: 700; font-size: 15px; text-decoration: none; }
.desk-proj__name:hover { text-decoration: underline; }
.desk-proj__next { font-size: 13px; }
.desk-proj__last { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-proj .btn.is-on { color: var(--warn); }
.desk-bar { position: relative; height: 6px; border-radius: 99px; background: #26262b; overflow: hidden; }
.desk-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--ok); }
.desk-bar .desk-bar__approved { background: rgba(67, 196, 122, .35); }
.desk-bar span:first-child { z-index: 1; }
@media (max-width: 1100px) { .desk-grid { grid-template-columns: minmax(0, 1fr); } .desk-side { position: static; } }

/* attachments on comments */
.att { display: flex; flex-wrap: wrap; gap: 6px; }
.att__pic { display: block; width: 88px; height: 66px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); background: #0b0b0c; }
.att__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att__file { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); font-size: 12px; text-decoration: none; color: var(--soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att__file:hover { color: var(--fg); border-color: var(--mute); }
.att--draft:empty { display: none; }
.nt-compose .row { width: 100%; }

/* client page: plan, notes, approvals */
.ca-node--tool { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: 600; color: var(--fg); }
.ca-review--partly, .ca-review--waiting { background: rgba(127, 178, 255, .12); color: var(--accent); }
.ca-chips { gap: 4px; }
.ca-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--soft); font-size: 12px; }
.ca-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pl-line { position: relative; height: 128px; margin: 6px 48px 4px; }
.pl-line__track { position: absolute; left: 0; right: 0; top: 62px; height: 4px; border-radius: 99px; background: #2a2a30; overflow: hidden; }
.pl-line__past { position: absolute; left: 0; top: 0; bottom: 0; background: var(--line2); }
.pl-dot { position: absolute; top: 57px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 3px solid var(--bg); background: var(--ok); box-shadow: 0 0 0 1px var(--line2); }
.pl-dot--d { background: var(--warm); border-radius: 3px; }
.pl-dot--f { background: var(--accent); }
.pl-dot.is-done { opacity: .45; }
.pl-dot.is-late { background: var(--err); }
.pl-dot__label { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--soft); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pl-lane-1 { bottom: auto; top: 18px; } .pl-lane-2 { bottom: 38px; } .pl-lane-3 { bottom: auto; top: 38px; }
.pl-today { position: absolute; top: 14px; bottom: 14px; width: 2px; margin-left: -1px; background: var(--fg); }
.pl-today span { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--fg); color: var(--bg); padding: 1px 6px; border-radius: 4px; animation: pl-bob 2.4s ease-in-out infinite; }
@keyframes pl-bob { 50% { transform: translate(-50%, -2px); } }
@media (prefers-reduced-motion: reduce) { .pl-today span { animation: none; } }
.pl-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 150px 26px; gap: 8px; align-items: center; }
.pl-row.is-done .input { color: var(--mute); text-decoration: line-through; }
.pl-dels { display: flex; flex-direction: column; gap: 8px; }
.pl-del { display: grid; grid-template-columns: 124px minmax(120px, 1fr) minmax(120px, 1fr) 140px minmax(120px, 1fr) 34px 26px; gap: 6px; align-items: center; padding: 8px; border-radius: 10px; background: var(--panel2); }
.pl-del .input { min-width: 0; }
.pl-del--delivered { opacity: .7; }
.pl-status { font-weight: 600; }
.pl-status--doing { color: var(--accent); } .pl-status--review { color: var(--warn); } .pl-status--approved, .pl-status--delivered { color: var(--ok); }
.pl-eye { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-eye input { display: none; }
.pl-fileinfo { grid-column: 2 / -1; display: flex; gap: 10px; align-items: center; font-size: 12px; }
@media (max-width: 1500px) { .pl-del { grid-template-columns: 124px minmax(0, 1fr) 140px 34px 26px; } .pl-spec, .pl-file { grid-column: 2 / -1; } }
.jn { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.jn.is-pinned { border-color: var(--line2); background: var(--panel2); }
.jn.is-done .jn__text { color: var(--mute); text-decoration: line-through; }
.jn__head { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.jn__head .icon-btn { opacity: .55; } .jn__head .icon-btn:hover, .jn__head .icon-btn.is-on { opacity: 1; }
.jn__kind { padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; background: #26262c; }
.jn__kind--call { color: var(--accent); } .jn__kind--idea { color: var(--warn); } .jn__kind--todo { color: var(--ok); }
.jn__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.jn-sum { border-color: #2c3a52; background: linear-gradient(180deg, #17202d, var(--panel)); }
.jn-sum__head { font-size: 16px; font-weight: 600; }
.jn-sum__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.jn-sum__cols ul { margin: 6px 0 0; padding-left: 18px; color: var(--soft); }
.jn-sum__cols li + li { margin-top: 4px; }

/* online admin */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.signin { width: min(360px, 100%); }
.signin h2 { margin: 0; }
.side__note { padding: 6px 10px; font-size: 12px; line-height: 1.4; }
.side__logout { margin-top: auto; border: 0; background: none; text-align: left; }

/* phones (mostly the online admin: desk and clients) */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100vh; }
  .main { height: auto; overflow: visible; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
  .side__brand { border: 0; padding: 4px 8px 4px 0; }
  .side__sub, .side__note, .side__head, .side__scroll { display: none; }
  .side__group, .side__group--grow { flex-direction: row; flex: none; gap: 4px; }
  .side__logout { margin-left: auto; }
  .settings { height: auto; overflow: visible; }
  .topbar { height: auto; min-height: 52px; flex-wrap: wrap; padding: 8px 12px; }
  .topbar__end { flex-wrap: wrap; }
  .desk-grid, .ca-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .desk-item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .desk-thumb { width: 64px; height: 48px; }
  .desk-when { margin-left: 0; }
  .ca-tree { display: flex; flex-direction: row; gap: 4px; overflow-x: auto; padding-bottom: 4px; position: static; max-height: none; }
  .ca-tree .ca-node { flex: none; padding-left: 10px !important; white-space: nowrap; }
  .ca-settings { grid-template-columns: minmax(0, 1fr); }
  .pl-row { grid-template-columns: 20px minmax(0, 1fr) 26px; }
  .pl-row .ca-date { grid-column: 2; }
  .pl-del { grid-template-columns: minmax(0, 1fr) 34px 26px; }
  .pl-del > * { grid-column: 1 / -1; }
  .pl-del .pl-eye { grid-column: 2; grid-row: 1; } .pl-del .icon-btn { grid-column: 3; grid-row: 1; } .pl-del .pl-status { grid-column: 1; grid-row: 1; }
  .modal { padding: 0; place-items: stretch; }
  .modal__box, .modal__box--wide { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .rv { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rv-right { max-height: none; }
  .row > .input { min-width: 0; }
}