:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0b0b0d;
  color: #f1f1f3;
  font-synthesis: none;
}
* { box-sizing: border-box; }
/* Disable browser pull-to-refresh without disabling normal vertical scrolling. */
html, body { overscroll-behavior-y: none; }
/* Keep scrolling inside each list instead of chaining an overscroll to the page. */
.folder-list, .file-tree, .upload-queue, .preview-body, .preview-text {
  overscroll-behavior-y: contain;
}
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse 850px 450px at 96% -10%, rgba(198, 29, 40, .075), transparent 68%), #0b0b0d;
}
button, input { font: inherit; }
.wrap { width: min(1020px, calc(100% - 36px)); margin: 0 auto; padding: 42px 0 56px; }
.header { padding: 6px 0 26px; margin-bottom: 18px; border-bottom: 1px solid #303035; }
h1 { position: relative; margin: 0; padding-left: 19px; font-size: clamp(1.32rem, 4vw, 1.77rem); line-height: 1.35; font-weight: 810; letter-spacing: .085em; }
h1::before { content: ""; position: absolute; top: .18em; bottom: .18em; left: 0; width: 4px; background: #e22e3e; border-radius: 3px; }
h2 { margin: 0; font-size: 1.07rem; font-weight: 690; letter-spacing: -.025em; }
.panel { background: #151517; border: 1px solid #303034; border-radius: 13px; padding: 24px; margin-bottom: 16px; box-shadow: 0 16px 38px #0002; }
.panel-head { margin-bottom: 20px; }
.panel-head p { margin: 6px 0 0; font-size: .82rem; color: #a4a4ab; }
.quota-panel { background: #131315; padding: 20px 24px; }
.quota-head, .quota-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.quota-head { margin-bottom: 14px; font-size: .88rem; color: #bebec3; }
.quota-head strong { font-size: .98rem; font-weight: 750; color: #f4f4f5; font-variant-numeric: tabular-nums; }
.quota-track { width: 100%; height: 9px; border: 1px solid #39393f; border-radius: 999px; background: #26262a; overflow: hidden; }
.quota-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ac2430, #ec3c4c); transition: width .25s ease; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; min-height: 174px; border: 1px dashed #59595e; background: #1b1b1e; border-radius: 10px; padding: 22px 15px; text-align: center; font-weight: 640; cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone:focus-within { background: #232326; border-color: #d33a47; }
.dropzone:focus-within { outline: 2px solid #e34653; outline-offset: 3px; }
.upload-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: #352024; color: #fa5260; border: 1px solid #663039; border-radius: 13px; }
.dropzone input { margin-top: 2px; max-width: 100%; color: #a7a7b0; font-size: .79rem; cursor: pointer; }
.dropzone input::file-selector-button { background: #36363a; color: #fafafa; border: 1px solid #515157; border-radius: 6px; padding: 6px 10px; margin-right: 10px; cursor: pointer; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.filename { color: #9898a0; font-size: .8rem; word-break: break-word; }
button, .download { display: inline-flex; justify-content: center; align-items: center; min-height: 38px; border: 1px solid #49494e; border-radius: 8px; padding: 9px 16px; font-size: .83rem; font-weight: 670; cursor: pointer; transition: background .13s, border-color .13s; }
button:focus-visible, .download:focus-visible { outline: 2px solid #f2616c; outline-offset: 3px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: #cf2737; border-color: #cf2737; color: white; }
.primary:not(:disabled):hover { background: #e33748; border-color: #e33748; }
.secondary, .download { background: #27272b; color: #ebebee; }
.secondary:not(:disabled):hover, .download:hover { background: #37373c; }
.danger { background: #321b20; border-color: #63303a; color: #ff9faa; }
.danger:not(:disabled):hover { background: #56232d; }
.progress-area { margin-top: 20px; }
.progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; font-size: .8rem; color: #d2d2d5; }
.progress-label span { overflow-wrap: anywhere; }
.progress-label strong { font-variant-numeric: tabular-nums; }
progress { display: block; width: 100%; height: 9px; border: 0; accent-color: #df3443; }
progress::-webkit-progress-bar { background: #2c2c30; border-radius: 20px; }
progress::-webkit-progress-value { background: #de3040; border-radius: 20px; }
progress::-moz-progress-bar { background: #de3040; border-radius: 20px; }
.message { margin: 13px 0 0; min-height: 1em; color: #b6b6bd; font-size: .82rem; }
.message:empty { display: none; }
.message.error { color: #ff8e9a; }
.message.success { color: #e2e2e5; }
.files-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.file-list { display: flex; flex-direction: column; }
.file-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid #2f2f34; }
.file-row:first-child { border-top: 0; padding-top: 3px; }
.file-row:last-child { padding-bottom: 3px; }
.file-name { color: #f1f1f3; font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.file-details { margin-top: 5px; font-size: .76rem; color: #96969f; }
.file-actions { display: flex; flex-shrink: 0; gap: 8px; }
.download { text-decoration: none; }
.file-actions button { padding: 8px 12px; }
.empty { padding: 32px 4px; text-align: center; font-size: .89rem; color: #96969f; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .wrap { width: min(100% - 24px, 1020px); padding-top: 23px; }
  .header { padding-bottom: 20px; }
  .panel { padding: 17px; border-radius: 11px; }
  .quota-panel { padding: 17px; }
  .file-row { align-items: flex-start; flex-direction: column; }
  .file-actions { width: 100%; }
  .file-actions .download, .file-actions button { flex: 1; }
  .actions .filename { width: 100%; }
}

/* Animated access gate. Decorative elements are never clickable. */
.gate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(120, 18, 34, .16), transparent 18%),
    radial-gradient(circle at 15% 20%, rgba(160, 36, 58, .10), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(145, 20, 43, .11), transparent 28%),
    radial-gradient(circle at 50% 120%, rgba(110, 14, 29, .18), transparent 38%),
    linear-gradient(180deg, #07080a 0%, #0a0b0d 50%, #08090b 100%);
}
.gate-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.gate-grid,
.gate-grid-secondary,
.gate-orbit,
.gate-halo,
.gate-core,
.gate-scan,
.gate-beam,
.gate-particles,
.gate-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gate-grid {
  inset: -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .20;
  transform: perspective(1100px) rotateX(74deg) scale(1.45);
  transform-origin: center 65%;
  mask-image: radial-gradient(circle at 50% 56%, #000 12%, transparent 74%);
  animation: gateGridDrift 16s linear infinite;
}
.gate-grid-secondary {
  inset: -20%;
  background-image:
    linear-gradient(rgba(226, 56, 76, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 56, 76, .08) 1px, transparent 1px);
  background-size: 98px 98px;
  opacity: .18;
  transform: perspective(1300px) rotateX(78deg) scale(1.8);
  transform-origin: center 62%;
  mask-image: radial-gradient(circle at 50% 58%, #000 8%, transparent 82%);
  animation: gateGridPulse 10s ease-in-out infinite;
}
.gate-orbit {
  inset: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(236, 59, 84, .18);
  filter: drop-shadow(0 0 14px rgba(225, 53, 74, .16));
}
.gate-orbit-outer {
  width: min(86vw, 760px);
  height: min(86vw, 760px);
  animation: orbitRotate 20s linear infinite;
}
.gate-orbit-inner {
  width: min(62vw, 520px);
  height: min(62vw, 520px);
  border-style: dashed;
  border-width: 1px;
  animation: orbitRotateReverse 14s linear infinite;
}
.gate-orbit-diagonal {
  width: min(72vw, 610px);
  height: min(42vw, 360px);
  border-color: rgba(255, 82, 106, .16);
  transform: translate(-50%, -50%) rotate(24deg);
  animation: orbitTilt 10s ease-in-out infinite;
}
.gate-halo {
  inset: 50%;
  translate: -50% -50%;
  width: min(54vw, 480px);
  height: min(54vw, 480px);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 73, 102, .18) 0%, rgba(190, 32, 52, .10) 26%, rgba(70, 8, 17, .04) 44%, transparent 68%);
  filter: blur(6px);
  animation: haloPulse 6.5s ease-in-out infinite;
}
.gate-core {
  inset: 50%;
  translate: -50% -50%;
  width: min(24vw, 180px);
  height: min(24vw, 180px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(252,80,104,.16) 14%, rgba(198,30,52,.09) 38%, transparent 72%);
  filter: blur(8px);
  animation: corePulse 4.2s ease-in-out infinite;
}

.gate-beam {
  inset: 50%;
  translate: -50% -50%;
  width: min(86vw, 760px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 84, 113, .72), transparent);
  box-shadow: 0 0 16px rgba(255, 68, 92, .34);
  opacity: .52;
}
.gate-beam-a { transform: translate(-50%, -50%) rotate(18deg); animation: beamPulse 4.6s ease-in-out infinite; }
.gate-beam-b { transform: translate(-50%, -50%) rotate(-32deg); animation: beamPulse 5.8s ease-in-out infinite reverse; }
.gate-particles {
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 72%, rgba(255,100,124,.95) 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.70) 0 1.2px, transparent 2px),
    radial-gradient(circle at 42% 86%, rgba(232,56,79,.90) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 56% 12%, rgba(255,255,255,.68) 0 1.2px, transparent 2px),
    radial-gradient(circle at 64% 72%, rgba(255,100,124,.95) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.74) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 64%, rgba(255,95,120,.90) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 14% 54%, rgba(255,255,255,.62) 0 1.2px, transparent 2px),
    radial-gradient(circle at 70% 48%, rgba(255,255,255,.66) 0 1.2px, transparent 2px);
  animation: particlesFloat 12s ease-in-out infinite alternate;
  opacity: .72;
}
.gate-noise {
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
  opacity: .12;
}
.gate-card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  min-height: 190px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  border: 1px solid rgba(255, 87, 114, .22);
  background:
    linear-gradient(180deg, rgba(22, 22, 26, .86), rgba(14, 14, 18, .78)),
    radial-gradient(circle at top, rgba(255, 74, 100, .08), transparent 58%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .02) inset,
    0 30px 90px rgba(0, 0, 0, .46),
    0 0 48px rgba(186, 25, 48, .12);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.gate-card::before,
.gate-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gate-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-140%);
  animation: panelShine 6s linear infinite;
}
.gate-card::after {
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 75, 103, .12);
}
.gate-form {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate-request {
  min-width: 220px;
  min-height: 50px;
  padding-inline: 28px;
  font-size: .92rem;
  letter-spacing: .22em;
  font-weight: 760;
}
.gate.waiting .gate-card {
  border-color: rgba(255, 92, 118, .30);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .02) inset,
    0 30px 90px rgba(0, 0, 0, .46),
    0 0 58px rgba(232, 46, 73, .18);
}
.gate-hidden-message { display: none !important; }
.gate.waiting .gate-form { display: none; }
.gate.waiting #waiting-indicator { display: block !important; }
@keyframes gateGridDrift {
  from { transform: perspective(1100px) rotateX(74deg) scale(1.45) translateY(0); }
  to { transform: perspective(1100px) rotateX(74deg) scale(1.45) translateY(54px); }
}
@keyframes gateGridPulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .24; }
}
@keyframes orbitRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbitRotateReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes orbitTilt {
  0%, 100% { transform: translate(-50%, -50%) rotate(24deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(18deg) scale(1.03); }
}
@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.96); opacity: .86; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .68; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

@keyframes beamPulse {
  0%, 100% { opacity: .24; }
  50% { opacity: .68; }
}
@keyframes particlesFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-20px) scale(1.02); }
}
@keyframes panelShine {
  0% { transform: translateX(-140%); }
  28%, 100% { transform: translateX(140%); }
}
@keyframes dotPulse {
  0% { transform: translate(-50%, -50%) scale(.85); }
  100% { transform: translate(-50%, -50%) scale(1.2); }
}
@media (max-width: 640px) {
  .gate-card {
    min-height: 170px;
    border-radius: 18px;
  }
  .gate-request {
    min-width: 210px;
    width: min(100%, 260px);
    letter-spacing: .18em;
  }

}



/* Authorized dashboard: compact storage and centered logout control. */
.private-wrap { width: min(1280px, calc(100% - 48px)); padding-top: 26px; }
.dashboard-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.dashboard-top > .quota-panel {
  width: min(100%, 430px);
  min-height: 0;
  margin: 0;
  padding: 15px 19px;
}
.dashboard-top .quota-head { margin-bottom: 9px; }
.dashboard-top .quota-head span { color: #e7e7ea; font-size: .91rem; font-weight: 760; letter-spacing: .09em; }
.dashboard-top .quota-head strong { font-size: 1rem; }
.dashboard-top .quota-track { height: 12px; }

.end-access-button { grid-column: 2; min-width: 178px; min-height: 44px; letter-spacing: .10em; background: #c82234; border-color: #dc2b40; box-shadow: 0 0 18px rgba(204,28,52,.16); }
.end-access-button:not(:disabled):hover { background: #e13248; border-color: #e13248; }
.top-balance { grid-column: 3; }

/* Upload controls on the left and a live per-file queue on the right. */
.upload-panel { margin-bottom: 18px; padding: 24px; }
.upload-panel > h2 { margin: 0 0 19px; letter-spacing: .10em; font-size: 1rem; }
.upload-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.upload-input-column { min-width: 0; }
.upload-input-column form { width: 100%; }
.upload-input-column .dropzone { min-height: 188px; padding: 20px 12px; gap: 12px; }
.upload-input-column .upload-icon { width: 46px; height: 46px; }
.picker-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.picker-button { position: relative; display: inline-flex; justify-content: center; padding: 9px 13px; border: 1px solid #58585f; border-radius: 7px; background: #2a2a2e; color: #f6f6f7; font-size: .79rem; cursor: pointer; }
.picker-button:hover, .picker-button:focus-within { border-color: #e04252; background: #33333a; }
.picker-button input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; overflow: hidden; }
.upload-actions { justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: nowrap; }
.upload-actions button { flex: 0 1 135px; padding-inline: 12px; }
.upload-input-column .dropzone.has-selection { border-color: #dc3448; box-shadow: inset 0 0 22px rgba(207,39,55,.11); }
.upload-queue-column { display: flex; flex-direction: column; min-width: 0; min-height: 240px; background: #19191c; border: 1px solid #343439; border-radius: 10px; padding: 15px; }
.upload-queue-column h3 { margin: 0 0 13px; color: #c3c3c9; font-size: .70rem; font-weight: 800; letter-spacing: .14em; }
.upload-queue { flex: 1; min-height: 160px; max-height: 258px; overflow: auto; scrollbar-color: #55555c transparent; }
.queue-row { padding: 9px 3px 11px; border-top: 1px solid #323237; }
.queue-row:first-child { border-top: 0; padding-top: 2px; }
.queue-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.queue-filename { font-size: .78rem; font-weight: 570; color: #ededf0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-percent { color: #aaaab2; font-size: .71rem; font-weight: 750; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.queue-track { width: 100%; height: 5px; border-radius: 20px; background: #303036; overflow: hidden; }
.queue-progress { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ae2232,#f44359); transition: width .16s ease; }
.queue-row[data-status="failed"] .queue-progress,
.queue-row[data-status="canceled"] .queue-progress { background: #6e2832; }
.queue-row[data-status="failed"] .queue-filename { color: #f18390; }

.files-panel { min-height: 220px; }
.files-title { margin-bottom: 12px; }
.files-title h2 { letter-spacing: .09em; }
.files-title p:empty { display: none; }
.file-tree { display: block; min-height: 90px; overflow-x: auto; }
.tree-folder { border-top: 1px solid rgba(255,255,255,.055); }
.tree-folder:first-child { border-top: none; }
.tree-folder > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 12px 8px; cursor: pointer; user-select: none; border-radius: 7px; color: #f0f0f2; font-weight: 670; font-size: .89rem; }
.tree-folder > summary::-webkit-details-marker { display: none; }
.tree-folder > summary:hover { background: rgba(255,255,255,.045); }
.tree-chevron { width: 15px; min-width: 15px; height: 15px; display: inline-flex; justify-content: center; align-items: center; color: #dd3446; transform: rotate(0deg); transition: transform .15s ease; }
.tree-folder[open] > summary .tree-chevron { transform: rotate(90deg); }
.tree-folder-contents { margin: 0 0 4px 21px; padding-left: 11px; border-left: 1px solid #343439; }
.tree-file { border-top: 1px solid rgba(255,255,255,.045); padding: 11px 6px; gap: 14px; }
.tree-file:first-child { border-top: none; }
.tree-file .file-info { min-width: 0; }
.tree-file .file-name { display: flex; align-items: center; gap: 9px; }
.tree-file .file-name::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border: 1px solid #bd2e40; border-radius: 2px; }
.tree-file .file-actions { align-items: center; }
.tree-file .file-actions button { min-height: 32px; padding: 6px 11px; }

/* Waiting gate: plain text, no spinner rings or scan animation. */
.waiting-indicator { display: grid; width: 100%; min-height: 138px; place-items: center; padding: 18px 12px; color: #f1eef0; font-size: .88rem; font-weight: 800; letter-spacing: .16em; text-align: center; text-shadow: 0 0 18px rgba(255,74,100,.3); }
.gate.waiting #waiting-indicator { display: grid !important; }

@media (max-width: 760px) {
  .dashboard-top { grid-template-columns: minmax(0, 1fr) auto; }
  .dashboard-top .quota-panel { max-width: none; }
  .top-balance { display: none; }
  .upload-columns { grid-template-columns: 1fr; }
  .upload-queue-column { min-height: 175px; }
}
@media (max-width: 540px) {
  .private-wrap { width: min(100% - 24px, 1280px); padding-top: 18px; }
  .dashboard-top { gap: 10px; }
  .dashboard-top > .quota-panel { padding: 12px; }
  .dashboard-top .quota-head { gap: 6px; flex-wrap: wrap; }
  .dashboard-top .quota-head span { font-size: .82rem; }
  .dashboard-top .quota-head strong { font-size: .88rem; }
  
  .end-access-button { min-width: 110px; padding: 9px 7px; font-size: .73rem; letter-spacing: .04em; }
  .upload-panel { padding: 16px; }
  .tree-file { align-items: flex-start; }
  .tree-file .file-actions { align-self: stretch; }
  .tree-file .file-actions button { flex: 1; }
  .tree-folder-contents { margin-left: 11px; padding-left: 6px; }
  .waiting-indicator { font-size: .72rem; letter-spacing: .10em; }
}

/* v4: horizontal alignment, three visible queue rows and transfer statistics. */
.dashboard-top { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.dashboard-top > .transfer-panel { grid-column:3; justify-self:end; width:min(100%,430px); margin:0; padding:13px 18px; }
.transfer-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.transfer-stat { display:flex; flex-direction:column; gap:4px; min-width:0; }
.transfer-stat + .transfer-stat { padding-left:15px; border-left:1px solid #35353c; }
.transfer-stat span { font-size:.68rem; color:#a0a0aa; font-weight:700; letter-spacing:.10em; }
.transfer-stat strong { color:#fafafa; font-variant-numeric:tabular-nums; font-size:.95rem; white-space:nowrap; }
.transfer-stat small { color:#a1a1aa; font-size:.69rem; font-variant-numeric:tabular-nums; }
.upload-panel > h2 { margin-bottom:19px; }
.upload-input-column .dropzone { min-height:188px; }
.upload-queue-column { display:block; height:auto; min-height:0; padding:0; border:0; background:transparent; }
.upload-queue-column h3 { height:28px; margin:0; display:flex; align-items:flex-start; }
.upload-queue { min-height:0; height:188px; max-height:188px; overflow-y:auto; overflow-x:hidden; border:1px solid #36363b; border-radius:10px; background:#19191c; padding:7px 13px; }
.queue-row { position:relative; height:57px; padding:8px 0; }
.queue-row:first-child { padding-top:8px; }
.queue-top { margin-bottom:8px; min-height:18px; }
.queue-percent { min-width:33px; text-align:right; }
.queue-remove { display:grid; place-items:center; position:absolute; top:4px; right:0; width:27px; min-height:27px; height:27px; border:1px solid #ad3c4b; border-radius:50%; padding:0; background:#5a222c; color:#fff; font-size:1rem; line-height:1; opacity:0; pointer-events:none; }
.queue-row:hover .queue-percent, .queue-row:focus-within .queue-percent { visibility:hidden; }
.queue-row:hover .queue-remove, .queue-row:focus-within .queue-remove { opacity:1; pointer-events:auto; }
.queue-remove:hover { background:#d12a42; }
.file-browser { display:grid; grid-template-columns:minmax(210px,34%) minmax(0,1fr); border:1px solid #333339; border-radius:10px; overflow:hidden; min-height:265px; }
.file-browser-folders { min-width:0; background:#18181b; border-right:1px solid #35353b; padding:14px 12px; }
.file-browser-files { min-width:0; background:#141416; padding:14px 16px; }
.browser-label { height:28px; font-size:.72rem; font-weight:800; letter-spacing:.11em; color:#a8a8b0; }
.folder-list { max-height:440px; overflow:auto; scrollbar-color:#555 #18181b; }
.folder-node { display:flex; align-items:center; gap:4px; margin-top:2px; min-width:0; }
.folder-toggle { width:23px; min-width:23px; min-height:30px; padding:0; border:0; background:none; color:#df4056; font-size:.8rem; }
.folder-toggle:disabled { color:#6e6e76; }
.folder-select { flex:1; min-width:0; border:0; border-radius:6px; justify-content:flex-start; background:none; padding:8px 7px; font-size:.83rem; font-weight:590; color:#e6e6e9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-select[aria-selected="true"] { background:#522028; color:#fff; }
.folder-select:hover { background:#303036; }
.folder-children { padding-left:16px; }
.folder-actions { display:flex; gap:4px; flex-shrink:0; }
.folder-actions button { min-height:29px; width:28px; padding:0; border-radius:6px; background:#25252a; border:1px solid #424249; font-size:.89rem; }
.folder-actions button:hover { background:#543039; }
.file-browser .file-row { gap:12px; }
.file-browser .file-actions button { font-size:.76rem; }
.file-browser-files .empty { padding:35px 0; }
@media (max-width:860px) {
  .dashboard-top { grid-template-columns:minmax(0,1fr) auto; }
  .dashboard-top > .transfer-panel { grid-column:1/-1; justify-self:stretch; width:100%; }
  .upload-columns { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:620px) {
  .upload-columns, .file-browser { grid-template-columns:1fr; }
  .file-browser-folders { border-right:0; border-bottom:1px solid #35353b; }
  .dashboard-top { grid-template-columns:1fr; }
  .dashboard-top > .quota-panel { grid-column:1; width:100%; max-width:none; }
  .end-access-button { grid-column:1; justify-self:center; min-width:180px; }
  .dashboard-top > .transfer-panel { grid-column:1; }
}

/* Keep every transfer stat centered within its column. */
.transfer-stat { align-items:center; justify-content:center; text-align:center; }
.transfer-stat strong, .transfer-stat span, .transfer-stat small { text-align:center; }


/* Access-mode-aware automatic session closure control. */
.upload-actions { justify-content: center; align-items: center; gap: 13px; flex-wrap: wrap; }
.auto-end-control { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; white-space: nowrap; min-height: 40px; }
.auto-end-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auto-end-switch { position: relative; width: 39px; height: 23px; background: #343439; border: 1px solid #65656b; border-radius: 999px; transition: background .2s ease, border-color .2s ease; flex: none; }
.auto-end-switch::before { content: ""; position: absolute; width: 15px; height: 15px; top: 3px; left: 3px; border-radius: 50%; background: #d6d6da; transition: transform .2s ease; }
.auto-end-control input:checked + .auto-end-switch { background: #a71f31; border-color: #e34a5c; }
.auto-end-control input:checked + .auto-end-switch::before { transform: translateX(16px); background: white; }
.auto-end-control input:focus-visible + .auto-end-switch { outline: 2px solid #ff6c7a; outline-offset: 3px; }
.auto-end-control input:disabled + .auto-end-switch { opacity: .8; }
.auto-end-label { color: #bfbfc5; font-size: .68rem; letter-spacing: .045em; font-weight: 750; }
@media (max-width: 510px) {
  .upload-actions { gap: 8px; }
  .upload-actions button { flex: 0 1 92px; }
  .auto-end-label { font-size: .62rem; }
}


/* Two column workspace: Files 3/5 on the left, Upload 2/5 on the right. */
.workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
}
.workspace-layout > .panel {
  min-width: 0;
  margin: 0;
}
.workspace-layout > .files-panel {
  min-height: 550px;
  padding: 22px;
}
.workspace-layout > .files-panel .file-browser {
  min-height: 440px;
}
.workspace-layout > .upload-panel {
  padding: 22px;
}
.workspace-layout > .upload-panel > h2 {
  margin: 0 0 20px;
  font-size: 1rem;
  letter-spacing: .10em;
}
.workspace-layout .upload-input-column {
  width: 100%;
}
.workspace-layout .upload-input-column .dropzone {
  min-height: 168px;
  padding: 19px 12px;
}
.workspace-layout .upload-queue-column {
  display: block;
  padding: 0;
  margin: 19px 0 0;
  border: none;
  background: transparent;
  min-height: 0;
}
.workspace-layout .upload-queue-column h3 {
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0;
  color: #c3c3c9;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.workspace-layout .upload-queue {
  height: 188px;
  min-height: 0;
  max-height: 188px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #36363b;
  border-radius: 10px;
  background: #19191c;
  padding: 7px 13px;
}
.workspace-layout .upload-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 20px;
}
.workspace-layout .auto-end-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 11px 15px;
  border: 1px solid #47474e;
  border-radius: 9px;
  background: #1d1d21;
  gap: 12px;
}
.workspace-layout .auto-end-label {
  order: 0;
  font-size: .77rem;
  font-weight: 750;
  color: #e2e2e6;
  letter-spacing: .09em;
}
.workspace-layout .auto-end-switch {
  order: 2;
}
.workspace-layout .upload-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
.workspace-layout .upload-buttons > button {
  width: 100%;
  min-height: 43px;
  min-width: 0;
  padding: 8px 10px;
  flex: none;
}
/* The Upload Access mode has no Files panel, so use all available width. */
.workspace-layout.upload-only {
  grid-template-columns: minmax(0, 1fr);
}
.workspace-layout.upload-only > .upload-panel {
  width: min(100%, 520px);
  justify-self: center;
}
@media (max-width: 920px) {
  .workspace-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-layout > .files-panel {
    min-height: 0;
  }
  .workspace-layout > .files-panel .file-browser {
    min-height: 290px;
  }
  .workspace-layout > .upload-panel {
    width: min(100%, 620px);
    justify-self: center;
  }
}
@media (max-width: 480px) {
  .workspace-layout {
    gap: 14px;
  }
  .workspace-layout > .files-panel,
  .workspace-layout > .upload-panel {
    padding: 16px;
  }
  .workspace-layout .auto-end-control {
    padding-inline: 12px;
  }
}

/* Single action row: boxed AUTO END on the left, UPLOAD and CANCEL on the right. */
.workspace-layout .upload-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}
.workspace-layout .auto-end-control {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 7px 9px;
  gap: 7px;
}
.workspace-layout .auto-end-label {
  font-size: .68rem;
  letter-spacing: .035em;
}
.workspace-layout .auto-end-switch { width: 35px; height: 21px; }
.workspace-layout .auto-end-switch::before { width: 13px; height: 13px; }
.workspace-layout .auto-end-control input:checked + .auto-end-switch::before { transform: translateX(14px); }
.workspace-layout .upload-buttons {
  width: 100%;
  min-width: 0;
  gap: 7px;
}
.workspace-layout .upload-buttons > button {
  width: 100%;
  min-height: 43px;
  font-size: .77rem;
  padding-inline: 5px;
}
@media (max-width: 480px) {
  .workspace-layout .upload-actions { gap: 7px; }
  .workspace-layout .auto-end-control { padding: 7px; }
  .workspace-layout .auto-end-label { font-size: .60rem; }
  .workspace-layout .auto-end-switch { width: 31px; height: 19px; }
  .workspace-layout .auto-end-switch::before { width: 11px; height: 11px; }
  .workspace-layout .auto-end-control input:checked + .auto-end-switch::before { transform: translateX(12px); }
  .workspace-layout .upload-buttons > button { font-size: .70rem; padding-inline: 2px; }
}

/* Balanced control widths: AUTO END text and switch remain side by side. */
.workspace-layout .upload-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.05fr) minmax(0, 1.12fr);
  gap: 6px;
  align-items: stretch;
}
.workspace-layout .upload-buttons { display: contents; }
.workspace-layout .auto-end-control {
  grid-column: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 5px 6px;
  gap: 6px;
}
.workspace-layout .auto-end-label {
  flex: 0 0 auto;
  font-size: .59rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.workspace-layout .auto-end-switch {
  flex: 0 0 31px;
  width: 31px;
  height: 19px;
}
.workspace-layout .auto-end-switch::before { width: 11px; height: 11px; }
.workspace-layout .auto-end-control input:checked + .auto-end-switch::before { transform: translateX(12px); }
.workspace-layout #upload-btn { grid-column: 2; }
.workspace-layout #cancel-btn { grid-column: 3; }
.workspace-layout .upload-buttons > button {
  min-width: 0;
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 5px 3px;
  font-size: .75rem;
}
@media (max-width: 420px) {
  .workspace-layout .upload-actions { gap: 4px; }
  .workspace-layout .auto-end-control { padding-inline: 4px; gap: 4px; }
  .workspace-layout .auto-end-label { font-size: .53rem; }
  .workspace-layout .auto-end-switch { flex-basis: 26px; width: 26px; height: 18px; }
  .workspace-layout .auto-end-switch::before { width: 10px; height: 10px; left: 2px; top: 3px; }
  .workspace-layout .auto-end-control input:checked + .auto-end-switch::before { transform: translateX(10px); }
  .workspace-layout .upload-buttons > button { font-size: .67rem; }
}
@media (max-width: 340px) {
  .workspace-layout .upload-actions { gap: 3px; }
  .workspace-layout .auto-end-control { padding-inline: 3px; gap: 3px; }
  .workspace-layout .auto-end-label { font-size: .50rem; }
  .workspace-layout .upload-buttons > button { font-size: .62rem; }
}

/* Same height for both workspace panels, internal scrolling for file lists. */
.workspace-layout { align-items: stretch; }
.workspace-layout > .files-panel,
.workspace-layout > .upload-panel { height: 100%; display: flex; flex-direction: column; }
.workspace-layout > .files-panel .file-browser {
  flex: 1; display: grid; min-height: 0; height: auto;
}
.file-browser-folders, .file-browser-files { display: flex; flex-direction: column; min-height: 0; }
.folder-list, .file-tree { flex: 1; min-height: 0; overflow: auto; max-height: none; }
.folder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 34px; margin-bottom: 5px; }
.folder-toolbar .browser-label { height: auto; }
.folder-create { flex: none; min-height: 26px; padding: 3px 8px; font-size: .68rem; font-weight: 750; border-color: #6f303d; background: #352026; color:#ffced4; }
.folder-create:hover { background:#632837; }
.folder-actions { gap: 2px; }
.folder-actions button { width: 25px; min-height: 27px; }
.folder-node { max-width: 100%; }
.dropzone { transition: background .2s, border-color .2s, box-shadow .2s; }
.dropzone.drag-active { background:#332027; border:2px dashed #fc5268; box-shadow: 0 0 0 4px #b9293c1c, inset 0 0 40px #c22d4320; }
.drop-hint { color: #94949d; font-size: .73rem; text-align: center; }

/* At spacious desktop sizes keep the full page stationary. Lists scroll within their panels. */
@media (min-width: 921px) and (min-height: 780px) {
  .private-wrap { height: 100dvh; display:flex; flex-direction:column; padding-bottom: 22px; overflow:hidden; }
  .dashboard-top { flex-shrink:0; }
  .workspace-layout { flex:1; min-height:0; }
  .workspace-layout > .panel { min-height:0; overflow:hidden; }
  .workspace-layout > .files-panel .file-browser { min-height:0 !important; }
  .workspace-layout > .upload-panel form { flex:1; min-height:0; display:flex; flex-direction:column; }
  .workspace-layout .upload-queue-column { flex:1; min-height:0; display:flex; flex-direction:column; }
  .workspace-layout .upload-queue { flex:1; height:auto; max-height:none; min-height:90px; }
  .workspace-layout .upload-actions { flex-shrink:0; }
}

/* When transfer stats move to their own row, center END ACCESS between Storage and page right. */
@media (max-width: 1080px) and (min-width: 621px) {
  .dashboard-top { grid-template-columns: minmax(0,1fr) minmax(190px,1fr); }
  .dashboard-top > .quota-panel { grid-column: 1; }
  .dashboard-top > .end-access-button { grid-column: 2; justify-self:center; }
  .dashboard-top > .transfer-panel { grid-column:1/-1; width:100%; justify-self:stretch; }
}
@media (max-width: 620px) {
  .dashboard-top { grid-template-columns: minmax(0,1fr); }
  .dashboard-top > .quota-panel, .dashboard-top > .end-access-button,
  .dashboard-top > .transfer-panel { grid-column:1; }
  .dashboard-top > .end-access-button { justify-self:center; }
  .workspace-layout > .files-panel, .workspace-layout > .upload-panel { height:auto; }
  .workspace-layout > .files-panel .file-browser { min-height:290px; }
  .file-browser-folders, .file-browser-files { min-height:150px; }
}

/* Custom context actions; native context menu is disabled throughout the page. */
.folder-node[data-context-actions="true"], .tree-file { touch-action: pan-y; }
.tree-file { cursor: context-menu; border-radius: 8px; padding-inline: 8px; }
.tree-file:hover { background: #242428; }
.tree-file:focus-visible { outline: 2px solid #de394d; outline-offset: -2px; }
.folder-select, .tree-file { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.context-menu {
  position: fixed; z-index: 90; width: 236px; max-width: calc(100vw - 20px);
  padding: 7px; border: 1px solid #505059; border-radius: 13px;
  background: linear-gradient(145deg, #222228, #19191d);
  box-shadow: 0 22px 65px #000b, 0 0 0 1px #ffffff08 inset;
  animation: contextAppear .12s ease-out;
}
.context-menu button {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 12px;
  padding: 7px 9px; min-height: 52px; border: 0; border-radius: 9px;
  background: transparent; color: #f1f1f3; font-size: .91rem; font-weight: 620; text-align: left;
  transition: background .12s ease, color .12s ease;
}
.context-menu button:hover, .context-menu button:focus-visible {
  background: #34343c; outline: 2px solid transparent;
}
.context-menu .menu-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  color: #e2e2e7; background: #35353d; border: 1px solid #4a4a53;
  border-radius: 10px;
}
.context-menu .menu-icon svg { width: 23px; height: 23px; }
.context-menu .menu-icon-rename { color: #e5e5ea; }
.context-menu .menu-icon-download { color: #e76878; background: #3d252e; border-color: #62333d; }
.context-menu .menu-icon-delete { color: #ff697b; background: #41242d; border-color: #733742; }
.context-menu .menu-divider { height: 1px; margin: 6px 8px; background: #42424a; }
.context-menu button.menu-delete { color: #ffa0a9; }
.context-menu button.menu-delete:hover { background: #4b2831; }
@keyframes contextAppear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.action-dialog-backdrop {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  padding: 18px; background: rgba(0,0,0,.75); backdrop-filter: blur(7px);
}
.action-dialog {
  width: min(100%, 430px); border-radius: 16px; border: 1px solid #414148;
  background: linear-gradient(145deg, #222226, #151518);
  padding: 25px; box-shadow: 0 24px 90px rgba(0,0,0,.7), 0 0 42px rgba(194,30,51,.09);
}
.dialog-top { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; }
.dialog-accent { width: 4px; height: 26px; border-radius: 4px; background: #db3447; }
.action-dialog h2 { font-size: 1.13rem; letter-spacing: .02em; }

.dialog-field-label { display: block; color: #c8c8ce; font-size: .77rem; margin-bottom: 8px; }
.dialog-input { display: block; width: 100%; background: #111115; color: #fff; border: 1px solid #53535b; outline: 0; padding: 12px 13px; border-radius: 8px; }
.dialog-input:focus { border-color: #ed4355; box-shadow: 0 0 0 3px #d62e442b; }
.dialog-error { margin: 9px 0 0; color: #ff8994; font-size: .79rem; line-height: 1.4; }
.dialog-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 25px; }
.dialog-buttons button { width: 100%; min-height: 43px; font-size: .82rem; }
.dialog-buttons .dialog-danger { background: #a92738; border-color: #d73d50; }
.dialog-buttons .dialog-danger:hover { background: #cc3447; }
body.dialog-open { overflow: hidden !important; }
@media (max-width: 430px) { .action-dialog { padding: 20px; } .context-menu { width: 236px; } }
@media (prefers-reduced-motion: reduce) { .context-menu { animation: none; } }

/* Storage has a single row of metrics and a thicker utilization bar. */
.dashboard-top .quota-head { margin-bottom: 13px; }
.dashboard-top .quota-track { min-height: 12px; }
/* Dialog content stays centered without an explanatory paragraph. */
.action-dialog h2 { overflow-wrap: anywhere; }

/* Full-access-only preview layer. No local save is initiated by the preview. */
.preview-layer {position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.87);display:grid;place-items:center;padding:18px;backdrop-filter:blur(8px)}
.preview-dialog {width:min(1160px,100%);height:min(90dvh,900px);display:flex;flex-direction:column;min-height:0;border:1px solid #44444b;border-radius:14px;background:#161619;overflow:hidden;box-shadow:0 35px 100px #000b}
.preview-header {display:flex;align-items:center;justify-content:space-between;padding:15px 20px;gap:12px;border-bottom:1px solid #37373e}
.preview-header h2 {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.preview-body {flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;overflow:auto;background:#0e0e12;padding:14px}
.preview-status {color:#acacb4;text-align:center;padding:24px}
.preview-text {width:100%;min-height:100%;margin:0;white-space:pre-wrap;word-break:break-word;overflow:auto;line-height:1.55;color:#e5e5e9;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;align-self:start}
.preview-image {display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
.preview-media {max-width:100%;max-height:100%;width:100%}
.preview-pdf {width:100%;height:100%;border:0;background:white}
body.preview-open {overflow:hidden !important}
@media(max-width:640px){.preview-dialog{height:min(94dvh,1000px)}.preview-header{padding:12px}.preview-body{padding:8px}}
.context-menu .menu-icon-preview {color:#8fb9ff;background:#233146;border-color:#344763}

/* Explain actual upload failures instead of showing only a red filename. */
.queue-row:has(.queue-error:not([hidden])) { height:auto; min-height:73px; }
.queue-error:not([hidden]) { font-size:.75rem; color:#f59ba5; overflow-wrap:anywhere; padding:5px 3px 2px; line-height:1.4; }