:root { --bg: #f9fbfd; --ink: #1f1f1f; --muted: #5f6368; --line: #e0e0e0; --hover: #e9eef6; --accent: #0b57d0; --pill: #c2e7ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font: 11pt/1.5 Arial, sans-serif; color: #000; }
.mi { font: 400 20px/1 "Material Symbols Outlined"; font-feature-settings: "liga"; letter-spacing: normal; text-transform: none;
      display: inline-block; white-space: nowrap; user-select: none; color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }

/* header */
header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 16px;
         background: #fff; border-bottom: 1px solid var(--line); font: 14px Roboto, Arial, sans-serif; color: var(--ink); }
.logo { flex: none; width: 28px; height: 38px; margin-right: 6px; }
.head-l { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.title-row { display: flex; align-items: center; gap: 2px; height: 26px; min-width: 0; }
.doc-name { font-size: 18px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.ib { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; padding: 0; }
.ib:hover { background: var(--hover); }
.ib .mi { font-size: 18px; }
.menubar { display: flex; height: 22px; }
.menubar > button { border: 0; background: none; padding: 0 7px; border-radius: 4px; font: 13px Roboto, Arial, sans-serif; }
.menubar > button:hover, .menubar > button.on { background: var(--hover); }
.head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid #747775;
       background: none; font: 500 14px Roboto, Arial, sans-serif; white-space: nowrap; }
.btn.blue { color: var(--accent); }
.btn.pill { border: 0; background: var(--pill); }
.btn.pill2 { border: 0; background: #d3e3fd; color: #041e49; }
.btn:hover { filter: brightness(.96); }
.split { display: inline-flex; }
.split .btn:first-child { border-radius: 20px 0 0 20px; padding-right: 12px; }
.split .btn:last-child { border-radius: 0 20px 20px 0; padding: 0 8px; border-left: 1px solid var(--bg); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 500 12px Roboto, Arial, sans-serif; color: #fff; }
.av1 { background: #7fb896; } .av2 { background: #d3e3fd; color: #041e49; } .av3 { background: #5f6368; width: 32px; font-size: 16px; }
.pdf { width: 20px; height: 20px; border-radius: 4px; background: #b30b00; color: #fff; font: 700 8px/20px Arial; text-align: center; }

/* dropdown menus */
.menu { position: fixed; z-index: 20; display: none; min-width: 240px; max-width: 480px; padding: 6px 0; background: #fff; border-radius: 4px;
        box-shadow: 0 2px 6px 2px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.3); font: 14px Roboto, Arial, sans-serif; color: var(--ink); }
.menu.open { display: block; }
.m-item { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 16px 0 12px; cursor: default; }
.m-item:hover { background: var(--hover); }
.m-item .mi { width: 20px; font-size: 18px; }
.m-label { flex: 1; white-space: nowrap; }
.m-key { margin-left: 32px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.m-item .sub { font-size: 22px; margin-right: -8px; }
.m-item.is-off, .m-item.is-off .mi, .m-item.is-off .m-key { color: #b0b3b8; }
.m-item.is-off:hover { background: none; }
.m-sep { height: 1px; margin: 6px 0; background: var(--line); }
.m-search { margin: 6px 16px; padding: 9px 8px; border-radius: 4px; background: #f1f3f4; color: var(--muted); }

/* layout */
.side { position: fixed; z-index: 3; top: 60px; bottom: 0; left: 0; width: 280px; padding: 0 12px 0 16px; font: 14px Roboto, Arial, sans-serif; color: var(--ink); }
.side.off { width: 56px; }
.side.off > :not(.back) { display: none; }
.side.off .back { transform: scaleX(-1); }
.side .back { margin: 16px 0 10px -4px; width: 40px; height: 40px; }
.side .back .mi { font-size: 24px; }
.side h2 { margin: 0 0 12px 12px; font: 500 14px Roboto, Arial, sans-serif; color: #444746; }
.tab { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 4px 0 16px; border-radius: 20px; background: #d3e3fd; color: #041e49; font-weight: 500; }
.tab .mi { color: #041e49; font-size: 18px; }
.tab span:nth-child(2) { flex: 1; }
.tab .ib .mi { font-size: 20px; }
.hint { margin: 14px 8px; font: italic 12px/1.3 Roboto, Arial, sans-serif; color: #444746; }
.rail { position: fixed; z-index: 3; top: 60px; right: 0; bottom: 0; width: 56px; padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail .ib { width: 40px; height: 40px; } .rail .ib .mi { font-size: 22px; }
.rail hr { width: 32px; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
main { max-width: 816px; min-height: 1056px; margin: 16px auto; padding: 72px 96px; background: #fff; border: 1px solid #d3d3d3; }
h1.doc-title { margin: 0 0 24px; font-size: 26pt; font-weight: 400; }
main img { max-width: 100%; height: auto; }
@media (max-width: 1400px) { body:has(.side:not(.off)) main { margin-left: 296px; margin-right: 72px; } }
@media (max-width: 1100px) { .btn.blue, .btn.pill2, #btn-meet, .av2 { display: none; } }
@media (max-width: 860px) {
  .side, .rail, .menubar, .btn, .split { display: none !important; }
  body:has(.side:not(.off)) main, main { margin: 0; padding: 24px 16px; border: 0; min-height: 0; }
}