/* A faithful, logo-free recreation of the Revit 2025+ dark UI, for marketing mock-ups.
   Structure: .rv > .rv-title, .rv-tabs, .rv-ribbon, .rv-body (.rv-left: properties + browser, .rv-canvas), .rv-viewbar, .rv-status */
.rv { min-width: 0; --rv-bg: #1e1f22; --rv-panel: #26272b; --rv-panel2: #2c2d32; --rv-line: #3a3b41; --rv-text: #d6d7db; --rv-dim: #8b8d94; --rv-sel: #2f8cff;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--rv-bg); color: var(--rv-text);
  font: 11px/1.25 "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; border: 1px solid #3c3d43;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6); user-select: none; }
.rv * { box-sizing: border-box; }
/* title bar with quick access toolbar */
.rv-title { display: flex; align-items: center; height: 28px; padding: 0 8px; background: #17181a; border-bottom: 1px solid #2c2d31; gap: 10px; }
.rv-app { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #2f8cff; color: #fff; font: 700 11px/1 "Segoe UI", Arial, sans-serif; }
.rv-qat { display: flex; gap: 6px; color: var(--rv-dim); }
.rv-qat svg { width: 13px; height: 13px; }
.rv-titletext { flex: 1; text-align: center; color: #b9bbc1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-win { display: flex; gap: 14px; color: var(--rv-dim); font-size: 12px; }
/* ribbon */
.rv-tabs { display: flex; gap: 1px; height: 24px; padding: 0 6px; background: #17181a; align-items: flex-end; overflow: hidden; }
.rv-tabs span { padding: 5px 9px 5px; color: #b9bbc1; white-space: nowrap; border-radius: 4px 4px 0 0; }
.rv-tabs span.file { background: #2f8cff; color: #fff; }
.rv-tabs span.on { background: var(--rv-panel); color: #fff; }
.rv-ribbon { display: flex; height: 70px; padding: 4px 6px 0; gap: 0; background: var(--rv-panel); border-bottom: 1px solid var(--rv-line); overflow: hidden; }
.rv-pnl { display: flex; flex-direction: column; padding: 0 8px; border-right: 1px solid var(--rv-line); }
.rv-pnl:last-child { border-right: 0; }
.rv-tools { display: flex; gap: 3px; flex: 1; align-items: flex-start; }
.rv-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 38px; padding-top: 3px; color: #c9cbd0; font-size: 9.5px; text-align: center; }
.rv-tool svg { width: 22px; height: 22px; }
.rv-tool.sm { width: auto; flex-direction: row; gap: 4px; padding: 2px 3px; font-size: 10px; }
.rv-tool.sm svg { width: 14px; height: 14px; }
.rv-col { display: grid; grid-template-rows: repeat(3, 1fr); gap: 1px; }
.rv-pnl-name { margin-top: auto; padding: 3px 0 4px; color: var(--rv-dim); font-size: 9.5px; text-align: center; white-space: nowrap; }
/* body */
.rv-body { display: grid; grid-template-columns: 34% 1fr; flex: 1; min-height: 0; }
.rv-left { display: grid; grid-template-rows: 1.15fr 1fr; min-height: 0; border-right: 1px solid var(--rv-line); background: var(--rv-panel); }
.rv-pal { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--rv-line); }
.rv-pal-h { display: flex; justify-content: space-between; align-items: center; height: 22px; padding: 0 8px; background: var(--rv-panel2); color: #e7e8eb; font-weight: 600; border-bottom: 1px solid var(--rv-line); }
.rv-pal-h i { color: var(--rv-dim); font-style: normal; }
.rv-type { display: flex; gap: 7px; align-items: center; margin: 6px; padding: 5px; border: 1px solid var(--rv-line); border-radius: 3px; background: #1f2024; }
.rv-type .ico { width: 26px; height: 26px; border-radius: 3px; background: #33353b; display: grid; place-items: center; color: #9fb7d8; }
.rv-type .ico svg { width: 16px; height: 16px; }
.rv-type b { display: block; color: #fff; font-weight: 600; }
.rv-type span { color: var(--rv-dim); font-size: 10px; }
.rv-filter { display: flex; justify-content: space-between; margin: 0 6px 4px; padding: 3px 6px; border: 1px solid var(--rv-line); border-radius: 3px; color: #c9cbd0; background: #1f2024; }
.rv-props { flex: 1; overflow: hidden; }
.rv-props .grp { padding: 3px 8px; background: #303137; color: #e7e8eb; font-weight: 600; border-top: 1px solid var(--rv-line); }
.rv-props .grp::before { content: "▾  "; color: var(--rv-dim); }
.rv-props .rv-r { display: grid; grid-template-columns: 48% 1fr; border-top: 1px solid #303136; }
.rv-props .rv-r span { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-props .rv-r span + span { border-left: 1px solid #303136; color: #fff; background: #222327; }
.rv-tree { flex: 1; overflow: hidden; padding: 4px 4px 0; }
.rv-tree div { padding: 1.5px 0 1.5px calc(var(--d, 0) * 13px + 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9cbd0; }
.rv-tree div.x::before { content: "▾ "; color: var(--rv-dim); }
.rv-tree div.c::before { content: "▸ "; color: var(--rv-dim); }
.rv-tree div.leaf::before { content: "  "; }
.rv-tree div.sel { background: rgba(47,140,255,.28); color: #fff; border-radius: 2px; }
.rv-tree div.b { font-weight: 600; color: #e7e8eb; }
/* canvas */
.rv-canvas { position: relative; min-height: 0; overflow: hidden; background: #2b2c30; }
.rv-canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-viewtab { position: absolute; top: 0; left: 0; z-index: 3; display: flex; }
.rv-viewtab span { padding: 4px 10px; background: var(--rv-panel); color: #e7e8eb; border-right: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); font-size: 10.5px; }
.rv-viewtab span.off { background: #1f2024; color: var(--rv-dim); }
.rv-sel { position: absolute; z-index: 2; border: 1.5px solid var(--rv-sel); background: rgba(47,140,255,.16); box-shadow: 0 0 0 1px rgba(47,140,255,.35), 0 0 18px rgba(47,140,255,.35); border-radius: 2px; transition: all .5s cubic-bezier(.2,.7,.2,1); }
.rv-sel::after { content: ""; position: absolute; inset: -5px; border: 1px dashed rgba(47,140,255,.6); border-radius: 3px; }
.rv-tip { position: absolute; z-index: 3; padding: 3px 6px; background: #fffbe6; color: #222; border: 1px solid #b9a84a; font-size: 10px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: all .5s cubic-bezier(.2,.7,.2,1); }
/* view cube */
.rv-cube { position: absolute; z-index: 3; right: 14px; top: 34px; width: 74px; height: 74px; perspective: 260px; }
.rv-cube .ring { position: absolute; left: 4px; right: 4px; bottom: 6px; height: 22px; border: 2px solid rgba(220,222,228,.35); border-radius: 50%; transform: rotateX(70deg); }
.rv-cube .cube { position: absolute; left: 18px; top: 10px; width: 38px; height: 38px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-38deg); }
.rv-cube .f { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #e9eaed, #c9cbd1); border: 1px solid #8e9097; color: #44464c; font: 700 7.5px/1 Arial, sans-serif; letter-spacing: .04em; }
.rv-cube .f.front { transform: translateZ(19px); }
.rv-cube .f.right { transform: rotateY(90deg) translateZ(19px); background: linear-gradient(180deg, #d9dbe0, #b8bac1); }
.rv-cube .f.top { transform: rotateX(90deg) translateZ(19px); background: #f4f5f7; }
.rv-navbar { position: absolute; z-index: 3; right: 18px; top: 118px; display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 4px; background: rgba(38,39,43,.92); border: 1px solid var(--rv-line); }
.rv-navbar i { width: 18px; height: 18px; border-radius: 3px; background: #3a3b41; }
.rv-viewbar { display: flex; align-items: center; gap: 10px; height: 22px; padding: 0 8px; background: var(--rv-panel); border-top: 1px solid var(--rv-line); color: #c9cbd0; font-size: 10px; }
.rv-viewbar .sep { width: 1px; height: 12px; background: var(--rv-line); }
.rv-viewbar svg { width: 12px; height: 12px; color: #aeb0b6; }
.rv-status { display: flex; justify-content: space-between; height: 20px; padding: 0 8px; align-items: center; background: #17181a; color: var(--rv-dim); font-size: 10px; border-top: 1px solid #2c2d31; }
.rv-status b { color: #c9cbd0; font-weight: 400; }
/* compact variant for small cards */
.rv.compact .rv-ribbon { height: 52px; }
.rv.compact .rv-tool { width: 30px; font-size: 8px; } .rv.compact .rv-tool svg { width: 17px; height: 17px; }
.rv.compact .rv-tabs span { padding: 4px 6px; font-size: 10px; }
.rv.compact { font-size: 9.5px; }
.rv.compact .rv-cube { transform: scale(.78); transform-origin: top right; right: 8px; top: 28px; }
.rv.compact .rv-navbar { display: none; }
/* light theme (Revit's default) */
.rv.light { --rv-bg: #f3f4f6; --rv-panel: #ffffff; --rv-panel2: #eef0f3; --rv-line: #d5d8de; --rv-text: #2b2d33; --rv-dim: #7a7e88; border-color: #c9ccd3; }
.rv.light .rv-title, .rv.light .rv-tabs, .rv.light .rv-status { background: #e6e8ec; border-color: #d5d8de; }
.rv.light .rv-titletext, .rv.light .rv-tabs span { color: #3a3d44; }
.rv.light .rv-tabs span.on { background: #fff; color: #111; }
.rv.light .rv-tool, .rv.light .rv-tree div, .rv.light .rv-filter, .rv.light .rv-viewbar { color: #3a3d44; }
.rv.light .rv-type, .rv.light .rv-filter { background: #fafbfc; }
.rv.light .rv-type b, .rv.light .rv-pal-h, .rv.light .rv-tree div.b { color: #111; }
.rv.light .rv-type .ico { background: #e7ebf2; color: #2f6fd0; }
.rv.light .rv-props .grp { background: #e9ebef; color: #222; }
.rv.light .rv-props .rv-r { border-color: #e3e5e9; }
.rv.light .rv-props .rv-r span + span { background: #fff; color: #111; border-color: #e3e5e9; }
.rv.light .rv-tree div.sel { background: rgba(47,140,255,.18); color: #0b3d80; }
.rv.light .rv-viewtab span { background: #fff; color: #222; } .rv.light .rv-viewtab span.off { background: #eceef1; color: #888; }
.rv.light .rv-status b { color: #3a3d44; }