:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1c2430;
  background: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

/* Top donation + Important Study Material access ribbon */
.top-donation-ribbon {
  width: 100%;
  padding: 10px clamp(12px, 3vw, 34px) 12px;
  background: #fff;
  border-bottom: 1px solid #f0e4d1;
  box-shadow: 0 3px 12px rgba(55, 42, 24, .045);
}
.top-donation-ribbon[hidden] { display: none; }
.top-donation-ribbon-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #46536a;
  text-align: left;
  font-size: clamp(1rem, 2vw, 1.32rem);
  line-height: 1.35;
  font-weight: 800;
  cursor: pointer;
}
.top-donation-ribbon-head:hover { color: #8d3c1f; }
.top-donation-ribbon-head:focus-visible {
  outline: 3px solid rgba(255, 171, 34, .35);
  outline-offset: 4px;
  border-radius: 8px;
}
.top-donation-ribbon-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.top-donation-pill {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 18px;
  border: 1.5px solid #ffae22;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf5 0%, #fff9e8 100%);
  color: #8c3518;
  text-align: center;
  font-size: clamp(.94rem, 1.7vw, 1.12rem);
  line-height: 1.35;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.top-donation-pill[hidden] { display: none; }
.top-donation-pill-study {
  border-color: #d7a228;
  color: #6e4d0b;
  background: linear-gradient(180deg, #fffef8 0%, #fff8dc 100%);
}
@media (max-width: 760px) {
  .top-donation-ribbon { padding: 9px 12px 11px; }
  .top-donation-ribbon-pills { grid-template-columns: 1fr; gap: 8px; margin-top: 9px; }
  .top-donation-pill { min-height: 50px; padding: 10px 14px; }
}
button, input { font: inherit; }
.topbar {
  min-height: 120px;
  padding: 24px clamp(18px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #172033;
  color: white;
}
.topbar h1 { margin: 0 0 5px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.topbar p { margin: 0; color: #cbd3e1; }
.upload-btn, .secondary-btn {
  border: 0;
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 700;
}
.upload-btn { background: white; color: #172033; white-space: nowrap; }
.container { width: min(1180px, calc(100% - 32px)); margin: 24px auto 60px; }
.status-row, .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.status-row { min-height: 30px; margin-bottom: 12px; }
.status-text { color: #496076; text-align: right; }
.drop-zone {
  border: 2px dashed #a9b6c7;
  border-radius: 16px;
  background: white;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
  transition: .2s ease;
}
.drop-zone.dragover { border-color: #172033; background: #edf2fa; transform: translateY(-1px); }
.drop-zone span { display: block; color: #6a7788; margin-top: 3px; font-size: .92rem; }
.drop-icon {
  width: 54px; height: 54px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800;
  background: #eef1f6; color: #263247;
}
.section-title-row h2 { margin: 0; }
.secondary-btn { background: #e9eef6; color: #27344a; padding: 8px 12px; }
.pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.pdf-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  background: white;
  border: 1px solid #e1e6ee;
  border-radius: 15px;
  padding: 18px;
  box-shadow: 0 7px 20px rgba(22, 33, 52, .055);
}
.pdf-badge {
  width: 48px; height: 48px; border-radius: 10px;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
  background: #f1f3f7; color: #34435a;
}
.pdf-title {
  margin: 13px 0 5px;
  font-weight: 750;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.pdf-meta { color: #7b8796; font-size: .84rem; margin-bottom: 15px; }
.card-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-items: stretch;
}
.card-actions .open-btn { grid-column: 1 / -1; }
.open-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #172033;
  color: white;
  border-radius: 9px;
  padding: 10px 12px;
  font-weight: 700;
}
.document-card .edit-document-btn {
  background: #15634f;
}
.document-card .edit-document-btn:hover {
  background: #10503f;
}
.delete-btn {
  border: 1px solid #d9a7a7;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff7f7;
  color: #9b2727;
  cursor: pointer;
  font-weight: 750;
}
.delete-btn:hover { background: #fceaea; }
.delete-btn:disabled { cursor: wait; opacity: .65; }
.empty-state { text-align: center; padding: 50px 20px; color: #718095; background: white; border-radius: 15px; margin-top: 16px; }
@media (max-width: 640px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .upload-btn { width: 100%; text-align: center; }
  .status-row { align-items: flex-start; flex-direction: column; }
  .status-text { text-align: left; }
  .card-actions { grid-template-columns: 1fr; }
}

/* DOCX cards use the same library layout, with a small visual type distinction. */
.document-card.type-docx .pdf-badge {
  background: #e8eefb;
  color: #214f9a;
}
.document-card.type-pdf .pdf-badge {
  background: #f5ecec;
  color: #8a3030;
}
/* Cross-device progress sync account controls */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #d7deea;
  font-size: .88rem;
}
.account-btn {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 9px;
  padding: 8px 11px;
  background: rgba(255,255,255,.12);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.account-btn:hover { background: rgba(255,255,255,.2); }
.account-btn-subtle { background: transparent; }

.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 16, 28, .62);
}
.auth-modal-backdrop[hidden] { display: none; }
.auth-modal {
  width: min(470px, 100%);
  background: white;
  color: #1c2430;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.auth-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.auth-modal h2 { margin: 0 0 5px; font-size: 1.25rem; }
.auth-modal p { margin: 0; color: #66758a; line-height: 1.45; }
.auth-close-btn {
  border: 0;
  background: #eef2f7;
  color: #263247;
  border-radius: 9px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1.3rem;
}
.auth-field { display: grid; gap: 6px; margin: 13px 0; font-weight: 700; font-size: .9rem; }
.auth-field input {
  width: 100%;
  border: 1px solid #cbd4df;
  border-radius: 10px;
  padding: 11px 12px;
  color: #1c2430;
  background: white;
  outline: none;
}
.auth-field input:focus { border-color: #536b8d; box-shadow: 0 0 0 3px rgba(83,107,141,.13); }
.auth-message { min-height: 22px; margin: 8px 0 4px; color: #42546c; font-size: .9rem; }
.auth-message.error { color: #9b2727; }
.auth-message.success { color: #176a42; }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.auth-action-btn {
  border: 1px solid #c8d2df;
  border-radius: 10px;
  padding: 11px 13px;
  background: #f3f6fa;
  color: #243249;
  font-weight: 800;
  cursor: pointer;
}
.auth-action-btn.primary { background: #172033; color: white; border-color: #172033; }
.auth-action-btn:disabled { opacity: .6; cursor: wait; }
.auth-help { margin-top: 14px !important; font-size: .82rem; }

@media (max-width: 640px) {
  .header-actions { width: 100%; justify-content: stretch; }
  .auth-summary { width: 100%; justify-content: space-between; }
  .header-actions .upload-btn { width: 100%; }
  .auth-actions { grid-template-columns: 1fr; }
}

.share-btn {
  border: 1px solid #9eb2cf;
  border-radius: 9px;
  padding: 10px 12px;
  background: #f1f6fd;
  color: #284d7d;
  cursor: pointer;
  font-weight: 750;
}
.share-btn:hover { background: #e5eefb; }
.share-btn:disabled { cursor: wait; opacity: .65; }
.ownership-line {
  margin-top: 5px;
  color: #51657f;
  font-size: .8rem;
  font-weight: 650;
}
.upload-btn.is-disabled {
  opacity: .7;
  cursor: pointer;
}

/* Personal-library filename search */
.library-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.search-tools { min-width: min(420px, 48vw); }
.search-tools[hidden] { display: none; }
.library-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 9px 0 12px;
  border: 1px solid #cbd4df;
  border-radius: 11px;
  background: white;
  box-shadow: 0 2px 8px rgba(22, 33, 52, .035);
}
.library-search:focus-within {
  border-color: #536b8d;
  box-shadow: 0 0 0 3px rgba(83,107,141,.13);
}
.search-icon {
  color: #6d7c90;
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(-18deg);
}
.library-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1c2430;
  padding: 8px 0;
}
.library-search input::-webkit-search-cancel-button { display: none; }
.clear-search-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  border-radius: 8px;
  background: #eef2f7;
  color: #405169;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}
.clear-search-btn:hover { background: #e1e7ef; }
.search-summary {
  margin-top: 10px;
  color: #5d6e83;
  font-size: .9rem;
}
.search-summary[hidden] { display: none; }

@media (max-width: 760px) {
  .section-title-row { align-items: stretch; flex-direction: column; }
  .library-controls { width: 100%; }
  .search-tools { min-width: 0; flex: 1 1 auto; }
  .library-controls .secondary-btn { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  .library-controls { align-items: stretch; flex-direction: column; }
  .library-controls .secondary-btn { width: 100%; }
}

.rename-btn {
  border: 1px solid #b9c6d8;
  border-radius: 9px;
  padding: 10px 9px;
  background: #f7f9fc;
  color: #30435e;
  cursor: pointer;
  font-weight: 750;
}
.rename-btn:hover { background: #edf2f8; }
.rename-btn:disabled { cursor: wait; opacity: .65; }
.admin-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .admin-link { width: 100%; }
}


/* Upload progress */
.upload-progress-panel {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #d4dde9;
  border-radius: 13px;
  background: white;
  box-shadow: 0 5px 16px rgba(22, 33, 52, .05);
}
.upload-progress-panel[hidden] { display: none; }
.upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #26354b;
}
#uploadProgressPercent {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #334a69;
}
.upload-progress-track {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf1;
}
.upload-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #315f97;
  transition: width .12s linear;
}
.upload-progress-details {
  margin-top: 8px;
  color: #607087;
  font-size: .86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.upload-progress-panel.is-success {
  border-color: #add3bd;
  background: #f5fbf7;
}
.upload-progress-panel.is-success .upload-progress-bar { background: #2f7b50; }
.upload-progress-panel.is-error {
  border-color: #dfb4b4;
  background: #fff8f8;
}
.upload-progress-panel.is-error .upload-progress-bar { background: #a73a3a; }
.upload-btn.is-uploading {
  opacity: .65;
  pointer-events: none;
  cursor: wait;
}
.drop-zone.is-uploading {
  opacity: .72;
  pointer-events: none;
}
@media (max-width: 640px) {
  .upload-progress-head { align-items: flex-start; }
  .upload-progress-panel { padding: 12px 13px; }
}

/* Cashfree voluntary-support UI */
.support-header-btn { border-color: rgba(255,174,73,.65); background: rgba(255,137,40,.16); }
.support-header-btn:hover { background: rgba(255,137,40,.28); }
.support-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
  padding: 18px 20px;
  border: 1px solid #ffd09b;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffaf3, #fff3e2);
  box-shadow: 0 7px 20px rgba(119, 72, 18, .06);
}
.support-card[hidden] { display: none; }
.support-card-icon { font-size: 2rem; }
.support-card h2 { margin: 0 0 4px; color: #8f3516; font-size: 1.16rem; }
.support-card p { margin: 0; color: #6c5b50; line-height: 1.42; }
.support-card-meta { margin-top: 6px; color: #9a4a24; font-size: .86rem; }
.supporter-count-link { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.supporter-count-link:hover { color: #7d3218; }
.support-now-btn, .donation-pay-btn, .thank-you-continue {
  border: 0;
  border-radius: 11px;
  padding: 12px 18px;
  background: #2f67e8;
  color: white;
  font-weight: 800;
  cursor: pointer;
}
.support-now-btn { white-space: nowrap; }
.support-now-btn:hover, .donation-pay-btn:hover { filter: brightness(.96); }

.supporters-section { scroll-margin-top: 18px; margin-top: 34px; background: white; border: 1px solid #f1c999; border-radius: 16px; padding: 18px 20px; }
.supporters-section[hidden] { display: none; }
.supporters-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf0f4; padding-bottom: 12px; }
.supporters-head h2 { margin: 0 0 4px; color: #8f3516; font-size: 1.12rem; }
.supporters-head p { margin: 0; color: #728094; font-size: .88rem; }
.supporter-count-badge { border: 1px solid #ffd0a1; border-radius: 999px; padding: 7px 10px; color: #9a421c; background: #fff8ef; font-weight: 800; font-size: .8rem; white-space: nowrap; }
.supporters-list { max-height: 260px; overflow: auto; }
.supporter-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid #eef1f5; }
.supporter-rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff5e9; color: #a34b22; font-weight: 800; font-size: .8rem; }
.supporter-name { color: #28374e; overflow-wrap: anywhere; }
.supporter-amount { color: #128536; font-weight: 850; }
.supporters-empty { padding: 18px 4px; color: #728094; }

.donation-modal-backdrop { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 16px; background: rgba(14, 20, 31, .65); }
.donation-modal-backdrop[hidden] { display: none; }
.donation-modal, .thank-you-card { position: relative; width: min(550px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 2px solid #ff9f51; border-radius: 24px; background: #fff6e8; padding: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.28); text-align: center; }
.donation-close-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.8); color: #72432c; font-size: 1.4rem; cursor: pointer; }
.donation-heart { font-size: 2rem; }
.donation-modal h2 { margin: 6px 0 10px; color: #963811; }
.donation-lead { margin: 0 0 20px; color: #654f43; line-height: 1.5; }
.donation-field { display: grid; gap: 6px; margin: 12px 0; text-align: left; color: #583e31; font-weight: 750; font-size: .9rem; }
.donation-field small { font-weight: 550; color: #8b7568; }
.donation-field input, .donation-field select { width: 100%; border: 1px solid #c9d3df; border-radius: 13px; padding: 13px 14px; background: white; color: #263247; outline: none; font: inherit; }
.donation-field input:focus, .donation-field select:focus { border-color: #1687e5; box-shadow: 0 0 0 3px rgba(22,135,229,.12); }
.donation-privacy { margin: 10px 0; color: #7d6e66; font-size: .76rem; line-height: 1.45; text-align: left; }
.donation-message {display: none; min-height: 22px; margin: 2px 0; color: #3d5b77; font-size: .88rem; }
.donation-message.error { color: #a02727; }
.donation-pay-btn { width: 100%; margin-top: 1px; font-size: 1.02rem; }
.donation-pay-btn:disabled { opacity: .65; cursor: wait; }
.thank-you-card { background: white; border-color: #e7ebef; padding: 42px 28px; }
.thank-you-heart { font-size: 4.6rem; line-height: 1; }
.thank-you-card h2 { color: #17a44f; font-size: 2rem; margin: 14px 0 22px; }
.thank-you-card p { color: #46515f; line-height: 1.65; font-size: 1.05rem; }
.thank-you-continue { margin-top: 18px; background: #18a957; min-width: 160px; }

@media (max-width: 640px) {
  .support-card { grid-template-columns: auto 1fr; gap: 12px; }
  .support-now-btn { grid-column: 1 / -1; width: 100%; }
  .supporters-head { align-items: center; }
  .donation-modal, .thank-you-card { border-radius: 18px; padding: 24px 18px; }
}

/* Real-time reader presence + group chat */
.reader-presence {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 9px;
  background: #eef9f2;
  color: #24704a;
  font-size: .79rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.reader-presence[hidden] { display: none; }
.reader-presence::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #28a85e;
  box-shadow: 0 0 0 3px rgba(40,168,94,.12);
  vertical-align: 1px;
}

.group-chat-section {
  margin-top: 34px;
  border: 1px solid #dde5ef;
  border-radius: 16px;
  background: white;
  padding: 18px 20px;
  box-shadow: 0 7px 20px rgba(22,33,52,.045);
}
.group-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f5;
}
.group-chat-head h2 { margin: 0 0 4px; font-size: 1.14rem; color: #24344b; }
.group-chat-head p { margin: 0; color: #758297; font-size: .87rem; }
.chat-connection-status {
  border: 1px solid #d8e1ec;
  border-radius: 999px;
  background: #f7f9fc;
  color: #5e6e83;
  padding: 6px 10px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.group-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 16px;
  margin-top: 14px;
}
.chat-main {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  background: #fbfcfe;
}
.chat-messages {
  height: 330px;
  overflow-y: auto;
  padding: 12px;
  scroll-behavior: smooth;
}
.chat-message {
  max-width: 82%;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid #dde5ef;
  border-radius: 12px 12px 12px 4px;
  background: white;
  color: #25344a;
}
.chat-message.own {
  margin-left: auto;
  border-color: #cfe0fb;
  border-radius: 12px 12px 4px 12px;
  background: #eef5ff;
}
.chat-message-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  color: #66768b;
  font-size: .72rem;
}
.chat-message-meta strong { color: #345276; font-size: .77rem; }
.chat-message-text { line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-empty { padding: 36px 12px; text-align: center; color: #8490a0; }
.chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e3e9f1;
  background: white;
}
.chat-compose[hidden] { display: none; }
.chat-compose input {
  min-width: 0;
  border: 1px solid #cad4e1;
  border-radius: 10px;
  padding: 10px 11px;
  outline: none;
}
.chat-compose input:focus { border-color: #5576a7; box-shadow: 0 0 0 3px rgba(85,118,167,.11); }
.chat-compose button {
  border: 0;
  border-radius: 10px;
  padding: 10px 15px;
  background: #172033;
  color: white;
  font-weight: 800;
  cursor: pointer;
}
.chat-compose button:disabled { opacity: .6; cursor: wait; }
.chat-notice { min-height: 0; padding: 0 11px 8px; color: #617289; font-size: .78rem; background: white; }
.chat-notice:empty { display: none; }
.chat-notice.error { color: #9c3131; }
.chat-online-panel {
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  padding: 12px;
  background: #fbfcfe;
}
.chat-online-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #32445e;
  font-weight: 800;
  font-size: .86rem;
  padding-bottom: 9px;
  border-bottom: 1px solid #e7ecf2;
}
.chat-online-title strong { margin-left: auto; }
.online-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28a85e;
  box-shadow: 0 0 0 3px rgba(40,168,94,.12);
}
.online-users-list { max-height: 318px; overflow-y: auto; padding-top: 8px; }
.online-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 5px;
  border-bottom: 1px solid #edf1f5;
  color: #35475f;
  font-size: .84rem;
  overflow-wrap: anywhere;
}
.online-user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.online-user-name { font-weight: 750; color: #35475f; }
.online-user-activity {
  min-width: 0;
  color: #8793a3;
  font-size: .70rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online-user-activity.reading { color: #278552; font-weight: 650; }
.online-user small { grid-column: 2; margin-top: -2px; color: #8793a3; font-size: .68rem; }
.online-users-empty { padding: 16px 4px; color: #8793a3; font-size: .82rem; }
.chat-signed-out {
  margin-top: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 11px;
  padding: 13px;
  background: #f8fafc;
  color: #66768b;
  text-align: center;
  font-size: .86rem;
}
.chat-signed-out[hidden] { display: none; }

@media (max-width: 720px) {
  .group-chat-section { padding: 14px; }
  .group-chat-layout { grid-template-columns: 1fr; }
  .chat-messages { height: 280px; }
  .chat-online-panel { padding: 10px; }
  .online-users-list {
    display: flex;
    gap: 7px;
    max-height: none;
    overflow-x: auto;
    padding: 9px 1px 2px;
  }
  .online-user {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    padding: 7px 10px;
    background: white;
    max-width: min(78vw, 285px);
  }
  .online-user-info { max-width: 230px; }
  .online-user-activity { max-width: 220px; }
  .online-user small { display: none; }
  .chat-message { max-width: 90%; }
}

/* Personal folder organizer */
.folder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 11px;
  overflow-x: auto;
  border: 1px solid #dde4ed;
  border-radius: 11px;
  background: #fff;
  scrollbar-width: thin;
}
.folder-breadcrumb[hidden] { display: none; }
.breadcrumb-item {
  border: 0;
  border-radius: 8px;
  padding: 6px 9px;
  background: transparent;
  color: #36506f;
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
}
.breadcrumb-item:hover { background: #eef3f9; }
.breadcrumb-item.active { background: #e8eef7; color: #172033; }
.breadcrumb-separator { color: #93a0b1; flex: 0 0 auto; }
.folder-create-btn { white-space: nowrap; }

.folder-card {
  border-color: #d7e0ec;
  background: linear-gradient(180deg, #fff, #fbfcfe);
}
.folder-card { position: relative; overflow: hidden; }
.folder-new-ribbon {
  position: absolute;
  top: 10px;
  right: -31px;
  z-index: 3;
  width: 112px;
  padding: 5px 0;
  background: #d7263d;
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
  transform: rotate(42deg);
  pointer-events: none;
}
.folder-card.has-new-content { border-color: #e06a77; box-shadow: 0 0 0 1px rgba(215,38,61,.08); }

.folder-icon-button {
  width: 54px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff5d8;
  cursor: pointer;
  font-size: 1.7rem;
}
.folder-icon-button:hover { background: #ffefbd; }
.folder-title-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1c2430;
  text-align: left;
  cursor: pointer;
}
.folder-title-button:hover { color: #234f86; }
.folder-open-btn { border: 0; cursor: pointer; font: inherit; }
.folder-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folder-actions .open-btn { grid-column: 1 / -1; }

.document-card .card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.move-btn {
  border: 1px solid #b6c8df;
  border-radius: 9px;
  padding: 10px 9px;
  background: #f5f8fc;
  color: #35536f;
  cursor: pointer;
  font-weight: 750;
}
.move-btn:hover { background: #eaf1f8; }
.folder-location-line {
  margin-top: 5px;
  color: #5c718d;
  font-size: .78rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.move-folder-select {
  width: 100%;
  border: 1px solid #cbd4df;
  border-radius: 10px;
  padding: 11px 12px;
  background: white;
  color: #1c2430;
  outline: none;
  font: inherit;
}
.move-folder-select:focus { border-color: #536b8d; box-shadow: 0 0 0 3px rgba(83,107,141,.13); }

@media (max-width: 640px) {
  .folder-breadcrumb { margin-top: 10px; }
  .document-card .card-actions,
  .folder-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folder-actions .open-btn,
  .document-card .card-actions .open-btn { grid-column: 1 / -1; }
}

/* Live folder sharing */
.folder-card.is-shared-folder {
  border-color: #b9d5c6;
  background: linear-gradient(180deg, #ffffff, #f7fcf9);
}
.shared-folder-meta {
  margin-top: 6px;
  color: #226847;
  font-size: .8rem;
  font-weight: 750;
}
.folder-share-btn {
  border: 1px solid #9fc8b1;
  border-radius: 9px;
  padding: 10px 9px;
  background: #f2fbf6;
  color: #236343;
  cursor: pointer;
  font-weight: 750;
}
.folder-share-btn:hover { background: #e5f6ec; }
.folder-share-modal { width: min(620px, 100%); }
.folder-share-form {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(145px, .65fr) auto;
  gap: 10px;
  align-items: end;
}
.folder-share-form .auth-field { margin: 0; }
.folder-share-user-field { min-width: 0; }
.folder-share-user-search {
  position: relative;
  min-width: 0;
}
.folder-share-user-search > input { width: 100%; }
.folder-share-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  z-index: 80;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #cbd4df;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(28, 36, 48, .16);
  padding: 5px;
}
.folder-share-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: #1f2b3b;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.folder-share-suggestion:hover,
.folder-share-suggestion.is-active {
  background: #eef5ff;
}
.folder-share-suggestion-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.folder-share-suggestion-meta {
  flex: 0 0 auto;
  color: #6b7788;
  font-size: .75rem;
  font-weight: 700;
}
.folder-share-suggestion-meta.is-shared { color: #24704a; }
.folder-share-suggestion-empty {
  padding: 10px;
  color: #6d7887;
  font-size: .82rem;
}
.folder-share-form select,
.auth-field select {
  width: 100%;
  border: 1px solid #cbd4df;
  border-radius: 10px;
  padding: 11px 12px;
  color: #1c2430;
  background: white;
  outline: none;
  font: inherit;
}
.folder-share-form select:focus,
.auth-field select:focus { border-color: #536b8d; box-shadow: 0 0 0 3px rgba(83,107,141,.13); }
.folder-share-current-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
}
.folder-share-current-head {
  margin: 0;
  font-weight: 800;
  color: #27344a;
}
.folder-share-remove-all {
  flex: 0 0 auto;
  border-color: #e1aaa5;
  background: #fff5f4;
  color: #9b342e;
  font-weight: 800;
}
.folder-share-remove-all:hover { background: #ffe9e7; }
.folder-share-remove-all:disabled { opacity: .6; cursor: wait; }
.folder-share-list {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}
.folder-share-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e6ee;
  border-radius: 10px;
  background: #fafbfd;
}
.folder-share-person-name {
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.folder-share-person select {
  width: 100%;
  border: 1px solid #cbd4df;
  border-radius: 8px;
  padding: 8px;
  background: white;
}
.folder-share-remove {
  border: 1px solid #d9a7a7;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff7f7;
  color: #9b2727;
  cursor: pointer;
  font-weight: 750;
}
.folder-share-help {
  margin-top: 12px !important;
  font-size: .82rem;
  color: #68788c !important;
}
.shared-document-line {
  margin-top: 5px;
  color: #226847;
  font-size: .8rem;
  font-weight: 700;
}
.view-only-note {
  color: #6d7887;
  font-size: .78rem;
  margin-top: 5px;
}

@media (max-width: 720px) {
  .folder-share-form { grid-template-columns: 1fr; }
  .folder-share-person { grid-template-columns: 1fr; }
  .folder-share-person select,
  .folder-share-remove { width: 100%; }
}
/* Bulk folder sharing + secure folder links */
.folder-share-bulk-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.folder-share-bulk-row > span { color: #68788c; font-size: .78rem; }
.folder-share-all-btn { border-color: #b6c8df; background: #f5f8fc; color: #35536f; font-weight: 800; }
.folder-share-link-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  background: #f8fbff;
}
.folder-share-link-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.folder-share-link-head > div:first-child { display: grid; gap: 4px; min-width: 0; }
.folder-share-link-head strong { color: #27344a; }
.folder-share-link-head span { color: #68788c; font-size: .78rem; }
.folder-share-link-permission { margin: 0; min-width: 145px; }
.folder-share-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.folder-share-link-row input {
  min-width: 0;
  width: 100%;
  border: 1px solid #cbd4df;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  color: #44546a;
  font: inherit;
}
.folder-share-link-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.folder-share-link-disable { border-color: #d9a7a7; background: #fff7f7; color: #9b2727; }
.folder-share-link-message { min-height: 1.2em; margin-top: 8px; color: #66758a; font-size: .78rem; }
.folder-share-link-message.success { color: #24704a; }
.folder-share-link-message.error { color: #a52a2a; }

@media (max-width: 720px) {
  .folder-share-link-head { align-items: stretch; flex-direction: column; }
  .folder-share-link-permission { width: 100%; }
  .folder-share-link-row { grid-template-columns: 1fr; }
  .folder-share-link-row .auth-action-btn { width: 100%; }
}

@media (max-width: 640px) {
  .folder-share-current-head-row { align-items: stretch; flex-direction: column; }
  .folder-share-remove-all { width: 100%; }
}

/* Paid file/folder sharing */
.paid-share-mode-field,
.paid-share-price-field { min-width: 130px; }
.paid-share-price-field input,
.folder-share-link-permission input { width: 100%; }
.paid-share-modal { max-width: 460px; }
.paid-unlock-modal { max-width: 440px; }
.paid-unlock-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 8px 0 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(245, 158, 11, .11); border: 1px solid rgba(245, 158, 11, .32);
}
.paid-unlock-summary strong { min-width: 0; overflow-wrap: anywhere; }
.paid-unlock-summary span { white-space: nowrap; font-weight: 900; font-size: 1.15rem; }
.paid-unlock-btn { font-weight: 850; }
.folder-card.is-shared-folder:has(.paid-unlock-btn) { border-color: rgba(245,158,11,.45); }
.folder-share-person-name { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .folder-share-form { grid-template-columns: 1fr; }
  .paid-share-mode-field, .paid-share-price-field { min-width: 0; }
  .paid-unlock-summary { align-items: flex-start; flex-direction: column; }
}

/* Original-owner-only paid document sharing */
.file-direct-share-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  background: #f8fbff;
}
.file-direct-share-head { display: grid; gap: 4px; margin-bottom: 9px; }
.file-direct-share-head strong { color: #27344a; }
.file-direct-share-head span { color: #68788c; font-size: .78rem; line-height: 1.4; }
.file-direct-share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.file-share-all-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: 10px;
}
.file-share-all-row > span {
  color: #8793a5;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.file-share-all-btn {
  width: 100%;
  font-weight: 800;
  border-style: dashed;
}
.file-share-all-note {
  margin: 6px 0 0;
  color: #68788c;
  font-size: .72rem;
  line-height: 1.4;
}
.file-access-manage-head {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dce4ee;
  display: grid;
  gap: 3px;
}
.file-access-manage-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.file-access-manage-head strong { color: #27344a; }
.file-access-manage-head span { color: #68788c; font-size: .76rem; line-height: 1.4; }
.file-revoke-all-btn {
  border-color: #d89999;
  background: #fff3f3;
  color: #9a2a2a;
  font-weight: 800;
  white-space: nowrap;
}
.file-revoke-all-btn:hover { background: #fde5e5; }
.file-revoke-all-btn:disabled { opacity: .6; cursor: wait; }
.file-access-list { margin-top: 8px; display: grid; gap: 7px; max-height: 220px; overflow: auto; }
.file-access-empty { color: #718095; font-size: .8rem; padding: 8px 2px; }
.file-access-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid #dbe3ed;
  border-radius: 9px;
  background: #fff;
}
.file-access-user { min-width: 0; display: grid; gap: 2px; }
.file-access-user strong { overflow-wrap: anywhere; color: #29384e; font-size: .85rem; }
.file-access-user span { color: #6b7a8d; font-size: .74rem; }
.file-access-user span.is-paid { color: #2c6b47; font-weight: 700; }
.file-access-revoke {
  border: 1px solid #d6a2a2;
  border-radius: 8px;
  background: #fff6f6;
  color: #9a2a2a;
  font-weight: 750;
  padding: 7px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.file-access-revoke:hover { background: #fdeaea; }
.file-access-revoke:disabled { opacity: .6; cursor: wait; }
.file-access-paid-lock { color: #47715a; font-size: .73rem; font-weight: 700; white-space: nowrap; }
.file-direct-share-row input {
  width: 100%; border: 1px solid #cbd4df; border-radius: 10px; padding: 10px 11px;
  background: #fff; color: #1f2b3b; font: inherit;
}
.paid-owner-only-note {
  margin-top: 5px; color: #9b5b15; font-size: .78rem; font-weight: 750;
}
@media (max-width: 640px) {
  .file-direct-share-row { grid-template-columns: 1fr; }
  .file-direct-share-row .auth-action-btn { width: 100%; }
  .file-share-all-row { grid-template-columns: 1fr; }
  .file-share-all-row > span { text-align: center; }
  .file-access-manage-title-row { align-items: stretch; flex-direction: column; }
  .file-revoke-all-btn { width: 100%; }
}

/* Paid-content unlock must stay immediately visible on phones, including
   browsers with dynamic address bars and safe-area insets. */
#contentUnlockModal {
  z-index: 5000;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
}
#contentUnlockModal .paid-unlock-modal {
  width: min(440px, 100%);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  margin: auto;
  -webkit-overflow-scrolling: touch;
}
html.paid-unlock-open,
body.paid-unlock-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  #contentUnlockModal {
    place-items: start center;
    align-items: start;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  #contentUnlockModal .paid-unlock-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    margin: 0 auto;
    padding: 16px;
    border-radius: 14px;
  }
  #contentUnlockModal .auth-modal-head {
    margin-bottom: 12px;
  }
  #contentUnlockModal .paid-unlock-summary {
    margin: 6px 0 10px;
    padding: 11px 12px;
    gap: 6px;
  }
  #contentUnlockModal .auth-field {
    margin: 9px 0;
  }
  #contentUnlockModal .auth-actions {
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
    background: white;
    z-index: 2;
  }
  #contentUnlockModal .paid-unlock-pay {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* Optional paid-study-material catalogue. It stays below the user's normal
   library and is collapsed by default so the home-page workflow is unchanged. */
.marketplace-section {
  margin: 18px 0 24px;
  border: 1px solid #d8e2ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22,33,52,.045);
  overflow: hidden;
}
.marketplace-toggle {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: #f8fafc;
  color: #1f2d40;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font: inherit;
}
.marketplace-toggle:hover { background: #f1f5f9; }
.marketplace-toggle-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.marketplace-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef8;
  color: #31547f;
  font-size: .76rem;
  font-weight: 800;
}
.marketplace-toggle-text { color: #4e6380; font-size: .84rem; font-weight: 750; }
.marketplace-body { padding: 0 14px 14px; border-top: 1px solid #e8edf3; }
.marketplace-intro { margin: 10px 0; color: #68788d; font-size: .84rem; }
.marketplace-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 280px);
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}
.marketplace-card {
  scroll-snap-align: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.marketplace-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marketplace-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #edf2f8;
  color: #435b7a;
  font-size: .69rem;
  font-weight: 850;
}
.marketplace-card.type-docx .marketplace-type-badge { background: #e8eefb; color: #214f9a; }
.marketplace-card.type-pdf .marketplace-type-badge { background: #f5ecec; color: #8a3030; }
.marketplace-price { color: #19603d; font-size: .95rem; }
.marketplace-title {
  color: #1d2938;
  font-weight: 780;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.marketplace-meta { color: #728096; font-size: .76rem; min-height: 18px; }
.marketplace-buy-btn {
  margin-top: auto;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: #172033;
  color: #fff;
  font: inherit;
  font-weight: 780;
  cursor: pointer;
}
.marketplace-buy-btn:hover { background: #26344f; }
@media (max-width: 640px) {
  .marketplace-section { margin-top: 14px; }
  .marketplace-toggle { min-height: 44px; padding: 9px 11px; }
  .marketplace-body { padding: 0 10px 10px; }
  .marketplace-list { grid-auto-columns: minmax(210px, 82vw); }
}

/* Eye-catching paid study material marketplace */
.marketplace-section {
  position: relative;
  border: 1px solid #f0b429;
  background: linear-gradient(135deg, #fffaf0 0%, #fff 52%, #f3f7ff 100%);
  box-shadow: 0 10px 28px rgba(118, 73, 16, .12);
}
.marketplace-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #ff9f1c, #ffcc4d);
  pointer-events: none;
}
.marketplace-toggle {
  min-height: 58px;
  padding: 12px 16px 12px 20px;
  background: linear-gradient(90deg, #fff4d6 0%, #fffaf0 55%, #f7f9ff 100%);
  color: #3b2b0a;
}
.marketplace-toggle:hover { background: linear-gradient(90deg, #ffedbb 0%, #fff7e5 55%, #f1f5ff 100%); }
.marketplace-toggle-title > span:first-child {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #172033;
  box-shadow: 0 4px 12px rgba(23, 32, 51, .18);
  font-size: 1.05rem;
}
.marketplace-toggle-title strong {
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.marketplace-count {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 3px 9px rgba(220, 38, 38, .2);
}
.marketplace-toggle-text {
  padding: 7px 12px;
  border-radius: 999px;
  background: #172033;
  color: #fff;
}
.marketplace-body { background: rgba(255,255,255,.72); }
.marketplace-intro { color: #5d6472; font-weight: 650; }
.marketplace-card {
  border-color: #e4d4b2;
  box-shadow: 0 7px 18px rgba(40, 48, 67, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.marketplace-card:hover {
  transform: translateY(-2px);
  border-color: #e6ae3c;
  box-shadow: 0 11px 24px rgba(40, 48, 67, .13);
}
.marketplace-price {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f7ee;
  color: #12643a;
  font-size: 1rem;
}
.marketplace-buy-btn {
  background: linear-gradient(90deg, #172033, #2b3d63);
  box-shadow: 0 6px 14px rgba(23, 32, 51, .18);
}
.marketplace-buy-btn:hover { background: linear-gradient(90deg, #253451, #38517f); }

/* Seller collection breakdown shown at the end of the home page. */
.sales-collection-section {
  margin: 28px 0 0;
  padding: 20px;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 9px 24px rgba(22, 33, 52, .07);
}
.sales-collection-section[hidden] { display: none; }
.sales-collection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sales-collection-kicker {
  display: inline-block;
  margin-bottom: 5px;
  color: #7b5a08;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.sales-collection-head h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.sales-collection-head p { margin: 5px 0 0; color: #6b7788; font-size: .88rem; }
.sales-count-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: #172033;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}
.sales-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sales-money-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e1e7ef;
  border-radius: 14px;
  background: #fff;
}
.sales-money-card > span { display: block; color: #66758a; font-size: .82rem; font-weight: 750; }
.sales-money-card > strong { display: block; margin: 5px 0 2px; color: #172033; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1; }
.sales-money-card > small { color: #8a95a5; font-size: .75rem; }
.sales-money-card-total { border-color: #d6dfea; background: linear-gradient(180deg, #fff, #f8fafc); }
.sales-money-card-user { border-color: #bfe6ce; background: linear-gradient(180deg, #f5fff8, #fff); }
.sales-money-card-user > strong { color: #167044; }
@media (max-width: 700px) {
  .marketplace-toggle { min-height: 54px; padding-left: 15px; }
  .marketplace-toggle-title > span:first-child { width: 32px; height: 32px; }
  .marketplace-toggle-text { padding: 6px 9px; }
  .sales-collection-section { padding: 15px; }
  .sales-collection-head { align-items: center; }
  .sales-collection-grid { grid-template-columns: 1fr; }
}
.marketplace-title-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.marketplace-title-copy small {
  color: #786543;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .marketplace-title-copy small { display: none; }
}

/* Document share-link rotation stays visually distinct from the normal Share action. */
.file-change-link-btn {
  border-color: #d6a22a;
  background: #fff8df;
  color: #6d4c05;
  font-weight: 800;
}
.file-change-link-btn:hover { background: #ffefb8; }
@media (min-width: 641px) {
  .file-share-actions { grid-template-columns: 1fr 1fr 1fr; }
}

/* Per-document and per-folder seller sales totals (verified PAID orders only). */
.document-sales-line {
  margin-top: 6px;
  font-weight: 700;
  color: #166534;
  line-height: 1.45;
}

/* Owner-controlled paid document preview */
.file-preview-settings { margin-top: 12px; padding: 12px; border: 1px solid rgba(127,127,127,.28); border-radius: 12px; }
.preview-enable-row { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.preview-enable-row input { width: 18px; height: 18px; }
.preview-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.preview-help { margin: 8px 0 0; font-size: .82rem; opacity: .78; line-height: 1.4; }
.marketplace-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.marketplace-preview-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 9px 12px; border-radius: 9px; border: 1px solid currentColor; font-weight: 700; }
@media (max-width: 560px) { .preview-range { grid-template-columns: 1fr; } .marketplace-card-actions > * { flex: 1 1 100%; } }


/* Per-user unread ribbon for purchased/shared/new-in-shared-folder documents. */
.document-card { position: relative; overflow: hidden; }
.document-new-ribbon {
  position: absolute;
  top: 10px;
  right: -31px;
  z-index: 4;
  width: 112px;
  padding: 5px 0;
  background: #d7263d;
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
  transform: rotate(42deg);
  pointer-events: none;
}
.document-card.has-new-content { border-color: #e06a77; box-shadow: 0 0 0 1px rgba(215,38,61,.08); }
.card-reading-progress { margin-top: 8px; }
.card-reading-progress-text { margin-bottom: 5px; font-size: .82rem; font-weight: 750; color: #40536b; }
.card-reading-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e6ebf2; }
.card-reading-progress-bar { height: 100%; width: 0; border-radius: inherit; background: #3b78d8; transition: width .25s ease; }
.card-reading-progress.completed .card-reading-progress-bar { background: #2f7b50; }
.card-reading-progress.completed .card-reading-progress-text { color: #2f6d48; }
.card-reading-progress.not-started .card-reading-progress-text { color: #7b8796; }

/* Folder upload is styled to match the existing document upload control. */
.folder-upload-btn { cursor: pointer; }

/* Paid folder listing: opt-in by owner and a distinct catalog badge. */
.folder-marketplace-optin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 11px;
  margin: 10px 0;
  background: #f8fafc;
  cursor: pointer;
}
.folder-marketplace-optin input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; }
.folder-marketplace-optin span { display: flex; flex-direction: column; gap: 3px; }
.folder-marketplace-optin small { color: #52657b; font-size: .76rem; line-height: 1.45; }
.marketplace-card.type-folder { border-color: #9dcab2; background: #fafffc; }
.marketplace-card.type-folder .marketplace-type-badge { background: #dcefe3; color: #14532d; }


/* Per-reader important stars and global administrator-important indicator. */
.important-filter-btn {
  border: 1px solid #c6a050;
  background: #fff9e7;
  color: #714c04;
  white-space: nowrap;
  font-weight: 800;
  cursor: pointer;
  border-radius: 10px;
  min-height: 42px;
}
.important-filter-btn.is-active, .important-filter-btn[aria-pressed="true"] {
  background: #f3c95f;
  border-color: #aa7d19;
  color: #3f2b00;
}
.important-filter-btn[hidden] { display: none; }
.document-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.important-star-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid #e4d7b1;
  border-radius: 11px;
  color: #936f22; background: #fffdf6;
  cursor: pointer; line-height: 1; font-size: 1.75rem;
  flex: 0 0 auto;
}
.important-star-btn:hover, .important-star-btn:focus-visible { background: #fff2c7; outline-offset: 2px; }
.important-star-btn.is-important { color: #916000; background: #ffedb4; border-color: #e0b744; }
.important-star-btn:disabled { opacity: .55; cursor: wait; }
.document-card.has-new-content .important-star-btn { margin-right: 27px; }
.admin-important-label {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 7px;
  background: #fff1c1;
  color: #67460a;
  font-size: .77rem;
  font-weight: 800;
}
@media (max-width: 760px) {
  .important-filter-btn { flex: 1 0 auto; }
}