:root { --bg:#fff; --fg:#1a1a1a; --mut:#6b7280; --line:#e5e7eb; --card:#fafafa; --hover:#f3f6fa; --acc:#2563eb; }
  @media (prefers-color-scheme: dark) { :root { --bg:#111; --fg:#eee; --mut:#9ca3af; --line:#2a2a2a; --card:#1a1a1a; --hover:#1c2128; } }
  * { box-sizing: border-box; }
  body { margin:0; font:15px/1.4 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
  header { border-bottom:1px solid var(--line); }
  .head-in { display:flex; align-items:center; gap:12px 32px; flex-wrap:wrap; max-width:1300px; margin:0 auto; padding:18px 24px; }
  .logo { display:flex; align-items:center; width:200px; flex-shrink:0; }
  .logo img { height:18px; width:auto; display:block; }
  h1 { margin:0; font-size:1.4rem; font-weight:600; }
  .bar { margin-left:auto; }
  .bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  button, .btn { font:inherit; padding:8px 14px; border:1px solid var(--line); background:var(--bg); color:var(--fg); border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block; }
  button:hover, .btn:hover { border-color:var(--acc); }
  .btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
  .layout { display:flex; gap:32px; padding:24px; max-width:1300px; margin:0 auto; }
  aside { width:200px; flex-shrink:0; font-size:.85rem; color:var(--mut); }
  aside h2 { font-size:.75rem; letter-spacing:.05em; margin:0 0 12px; text-transform:uppercase; }
  aside p { margin:0 0 10px; }
  aside .tip { margin-top:20px; }
  section { flex:1; min-width:0; }
  .panel { display:none; margin-bottom:16px; padding:16px; border:1px solid var(--line); border-radius:8px; }
  .panel.open { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .hint { color:var(--mut); font-size:.85rem; }
  input { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
  .msg { margin:0 0 16px; color:var(--acc); }
  .empty { margin-top:40px; text-align:center; color:var(--mut); }

  /* items */
  .item { position:relative; display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); }
  .item img { display:block; width:100%; object-fit:cover; cursor:zoom-in; }
  .item .name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .item .meta { color:var(--mut); font-size:.85rem; }
  .item .acts { display:flex; gap:6px; }
  .item .acts .btn, .item .acts button { padding:3px 8px; font-size:.8rem; }
  .info { padding:8px 10px; }

  .v-grid .items  { display:grid; grid-template-columns:repeat(auto-fill,160px); gap:16px; }
  .v-grid .item img { height:130px; }
  .v-large .items { display:grid; grid-template-columns:repeat(auto-fill,250px); gap:16px; }
  .v-large .item img { height:200px; }
  .v-grid .info, .v-large .info { display:flex; flex-direction:column; gap:6px; }
  .v-grid .item .size, .v-large .item .size { display:none; }

  .v-list .head, .v-list .item { display:grid; grid-template-columns:48px 1fr 90px 90px 84px; gap:12px; align-items:center; }
  .v-list .head { padding:8px 10px; font-weight:600; border-bottom:1px solid var(--line); }
  .v-list .item { border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; padding:6px 10px; }
  .v-list .item:hover { background:var(--hover); }
  .v-list .item img { width:44px; height:36px; border-radius:3px; border:1px solid var(--line); }
  .v-list .info { display:contents; }
  .v-list .item .meta { grid-column:auto; }
  .v-list .acts { display:flex; justify-content:flex-end; gap:4px; }
  .head { display:none; }
  .v-list .head { display:grid; }
  .v-list .item .date { order:0; }

  #lb { position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9; cursor:zoom-out; }
  #lb.open { display:flex; }
  #lb img { max-width:95vw; max-height:95vh; }

  @media (max-width: 760px) {
    .layout { flex-direction:column; gap:16px; padding:16px; }
    aside { width:auto; display:flex; flex-wrap:wrap; gap:4px 16px; }
    aside h2, aside .tip { display:none; }
    aside p { margin:0; }
    .v-large .items { grid-template-columns:repeat(auto-fill,minmax(160px,250px)); }
    .v-list .head, .v-list .item { grid-template-columns:48px 1fr 70px 68px; }
    .layout.authed.v-list .head, .layout.authed.v-list .item { grid-template-columns:24px 48px 1fr 70px 68px; }
    .v-list .head .h-date, .v-list .item .date { display:none; }
  
  }

/* view dropdown */
.dropdown { position:relative; }
.view-btn { display:flex; align-items:center; justify-content:center; padding:8px 11px; }
#view-icon { display:flex; align-items:center; justify-content:center; }
.view-btn svg { display:block; }
.caret { border:4px solid transparent; border-top-color:var(--mut); margin-top:4px; }
.menu { position:absolute; right:0; top:calc(100% + 8px); min-width:170px; padding:6px 0; background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.15); z-index:5; }
.menu[hidden] { display:none; }
.menu button { display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:0; padding:9px 16px; text-align:left; }
.menu button:hover, .menu button.on { background:var(--hover); }
.view-btn svg, .menu svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0; }
svg.solid rect { fill:currentColor; stroke:none; }
aside p { display:flex; align-items:center; gap:10px; }
aside svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; flex-shrink:0; }

@media (max-width: 760px) { .logo { width:auto; } .head-in { gap:12px 16px; } }

/* folders + selection */
.inline { display:inline; margin:0; }


select { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
button:disabled { opacity:.5; cursor:default; }
button:disabled:hover { border-color:var(--line); }
.movebar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:.9rem; }
.movebar label { display:flex; gap:6px; align-items:center; }
.movebar #sel-count { color:var(--mut); margin-right:auto; }
.sel { position:absolute; top:8px; left:8px; z-index:2; display:flex; padding:3px; border-radius:4px; background:rgba(255,255,255,.9); }
.sel:empty { display:none; }
.sel input { margin:0; width:16px; height:16px; cursor:pointer; }
.item.selected { outline:2px solid var(--acc); outline-offset:-1px; }
.item.folder { text-decoration:none; color:inherit; }
.item.folder:hover { border-color:var(--acc); }
.fico { display:flex; align-items:center; justify-content:center; }
.v-grid .fico { height:130px; }
.v-large .fico { height:200px; }
.v-grid .item.folder .size, .v-large .item.folder .size { display:block; }
.v-list .fico { width:44px; height:36px; border-radius:3px; }

.v-list .sel { position:static; padding:0; background:none; }
.v-list .sel:empty { display:block; }
.layout.authed.v-list .head, .layout.authed.v-list .item { grid-template-columns:24px 48px 1fr 90px 90px 84px; }
.v-list .item.selected { outline-offset:-2px; }

/* nesting, drag & drop, danger */
a.name { display:block; color:inherit; text-decoration:none; }
.item.folder { cursor:pointer; }
.item[draggable="true"] { cursor:grab; }
.dropping { outline:2px dashed var(--acc); outline-offset:-2px; background:var(--hover); }

button.danger:not(:disabled):hover { border-color:#dc2626; color:#dc2626; }


/* folder icon image */
.layout .item .fico img { width:auto; height:30%; border:0; cursor:inherit; object-fit:contain; }
.layout.v-list .fico img { height:28px; }

/* breadcrumbs above the files */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0 0 16px; font-size:.95rem; }
.crumbs .crumb { color:var(--acc); text-decoration:none; padding:2px 4px; border-radius:4px; }
.crumbs .crumb:hover { text-decoration:underline; }
.crumbs .sep { color:var(--mut); }
.crumbs .current { font-weight:600; padding:2px 4px; }
.crumbs .crumb.dropping { outline-offset:0; }

/* compact action buttons in the small grid */
.v-grid .item .acts { gap:4px; }
.v-grid .item .acts .btn, .v-grid .item .acts button { padding:2px 6px; font-size:.7rem; line-height:1.3; border-radius:4px; white-space:nowrap; }
.v-grid .info { padding:6px 8px; }

/* view menu opens under its button; app.js adds .menu-left when it would run off the left edge */
.menu.menu-left { left:0; right:auto; }
@media (max-width: 760px) {
  .bar { margin-left:0; width:100%; }
}
@media (max-width: 760px) {
  .layout.authed.v-list .head, .layout.authed.v-list .item { grid-template-columns:24px 48px 1fr 70px 68px; }
}

/* single-image viewer */
body.viewer-page { background:#f1f2f4; min-height:100vh; display:flex; flex-direction:column; }
@media (prefers-color-scheme: dark) { body.viewer-page { background:#0b0b0b; } }
.vbar { display:flex; align-items:center; gap:14px; height:52px; padding:0 16px; background:var(--bg); border-bottom:1px solid var(--line); }
.vbar .logo { width:auto; }
.vsep { width:1px; height:28px; background:var(--line); flex-shrink:0; }
.vname { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vcount { color:var(--mut); font-size:.85rem; white-space:nowrap; }
.vacts { margin-left:auto; display:flex; gap:8px; align-items:center; }
.vclose { padding:2px 12px; font-size:1.4rem; line-height:1.3; }
.vstage { position:relative; flex:1; display:flex; align-items:center; justify-content:center; padding:16px 64px; min-height:0; }
.vstage > img { max-width:100%; max-height:calc(100vh - 52px - 56px - 32px); object-fit:contain; box-shadow:0 2px 16px rgba(0,0,0,.18); background:var(--bg); }
.vnav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); border:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:1.6rem; line-height:1; }
.vnav:hover { border-color:var(--acc); }
.vprev { left:12px; }
.vnext { right:12px; }
.vfoot { height:56px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--mut); font-size:.9rem; background:var(--bg); border-top:1px solid var(--line); }
.vfoot img { height:20px; width:auto; }
@media (max-width: 760px) {
  .vbar { flex-wrap:wrap; height:auto; gap:6px 8px; padding:8px 10px; }
  .vbar .logo img { height:14px; }
  .vsep { display:none; }
  .vname { order:5; flex:1 1 calc(100% - 90px); font-size:.85rem; }
  .vcount { order:6; }
  .vacts .btn, .vacts button { white-space:nowrap; padding:6px 10px; }
  .vclose { padding:2px 10px; }
  .vstage > img { max-height:calc(100vh - 100px - 56px - 24px); }
  .vstage { padding:12px 8px; }
  .vnav { width:34px; height:34px; opacity:.9; }
  .vprev { left:6px; } .vnext { right:6px; }
}

.vnav svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* viewer: stage + comments side panel */
.vmain { flex:1; display:flex; min-height:0; }
.vmain .vstage { flex:1; min-width:0; }
.vpanel { width:340px; flex-shrink:0; display:flex; flex-direction:column; background:var(--bg); border-left:1px solid var(--line); max-height:calc(100vh - 52px - 56px); }
body.no-comments .vpanel { display:none; }
.vphead { padding:14px 16px; font-weight:600; border-bottom:1px solid var(--line); }
.cnum { color:var(--mut); font-weight:400; margin-left:4px; }
.vlist { flex:1; overflow:auto; padding:8px 16px; }
.vnote { color:var(--mut); font-size:.9rem; text-align:center; margin:24px 0; }
.vnote small { color:var(--mut); word-break:break-word; }
.comment { display:flex; gap:10px; padding:10px 0; }
.comment + .comment { border-top:1px solid var(--line); }
.avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.9rem; }
.av0 { background:#2563eb; } .av1 { background:#0d9488; } .av2 { background:#9333ea; } .av3 { background:#db2777; }
.av4 { background:#ea580c; } .av5 { background:#16a34a; } .av6 { background:#0891b2; } .av7 { background:#b45309; }
.cbody { min-width:0; flex:1; }
.cbody p { margin:2px 0 0; font-size:.9rem; overflow-wrap:anywhere; }
.chead { display:flex; align-items:baseline; gap:8px; font-size:.9rem; }
.ctime { color:var(--mut); font-size:.78rem; }
.linkbtn { border:0; background:none; padding:0; color:var(--mut); font-size:.78rem; cursor:pointer; margin-left:auto; text-decoration:underline; }
.linkbtn:hover { color:#dc2626; border:0; }
.cform { display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.cform .msg { margin:0; font-size:.85rem; }
.cform textarea { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); resize:vertical; min-height:70px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
@media (max-width: 760px) {
  .vmain { flex-direction:column; }
  .vpanel { width:100%; border-left:0; border-top:1px solid var(--line); max-height:none; }
  .vlist { overflow:visible; }
}

/* comments icon + thin close X in the viewer bar */
.vacts .cbtn { width:40px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.bubble { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:17px; padding:0 4px; margin-bottom:5px; border-radius:3px; background:var(--fg); color:var(--bg); font-size:.7rem; font-weight:700; line-height:1; }
.bubble::after { content:''; position:absolute; left:4px; bottom:-5px; border-style:solid; border-width:6px 6px 0 0; border-color:var(--fg) transparent transparent transparent; }
.vacts .vclose { display:flex; align-items:center; justify-content:center; padding:6px 8px; border:0; background:none; color:#9ca3af; font-size:inherit; line-height:1; text-decoration:none; }
.vacts .vclose:hover { color:var(--fg); }
.vclose svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* comments panel: heading, composer card, comment cards on gray */
body.viewer-page { background:#f3f3f3; }
.vpanel { width:360px; background:#f3f3f3; border-left:0; padding:20px 16px; gap:12px; overflow-y:auto; }
.vphead { margin:0; padding:0; border:0; font-size:.95rem; font-weight:700; }
.vpanel .msg { margin:0; font-size:.85rem; }
.composer { background:var(--bg); border:1px solid #e3e3e3; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:12px 14px; }
.crow { display:flex; align-items:center; gap:12px; }
.crow textarea { flex:1; min-width:0; border:0; outline:0; background:transparent; resize:none; font:inherit; color:var(--fg); padding:6px 0; line-height:1.4; max-height:160px; overflow-y:auto; }
.crow textarea::placeholder { color:#9ca3af; }
.avatar.ph { background:#e2e4e8; border:1px solid #d3d6db; overflow:hidden; }
.avatar.ph svg { width:100%; height:100%; fill:#bcc0c7; display:block; }
.whoami { border:0; background:none; padding:4px; color:#6b7280; display:flex; cursor:pointer; }
.whoami:hover { color:var(--fg); border:0; }
.whoami svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.cextra { display:none; gap:8px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.composer.open .cextra { display:flex; }
.cextra input { flex:1; min-width:0; }
.vpanel .vlist { flex:none; overflow:visible; padding:0; }
.vpanel .comment { background:var(--bg); border:1px solid #e3e3e3; border-radius:4px; padding:12px 14px; margin-bottom:10px; }
.vpanel .comment + .comment { border-top:1px solid #e3e3e3; }
@media (prefers-color-scheme: dark) {
  body.viewer-page, .vpanel { background:#141414; }
  .composer, .vpanel .comment, .vpanel .comment + .comment { border-color:var(--line); }
  .avatar.ph { background:#2a2a2a; border-color:#3a3a3a; }
  .avatar.ph svg { fill:#555; }
}
@media (max-width: 760px) {
  .vpanel { width:100%; padding:16px 12px; overflow-y:visible; }
}
/* the panel is an <aside>, so undo the gallery sidebar's heading/text styling */
.vpanel { color:var(--fg); font-size:.95rem; }
.vpanel .vphead { text-transform:none; letter-spacing:0; color:var(--fg); font-size:1rem; font-weight:700; margin:0; }
.vpanel p { display:block; margin:0; }
.vpanel .cbody p { margin:2px 0 0; font-size:.92rem; }
.vpanel .vnote { text-align:center; color:var(--mut); margin:24px 0; }
.vpanel .avatar.ph svg, .vpanel .whoami svg { display:block; }
.vpanel .avatar.ph svg { width:100%; height:100%; }
.vpanel .whoami svg { width:22px; height:22px; }

/* upload progress card + drop overlay */
.upl[hidden], #dropzone[hidden] { display:none; }
.upl { position:fixed; right:16px; bottom:16px; width:320px; max-width:calc(100vw - 32px); padding:14px 16px; background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.2); z-index:20; }
.uptitle { font-weight:600; font-size:.9rem; }
.upbar { height:8px; margin:10px 0 6px; border-radius:4px; background:var(--hover); overflow:hidden; }
.upbar i { display:block; width:0; height:100%; background:var(--acc); transition:width .15s; }
.upbar.err i { background:#dc2626; }
.upsub { color:var(--mut); font-size:.8rem; }
.upcancel { margin-top:10px; padding:4px 10px; font-size:.8rem; }
#dropzone { position:fixed; inset:0; z-index:15; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:36px; background:rgba(37,99,235,.08); border:3px dashed var(--acc); }
.dztext { padding:10px 20px; border-radius:999px; background:var(--acc); color:#fff; font-weight:600; }
.item.folder.dropping { background:var(--hover); }
@media (max-width: 760px) { .upl { right:12px; left:12px; bottom:12px; width:auto; max-width:none; } }

/* big upload drop box */
.panel.upbox { position:relative; border:2px dashed #a9bde6; border-radius:24px; padding:36px 24px 28px; background:linear-gradient(180deg, var(--bg), var(--hover)); box-shadow:0 6px 24px rgba(37,99,235,.06); }
.panel.upbox.open { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; text-align:center; gap:0; }
.panel.upbox.over { border-color:var(--acc); background:rgba(37,99,235,.07); }
.upicon { width:140px; height:auto; margin-bottom:6px; }
.uph { margin:10px 0 6px; font-size:1.35rem; font-weight:700; color:var(--fg); }
.upsub2 { margin:0 0 20px; color:var(--mut); }
.upchoose { padding:12px 34px; font-size:1rem; font-weight:600; border-radius:6px; }
.upnote { margin:26px 0 0; color:var(--mut); font-size:.8rem; }
.upclose { position:absolute; top:10px; right:14px; width:32px; height:32px; padding:0; border:0; background:none; color:#9ca3af; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.upclose svg, .authx svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; display:block; }
.upclose:hover { color:var(--fg); border:0; }
@media (max-width: 760px) { .panel.upbox { padding:28px 16px 22px; border-radius:18px; } .uph { font-size:1.15rem; } }

/* view menu icons: outlined 2x2, solid 3x3, list with square bullets */
.menu svg rect { stroke-width:1.8; }
.menu svg.solid rect, .view-btn svg.solid rect { fill:currentColor; stroke:none; }

/* icon buttons on file cards */
.layout .item .acts .ibtn { width:30px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:var(--fg); }
.ibtn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.ibtn .chk { display:none; color:#16a34a; }
.ibtn.done .chk { display:block; }
.ibtn.done svg:not(.chk) { display:none; }

/* sidebar Upload button + "+" menu */
.sidebtn { display:flex; gap:6px; margin-bottom:22px; width:calc(18px * 782 / 86); /* = the logo's width at its 18px height */ }
.sidebtn .sideup { flex:1; min-width:0; padding:8px 10px; font-weight:600; border-radius:4px; }
.plus { position:relative; }
.plusbtn { width:36px; height:100%; padding:0; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.plusbtn svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; }
.plus .menu { right:0; min-width:170px; color:var(--fg); font-size:.95rem; }
.plus .menu svg { stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 760px) { .sidebtn { width:100%; margin-bottom:4px; } }

/* image page: more-options button + menu, dialogs, lock screen */
.morebtn { width:40px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:var(--fg); }
.morebtn svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; display:block; }
.more .menu { right:0; min-width:210px; color:var(--fg); font-size:.95rem; }
.more .menu button, .more .menu a[role=menuitem] { display:flex; align-items:baseline; gap:8px; width:100%; padding:9px 18px; border:0; border-radius:0; background:none; color:var(--fg); text-align:left; text-decoration:none; cursor:pointer; font:inherit; }
.more .menu button:hover, .more .menu a[role=menuitem]:hover { background:var(--hover); }
.menu .tag { color:var(--acc); font-size:.78rem; }
.more .menu .danger { color:#dc2626; }
.dlg { width:min(420px, calc(100vw - 32px)); padding:20px 22px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.dlg::backdrop { background:rgba(0,0,0,.4); }
.dlg h3 { margin:0 0 8px; font-size:1.1rem; }
.dlg p { margin:0 0 12px; color:var(--mut); font-size:.9rem; }
.dlg input[type=password], .dlg select { width:100%; padding:9px 10px; }
.dlgbtns { display:flex; flex-direction:row-reverse; justify-content:flex-start; gap:8px; margin-top:16px; }
table.stats { width:100%; border-collapse:collapse; font-size:.92rem; }
table.stats td { padding:7px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.stats td:first-child { color:var(--mut); width:34%; }
table.stats small { color:var(--mut); }
.gate { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.gatebox { display:flex; flex-direction:column; align-items:stretch; gap:10px; width:min(360px, 100%); padding:28px 24px; text-align:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.gatebox h1 { margin:0; font-size:1.25rem; }
.gatebox p { margin:0; color:var(--mut); }
.gatebox .msg { color:#dc2626; }
.gateic { width:36px; height:36px; margin:0 auto; fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lockic { width:13px; height:13px; margin-right:5px; vertical-align:-1px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }

/* dialogs made by askDialog() (rename / delete) */
.dlg input[type=text] { width:100%; padding:9px 10px; }
.btn.danger { background:#dc2626; border-color:#dc2626; color:#fff; }
.btn.danger:hover { border-color:#b91c1c; background:#b91c1c; }

.vflag { padding:2px 9px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:.75rem; white-space:nowrap; }
@media (prefers-color-scheme: dark) { .vflag { background:#3b2f0a; color:#fcd34d; } }
@media (max-width: 760px) { .vflag { order:6; } }

/* ---------- accounts: sign-up box, landing page, account menu ---------- */
.authdlg { position:relative; width:min(900px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:14px; overflow:auto; background:var(--bg); color:var(--fg); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.authdlg::backdrop { background:rgba(0,0,0,.5); }
.authgrid { display:grid; grid-template-columns:1fr 1fr; min-height:540px; }
.authleft { padding:44px 44px 28px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.authleft h2 { margin:0 0 6px; text-align:center; font-size:1.65rem; font-weight:700; }
.authsub { margin:0 0 24px; text-align:center; color:var(--mut); font-size:.92rem; }
.authx { position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:rgba(255,255,255,.9); color:#374151; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.soc { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin-bottom:12px; padding:13px 14px; font-size:1rem; }
.soc svg { width:20px; height:20px; fill:currentColor; stroke:none; flex-shrink:0; }
.soc.email svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.soc[disabled] { opacity:.6; cursor:not-allowed; }
.soc[disabled]:hover { border-color:var(--line); }
.soon { padding:1px 8px; border-radius:999px; background:var(--hover); color:var(--mut); font-size:.68rem; white-space:nowrap; }
.author { display:flex; align-items:center; gap:12px; margin:6px 0 16px; color:var(--mut); font-size:.78rem; }
.author::before, .author::after { content:''; flex:1; height:1px; background:var(--line); }
.authform { display:flex; flex-direction:column; gap:10px; }
.authform label { font-weight:600; font-size:.9rem; }
.authform input { padding:12px; }
.authform .btn.primary, .authform > button { padding:12px; font-weight:600; }
.authfoot { margin:14px 0 0; text-align:center; color:var(--mut); font-size:.88rem; }
.authfoot a { color:var(--acc); text-decoration:none; }
.authfoot a:hover { text-decoration:underline; }
.authmsg { margin:0 0 16px; padding:10px 12px; border-radius:8px; font-size:.9rem; }
.authmsg.err { background:#fef2f2; color:#b91c1c; }
.authmsg.ok { background:#ecfdf5; color:#047857; }
.authright { display:flex; flex-direction:column; justify-content:center; padding:44px 38px; color:#0f2a5c; background:linear-gradient(160deg, #d6e8ff 0%, #9cc7ff 55%, #66a9fb 100%); }
.authright h2 { margin:0 0 22px; font-size:2rem; line-height:1.2; }
.authright h2 span { color:#1d4ed8; }
.authright ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; font-size:1rem; }
.authright li { display:flex; align-items:flex-start; gap:12px; }
.authright .tick { flex-shrink:0; width:20px; height:20px; margin-top:1px; }
.authright .tick circle { fill:#1d4ed8; }
.authright .tick path { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-color-scheme: dark) {
  .authmsg.err { background:#3b1414; color:#fca5a5; }
  .authmsg.ok { background:#0f2f24; color:#6ee7b7; }
}
@media (max-width: 760px) {
  .authgrid { grid-template-columns:1fr; min-height:0; }
  .authright { display:none; }
  .authleft { padding:48px 22px 24px; }
}

/* landing page */
.landing .hero { max-width:760px; margin:0 auto; padding:72px 20px 40px; text-align:center; }
.landing .hero h1 { margin:0 0 16px; font-size:clamp(2rem, 6vw, 3.2rem); line-height:1.15; font-weight:800; }
.landing .hero h1 span { color:var(--acc); }
.landing .hero p { margin:0 auto 28px; max-width:560px; color:var(--mut); font-size:1.1rem; }
.landing .hero .herosub { margin:18px auto 0; font-size:.95rem; }
.landing .hero .herosub a { color:var(--acc); text-decoration:none; }
.btn.big { padding:14px 28px; font-size:1.05rem; font-weight:600; border-radius:8px; }
.feats { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; max-width:960px; margin:0 auto; padding:20px 20px 72px; }
.feats div { padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.feats h3 { margin:0 0 8px; font-size:1.05rem; }
.feats p { margin:0; color:var(--mut); font-size:.92rem; }
.notice { max-width:520px; margin:18px auto 0; padding:10px 14px; border-radius:8px; background:var(--hover); text-align:center; }

/* account menu + dialog */
.acctbtn { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px; }
.acctbtn .avatar { width:28px; height:28px; font-size:.8rem; }
.acctname { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.acct .menu { right:0; min-width:230px; }
.acct .menu form { margin:0; }
.acctinfo { display:flex; flex-direction:column; gap:2px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--mut); overflow-wrap:anywhere; }
.acctinfo b { color:var(--fg); }
.acctdlg { width:min(460px, calc(100vw - 32px)); max-height:90vh; overflow:auto; }
.acctdlg .authform { margin:16px 0 0; }
.acctdlg .danger-zone { padding-top:14px; border-top:1px solid var(--line); }
.sharerow { display:flex; gap:8px; margin:8px 0 4px; }
.sharerow input { flex:1; min-width:0; padding:9px 10px; }
.quota { overflow-wrap:anywhere; }
.vfoot a { color:inherit; text-decoration:none; }
.vfoot a:hover { text-decoration:underline; }
.soonnote { margin:-2px 0 4px; text-align:center; color:var(--mut); font-size:.78rem; }
.soc[disabled] { white-space:nowrap; }

/* "Continue with Google" is a link when sign-in is set up, so give it the same look as the (disabled) buttons */
a.soc { box-sizing:border-box; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer; font:inherit; font-size:1rem; }
a.soc:hover { border-color:var(--acc); }
.authform .hint { margin:0; color:var(--mut); font-size:.85rem; }

/* ---------- libraries list (sidebar) ---------- */
.libs { display:flex; flex-direction:column; gap:2px; margin-bottom:22px; width:calc(18px * 782 / 86); max-width:100%; }
aside .libs h2 { margin:0 0 8px; font-size:.85rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--mut); }
.lib { display:flex; align-items:center; gap:10px; padding:7px 0; color:var(--fg); text-decoration:none; font-size:.95rem; }
.lib svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
a.lib:hover { color:var(--acc); }
.lib.on { color:var(--acc); }
.lib.soon { color:var(--mut); cursor:default; }
.lib i { margin-left:auto; padding:1px 7px; border-radius:999px; background:var(--hover); color:var(--mut); font-size:.7rem; font-style:normal; }
@media (max-width: 760px) { .libs { flex-direction:row; flex-wrap:wrap; gap:4px 16px; width:100%; margin-bottom:4px; } aside .libs h2 { display:none; } }

/* ---------- Share box (picture page) ---------- */
.sharedlg { width:min(540px, calc(100vw - 24px)); box-sizing:border-box; position:relative; overflow:visible; padding:36px 44px 30px; border:0; border-radius:4px; }
.sharedlg [hidden] { display:none !important; }
.sharedlg h3 { margin:0 30px 18px 0; font-size:1.2rem; line-height:1.3; font-weight:700; overflow-wrap:anywhere; }
.sdx { position:absolute; top:14px; right:14px; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; border:0; background:none; color:#9aa3b2; }
.sdx:hover { color:var(--fg); border:0; }
.sdx svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.stabs { display:flex; gap:26px; margin:0 0 22px; border-bottom:1px solid var(--line); }
.stabs button { padding:8px 0 10px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--fg); white-space:nowrap; font-size:.95rem; }
.stabs button:hover { border-color:transparent; }
.stabs button.on { color:var(--acc); border-bottom-color:var(--acc); }
.sharedlg input[type=text], .sharedlg textarea, .sharedlg input[type=password] { display:block; width:100%; box-sizing:border-box; padding:9px 14px; margin:0 0 12px; font:inherit; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); }
.sharedlg textarea { resize:none; min-height:84px; }
.sharedlg input:focus, .sharedlg textarea:focus { outline:0; border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.sharedlg .btn.primary { padding:8px 26px; border-radius:3px; font-weight:500; }
.sopts { display:flex; flex-direction:column; gap:10px; margin:20px 0 4px; font-size:.95rem; }
.advl { font-size:.92rem; }
.sopts .opt { display:flex; align-items:center; gap:8px; }
.sopts .opt input[type=checkbox] { width:16px; height:16px; margin:0 4px 0 0; }
.sopts .num, .sopts .unit { padding:6px 8px; margin:0; font:inherit; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); }
.sopts .num { width:62px; }
.sopts .unit { width:96px; }
.optnote { margin:0; color:var(--mut); font-size:.82rem; }
.sopts .optnote { margin:-4px 0 0 28px; }
.sbtnrow { display:flex; justify-content:center; margin:22px 0 20px; }
.genbtn { padding:8px 36px !important; }
.linkrow { margin:0; }
.linkrow input { margin:0 !important; border-radius:3px 0 0 3px !important; }
.linkrow button { border-radius:0 3px 3px 0; border-color:#b9c6d8; border-left:0; padding:9px 18px; color:var(--mut); }
.smsg { margin:0 0 14px; padding:8px 12px; border-radius:3px; background:var(--hover); color:var(--fg); font-size:.9rem; }
.intro { margin:0 0 14px; color:var(--fg); font-size:.92rem; }
.invrow { display:flex; gap:10px; }
.invrow input { flex:1; min-width:0; margin:0 !important; }
.invlist { min-height:150px; margin:14px 0; border:1px solid #b9c6d8; border-radius:3px; }
.invnone { margin:0; padding:60px 12px; text-align:center; color:var(--mut); }
.invitem { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; padding:9px 12px; border-bottom:1px solid var(--line); font-size:.92rem; overflow-wrap:anywhere; }
.invitem:last-child { border-bottom:0; }
/* privacy: label + dropdown button, and the menu that opens under it */
.privpane { min-height:290px; }
.privrow { display:flex; align-items:center; gap:14px; margin:0 0 12px; }
.privrow > span { white-space:nowrap; color:var(--mut); }
.pdrop { position:relative; flex:1; min-width:0; }
.pbtn { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:8px 12px; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); text-align:left; }
.pbtn:hover { border-color:#b9c6d8; }
.pbtn[aria-expanded=true] { border-color:var(--acc); }
.pbtn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcaret { flex-shrink:0; border:5px solid transparent; border-top-color:var(--mut); margin-top:5px; }
.pmenu { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:6; padding:8px 0; background:var(--bg); border:1px solid var(--line); border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.pmenu button { display:block; width:100%; padding:9px 16px; border:0; border-radius:0; background:none; color:var(--fg); text-align:left; font-size:.95rem; }
.pmenu button:hover, .pmenu button.on { background:var(--hover); }
.pmenu button.on { color:var(--acc); }
@media (max-width: 520px) { .sharedlg { padding:30px 20px 24px; } .stabs { gap:14px; overflow-x:auto; } .privrow { flex-direction:column; align-items:stretch; gap:6px; } }

/* ---------- workspace switcher (top of the sidebar) ---------- */
.wsw { margin-bottom:18px; width:80%; }
.wsbtn { display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px; text-align:left; border-radius:6px; }
.wsav { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--acc); font-weight:600; font-size:.95rem; }
.wstxt { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25; }
.wstxt b { color:var(--fg); font-size:.9rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wstxt small { color:var(--mut); font-size:.75rem; white-space:nowrap; }
.wscaret { flex-shrink:0; border:5px solid transparent; border-top-color:var(--fg); margin-top:5px; }
.wsmenu { position:absolute; left:0; top:calc(100% + 6px); z-index:7; width:270px; background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); color:var(--fg); }
.wsmenu[hidden] { display:none; }
.wshead { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--mut); }
.wsadd { border:0; background:none; padding:0; color:var(--acc); font-size:.85rem; }
.wsadd:hover { border:0; text-decoration:underline; }
.wslist { margin:0; padding:10px; max-height:260px; overflow:auto; }
.wsitem { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 4px; padding:8px 10px; border:1px solid transparent; border-radius:6px; background:none; text-align:left; }
.wsitem:hover { background:var(--hover); border-color:transparent; }
.wsitem.on { background:#eaf1ff; }
@media (prefers-color-scheme: dark) { .wsitem.on { background:#16233f; } }
.wschk { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--acc); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wsfoot { padding:6px 10px 12px; }
.wsinv { display:block; width:100%; box-sizing:border-box; padding:9px 12px; text-align:center; }
.wsinv[disabled] { opacity:.55; cursor:not-allowed; }
.wsinv i { margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.25); font-size:.7rem; font-style:normal; }
.wsmanage { display:flex; justify-content:center; gap:18px; margin-top:10px; }
.wsmanage .linkbtn { margin:0; font-size:.82rem; }
@media (max-width: 760px) { .wsw { width:100%; margin-bottom:4px; } .wsmenu { width:min(300px, calc(100vw - 32px)); } }

/* workspace tiles can show a logo */
.wsav img { display:block; width:100%; height:100%; object-fit:contain; border-radius:5px; }
.wsinv { display:block; text-align:center; text-decoration:none; }

/* ---------- Workspace Settings page ---------- */
.wsset { padding:0 0 80px; }
.lib.settingslink { margin-top:14px; }
.wsset h1 { margin:0; font-size:1.7rem; }
.setwho { margin:4px 0 0; color:var(--mut); }
.settabs { display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 8px; padding:0 0 18px; border-bottom:1px solid var(--line); }
.settabs a { padding:8px 14px; border-radius:6px; color:var(--fg); text-decoration:none; }
.settabs a:hover { background:var(--hover); }
.settabs a.on { background:#eaf1ff; color:var(--acc); }
@media (prefers-color-scheme: dark) { .settabs a.on { background:#16233f; } }
.setmsg { margin:14px 0 0; padding:10px 14px; border-radius:6px; background:var(--hover); }
.setsec { display:grid; grid-template-columns:minmax(0, 480px) minmax(0, 1fr); gap:24px 48px; padding:30px 0; border-bottom:1px solid var(--line); }
.setsec:last-child { border-bottom:0; }
.setsec h2 { margin:0 0 14px; font-size:1.2rem; }
.setsec p { margin:0 0 14px; }
.setsec .note { color:var(--mut); font-size:.88rem; }
.sethint { margin:0; padding-top:48px; color:var(--mut); font-size:.9rem; max-width:300px; }
.setsec [hidden] { display:none !important; }
.setsec input[type=text], .setsec input[type=password], .setsec select { display:block; width:100%; max-width:400px; box-sizing:border-box; margin:0 0 14px; padding:9px 12px; font:inherit; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); }
.setsec .radio { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.setsec .radio input { width:16px; height:16px; margin:0; }
.setsec .btn.primary { margin-top:6px; padding:8px 22px; border-radius:3px; }
.logorow { display:flex; align-items:center; gap:24px; margin:0 0 6px; }
.logobox { display:flex; align-items:center; justify-content:center; width:100px; height:100px; border:1px solid var(--line); background:var(--bg); }
.logobox img { max-width:100%; max-height:100%; }
.rmlogo { margin:0; }
.invrow2 input { display:inline-block; }
.settable { width:100%; border-collapse:collapse; font-size:.92rem; }
.settable th { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--mut); font-weight:500; }
.settable td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
.settable td span { display:block; color:var(--mut); font-size:.85rem; }
.settable td form { margin:0; }
.settable .nowrap { white-space:nowrap; }
.settable.stat td:first-child { color:var(--mut); width:60%; }
.meter { height:8px; max-width:400px; border-radius:999px; background:var(--hover); overflow:hidden; border:1px solid var(--line); }
.meter i { display:block; height:100%; width:0; background:var(--acc); }
@media (max-width: 760px) { .setsec { grid-template-columns:minmax(0, 1fr); } .sethint { padding-top:0; max-width:none; } }
@media (max-width: 760px) { .lib.settingslink { margin-top:0; } }

/* Settings sub-menu in the sidebar */
.subnav { display:flex; flex-direction:column; margin:2px 0 0 8px; padding-left:18px; border-left:2px solid var(--line); }
.sub { padding:5px 0; color:var(--fg); text-decoration:none; font-size:.95rem; }
a.sub:hover, .sub.on { color:var(--acc); }
@media (max-width: 760px) { .subnav { flex-direction:row; gap:14px; margin:0; padding:0; border:0; } }

/* Personal Settings */
.avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avrow { display:flex; align-items:center; gap:18px; margin:0 0 12px; flex-wrap:wrap; }
.bigav { display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; overflow:hidden; background:var(--hover); color:#fff; font-size:1.6rem; font-weight:600; border:1px solid var(--line); flex-shrink:0; }
.bigav img { width:100%; height:100%; object-fit:cover; }
.avform { margin:0; }
.prow { margin:0 0 14px; font-size:.95rem; }
.prow b { font-weight:600; }
.prow .note.pend { display:block; margin-top:4px; }
details.chg { display:inline; }
details.chg > summary { display:inline; margin-left:10px; color:var(--acc); cursor:pointer; list-style:none; }
details.chg > summary::-webkit-details-marker { display:none; }
details.chg[open] > form { display:block; margin:12px 0 4px; }
.discon { display:block; width:100%; max-width:300px; margin:8px 0 0; padding:12px; text-align:center; color:var(--mut); }
.tzrow { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 0 14px; }
.tzrow select { margin:0 !important; }
.tznow { display:inline-flex; align-items:center; gap:6px; color:var(--mut); font-size:.9rem; }
.tznow svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.tznow b { font-weight:400; }

/* ---------- notifications: bell + list + settings ---------- */
.bell { position:relative; }
.bellbtn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:36px; padding:0; border:0; background:none; color:var(--fg); }
.bellbtn:hover { border:0; color:var(--acc); }
.bellbtn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bellbadge { position:absolute; top:1px; right:2px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:#dc2626; color:#fff; font-size:.68rem; font-style:normal; line-height:16px; text-align:center; }
.bellmenu { position:absolute; right:0; top:calc(100% + 8px); z-index:8; width:380px; max-width:calc(100vw - 24px); background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.bellmenu[hidden] { display:none; }
.bellmenu.menu-left { right:auto; left:0; }
.bellhead { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--card); border-radius:6px 6px 0 0; }
.bellhead a { color:var(--acc); text-decoration:none; font-size:.9rem; }
.belllist { max-height:380px; overflow:auto; }
.bellnone { margin:0; padding:30px 18px; text-align:center; color:var(--mut); }
.nitem { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:.92rem; }
.nitem:last-child { border-bottom:0; }
a.nitem:hover { background:var(--hover); }
.nitem.unread { background:#f3f8ff; }
@media (prefers-color-scheme: dark) { .nitem.unread { background:#142036; } }
.nav { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--hover); overflow:hidden; }
.nav svg { width:26px; height:26px; fill:#c3cad6; margin-top:6px; }
.nav.welc { background:var(--acc); }
.nav.welc svg { fill:#fff; margin:0; width:22px; height:22px; }
.ntxt { display:flex; flex-direction:column; gap:3px; min-width:0; overflow-wrap:anywhere; }
.ntxt b { font-weight:600; }
.ntxt small { color:var(--mut); font-size:.78rem; }
.nfull { max-width:640px; border:1px solid var(--line); border-radius:6px; margin-top:18px; }
.ncard { display:flex; flex-wrap:wrap; gap:24px 60px; margin:18px 0 12px; padding:30px 32px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.ncol { flex:1 1 280px; margin:0; }
.ncol h2 { margin:0 0 20px; font-size:1.2rem; }
.ncol p { margin:0 0 14px; font-size:.92rem; }
.check { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:.92rem; }
.check input { width:18px; height:18px; margin:0; }
.ncol .btn.primary { margin-top:8px; padding:8px 22px; border-radius:3px; }

/* ---------- Trash ---------- */
.trashnote { display:flex; align-items:center; gap:16px; margin:14px 0 8px; padding:16px 18px; background:#e1f0fd; border:1px solid #6bb4ee; border-radius:2px; color:#1a1a1a; }
@media (prefers-color-scheme: dark) { .trashnote { background:#10243a; border-color:#2b6aa5; color:#eee; } }
.trashnote p { margin:0; font-size:.92rem; }
.trashnote svg, .trashempty svg { flex-shrink:0; width:34px; height:34px; fill:none; stroke:#2e9bf0; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.trashempty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:80px 0; }
.trashempty svg { width:46px; height:46px; }
.trashtable { margin-top:14px; }
.tname { display:flex; align-items:center; gap:12px; }
.trashtable td { vertical-align:middle; }
.tthumb { width:44px; height:44px; flex-shrink:0; object-fit:cover; border-radius:4px; background:var(--hover); }
.tthumb.folder { object-fit:contain; background:none; }
.tact { display:flex; align-items:center; justify-content:flex-end; gap:14px; white-space:nowrap; }
.tact form { margin:0; }
.tact .linkbtn { margin:0; font-size:.85rem; }

/* page title row with actions on the right */
.sethead { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sethead.plain { padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.sethact form { margin:0; }
.sethact .btn.danger { background:var(--bg); color:#dc2626; border-color:var(--line); }
.sethact .btn.danger:hover { background:#dc2626; color:#fff; border-color:#dc2626; }

/* selection bar (appears once something is selected) */
.movebar[hidden] { display:none; }
.movebar .selall { display:flex; align-items:center; gap:8px; font-weight:600; }
.movebar .grow { flex:1; }

/* Merge and Copy/Move dialogs */
.cmdlg { position:relative; width:min(520px, calc(100vw - 24px)); box-sizing:border-box; padding:30px 34px 26px; border:0; border-radius:4px; overflow:visible; }
.cmdlg h3 { margin:0 28px 20px 0; font-size:1.2rem; font-weight:700; }
.cmdlg p { margin:0 0 10px; color:var(--fg); font-size:.95rem; }
.mergefield { display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); }
.mergefield:focus-within { border-color:var(--acc); }
.mergefield svg { flex-shrink:0; width:20px; height:20px; fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mergefield input { flex:1; min-width:0; padding:11px 0; border:0; background:none; font:inherit; outline:0; }
.cmfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; }
.cmfoot.end { justify-content:flex-end; }
.cmfoot > span { display:flex; gap:10px; }
.cmfoot .btn.primary { padding:8px 26px; border-radius:3px; font-weight:500; }
.cmwho { display:flex; align-items:center; gap:14px; margin:0 0 16px; color:var(--mut); }
.cmsel { display:flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid #b9c6d8; border-radius:3px; color:var(--fg); }
.cmsel svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--acc); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cmsel select { border:0; background:none; font:inherit; color:var(--fg); max-width:220px; outline:0; }
.cmtree { height:260px; overflow:auto; border:1px solid var(--line); border-radius:3px; padding:10px 6px; }
.ctree[hidden] { display:none; }
.trow { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; border:0; border-radius:3px; background:none; text-align:left; color:var(--fg); }
.trow:hover { background:var(--hover); }
.trow.on { background:#eaf1ff; color:var(--acc); }
@media (prefers-color-scheme: dark) { .trow.on { background:#16233f; } }
.trow svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.trow.d1 { padding-left:32px; } .trow.d2 { padding-left:52px; } .trow.d3 { padding-left:72px; } .trow.d4 { padding-left:92px; } .trow.d5 { padding-left:112px; } .trow.d6 { padding-left:132px; }
.cmdlg .sdx { top:12px; right:12px; }
.movebar button[hidden], .movebar [hidden] { display:none; }

/* Copy/Move: library picker */
.cmdrop { position:relative; }
.cmsel { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); }
.cmsel:hover { border-color:#b9c6d8; }
.cmsel[aria-expanded=true] { border-color:var(--acc); }
.cmic { display:inline-flex; }
.cmsel svg, .cmmenu svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--acc); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cmsel svg.cmchev { stroke:var(--fg); stroke-width:2.4; width:14px; height:14px; margin-left:2px; }
.cmmenu { position:absolute; left:0; top:calc(100% + 2px); z-index:6; min-width:100%; padding:6px 0; background:var(--bg); border:1px solid var(--line); border-radius:3px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.cmmenu[hidden] { display:none; }
.cmmenu button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 16px; border:0; border-radius:0; background:none; color:var(--fg); text-align:left; white-space:nowrap; }
.cmmenu button:hover { background:var(--hover); }
.trow.thead { color:var(--fg); cursor:default; }
.trow.thead:hover { background:none; }
.cmnote { margin:40px 20px; text-align:center; color:var(--mut); }
.cmnote[hidden], .ctree[hidden] { display:none; }
.cmfoot .btn[disabled] { opacity:.45; cursor:not-allowed; }
.cmdlg .cmwho .cmsel { margin:0; }
.libhead { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.libtitle { margin:0; font-size:1.5rem; font-weight:700; }
.libcount { color:var(--mut); font-size:.95rem; }

/* search: icon that opens a field to its left */
.srch { display:flex; align-items:center; }
.srchbtn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:36px; padding:0; border:0; background:none; color:var(--fg); }
.srchbtn:hover { border:0; color:var(--acc); }
.srch svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.srchbox { display:flex; align-items:center; gap:8px; width:0; padding:0; box-sizing:border-box; overflow:hidden; opacity:0; border-radius:8px; background:#f3f3f3; color:var(--mut);
  transition:width .28s ease, padding .28s ease, opacity .2s ease; }
@media (prefers-color-scheme: dark) { .srchbox { background:#222; } }
.srch.open .srchbox { width:280px; padding:0 10px; opacity:1; }
.srch.open .srchbtn { display:none; }
.srchbox > svg { width:18px; height:18px; flex-shrink:0; }
.srchbox input { flex:1; min-width:0; height:38px; padding:0; border:0; background:none; outline:0; font:inherit; color:var(--fg); }
.srchbox input::-webkit-search-cancel-button { display:none; }
.srchx { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; background:none; color:var(--mut); }
.srchx:hover { border:0; color:var(--fg); }
.srchx svg { width:12px; height:12px; stroke-width:1.8; }
@media (max-width: 760px) { .srch.open .srchbox { width:170px; } }

/* share + view buttons now sit at the right of the library heading */
.libhead { align-items:center; }
.libacts { display:flex; align-items:center; gap:8px; margin-left:auto; }

.libname { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0; }

/* favorites: star on cards and the viewer, empty state */
.fav { position:absolute; top:8px; right:8px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.85); color:#9aa3b2; opacity:0; transition:opacity .15s; }
.item:hover .fav, .fav.on, .fav:focus-visible { opacity:1; }
@media (hover: none) { .fav { opacity:1; } }
.fav:hover { border:0; color:#f5b301; }
.fav svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.fav.on { color:#f5b301; }
.fav.on svg { fill:#f5b301; }
.vbar .fav { position:static; opacity:1; width:30px; height:30px; background:none; flex-shrink:0; }
.favempty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:90px 0; text-align:center; }
.favempty svg { width:46px; height:46px; fill:#fdf6d8; stroke:#f0c419; stroke-width:1.3; stroke-linejoin:round; }
.favempty b { font-size:1.05rem; }
.favempty span { color:var(--mut); }
.acts[hidden] { display:none !important; }

/* sort menu + Rearrange */
.sortmenu { min-width:170px; right:0; }
.sortmenu hr { margin:6px 0; border:0; border-top:1px solid var(--line); }
.sortmenu button { gap:6px; }
.sortmenu .sdir { display:inline-block; width:16px; text-align:center; color:var(--mut); font-size:.85rem; }
.sortmenu button.on { background:var(--hover); }
#sort-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rearrbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:10px 14px; border:1px solid #6bb4ee; background:#e1f0fd; border-radius:6px; color:#1a1a1a; font-size:.92rem; }
.rearrbar[hidden] { display:none; }
@media (prefers-color-scheme: dark) { .rearrbar { background:#10243a; border-color:#2b6aa5; color:#eee; } }
.rearr .item { cursor:grab; outline:2px dashed var(--line); outline-offset:-2px; }
.rearr .item .fav, .rearr .item .sel { pointer-events:none; opacity:.4; }
.item.dragging { opacity:.4; }

/* gear on picture cards + its menu */
.gear { position:absolute; bottom:8px; right:8px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:#6b7280; opacity:0; transition:opacity .15s; }
.item:hover .gear, .gear:focus-visible { opacity:1; }
@media (hover: none) { .gear { opacity:1; } }
.gear:hover { border:0; color:var(--acc); }
.gear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.v-list .gear { bottom:auto; top:50%; transform:translateY(-50%); right:6px; background:none; }
.v-list .item { padding-right:44px; }
.rearr .item .gear { pointer-events:none; opacity:.4; }
.gearmenu { position:fixed; z-index:20; min-width:200px; padding:8px 0; background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.2); }
.gearmenu[hidden] { display:none; }
.gearmenu button, .gearmenu a { display:block; width:100%; box-sizing:border-box; padding:9px 20px; border:0; border-radius:0; background:none; color:var(--fg); text-align:left; text-decoration:none; font:inherit; cursor:pointer; }
.gearmenu button:hover, .gearmenu a:hover { background:var(--hover); }
.gearmenu .danger { color:#dc2626; }
.item .thumb { cursor:pointer; }

/* the preview box: stars and the gear are placed on it */
.pv { position:relative; }
.v-list .pv { display:contents; }

/* ---------- Requests ---------- */
.reqempty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:70px 0 40px; text-align:center; }
.reqempty svg { width:64px; height:64px; }
.reqempty b { font-size:1.05rem; }
.reqempty span { max-width:420px; color:var(--mut); }
.reqempty .btn { margin-top:12px; padding:10px 22px; border-radius:3px; }
.reqtable td span { display:block; color:var(--mut); font-size:.85rem; }
.reqlink { display:flex; gap:6px; min-width:200px; }
.reqlink input { flex:1; min-width:0; padding:6px 8px; font-size:.82rem; }
.reqlink button { padding:6px 12px; }
.reqdlg { width:min(540px, calc(100vw - 24px)); }
.reqdlg [hidden] { display:none !important; }
.reqdlg h3 { display:flex; align-items:center; gap:10px; }
.reqlab { display:block; margin:14px 0 6px; font-size:.95rem; }
.reqdlg input[type=text], .reqdlg input[type=number], .reqdlg input[type=date], .reqdlg textarea { display:block; width:100%; box-sizing:border-box; padding:10px 12px; font:inherit; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); }
.reqdlg input[type=number], .reqdlg input[type=date] { width:auto; }
.reqloc { display:flex; gap:10px; margin-bottom:12px; }
.reqloc input { flex:1; min-width:0; }
.reqloc .btn { padding:8px 18px; border-radius:3px; }
.reqadv { margin:6px 0 4px; color:var(--acc); text-decoration:none; font-size:.95rem; }
.backbtn { display:inline-flex; width:28px; height:28px; padding:0; border:0; background:none; align-items:center; justify-content:center; color:var(--fg); }
.backbtn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.advrow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.advrow:first-of-type { border-top:0; }
.advrow b { display:block; font-size:.95rem; }
.advrow small { display:block; color:var(--mut); font-size:.82rem; margin-top:2px; }
.advbody { padding:0 0 14px; }
.advsave { display:block; width:100%; margin-top:10px; padding:12px; border-radius:3px; }
.switch { position:relative; flex-shrink:0; width:40px; height:24px; }
.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch i { position:absolute; inset:0; border-radius:999px; background:#cfd4dc; transition:background .15s; }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s; }
.switch input:checked + i { background:var(--acc); }
.switch input:checked + i::after { transform:translateX(16px); }
/* public upload page */
.reqbox { width:min(480px, 100%); text-align:left; }
.reqbox h1, .reqbox > p { text-align:center; }
.reqdrop { display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 12px; border:2px dashed #b9c6d8; border-radius:8px; color:var(--mut); }
.reqdrop.over { border-color:var(--acc); background:var(--hover); }
.reqdrop b { color:var(--fg); }
.reqlist { margin:0; padding:0 0 0 18px; font-size:.88rem; max-height:150px; overflow:auto; }
.reqdisc { align-items:flex-start; font-size:.85rem; color:var(--mut); }
.reqdisc input { margin-top:3px; }
.reqbox .hp { position:absolute; left:-9999px; }
@media (max-width: 600px) { .reqlink { min-width:0; } }

/* Requests-style tabs: a line under the title, then the tabs with an underline */
.sethead.line { padding-bottom:16px; border-bottom:1px solid var(--line); }
.settabs.under { gap:22px; margin:18px 0 8px; padding:0; border-bottom:0; }
.settabs.under a { padding:8px 2px; border-radius:0; border-bottom:2px solid var(--line); }
.settabs.under a:hover { background:none; }
.settabs.under a.on { background:none; color:var(--acc); border-bottom-color:var(--acc); }

.reqcopy { display:inline-flex; align-items:center; justify-content:center; width:40px; height:36px; padding:0; color:var(--fg); }
.reqcopy svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.reqcopy .chk { display:none; color:#16a34a; }
.reqcopy.done .chk { display:block; }
.reqcopy.done svg:not(.chk) { display:none; }
.reqlink .reqcopy { padding:0; flex-shrink:0; }

/* Requests table: everything on a row lines up */
.reqtable th, .reqtable td { padding:12px 14px; vertical-align:middle; text-align:left; }
.reqtable th:first-child, .reqtable td:first-child { padding-left:10px; }
.reqtable td b { display:block; line-height:1.3; }
.reqtable .tact { display:table-cell; text-align:right; white-space:nowrap; }
.reqtable .tact > * { display:inline-block; vertical-align:middle; margin:0 0 0 18px; }
.reqtable .tact > *:first-child { margin-left:0; }
.reqtable .tact form { display:inline-block; }
.reqtable .linkbtn { margin:0; font-size:.88rem; color:var(--mut); text-decoration:underline; line-height:1.2; }
.reqtable .linkbtn:hover { color:var(--acc); }
.reqtable .tact .linkbtn.danger:hover, .reqtable .tact form:last-child .linkbtn:hover { color:#dc2626; }
.reqlink { align-items:center; }
.reqlink input { height:36px; box-sizing:border-box; margin:0; }

.cextra .cas { flex:1; color:var(--mut); font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cextra .cas b { color:var(--fg); font-weight:600; }

/* Activity: the whole width, title and note on one line, roomy rows */
.setsec.wide { display:block; }
.acthead { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:0 0 18px; }
.acthead h2 { margin:0; }
.acthead .sethint { padding:0; max-width:none; }
.acttable th, .acttable td { padding:14px 16px; }
.acttable th:nth-child(1), .acttable td:nth-child(1) { width:150px; white-space:nowrap; color:var(--mut); }
.acttable th:nth-child(2), .acttable td:nth-child(2) { width:220px; }
.acttable td:nth-child(3) { overflow-wrap:anywhere; }
@media (max-width: 760px) { .acttable th:nth-child(1), .acttable td:nth-child(1) { width:90px; } .acttable th:nth-child(2), .acttable td:nth-child(2) { width:110px; } .acttable th, .acttable td { padding:10px 8px; } }

/* Customize: sidebar message */
.cfield { display:flex; align-items:flex-start; gap:18px; margin:0 0 16px; }
.cfield input, .cfield textarea { flex:1; min-width:0; }
.cfield textarea { resize:vertical; }
.ccount { flex-shrink:0; width:120px; padding-top:10px; color:var(--mut); font-size:.85rem; }
.sidepreview { margin-top:26px; padding:16px 18px; border:1px dashed var(--line); border-radius:6px; max-width:240px; }
.sidepreview .plabel { display:block; margin-bottom:10px; color:var(--mut); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.sidepreview .sidemsg { margin:0; }
.sidemsg { margin-top:20px; }
.sidemsg h2 { margin:0 0 6px; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); }
.sidemsg p { display:block !important; margin:0; font-size:.88rem; line-height:1.55; color:var(--fg); overflow-wrap:anywhere; }
.sidemsg a { color:var(--acc); text-decoration:none; }
.sidemsg a:hover { text-decoration:underline; }
.sidemsg h2[hidden], .sidemsg[hidden] { display:none; }
@media (max-width: 760px) { aside .sidemsg { flex-basis:100%; } aside .sidemsg h2 { display:block; } .cfield { flex-direction:column; gap:4px; } .ccount { width:auto; padding:0; } }
.setsec textarea { display:block; width:100%; box-sizing:border-box; padding:10px 12px; font:inherit; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); color:var(--fg); line-height:1.5; }

/* Customize: picture cards for the folder view and the viewer theme */
.optcards { display:flex; flex-wrap:wrap; gap:20px; margin:16px 0 22px; }
.optcard { display:flex; flex-direction:column; gap:12px; width:236px; max-width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); cursor:pointer; }
.optcard:hover { border-color:#9db8e8; }
.optcard:has(input:checked) { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.optpic svg { display:block; width:100%; height:auto; }
.optlab { display:flex; align-items:center; gap:10px; padding:0 4px 4px; font-size:1rem; }
.optlab input { width:18px; height:18px; margin:0; }

/* the picture page's theme, when the owner picked one (otherwise it follows the device) */
html.theme-dark { color-scheme:dark; --bg:#111; --fg:#eee; --mut:#9ca3af; --line:#2a2a2a; --card:#1a1a1a; --hover:#1c2128; }
html.theme-dark body.viewer-page, html.theme-dark .vpanel { background:#141414; }
html.theme-dark .composer, html.theme-dark .vpanel .comment, html.theme-dark .vpanel .comment + .comment { border-color:var(--line); }
html.theme-dark .avatar.ph { background:#2a2a2a; border-color:#3a3a3a; }
html.theme-dark .avatar.ph svg { fill:#555; }
html.theme-light { color-scheme:light; --bg:#fff; --fg:#1a1a1a; --mut:#6b7280; --line:#e5e7eb; --card:#fafafa; --hover:#f3f6fa; }
html.theme-light body.viewer-page, html.theme-light .vpanel { background:#f3f3f3; }
html.theme-light .composer, html.theme-light .vpanel .comment, html.theme-light .vpanel .comment + .comment { border-color:#e3e3e3; }
html.theme-light .avatar.ph { background:#e2e4e8; border-color:#d3d6db; }
html.theme-light .avatar.ph svg { fill:#bcc0c7; }

/* white labeling */
.logo.brand { width:auto; display:inline-flex; align-items:center; }
.logo.brand img.brandimg { height:auto; width:auto; max-height:30px; max-width:220px; display:block; }
.brandname { font-weight:700; font-size:1.1rem; color:var(--fg); letter-spacing:.01em; }
.brandlogo { display:flex; align-items:center; gap:18px; margin:6px 0 4px; flex-wrap:wrap; }
.brandbox { display:flex; align-items:center; justify-content:center; width:220px; height:70px; border:1px solid var(--line); background:var(--bg); color:var(--mut); }
.brandbox img { max-width:100%; max-height:100%; }
.brandbtns { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.brandform { margin-top:18px; }
.brandform input[type=text] { max-width:420px; }
.colorrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.colorrow input[type=color] { width:44px; height:38px; padding:2px; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); }
.colorrow input[type=text] { width:120px !important; margin:0 !important; }
.brandhide { display:flex; align-items:center; gap:8px; margin:6px 0 16px; flex-wrap:wrap; }
.urlnote { display:block; margin:6px 0 0; }

/* two brand logos (light view / dark view) */
.logocards { display:flex; flex-wrap:wrap; gap:24px; margin:14px 0 8px; }
.logocard { display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:260px; }
.logocard h3 { margin:0; font-size:.95rem; }
.logocard form { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.brandbox.dark { background:#1b1b1b; border-color:#333; color:#9ca3af; }
.logocard .brandbox { width:260px; }
.brandimg.bd { display:none; }
@media (prefers-color-scheme: dark) { .brandimg.bl { display:none; } .brandimg.bd { display:block; } }
html.theme-light .brandimg.bl { display:block; }
html.theme-light .brandimg.bd { display:none; }
html.theme-dark .brandimg.bl { display:none; }
html.theme-dark .brandimg.bd { display:block; }

.brandmail { max-width:760px; margin:6px 0 14px; padding:12px 14px; background:var(--hover); border-radius:6px; line-height:1.55; }
.brandmail b { color:var(--fg); }

/* Custom branded email */
.subh { margin:6px 0 10px; font-size:1.05rem; }
.doclink { display:inline-flex; align-items:center; gap:6px; color:var(--acc); text-decoration:none; }
.doclink:hover { text-decoration:underline; }
.doclink svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mailfrom { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-end; margin-top:6px; }
.mailfrom label { flex:1 1 240px; max-width:320px; }
.mailfrom .reqlab { margin:0 0 6px; color:var(--mut); }
.mailfrom input { width:100%; box-sizing:border-box; }
.mailstatus { display:flex; align-items:baseline; gap:10px; margin:20px 0 6px; padding:10px 14px; border-radius:6px; }
.mailstatus.verified { background:#e8f7ee; color:#166534; }
.mailstatus.pending { background:#fff7e6; color:#92400e; }
@media (prefers-color-scheme: dark) { .mailstatus.verified { background:#10301c; color:#86efac; } .mailstatus.pending { background:#3a2a0a; color:#fcd34d; } }
.mailstatus span { font-size:.9rem; opacity:.85; }
.dnsrec { display:flex; flex-wrap:wrap; gap:10px 18px; margin:8px 0 12px; padding:12px 14px; background:var(--hover); border-radius:6px; font-size:.9rem; }
.dnsrec span { display:flex; flex-direction:column; gap:2px; }
.dnsrec small { color:var(--mut); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.dnsrec code, .docs code { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.88em; word-break:break-all; }
.mailverify { margin:10px 0; }
.dnslist { list-style:none; margin:12px 0 6px; padding:0; }
.dnslist li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line); }
.dnslist .dot { flex-shrink:0; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; color:#fff; }
.dnslist .ok .dot { background:#16a34a; } .dnslist .no .dot { background:#dc2626; }
.dnslist small { display:block; color:var(--mut); font-size:.82rem; overflow-wrap:anywhere; }
/* documentation pages */
.docs { max-width:760px; margin:28px auto 80px; padding:0 20px; line-height:1.65; }
.docs h1 { margin:0 0 6px; font-size:1.8rem; }
.docs h2 { margin:34px 0 8px; font-size:1.25rem; }
.docs h3 { margin:22px 0 6px; font-size:1.02rem; }
.docs .lead { color:var(--mut); margin:0 0 20px; }
.docs pre { margin:10px 0 16px; padding:12px 14px; background:var(--hover); border:1px solid var(--line); border-radius:6px; overflow:auto; font-size:.88rem; }
.docs table { width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:.92rem; }
.docs th, .docs td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.docs .callout { margin:16px 0; padding:12px 16px; border-left:3px solid var(--acc); background:var(--hover); border-radius:0 6px 6px 0; }

.subsec { margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }

.mailfrom input { margin:0 !important; }
.mailfrom .btn { align-self:flex-end; height:40px; padding:0 22px; border-radius:3px; margin:0; }

/* Members tab */
.memtools { display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; margin:6px 0 22px; }
.memtools .btn.primary { padding:9px 20px; border-radius:3px; }
.memcount { display:inline-flex; align-items:center; gap:7px; color:var(--fg); font-size:.95rem; }
.memcount svg, .memsearch svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--mut); }
.memsearch { display:flex; align-items:center; gap:8px; margin-left:auto; width:260px; max-width:100%; padding:0 10px; border:1px solid #b9c6d8; border-radius:3px; background:var(--bg); }
.memsearch input { flex:1; min-width:0; height:36px; padding:0; border:0; outline:0; background:none; font:inherit; color:var(--fg); }
.memsearch:focus-within { border-color:var(--acc); }
.memtable th, .memtable td { padding:14px 12px; vertical-align:middle; }
.memtable th { color:var(--fg); font-weight:600; }
.memname { display:inline-flex; align-items:center; gap:12px; }
.memname .avatar { width:34px; height:34px; font-size:.9rem; }
.memrow[hidden] { display:none; }
.membset p { margin:0 0 10px; }
.yesno { display:flex; gap:26px; margin:0 0 22px; }
.yesno .radio { margin:0; }
#dom-box { margin:-8px 0 20px; }
#dom-box[hidden] { display:none; }
#dom-box input { max-width:380px; }
@media (max-width: 760px) { .memsearch { margin-left:0; width:100%; } .memtable { font-size:.88rem; } .memtable th:nth-child(4), .memtable td:nth-child(4) { display:none; } }

.memtable td .memname { display:inline-flex; align-items:center; gap:12px; }
.memtable td .memname > span { display:inline-block; color:inherit; font-size:inherit; }
.memtable td .memname .avatar { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.memtable td.memact { text-align:right; white-space:nowrap; }
.memtable td.memact form { margin:0; }
.memtable td.memact .linkbtn { margin:0; font-size:.88rem; color:var(--mut); text-decoration:underline; }
.memtable td.memact .linkbtn:hover { color:#dc2626; }

.memtable td .memname > span:not(.avatar) { color:var(--fg); font-size:.95rem; }
.memtable td .memname .avatar { color:#fff; font-weight:600; }

.roleact { margin-right:16px !important; }
.memtable td.memact form { display:inline-block; }

/* Team page empty state, invite dialog and the sidebar call to action */
.teamempty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:70px 16px 60px; }
.teamempty svg { width:80px; height:80px; margin-bottom:22px; }
.teamempty b { font-size:1.05rem; margin-bottom:8px; }
.teamempty p { max-width:420px; margin:0 0 26px; color:var(--fg); line-height:1.5; }
.invdlg { width:min(560px, calc(100vw - 32px)); padding:28px 32px 24px; position:relative; }
.invdlg h3 { font-size:1.25rem; margin:0 0 12px; }
.invdlg .invx { position:absolute; top:12px; right:14px; border:0; background:none; font-size:1.6rem; line-height:1; padding:2px 8px; color:var(--mut); }
.invlab { display:block; margin:14px 0 8px; font-weight:600; }
.invrow { display:flex; gap:12px; }
.invrow input { flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
.invgen { margin:8px 0 0; }
.invgen .linkbtn { padding:0; border:0; background:none; color:var(--acc); }
.invdlg hr { border:0; border-top:1px solid var(--line); margin:16px 0 0; }
.invdlg input#inv-emails { width:100%; padding:11px 12px; }
.invfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.invmanage { display:inline-flex; align-items:center; gap:8px; color:var(--fg); text-decoration:none; }
.invmanage svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.invbtns { display:flex; gap:10px; }
aside:has(.sideinv) { display:flex; flex-direction:column; }
.sideinv { margin-top:auto; position:sticky; bottom:16px; padding-top:24px; }
.invcard { border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; background:var(--bg); }
.invcard p { display:block; margin:0 0 10px; color:var(--mut); font-size:.85rem; line-height:1.4; }
.invcard button { display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; color:var(--fg); }
.invcard button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
@media (max-width: 760px) { .sideinv { display:none; } }
.layout:has(.sideinv) { min-height:calc(100vh - 64px); }
.layout:has(.sideinv) { box-sizing:border-box; }

/* Activity page: workspace figures */
.wsstats { display:flex; flex-wrap:wrap; margin-top:6px; }
.wsstats > div { flex:1 1 140px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 16px; border-left:2px solid var(--line); }
.wsstats > div:first-child { border-left:0; }
.wsstats b { font-size:2rem; font-weight:400; color:var(--fg); }
.wsstats span { font-size:.8rem; text-transform:uppercase; color:var(--mut); text-align:center; }
@media (max-width: 560px) { .wsstats > div { flex-basis:45%; border-left:0; } }
.sideinv { width:80%; }
.invcard { padding:10px; }
.invcard p { font-size:.78rem; margin-bottom:8px; }
.invcard button { padding:6px 8px; font-size:.8rem; gap:6px; white-space:nowrap; }
.invcard button svg { width:15px; height:15px; }
aside:has(.sideinv) { position:sticky; top:16px; align-self:flex-start; height:calc(100vh - 100px); overflow-y:auto; }
.sideinv { position:static; }
@media (max-width: 760px) { aside:has(.sideinv) { position:static; height:auto; overflow:visible; } }
@media (min-width: 761px) {
  header { position:sticky; top:0; z-index:40; background:var(--bg); }
  aside:has(.sideinv) { top:91px; height:calc(100vh - 107px); }
}
.layout:has(.sideinv) { min-height:0; }
@media (min-width: 761px) { aside:has(.sideinv) { height:calc(100vh - 123px); } }
@media (min-width: 761px) { aside:has(.sideinv) { height:calc(100vh - 127px); } }
.brandbox .favimg { width:48px; height:48px; max-width:48px; max-height:48px; object-fit:contain; }

/* every note in the settings pages gets the same shaded box */
.setsec p.note, .setsec small.urlnote { display:block; max-width:760px; margin:6px 0 14px; padding:12px 14px; background:var(--hover); border-radius:6px; line-height:1.55; }
.setsec .logocard small.note { display:block; margin:8px 0 0; padding:8px 10px; background:var(--hover); border-radius:6px; line-height:1.45; }
.setsec > p.sethint { margin-top:48px; padding:12px 14px; background:var(--hover); border-radius:6px; line-height:1.55; font-size:.88rem; align-self:start; }
@media (max-width: 760px) { .setsec > p.sethint { margin-top:0; } }
.setsec .logocard small.note { padding:0; background:none; border-radius:0; margin:8px 0 0; line-height:inherit; }

/* storage plans */
.plans { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 14px; }
.plan { flex:1 1 130px; max-width:170px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 12px; border:1px solid var(--line); border-radius:8px; text-align:center; }
.plan.cur { border-color:var(--acc); }
.plan b { font-size:1.3rem; font-weight:600; }
.plan span { color:var(--mut); font-size:.88rem; }
.plan button { margin-top:6px; width:100%; }
.plan button[disabled] { opacity:.55; cursor:default; }
.plan { flex:1 1 calc(50% - 6px); max-width:none; }

/* Billing tab: plan cards */
.pcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px; margin-top:18px; }
.pcard { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; padding:20px 18px; background:linear-gradient(180deg, var(--hover), var(--bg) 60%); }
.pcard.cur { box-shadow:0 0 0 2px var(--acc); }
.pcard h3 { margin:0 0 6px; font-size:1rem; font-weight:600; }
.pcard.plus h3 { color:#2f6fed; } .pcard.business h3 { color:#8b4cf7; } .pcard.enterprise h3 { color:#d99a00; }
.ppop { font-size:.7rem; font-weight:500; padding:2px 8px; border-radius:10px; background:#ece4fd; color:#8b4cf7; vertical-align:middle; margin-left:6px; }
.pprice { font-size:.9rem; color:var(--mut); min-height:2.2rem; }
.pprice b { font-size:1.8rem; font-weight:600; color:var(--fg); }
.ptag { margin:4px 0 14px; color:var(--mut); font-size:.88rem; }
.planbtn { display:block; width:100%; box-sizing:border-box; text-align:center; padding:10px 12px; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--fg); font:inherit; cursor:pointer; text-decoration:none; }
.planbtn.plus { background:#3b82f6; border-color:#3b82f6; color:#fff; }
.planbtn.business { background:#8b4cf7; border-color:#8b4cf7; color:#fff; }
.planbtn.gold { background:#f7b500; border-color:#f7b500; color:#111; }
.planbtn[disabled] { opacity:.55; cursor:default; }
.pcard hr { border:0; border-top:1px solid var(--line); margin:18px 0 14px; width:100%; }
.pall { margin:0 0 10px; color:var(--mut); font-size:.88rem; }
.pcard ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem; }
.pcard li { position:relative; padding-left:22px; }
.pcard li::before { content:"\2713"; position:absolute; left:0; color:var(--mut); }

/* plan badges next to a heading, and the Business color: a dull red */
.planbadge { display:inline-block; margin-left:8px; padding:3px 10px; border-radius:6px; font-size:.78rem; font-weight:500; vertical-align:middle; color:#fff; background:#3b82f6; }
.planbadge.business { background:#a8484e; }
.pcard.business h3 { color:#a8484e; }
.ppop { background:#f3dedf; color:#a8484e; }
.planbtn.business { background:#a8484e; border-color:#a8484e; color:#fff; }

/* Enterprise: the color of "SHARE" in the logo */
.pcard.enterprise h3 { color:#b18165; }
.planbtn.gold { background:#b18165; border-color:#b18165; color:#fff; }
.planbadge.enterprise { background:#b18165; }

/* pricing page and the comparison link */
.fullcmp { text-align:center; margin:26px 0 6px; }
.fullcmp a { font-weight:600; font-size:1.05rem; color:var(--acc); text-decoration:none; }
.fullcmp a:hover { text-decoration:underline; }
.planbtn[aria-disabled] { opacity:.55; cursor:default; }
.pricing { max-width:1100px; margin:34px auto 80px; padding:0 20px; }
.pricing h1 { text-align:center; font-size:2.2rem; line-height:1.2; margin:0 auto 10px; max-width:640px; }
.pricing .lead { text-align:center; color:var(--mut); margin:0 0 8px; }
.pricing .pcards { margin-top:26px; }
.cmphead { margin:64px 0 16px; font-size:1.4rem; text-align:center; }
.cmpwrap { overflow-x:auto; }
.cmptable { width:100%; border-collapse:collapse; font-size:.92rem; min-width:640px; }
.cmptable th, .cmptable td { padding:11px 12px; text-align:center; border-bottom:1px solid var(--line); }
.cmptable thead th { position:sticky; top:75px; background:var(--bg); font-size:1rem; }
.cmptable th.plus { color:#2f6fed; } .cmptable th.business { color:#a8484e; } .cmptable th.enterprise { color:#b18165; }
.cmptable td.cmplabel { text-align:left; }
.cmptable .cmpgroup th { text-align:left; background:var(--hover); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); }
.cmptable .yes { color:#2f9e5b; font-weight:700; }
.cmptable .no { color:var(--mut); }
.cmptable thead th { position:static; }
@media (min-width: 761px) { .cmpwrap { overflow:visible; } .cmptable thead th { position:sticky; top:75px; z-index:5; } }

/* Monthly / Annual switch */
.plansbox[data-iv="month"] .ivy, .plansbox[data-iv="year"] .ivm { display:none !important; }
.billtoggle { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0 6px; }
.billtoggle .tl { cursor:pointer; color:var(--mut); }
.plansbox[data-iv="month"] .tlm, .plansbox[data-iv="year"] .tly { color:var(--fg); }
.billtoggle .switch { position:relative; width:36px; height:20px; padding:0; border:0; border-radius:10px; background:#d9dce1; cursor:pointer; }
.billtoggle .switch i { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .15s; }
.plansbox[data-iv="year"] .switch { background:var(--acc); }
.plansbox[data-iv="year"] .switch i { left:18px; }
.off20 { background:#d4f5e1; color:#13693a; font-size:.78rem; font-weight:700; padding:3px 9px; border-radius:6px; }
.allusd { text-align:right; margin:0 0 -10px; color:var(--mut); font-size:.8rem; }
.pprice .billed { display:block; font-size:.75rem; }
.pprice .ivm, .pprice .ivy { display:block; }

/* Monthly / Annual switch: a larger, steadier toggle */
.billtoggle { gap:14px; }
.billtoggle .switch { flex:none; width:46px; height:26px; border-radius:13px; background:#cfd4dc; box-sizing:border-box; }
.billtoggle .switch i { display:block; top:3px; left:3px; width:20px; height:20px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.plansbox[data-iv="year"] .switch i { left:23px; }
.billtoggle .switch:hover { border:0; }
.billbox .fullcmp { margin:0; padding-top:40px; }

/* the Monthly / Annual switch (its own class: .switch is used by other toggles) */
.billswitch { position:relative; flex:none; display:block; width:46px; height:26px; padding:0; border:0; border-radius:13px; background:#cfd4dc; box-sizing:border-box; cursor:pointer; transition:background .15s; }
.billswitch:hover { border:0; }
.billswitch i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:left .15s; }
.plansbox[data-iv="year"] .billswitch { background:var(--acc); }
.plansbox[data-iv="year"] .billswitch i { left:23px; }

/* Version history */
.verdlg { width:min(560px, calc(100vw - 32px)); }
.vernew { margin:0 0 14px; }
.verlist { list-style:none; margin:0; padding:0; max-height:46vh; overflow-y:auto; }
.verlist li { display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:1px solid var(--line); }
.verlist li.cur { background:var(--hover); border-radius:6px; border-top:0; padding:10px 8px; margin-bottom:6px; }
.vthumb { flex:none; width:52px; height:52px; border-radius:6px; overflow:hidden; background:var(--hover); display:flex; align-items:center; justify-content:center; }
.vthumb img { max-width:100%; max-height:100%; object-fit:contain; }
.vinfo { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vinfo small { color:var(--mut); }
.vact { display:flex; gap:12px; align-items:center; font-size:.88rem; }
.vact a, .vact .linkbtn { color:var(--acc); text-decoration:none; background:none; border:0; padding:0; cursor:pointer; font:inherit; }

/* options the plan doesn't include: listed, greyed out, with the plan beside them */
.menu button.locked, .more .menu button.locked, .gearmenu button.locked, [role=option].locked { color:var(--mut) !important; cursor:not-allowed; }
.menu button.locked:hover, .more .menu button.locked:hover, .gearmenu button.locked:hover, [role=option].locked:hover { background:none !important; }
.btn.locked, .btn.locked:hover { opacity:.6; cursor:not-allowed; border-color:var(--acc); }
.plantag { color:var(--acc); font-size:.78rem; margin-left:6px; }
.menu button.locked, .more .menu button.locked, .gearmenu button.locked, [role=option].locked { opacity:1 !important; }
.wsmenu { z-index:60; }
aside:has(.sideinv) { z-index:30; }

/* an empty folder */
.emptyfolder { margin:18px 0 0; padding:90px 20px 100px; border:1.5px dashed #cfd3d9; border-radius:8px; text-align:center; }
.emptyfolder svg { width:74px; height:60px; margin-bottom:18px; }
.emptyfolder b { display:block; font-size:1.05rem; margin-bottom:8px; }
.emptyfolder p { max-width:430px; margin:0 auto; color:var(--fg); line-height:1.55; }
.emptyfolder a { color:var(--acc); text-decoration:none; }
.emptyfolder a:hover { text-decoration:underline; }
.fmore .menu { right:0; }
.sethead:has(.reqnew) { justify-content:flex-start; }
.menu a[role=menuitem] { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; padding:9px 16px; color:inherit; text-decoration:none; }
.menu a[role=menuitem]:hover { background:var(--hover); }
.libs .lib.locked, .libs .lib.locked:hover { color:var(--mut); cursor:not-allowed; background:none; opacity:.75; } .libs .lib.locked .plantag { margin-left:auto; opacity:1; }
.libs .lib.locked .plantag { margin-left:6px; }

/* error pages (401) */
.errpage { max-width:520px; margin:12vh auto 80px; padding:0 20px; text-align:center; }
.errcode { font-size:5.5rem; font-weight:700; line-height:1; color:#d5dae1; letter-spacing:.02em; }
.errpage h1 { margin:14px 0 10px; font-size:1.6rem; }
.errpage p { margin:0 auto 26px; color:var(--mut); line-height:1.6; max-width:420px; }
.errbtns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* the landing page footer */
.sitefoot { border-top:1px solid var(--line); margin-top:70px; padding:44px 24px 56px; }
.foot-in { max-width:1100px; margin:0 auto; display:flex; gap:48px; justify-content:space-between; flex-wrap:wrap; }
.fbrand .logo img { height:26px; width:auto; display:block; }
.fbrand p { margin:14px 0 0; font-size:.85rem; color:var(--mut); }
.fcols { display:flex; gap:64px; flex-wrap:wrap; }
.fcols h4 { margin:0 0 14px; font-size:.95rem; font-weight:700; }
.fcols a { display:block; margin:0 0 10px; color:var(--mut); text-decoration:none; font-size:.92rem; }
.fcols a:hover { color:var(--fg); text-decoration:underline; }
@media (max-width: 760px) { .foot-in { flex-direction:column; gap:30px; } .fcols { gap:32px 44px; } }
.pcard, #compare { scroll-margin-top:90px; }
.authfine { margin:10px 0 0; font-size:.78rem; line-height:1.45; color:var(--mut); text-align:center; } .authfine a { color:var(--acc); }

/* Help Center */
.helppage { background:var(--bg); }
.helphero { background:var(--hover); padding:64px 20px 56px; text-align:center; }
.helphero h1 { margin:0 0 24px; font-size:2.4rem; line-height:1.15; }
.helpsearch { display:flex; max-width:620px; margin:0 auto; }
.helpsearch input { flex:1; min-width:0; padding:13px 14px; border:1px solid var(--line); border-right:0; border-radius:6px 0 0 6px; background:var(--bg); color:var(--fg); font:inherit; font-size:1rem; }
.helpsearch .btn { border-radius:0 6px 6px 0; padding:0 24px; }
.helpmain { max-width:980px; margin:0 auto; padding:56px 20px 30px; }
.helph { text-align:center; font-size:1.7rem; margin:10px 0 28px; }
.hlist { list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 48px; }
.hlist.one { grid-template-columns:1fr; max-width:640px; margin-left:auto; margin-right:auto; }
.hlist a { display:flex; gap:10px; align-items:flex-start; padding:9px 0; color:var(--acc); text-decoration:none; line-height:1.4; }
.hlist a:hover span { text-decoration:underline; }
.hlist svg { flex:none; width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--mut); stroke-width:1.6; }
.hcats { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:10px 0 64px; }
.hcat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:104px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--fg); text-decoration:none; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.hcat:hover { border-color:var(--acc); }
.hcat b { font-size:1.05rem; }
.hcat span { color:var(--acc); font-size:.92rem; }
.helpcta { text-align:center; padding:24px 0 40px; }
.helpcta h2 { font-size:1.7rem; margin:0 0 22px; }
.helpcta.small h2 { font-size:1.2rem; margin-bottom:14px; }
.helpcta .big { padding:14px 40px; font-size:1.02rem; }
.helpnote { color:var(--mut); font-size:.92rem; }
.helpnote a { color:var(--acc); text-decoration:none; }
.helpart { max-width:760px; }
.helpart h1 { margin:6px 0 18px; font-size:2rem; }
.helpart h3 { margin:24px 0 6px; font-size:1.05rem; }
.helpart h2 { margin:40px 0 8px; font-size:1.15rem; }
.helpart li { margin:0 0 6px; }
@media (max-width: 760px) { .hlist, .hcats { grid-template-columns:1fr; } .helphero h1 { font-size:1.8rem; } }
/* Help Center: sidebar and article card */
.helppage:has(.helplay) { background:var(--hover); }
.helplay { max-width:1180px; margin:0 auto; padding:56px 24px 60px; display:grid; grid-template-columns:280px minmax(0, 1fr); gap:56px; align-items:start; }
.helpside { position:sticky; top:20px; }
.helpsearch.mini { max-width:none; margin:0 0 30px; position:relative; }
.helpsearch.mini input { border:1px solid var(--line); border-radius:6px; padding:10px 40px 10px 12px; font-size:.92rem; width:100%; }
.helpsearch.mini button { position:absolute; right:2px; top:2px; bottom:2px; width:36px; border:0; background:none; padding:0; display:flex; align-items:center; justify-content:center; color:var(--mut); }
.helpsearch.mini button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.helpside h4 { margin:0 0 12px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.helpside nav { display:flex; flex-direction:column; }
.hcn { padding:7px 0; color:var(--mut); text-decoration:none; font-size:1rem; }
.hcn:hover { color:var(--fg); }
.hcn.on { color:var(--fg); font-weight:700; }
.hcn i { font-style:normal; margin-left:4px; }
.hsub { list-style:none; margin:2px 0 10px; padding:0 0 0 12px; border-left:2px solid var(--line); }
.hsub a { display:block; padding:5px 0 5px 12px; color:var(--mut); text-decoration:none; font-size:.88rem; line-height:1.35; }
.hsub a:hover { color:var(--fg); }
.hsub a.cur { color:var(--acc); font-weight:600; }
.helpcard { background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:44px 48px 36px; margin:0; max-width:none; }
.helpcard .helpart h1, .helpcard h1 { margin:6px 0 18px; font-size:2rem; line-height:1.2; }
@media (max-width: 860px) { .helplay { grid-template-columns:1fr; gap:28px; padding-top:28px; } .helpside { position:static; } .helpcard { padding:26px 22px; } }
.helpsearch.mini input { font-size:.86rem; padding:10px 34px 10px 10px; }

/* Terms of Service, Privacy Policy and Contact Us: header links, tabs, centered title */
.hnav { display:flex; gap:28px; margin:0 auto; }
.hnav a { color:var(--fg); text-decoration:none; font-size:.95rem; }
.hnav a:hover { color:var(--acc); }
.legaltabs { display:flex; justify-content:center; gap:4px; flex-wrap:wrap; max-width:760px; margin:34px auto 0; border-bottom:1px solid var(--line); padding:0 12px; }
.legaltabs a { padding:14px 16px; color:var(--fg); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:.98rem; }
.legaltabs a:hover { color:var(--acc); }
.legaltabs a.on { color:var(--acc); border-bottom-color:var(--acc); }
.legal.docs { max-width:820px; margin-top:44px; }
.legal h1 { text-align:center; font-size:2.6rem; margin:0 0 34px; line-height:1.15; }
.legal .effective { margin:0 0 30px; }
.legal h2 { font-size:1.45rem; margin:36px 0 10px; }
.contactform { display:flex; flex-direction:column; gap:6px; max-width:620px; margin:26px auto 10px; }
.contactform label { font-weight:600; margin-top:12px; font-size:.92rem; }
.contactform input, .contactform select, .contactform textarea { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; }
.contactform textarea { resize:vertical; min-height:150px; }
.contactform .btn { align-self:flex-start; margin-top:18px; padding:11px 26px; }
.contactmsg { max-width:620px; margin:18px auto; padding:12px 14px; border-radius:6px; background:var(--hover); }
.contactmsg.ok { background:#e4f6ec; color:#135c34; }
.contactalt { max-width:620px; margin:26px auto 0; color:var(--mut); }
@media (max-width: 760px) { .hnav { display:none; } .legal h1 { font-size:2rem; } }

/* an invitation to a workspace, waiting for an answer */
.invbanner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1252px; margin:14px auto 0; padding:12px 18px; border:1px solid #bcd4f6; border-radius:8px; background:#e8f1fd; color:var(--fg); }
.invbanner .invbtns { display:flex; gap:10px; }
.invbanner form { margin:0; }
.invbanner button { padding:7px 18px; }

/* Settings > Organization */
.orgform { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; max-width:780px; }
.orgform .orgfull { grid-column:1 / -1; }
.orgf { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.orgf span { font-weight:600; }
.orgf input { width:100%; box-sizing:border-box; }
.orgpol fieldset { border:1px solid #ddd; border-radius:8px; padding:12px 16px; margin:0; display:flex; flex-direction:column; gap:8px; }
.orgpol legend { font-weight:700; padding:0 6px; }
.orgpol fieldset p { margin:0; }
.orgrow { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; }
@media (max-width:640px) { .orgform, .orgrow { grid-template-columns:1fr; } }

/* Owner Console */
.conrow { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; }
.concard { border:1px solid #ddd; border-radius:8px; padding:12px 18px; min-width:120px; display:flex; flex-direction:column; }
.concard b { font-size:24px; }
.concard span { color:#666; font-size:13px; }
.contable { width:100%; border-collapse:collapse; font-size:14px; }
.contable th, .contable td { text-align:left; padding:8px 10px; border-bottom:1px solid #eee; vertical-align:top; }
.contable th { font-weight:600; color:#555; }
.conbad { color:#b3261e; font-weight:600; }
.conbadbtn { color:#b3261e; }
.consearch { display:flex; gap:8px; margin:0 0 14px; max-width:480px; }
.consearch input { flex:1; }
.conpages { margin:12px 0 0; }
.condl { display:grid; grid-template-columns:200px 1fr; gap:6px 16px; margin:0; }
.condl dt { color:#666; }
.condl dd { margin:0; }

/* List view: the star sits beside the gear (not on top of it), in the same place for pictures and folders */
.v-list .fav { top:50%; right:42px; transform:translateY(-50%); background:none; }
.v-list .item { padding-right:84px; }
.v-list .head { padding-right:84px; }   /* the same room on the right as a row has for the star and gear, so Size and Date line up */

/* Encrypted badge next to the folder name in the breadcrumbs */
.encbadge { display:inline-flex; align-items:center; gap:4px; margin-left:4px; padding:2px 9px 2px 7px; border-radius:999px; background:#e6efff; color:#2447c4; font-size:.78rem; font-weight:600; white-space:nowrap; }
.encbadge svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.gearmenu { z-index:60; }   /* above the sticky header (40) */

/* Documents: a page-shaped tile in the gallery, the PDF viewer and a file card on the viewer page */
.docthumb { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:100%; border-radius:6px; background:var(--hover); }
.docthumb b { display:inline-block; padding:3px 8px; border-radius:4px; background:var(--dk, #64748b); color:#fff; font-size:.8rem; letter-spacing:.04em; }
.docthumb.dk-pdf { --dk:#d93025; } .docthumb.dk-word { --dk:#2b579a; } .docthumb.dk-excel { --dk:#1e7a45; } .docthumb.dk-ppt { --dk:#d24726; }
.item .docwrap { cursor:pointer; }
.v-grid .item .docthumb { height:130px; border-radius:0; }
.v-large .item .docthumb { height:200px; border-radius:0; }
.v-large .item .docthumb b { font-size:1rem; padding:4px 10px; }
.v-list .item .docthumb { width:44px; height:36px; border-radius:3px; border:1px solid var(--line); }
.v-list .item .docthumb b { font-size:.62rem; padding:2px 4px; }
.v-list .docwrap { width:44px; height:36px; }
.docthumb.small { width:36px; height:36px; }
.docthumb.small b { font-size:.62rem; padding:2px 4px; }
.vthumb .docthumb { width:100%; height:100%; border-radius:0; }
.vthumb .docthumb b { font-size:.62rem; padding:2px 4px; }
.vstage > iframe.docframe { width:100%; height:calc(100vh - 52px - 56px - 32px); border:0; background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.18); }
.doccard { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 44px; text-align:center; background:var(--bg); border-radius:10px; box-shadow:0 2px 16px rgba(0,0,0,.14); }
.doccard h2 { margin:6px 0 0; font-size:1.15rem; word-break:break-word; }
.doccard p { margin:0; color:var(--mut); }
.docthumb.big { width:130px; height:160px; }
.docthumb.big b { font-size:1.2rem; padding:5px 12px; }
.trashtable span.tthumb { display:inline-flex; width:36px; height:36px; }

/* An empty folder: while the upload box is open it takes the place of the "Nothing here yet" box, and that comes back when the upload box is closed */
.panel.upbox.open ~ .emptyfolder, .panel.upbox.open ~ * .emptyfolder { display:none; }

/* ---------- the new landing page ---------- */
.landing main { overflow-x:clip; }
.lp-kicker { margin:0 0 10px; color:var(--acc); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.lp-hero { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:40px; align-items:center; max-width:1180px; margin:0 auto; padding:64px 24px 24px; }
.lp-herotext h1 { margin:0 0 18px; font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.1; font-weight:800; }
.lp-herotext h1 span { color:var(--acc); }
.lp-lead { margin:0 0 26px; max-width:540px; color:var(--mut); font-size:1.12rem; line-height:1.55; }
.lp-cta { display:flex; flex-wrap:wrap; gap:12px; }
.lp-note { margin:16px 0 0; color:var(--mut); font-size:.92rem; }
.lp-note a { color:var(--acc); text-decoration:none; }
.lp-note a:hover { text-decoration:underline; }
.lp-herovis svg { width:100%; height:auto; display:block; filter:drop-shadow(0 18px 34px rgba(37,99,235,.18)); }
.lp-win { fill:var(--bg); stroke:var(--line); stroke-width:2; }
.lp-side { fill:var(--hover); }
.lp-tile { fill:var(--card); stroke:var(--line); stroke-width:1.5; }
.lp-bar { fill:var(--line); } .lp-bar2 { fill:var(--acc); opacity:.75; }
.lp-pill { fill:#2563eb; }
.lp-sec { max-width:1180px; margin:0 auto; padding:72px 24px 0; }
.lp-head { max-width:700px; margin:0 auto 34px; text-align:center; }
.lp-head h2, .lp-text h2, .lp-final h2 { margin:0 0 12px; font-size:clamp(1.6rem, 3.4vw, 2.2rem); line-height:1.2; font-weight:800; }
.lp-head p { margin:0; color:var(--mut); font-size:1.05rem; line-height:1.55; }
.lp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.lp-feat { padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.lp-feat h3 { margin:12px 0 8px; font-size:1.05rem; }
.lp-feat p { margin:0; color:var(--mut); font-size:.93rem; line-height:1.5; }
.lp-feat .planbadge { margin-left:6px; font-size:.7rem; padding:2px 8px; }
.lp-ic { width:30px; height:30px; padding:6px; box-sizing:content-box; border-radius:10px; background:var(--hover); fill:none; stroke:var(--acc); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.lp-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:center; }
.lp-split.lp-flip .lp-text { order:2; }
.lp-text p { margin:0 0 16px; color:var(--mut); font-size:1.03rem; line-height:1.55; }
.lp-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lp-list li { display:flex; gap:10px; align-items:flex-start; line-height:1.4; }
.lp-tick { flex:none; width:18px; height:18px; margin-top:1px; fill:var(--acc); }
.lp-tick path { fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lp-visual { display:flex; justify-content:center; }
.lp-card { width:100%; max-width:430px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:0 18px 40px rgba(15,23,42,.1); }
.lp-cardhead { margin:0 0 12px; font-weight:700; }
.lp-row { display:flex; align-items:center; gap:12px; padding:11px 12px; margin:0 0 6px; border:1px solid var(--line); border-radius:10px; }
.lp-row.on { border-color:var(--acc); background:var(--hover); }
.lp-dot { flex:none; width:16px; height:16px; border:2px solid var(--line); border-radius:50%; }
.lp-row.on .lp-dot { border-color:var(--acc); background:radial-gradient(circle, var(--acc) 45%, transparent 50%); }
.lp-person { display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line); }
.lp-person:last-child { border-bottom:0; }
.lp-person b { flex:1; }
.lp-av { flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:#fff; font-size:.78rem; font-weight:700; }
.lp-av1 { background:#7c3aed; } .lp-av2 { background:#0ea5e9; } .lp-av3 { background:#16a34a; } .lp-av4 { background:#f59e0b; }
.lp-chip { padding:3px 10px; border-radius:999px; background:var(--hover); color:var(--mut); font-size:.78rem; font-weight:600; }
.lp-chip.lp-pend { background:#fef3c7; color:#92400e; }
.lp-brandcard { padding:0; overflow:hidden; }
.lp-brandtop { display:flex; align-items:center; gap:10px; padding:14px 18px; background:#a8484e; color:#fff; }
.lp-logo { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:#fff; color:#a8484e; font-weight:800; }
.lp-brandbody { padding:18px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lp-brandfile { width:100%; height:110px; border-radius:10px; background:linear-gradient(135deg, #fde2e4, #fbd0d3); }
.lp-brandbtn { padding:9px 22px; border-radius:8px; background:#a8484e; color:#fff; font-weight:600; }
.lp-swatches { display:flex; gap:8px; padding:0 18px 18px; }
.lp-sw { width:26px; height:26px; border-radius:50%; }
.lp-sw.sw1 { background:#a8484e; } .lp-sw.sw2 { background:#2563eb; } .lp-sw.sw3 { background:#16a34a; } .lp-sw.sw4 { background:#7c3aed; }
.lp-folderrow { display:flex; align-items:center; gap:14px; margin:0 0 12px; padding:10px; border-radius:12px; background:var(--hover); }
.lp-folderrow img { width:78px; height:auto; display:block; }
.lp-folderrow b { display:block; font-size:1.05rem; margin:0 0 6px; }
.lp-folderrow .encbadge { margin-left:0; }
.lp-check { display:flex; gap:10px; align-items:center; padding:8px 4px; }
.lp-plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; align-items:stretch; }
.lp-plan { display:flex; flex-direction:column; gap:10px; padding:24px 22px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.lp-plan h3 { margin:0; font-size:1.2rem; }
.lp-plan.plus h3 { color:#2563eb; } .lp-plan.business h3 { color:#a8484e; } .lp-plan.enterprise h3 { color:#b18165; }
.lp-price b { font-size:1.9rem; font-weight:800; }
.lp-price small { color:var(--mut); font-size:.8rem; }
.lp-ptag { margin:0; color:var(--mut); font-size:.92rem; }
.lp-plist { list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:8px; flex:1; font-size:.92rem; }
.lp-plist li { display:flex; gap:9px; align-items:flex-start; }
.lp-plan .btn, .lp-plan button { text-align:center; }
.lp-more { margin:20px 0 0; text-align:center; }
.lp-more a { color:var(--acc); text-decoration:none; font-weight:600; }
.lp-final { max-width:760px; margin:80px auto 0; padding:52px 24px; text-align:center; border-radius:24px; background:var(--hover); }
.lp-final p { margin:0 0 22px; color:var(--mut); font-size:1.05rem; }
.lp-final .lp-note { margin:18px 0 0; font-size:.92rem; }
@media (max-width: 860px) {
  .lp-hero { grid-template-columns:1fr; padding-top:40px; text-align:center; }
  .lp-lead { margin-left:auto; margin-right:auto; }
  .lp-cta { justify-content:center; }
  .lp-split { grid-template-columns:1fr; gap:28px; }
  .lp-split.lp-flip .lp-text { order:0; }
  .lp-sec { padding-top:52px; }
}

/* PDF preview (pdfview.js draws the pages) */
.pdfview { width:100%; height:calc(100vh - 52px - 56px - 32px); display:flex; flex-direction:column; background:var(--bg); border-radius:6px; box-shadow:0 2px 16px rgba(0,0,0,.18); overflow:hidden; }
.pdftools { flex:none; display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); }
.pdftools button { padding:4px 11px; min-width:34px; }
.pdftools .pdfpage, .pdftools .pdfzoom { min-width:56px; text-align:center; color:var(--mut); font-size:.9rem; }
.pdftools .pdfsep { flex:1; }
.pdfpages { flex:1; min-height:0; overflow-x:auto; overflow-y:scroll; padding:14px; background:#ececec; }
@media (prefers-color-scheme: dark) { .pdfpages { background:#1b1b1b; } }
.pdfpg { margin:0 auto 14px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.25); }
.pdfpg canvas { display:block; }
.pdfmsg { margin:0; padding:40px 20px; text-align:center; color:var(--mut); }
@media (max-width: 760px) { .pdfview { height:calc(100vh - 100px - 56px - 24px); } .pdfpages { padding:8px; } }

/* The ? help menu beside the bell, and the feedback box */
.helpmenu { position:relative; }
.helpmenu .menu { min-width:190px; }
.helpmenu .menu a, .helpmenu .menu button { display:block; width:100%; box-sizing:border-box; padding:9px 18px; border:0; border-radius:0; background:none; color:var(--fg); text-align:left; text-decoration:none; font:inherit; cursor:pointer; }
.helpmenu .menu a:hover, .helpmenu .menu button:hover { background:var(--hover); }
.feeddlg { position:relative; width:min(520px, calc(100vw - 32px)); }
.feeddlg textarea { display:block; width:100%; box-sizing:border-box; margin:0 0 14px; padding:10px 12px; font:inherit; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); resize:vertical; }
.feeddlg .dlgbtns { justify-content:flex-end; }
.feeddlg .feedx { position:absolute; top:10px; right:14px; width:30px; height:30px; padding:0; border:0; background:none; color:var(--mut); font-size:24px; line-height:1; cursor:pointer; }
.feeddlg .feedx:hover { color:var(--fg); border:0; }
.feeddlg h3 { margin-top:4px; }

/* Data Processing Agreement and Security pages */
.secintro { text-align:center; margin:0 auto 34px; max-width:620px; }
.secintro p { margin:0 0 20px; color:var(--mut); font-size:1.15rem; line-height:1.5; }
.legal .docs table, .legal table { width:100%; }
.legal th, .legal td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.legaltabs { max-width:920px; }   /* five tabs fit on one line */
.contactform label.radio { display:flex; gap:10px; align-items:flex-start; font-weight:400; margin-top:16px; }
.contactform input[type=checkbox] { width:auto; flex:none; margin:3px 0 0; padding:0; }
.legal table { font-size:.88rem; }

/* Two-step verification */
.twofa-on { display:inline-block; padding:2px 10px; margin-right:6px; border-radius:999px; background:#dcfce7; color:#166534; font-weight:700; font-size:.82rem; }
.totpkey { margin:12px 0 16px; }
.totpkey code { display:inline-block; padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:var(--hover); font-size:1.15rem; letter-spacing:.08em; word-break:break-all; }
.twosteps { margin:0 0 6px; padding-left:20px; }
.recbox { margin:0 0 18px; padding:14px 16px; border:1px solid #f59e0b; border-radius:10px; background:#fffbeb; color:#1a1a1a; }
.recbox p { margin:6px 0 12px; }
.reccodes { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.reccodes code { padding:6px 10px; border:1px solid #fcd34d; border-radius:6px; background:#fff; font-size:1rem; letter-spacing:.06em; text-align:center; }
.totpqr { margin:8px 0 12px; }
.totpqr canvas { display:block; width:240px; height:240px; max-width:100%; border:1px solid var(--line); border-radius:8px; image-rendering:pixelated; background:#fff; }

/* the footer, redesigned to go with the landing page (overrides the first version above) */
.sitefoot { margin-top:80px; padding:0; border-top:0; background:var(--hover); }
.sitefoot .foot-in { max-width:1180px; padding:56px 24px 40px; gap:56px; align-items:flex-start; }
.sitefoot .fbrand { max-width:300px; }
.sitefoot .fbrand .logo img { height:30px; }
.sitefoot .ftag { margin:16px 0 18px; color:var(--mut); font-size:.98rem; line-height:1.5; }
.sitefoot .fcta { display:flex; flex-wrap:wrap; gap:10px; }
.sitefoot .fcols { gap:48px 56px; flex:1; justify-content:flex-end; }
.sitefoot .fcols h4 { margin:0 0 16px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.sitefoot .fcols a { margin:0 0 11px; }
.sitefoot .fbar { max-width:1180px; margin:0 auto; padding:20px 24px 28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; }
.sitefoot .fbar p { margin:0; font-size:.85rem; color:var(--mut); }
.sitefoot .fsmall a { margin-left:20px; color:var(--mut); text-decoration:none; }
.sitefoot .fsmall a:hover { color:var(--fg); text-decoration:underline; }
@media (max-width: 760px) { .sitefoot .foot-in { padding:40px 20px 28px; } .sitefoot .fcols { justify-content:flex-start; } .sitefoot .fsmall a { margin:0 16px 0 0; } }
.sitefoot .foot-in { flex-wrap:nowrap; gap:48px; }
.sitefoot .fcols { display:grid; grid-template-columns:repeat(4, minmax(120px, auto)); gap:32px 44px; flex:1; justify-content:end; }
@media (max-width: 980px) { .sitefoot .foot-in { flex-direction:column; gap:32px; } .sitefoot .fcols { grid-template-columns:repeat(2, minmax(130px, 1fr)); justify-content:stretch; width:100%; } }