/* Layout based on UI_REFERENCE.md; PB brand images are the reference site's themed assets. */
:root { color-scheme: dark; font-family: system-ui,-apple-system,"Segoe UI",sans-serif; color: #ebebeb; background: #66747e; --red: #e1111a; --panel: #1d1d1d; --line: #303030; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, summary { cursor: pointer; }
.password-page, .browser-page { background-image: url('/static/brand/background.jpg'); background-size: cover; background-position: 50% 50%; background-attachment: fixed; }
.public-footer { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 5px 12px; border-radius: 12px; background: rgba(23,23,23,.85); box-shadow: 0 2px 8px #0007; text-align: center; font-size: 13px; white-space: nowrap; }
.password-brand { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 175px; height: 130px; }
.brand-image { display: block; width: 175px; height: 130px; object-fit: contain; }
.password-main { position: absolute; top: calc(15% + 106px); left: 50%; transform: translateX(-50%); }
.password-card { width: max-content; min-width: 238px; max-width: calc(100vw - 24px); padding: 15px; background: #171717; border-radius: 8px; box-shadow: 0 4px 13px #0009; }
.password-card h1 { margin: 0 0 12px; text-align: center; font-size: 20px; font-weight: 700; white-space: nowrap; }
.password-card form { width: 208px; }
.password-field { position: relative; display: block; margin-bottom: 10px; }
.password-field span { position: absolute; top: -9px; left: 10px; z-index: 1; padding: 0 3px; background: #171717; font-size: 12px; }
.password-field input { width: 100%; height: 36px; padding: 7px 35px 7px 9px; border: 2px solid #c9c9c9; border-radius: 8px; outline: none; background: #171717; color: #ebebeb; }
.password-field input:focus { border-color: #fff; }
.password-eye { position: absolute; right: 3px; top: 3px; width: 30px; height: 30px; border: 0; background: none; color: #ebebeb; }
.password-submit { width: 100%; height: 34px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font-size: 15px; font-weight: 500; }
.auth-error { max-width: 270px; margin: 0 0 15px; padding: 7px 9px; background: #793030; font-size: 12px; }
.share-header { height: 50px; padding: 3px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.header-logo { display: block; flex: 0 0 62px; width: 62px; height: 44px; object-fit: contain; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.primary-download { background: var(--red); color: #fff; padding: 8px 11px; border-radius: 8px; font-size: 14px; white-space: nowrap; }
.user-placeholder { width: 32px; height: 32px; border-radius: 50%; background: #293b49; display: grid; place-items: center; font-size: 15px; }
.more-menu, .row-menu { position: relative; }
.more-menu summary, .row-menu summary { list-style: none; padding: 4px 8px; border-radius: 5px; font-size: 18px; line-height: 24px; }
.more-menu summary::-webkit-details-marker, .row-menu summary::-webkit-details-marker { display: none; }
.menu { position: absolute; z-index: 10; right: 0; top: 100%; min-width: 120px; padding: 4px 0; background: #202020; border-radius: 8px; box-shadow: 0 3px 12px #000a; }
.menu a { display: block; padding: 8px 14px; white-space: nowrap; font-size: 14px; }
.menu a:hover { background: #353535; }
.browser-panel { position: relative; min-height: calc(100vh - 58px); margin: 0 8px 8px; background: var(--panel); border-radius: 16px; overflow: visible; padding-bottom: 52px; }
.browser-toolbar { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.breadcrumbs { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; }
.breadcrumbs a { color: #b9b9b9; }
.current-crumb { overflow: hidden; text-overflow: ellipsis; }
.crumb-separator { color: #999; font-size: 22px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.toolbar-actions button, .type-filter { border: 0; background: none; color: #eee; padding: 7px; font-size: 14px; }
.type-filter { position: relative; }
.type-filter select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-row { display: grid; grid-template-columns: 76px minmax(0,1fr) 48px minmax(110px,16%) 94px 120px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); }
.table-head { height: 44px; color: #aaa; font-size: 14px; }
.table-head button { border: 0; background: none; color: inherit; text-align: left; }
.sort-name span { font-size: 10px; margin-left: 4px; }
.check-cell { padding-left: 13px; }
input[type=checkbox] { appearance: none; width: 17px; height: 17px; border: 2px solid #d45f68; border-radius: 2px; background: transparent; cursor: pointer; vertical-align: middle; }
input[type=checkbox]:checked { background: #d45f68; }
input[type=checkbox]:checked::after { content: '✓'; display: block; color: #1d1d1d; font-size: 13px; line-height: 12px; text-align: center; font-weight: bold; }
input[type=checkbox]:indeterminate { background: #d45f68; }
input[type=checkbox]:indeterminate::after { content: '−'; display: block; color: #1d1d1d; line-height: 11px; text-align: center; }
.name-cell { min-width: 0; display: flex; align-items: center; gap: 17px; }
.entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.entry-name:hover { text-decoration: underline; }
.file-icon { flex: 0 0 24px; color: #e1666b; text-align: center; }
.folder-icon { position: relative; height: 16px; }
.folder-icon::before { content: ''; position: absolute; left: 1px; top: 5px; width: 20px; height: 12px; border-radius: 2px; background: #d45f68; }
.folder-icon::after { content: ''; position: absolute; left: 1px; top: 2px; width: 9px; height: 5px; border-radius: 2px 2px 0 0; background: #d45f68; }
.pdf-icon { font-size: 8px; background: #e1666b; color: #1d1d1d; width: 20px; flex-basis: 20px; padding: 4px 0; border-radius: 2px; font-weight: bold; margin-left: 2px; margin-right: 2px; }
.action-cell { text-align: center; }
.row-menu { display: inline-block; }
.row-menu[open] summary, .row-menu summary:hover { background: #353535; }
.type-cell, .size-cell, .modified-cell { padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.size-cell { text-align: right; padding-right: 24px; }
.data-row:hover { background: #292929; }
.table-summary { border-top: 1px solid var(--line); border-bottom: 0; color: #aaa; font-size: 14px; }
.table-summary .name-cell { padding-left: 8px; }
.selected-actions[hidden] { display: none; }
.selected-actions { grid-column: 2 / 4; text-align: left; }
.selected-actions button { border: 0; background: #34292c; color: #f2b0b4; border-radius: 7px; padding: 7px 10px; margin-left: 10px; }
.browser-panel .public-footer { position: fixed; }
.grid-view { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 8px; padding: 8px; }
.grid-view .data-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 32px; min-height: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.grid-view .data-row .type-cell, .grid-view .data-row .size-cell, .grid-view .data-row .modified-cell { display: none; }
.viewer-page { background: #292929; }
.viewer-header { height: 50px; display: flex; align-items: center; justify-content: space-between; background: #111; padding: 0 16px; gap: 12px; }
.viewer-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.viewer-header div { display: flex; gap: 18px; font-size: 24px; }
.pdf-frame { display: block; width: 100%; height: calc(100vh - 50px); border: 0; background: #292929; }
.pdf-toolbar { height: 38px; background: #38383c; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; font-size: 13px; }
.pdf-toolbar > div { display: flex; align-items: center; gap: 5px; }
.pdf-toolbar button, .pdf-toolbar select, .pdf-toolbar input { color: #eee; background: #38383c; border: 1px solid #555; height: 27px; }
.pdf-toolbar button { min-width: 28px; }
.pdf-toolbar input { width: 46px; text-align: center; }
.pdf-toolbar select { width: 110px; }
.pdf-toolbar a { padding: 0 6px; font-size: 20px; }
.pdf-scroll { height: calc(100vh - 88px); overflow: auto; background: #292929; text-align: center; padding: 20px; }
.pdf-scroll canvas { display: none; margin: 0 auto; box-shadow: 0 2px 10px #0007; }
.pdf-scroll p { color: #ddd; font-size: 14px; }
@media (max-width: 650px) {
  .password-brand { top: 0; }
  .share-header { padding-left: 14px; }
  .header-brand { gap: 10px; }
  .header-actions { gap: 6px; }
  .primary-download { display: none; }
  .browser-toolbar { padding: 0 8px; }
  .breadcrumbs { gap: 8px; }
  .breadcrumbs a:not(:first-child), .breadcrumbs .crumb-separator:not(:last-of-type) { display: none; }
  .toolbar-actions #modified-sort { display: none; }
  .type-filter span { font-size: 0; }
  .type-filter span::after { content: '☷'; font-size: 20px; }
  .file-row { grid-template-columns: 46px minmax(0,1fr) 46px; }
  .type-cell, .size-cell, .modified-cell { display: none; }
  .name-cell { gap: 8px; }
  .check-cell { padding-left: 10px; }
  .browser-panel { min-height: calc(100vh - 58px); }
  .public-footer { white-space: normal; width: max-content; min-width: 260px; }
  .pdf-toolbar { padding: 0 5px; }
  .pdf-toolbar select { width: 80px; }
}