:root {
  --theme: #038387; --theme-dark: #026467; --theme-darker: #014446; --theme-light: #c5e9ea; --theme-lighter: #e3f4f4; --theme-lightest: #f2fafa;
  --suite: #036c70;
  --text: #323130; --text-2: #605e5c; --text-3: #a19f9d;
  --border: #edebe9; --border-2: #e1dfdd; --bg: #ffffff; --bg-2: #faf9f8; --bg-3: #f3f2f1; --hover: #f3f2f1; --selected: #edebe9;
  --red: #a4262c; --green: #107c10; --orange: #ca5010; --blue: #0078d4; --yellow: #ffb900;
  --shadow: 0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.11);
  --shadow-lg: 0 25.6px 57.6px rgba(0,0,0,.22), 0 4.8px 14.4px rgba(0,0,0,.18);
  --font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--theme-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 14px; color: var(--text); }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }

/* ---------- Suite bar ---------- */
.suite { height: 48px; background: var(--suite); color: #fff; display: flex; align-items: center; position: sticky; top: 0; z-index: 50; }
.suite .waffle { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; }
.suite .waffle:hover, .suite .sbtn:hover { background: rgba(0,0,0,.15); }
.suite .brand { font-size: 16px; font-weight: 600; color: #fff; padding: 0 8px; white-space: nowrap; }
.suite .brand:hover { text-decoration: none; }
.suite .search { flex: 1; display: flex; justify-content: center; padding: 0 16px; }
.suite .search form { width: 100%; max-width: 560px; position: relative; }
.suite .search input { width: 100%; height: 32px; border: 0; border-radius: 4px; padding: 0 12px 0 36px; background: rgba(255,255,255,.92); outline: none; }
.suite .search input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.suite .search svg { position: absolute; left: 10px; top: 8px; color: var(--theme-dark); }
.suite .right { display: flex; align-items: center; height: 100%; }
.suite .sbtn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #fff; cursor: pointer; }
.suite .sbtn svg.i { width: 18px; height: 18px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; background: #8764b8; flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: calc(100vh - 48px); }
.leftnav { width: 220px; flex: none; background: var(--bg-2); border-right: 1px solid var(--border); padding: 8px 0; }
.leftnav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: var(--text); font-size: 14px; border-left: 3px solid transparent; }
.leftnav a:hover { background: var(--hover); text-decoration: none; }
.leftnav a.active { background: var(--selected); border-left-color: var(--theme); font-weight: 600; }
.leftnav .sep { height: 1px; background: var(--border); margin: 8px 16px; }
.leftnav .lbl { padding: 12px 20px 4px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 24px 32px 48px; flex: 1; min-width: 0; }

/* ---------- Site header ---------- */
.site-header { display: flex; align-items: center; gap: 16px; padding: 20px 32px; border-bottom: 1px solid var(--border); background: var(--bg); }
.site-logo { width: 64px; height: 64px; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; flex: none; }
.site-header h1 { margin: 0; font-size: 24px; font-weight: 600; }
.site-header .desc { color: var(--text-2); margin-top: 2px; font-size: 13px; }
.site-header .meta { margin-left: auto; display: flex; gap: 12px; align-items: center; color: var(--text-2); font-size: 13px; }

/* ---------- Command bar ---------- */
.cmdbar { flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 48px; z-index: 20; }
.cmd { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; background: none; cursor: pointer; border-radius: 2px; white-space: nowrap; color: var(--text); }
.cmd svg.i { color: var(--theme); }
.cmd:hover { background: var(--hover); }
.cmd:disabled { color: var(--text-3); cursor: default; background: none; }
.cmd:disabled svg.i { color: var(--text-3); }
.cmd.primary { color: var(--theme-dark); font-weight: 600; }
.cmdbar .spacer { flex: 1; }
.cmdbar .selcount { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--text-2); }
.cmdbar .vsep { width: 1px; height: 20px; background: var(--border-2); margin: 0 4px; }

/* ---------- Buttons & form ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 2px; border: 1px solid #8a8886; background: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--theme); border-color: var(--theme); color: #fff; }
.btn.primary:hover { background: var(--theme-dark); border-color: var(--theme-dark); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--theme-dark); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field > label { font-weight: 600; font-size: 14px; }
.field .hint { font-size: 12px; color: var(--text-2); }
.input, .field input, .field textarea, .field select { height: 32px; border: 1px solid #8a8886; border-radius: 2px; padding: 0 8px; background: #fff; outline: none; width: 100%; }
.field textarea { height: auto; min-height: 72px; padding: 6px 8px; resize: vertical; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--theme); box-shadow: inset 0 0 0 1px var(--theme); }
.row { display: flex; gap: 8px; align-items: center; }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 20px; font-weight: 600; margin: 4px 0 16px; }
.crumbs a { color: var(--text); padding: 2px 6px; border-radius: 2px; }
.crumbs a:hover { background: var(--hover); text-decoration: none; }
.crumbs .chev { color: var(--text-2); font-weight: 400; }
.crumbs .cur { padding: 2px 6px; }

/* ---------- Details list ---------- */
.list-wrap { position: relative; }
table.dl { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.dl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--text); height: 42px; padding: 0 8px; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; white-space: nowrap; }
table.dl th:hover { background: var(--hover); }
table.dl th.nosort { cursor: default; }
table.dl th.nosort:hover { background: none; }
table.dl td { height: 42px; padding: 0 8px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
table.dl tr.r { cursor: default; }
table.dl tr.r:hover td { background: var(--hover); }
table.dl tr.r.sel td { background: var(--selected); }
table.dl td.c-check, table.dl th.c-check { width: 40px; text-align: center; padding: 0; }
table.dl td.c-icon, table.dl th.c-icon { width: 40px; padding: 0 4px; }
table.dl .c-name { width: auto; }
table.dl .c-mod { width: 150px; } table.dl .c-by { width: 160px; } table.dl .c-size { width: 100px; } table.dl .c-hs { width: 140px; }
table.dl .name { color: var(--text); cursor: pointer; }
table.dl .name:hover { text-decoration: underline; color: var(--theme-dark); }
table.dl .more { visibility: hidden; border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 2px; vertical-align: middle; }
table.dl tr.r:hover .more, table.dl tr.r.sel .more { visibility: visible; }
table.dl .more:hover { background: var(--border-2); }
.cb { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #8a8886; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; visibility: hidden; }
tr.r:hover .cb, tr.r.sel .cb, th .cb, .anysel .cb { visibility: visible; }
.cb.on { background: var(--theme); border-color: var(--theme); }
.cb.on::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }
.empty { text-align: center; padding: 64px 16px; color: var(--text-2); }
.empty h3 { color: var(--text); font-weight: 600; font-size: 20px; margin: 16px 0 8px; }
.empty svg.big { width: 96px; height: 96px; }
.co-badge { color: var(--red); margin-left: 6px; display: inline-flex; vertical-align: middle; }

/* ---------- File icons ---------- */
.ficon { width: 32px; height: 32px; position: relative; display: inline-block; vertical-align: middle; flex: none; }
.ficon .pg { position: absolute; top: 2px; bottom: 2px; left: 7px; right: 3px; background: #fff; border: 1px solid #c8c6c4; border-radius: 1px 6px 1px 1px; }
.ficon .tag { position: absolute; left: 0; bottom: 6px; font-size: 8px; font-weight: 700; color: #fff; padding: 1px 2px; border-radius: 2px; min-width: 15px; text-align: center; line-height: 10px; letter-spacing: -.2px; }
.ficon.lg { width: 64px; height: 72px; } .ficon.lg .pg { left: 14px; right: 6px; top: 4px; bottom: 4px; }
.ficon.lg .tag { font-size: 14px; padding: 3px 5px; line-height: 18px; bottom: 12px; min-width: 30px; }
.folder-ic { width: 32px; height: 26px; vertical-align: middle; }

/* ---------- HubSpot chip ---------- */
.hs { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.hs .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hs.synced { color: #0b6a0b; background: #dff6dd; }
.hs.pending { color: #8a5300; background: #fff4ce; }
.hs.pending .dot { animation: pulse 1s infinite alternate; }
.hs.failed { color: var(--red); background: #fde7e9; }
.hs.disabled, .hs.never { color: var(--text-2); background: var(--bg-3); }
a.hs:hover { text-decoration: none; filter: brightness(.96); }
@keyframes pulse { to { opacity: .3; } }
.hs-logo { color: #ff7a59; }

/* ---------- Cards / web parts ---------- */
.wp-title { font-size: 20px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.wp-title .act { margin-left: auto; font-size: 14px; font-weight: 400; }
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: 2fr 1fr; }
.grid.half { grid-template-columns: 1fr 1fr; }
.site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.site-card { border-radius: 4px; box-shadow: var(--shadow); background: #fff; overflow: hidden; cursor: pointer; transition: box-shadow .15s; color: var(--text); }
.site-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.site-card .banner { height: 64px; position: relative; }
.site-card .logo { position: absolute; left: 16px; bottom: -20px; width: 44px; height: 44px; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; border: 2px solid #fff; }
.site-card .body { padding: 28px 16px 16px; }
.site-card .t { font-weight: 600; font-size: 16px; }
.site-card .d { color: var(--text-2); font-size: 12px; margin-top: 4px; min-height: 16px; }
.site-card .s { color: var(--text-2); font-size: 12px; margin-top: 12px; }
.panel { border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 16px 20px; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.qlink { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
.qlink:hover { background: var(--hover); text-decoration: none; }
.qlink .ic { width: 32px; height: 32px; border-radius: 4px; background: var(--theme-lighter); color: var(--theme-dark); display: flex; align-items: center; justify-content: center; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed .when { color: var(--text-2); font-size: 12px; }
.file-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.file-tile { border: 1px solid var(--border); border-radius: 4px; padding: 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; background: #fff; }
.file-tile:hover { box-shadow: var(--shadow); }
.file-tile .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-tile .m { color: var(--text-2); font-size: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 24px; font-weight: 600; }
.stats { display: flex; gap: 32px; flex-wrap: wrap; }

/* ---------- Details pane ---------- */
.with-pane { display: flex; min-height: 100%; }
.with-pane > .content { flex: 1; }
.pane { width: 340px; flex: none; border-left: 1px solid var(--border); background: #fff; padding: 16px 20px 40px; position: sticky; top: 92px; height: calc(100vh - 92px); overflow-y: auto; }
.pane .head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.pane .head h2 { font-size: 18px; margin: 0; word-break: break-word; font-weight: 600; flex: 1; }
.pane .x { border: 0; background: none; cursor: pointer; padding: 4px; }
.pane .thumb { height: 150px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 2px; overflow: hidden; }
.pane .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pane h3 { font-size: 14px; font-weight: 600; margin: 20px 0 10px; display: flex; align-items: center; gap: 6px; }
.props { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 13px; }
.props dt { color: var(--text-2); }
.props dd { margin: 0; word-break: break-word; }
.hs-box { border: 1px solid #ffd8cc; background: #fff8f5; border-radius: 4px; padding: 12px; font-size: 13px; }
.hs-box .row { justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-3); border-radius: 12px; padding: 3px 4px 3px 10px; font-size: 12px; }
.chip button { border: 0; background: none; cursor: pointer; padding: 0 4px; color: var(--text-2); font-size: 14px; line-height: 1; }
.chip .ot { color: var(--text-2); }

/* ---------- Menus ---------- */
.menu { position: fixed; z-index: 200; background: #fff; box-shadow: var(--shadow-lg); border-radius: 2px; min-width: 200px; padding: 4px 0; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 0 12px; height: 36px; cursor: pointer; color: var(--text); }
.menu button:hover, .menu a:hover { background: var(--hover); text-decoration: none; }
.menu button svg.i { color: var(--theme); }
.menu .sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu .danger { color: var(--red); } .menu .danger svg.i { color: var(--red); }

/* ---------- Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { background: #fff; box-shadow: var(--shadow-lg); border-radius: 2px; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.dialog.wide { max-width: 760px; }
.dialog header { padding: 20px 24px 8px; display: flex; align-items: flex-start; gap: 12px; }
.dialog header h2 { margin: 0; font-size: 20px; font-weight: 600; flex: 1; }
.dialog header .x { border: 0; background: none; cursor: pointer; padding: 4px; }
.dialog .body { padding: 8px 24px 16px; overflow-y: auto; }
.dialog footer { padding: 16px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.dialog .err { color: var(--red); font-size: 13px; margin-top: 8px; }

/* ---------- Viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 250; background: #1b1a19; display: flex; flex-direction: column; }
.viewer .vbar { height: 48px; background: #292827; color: #fff; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; flex: none; }
.viewer .vbar .t { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; }
.viewer .vbar button, .viewer .vbar a { color: #fff; background: none; border: 0; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 2px; }
.viewer .vbar button:hover, .viewer .vbar a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.viewer .vbody { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; min-height: 0; }
.viewer iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer img, .viewer video { max-width: 100%; max-height: 100%; }
.viewer .textdoc { background: #fff; color: var(--text); width: min(960px, 100%); min-height: 100%; padding: 40px 56px; align-self: flex-start; white-space: pre-wrap; font-family: Consolas, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.viewer .mddoc { white-space: normal; font-family: var(--font); font-size: 15px; }
.viewer .csvdoc { background: #fff; align-self: flex-start; min-width: min(960px, 100%); padding: 16px; }
.viewer .csvdoc table { border-collapse: collapse; font-size: 13px; }
.viewer .csvdoc td, .viewer .csvdoc th { border: 1px solid var(--border-2); padding: 4px 8px; text-align: left; }
.viewer .csvdoc th { background: var(--bg-3); }
.viewer .nopv { color: #fff; text-align: center; }
.viewer .nopv p { color: #c8c6c4; }

/* ---------- Upload panel & toasts ---------- */
.uploads { position: fixed; right: 24px; bottom: 24px; width: 360px; background: #fff; box-shadow: var(--shadow-lg); z-index: 150; border-radius: 4px; overflow: hidden; }
.uploads .uh { display: flex; align-items: center; padding: 10px 14px; background: var(--bg-3); font-weight: 600; gap: 8px; }
.uploads .uh button { margin-left: auto; border: 0; background: none; cursor: pointer; }
.uploads ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.uploads li { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13px; }
.uploads .bar { height: 3px; background: var(--border); margin-top: 6px; border-radius: 2px; overflow: hidden; }
.uploads .bar i { display: block; height: 100%; background: var(--theme); transition: width .2s; }
.uploads .ok { color: var(--green); } .uploads .bad { color: var(--red); }
.toasts { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #323130; color: #fff; padding: 10px 16px; border-radius: 4px; box-shadow: var(--shadow); font-size: 13px; max-width: 520px; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }

.dropzone { position: absolute; inset: 0; border: 2px dashed var(--theme); background: rgba(3,131,135,.06); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--theme-dark); z-index: 10; pointer-events: none; min-height: 200px; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--theme-lighter), #fff 60%); }
.login .box { width: 100%; max-width: 420px; background: #fff; box-shadow: var(--shadow-lg); padding: 44px; margin: 16px; }
.login h1 { font-size: 24px; font-weight: 600; margin: 16px 0 24px; }
.login .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--theme-dark); font-size: 18px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 10px 12px; color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 400; }
.tabs a:hover { background: var(--hover); text-decoration: none; }
.tabs a.on { border-bottom-color: var(--theme); font-weight: 600; }
table.simple { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple th { text-align: left; font-weight: 600; padding: 8px; border-bottom: 1px solid var(--border-2); }
table.simple td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
code, .mono { font-family: Consolas, Menlo, monospace; font-size: 12px; background: var(--bg-3); padding: 1px 4px; border-radius: 2px; word-break: break-all; }
.callout { background: var(--theme-lightest); border-left: 3px solid var(--theme); padding: 12px 16px; margin: 12px 0; font-size: 13px; }
.callout.warn { background: #fff4ce; border-color: var(--yellow); }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps code { white-space: nowrap; word-break: normal; display: inline-block; margin: 1px 0; }
.steps li { counter-increment: s; position: relative; padding-left: 36px; margin-bottom: 14px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--theme); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.tree { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-2); padding: 4px 0; }
.tree div { padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tree div:hover { background: var(--hover); }
.tree div.on { background: var(--theme-lighter); font-weight: 600; }
.results { max-height: 260px; overflow-y: auto; border: 1px solid var(--border-2); margin-top: 8px; }
.results div { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.results div:hover { background: var(--hover); }
.results div.on { background: var(--theme-lighter); }
.search-result { padding: 14px 0; border-bottom: 1px solid var(--border); display: flex; gap: 14px; }
.search-result .t { font-size: 16px; font-weight: 600; cursor: pointer; color: var(--theme-dark); }
.search-result .p { color: var(--green); font-size: 12px; margin: 2px 0; }
.search-result .s { color: var(--text-2); font-size: 13px; }
.search-result mark { background: #fff100; color: inherit; }

@media (max-width: 900px) {
  .leftnav { display: none; }
  .grid.two, .grid.half { grid-template-columns: 1fr; }
  .pane { position: fixed; right: 0; top: 48px; height: calc(100vh - 48px); z-index: 60; box-shadow: var(--shadow-lg); width: min(340px, 100vw); }
  .content { padding: 16px; }
  .site-header { padding: 16px; }
  .cmdbar { padding: 0 8px; overflow-x: auto; }
  table.dl .c-by, table.dl .c-size { display: none; }
  .suite .brand { display: none; }
}
.hs.warn { color: #8a5300; background: #fff4ce; }
.conf { font-size: 11px; font-weight: 600; border-radius: 2px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; }
.conf.r { color: #fff; background: var(--red); }
.conf.c { color: #8a5300; background: #fff4ce; }
table.dl .c-type { width: 170px; }
@media (max-width: 900px) { table.dl .c-type { display: none; } }
table.dl .c-mod { width: 130px; } table.dl .c-by { width: 140px; } table.dl .c-type { width: 160px; } table.dl .c-size { width: 90px; } table.dl .c-hs { width: 130px; }
/* Details pane open: drop secondary columns so the name stays readable */
.with-pane:has(.pane:not(.hidden)) table.dl .c-by, .with-pane:has(.pane:not(.hidden)) table.dl .c-size { display: none; }