/* Photo-first alternative: one continuous grid, no collections or folders. */
.media-only main { max-width: 1320px; }
.media-only .page-intro { margin-bottom: 26px; }
.media-only .page-intro p { font-size: 14px; color: #9789a4; }
.media-only .files-section { position: relative; }
.media-only .section-head { margin-bottom: 12px; }
.media-only .section-head h2 { font-size: 20px; }
.media-only .filter-toolbar { margin-bottom: 22px; }
.media-only .filter-controls { background: #fff; border: 1px solid #eeebf3; border-radius: 14px; padding: 2px 7px 2px 13px; }
.media-only .search { max-width: 220px; }
.media-only .view-toggle { border: 0; }
.media-only .view-toggle[aria-pressed="true"] { background: #eee7ff; border-radius: 10px; color: var(--primary); }
.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.media-tile { position: relative; min-width: 0; aspect-ratio: 1; animation: cardIn .4s ease both; animation-delay: calc(var(--i)*25ms); }
.media-open { display: block; position: relative; padding: 0; background: #e8e2f0; width: 100%; height: 100%; overflow: hidden; border-radius: 17px; text-align: left; color: white; }
.media-open > img, .media-open > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom,1)); transition: filter .2s ease; }
#sharedVideo { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
.media-tile-caption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 30px 14px 13px; background: linear-gradient(transparent,#1020348c); font-size: 12px; opacity: 0; transition: opacity .2s; }
.media-sender { display: flex; align-items: center; gap: 7px; }
.media-sender i { font-style: normal; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #cabaff; color: #614891; font-size: 12px; }
.media-date { color: #ffffffe0; white-space: nowrap; }
.media-video-badge { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 4px; min-height: 26px; border-radius: 8px; padding: 4px 7px; background: #1209298f; color: white; font-size: 12px; font-weight: 550; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media-video-badge svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.media-play { position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #ffffff85; background: #ffffff30; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media-play svg { width: 21px; height: 21px; fill: white; stroke: none; margin-left: 3px; }
.media-grid.large-view { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.media-open:focus-visible { outline-offset: -4px; outline-color: #fff; box-shadow: 0 0 0 3px var(--primary); }
.media-open:focus-visible .media-tile-caption { opacity: 1; }
.media-only .empty-state { margin-top: 8px; }
.media-only .mobile-gradient { display: block; right: 40px; bottom: -110px; opacity: .16; z-index: -1; }
@media (hover: hover) and (pointer: fine) {
  .media-open:hover > img { filter: brightness(.94); }
  .media-open:hover .media-tile-caption { opacity: 1; }
  .media-open:hover .media-video-badge { bottom: auto; top: 12px; }
}
@media (min-width: 1450px) {
  .media-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .media-grid.large-view { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .media-only .page-intro { margin-bottom: 20px; }
  .media-only .mobile-gradient { right: -40px; top: -65px; bottom: auto; }
  .media-grid { gap: 8px; }
  .media-open { border-radius: 13px; }
}
@media (max-width: 600px) {
  .media-only main { padding-top: 20px; padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); }
  .media-only .page-intro { padding-inline: 4px; margin-bottom: 10px; }
  .media-only .page-intro p { margin-top: 7px; }
  .media-only .section-head { margin-bottom: 6px; padding-inline: 4px; }
  .media-only .section-head h2 { font-size: 17px; font-weight: 550; }
  .media-only .section-head h2 span { display: none; }
  .media-only .text-button { font-size: 13px; }
  .media-only .filter-toolbar { gap: 12px; margin-bottom: 16px; }
  .media-only .filter-controls { margin-inline: 4px; width: auto; }
  .media-only .search { max-width: none; }
  .media-only .tabs { justify-content: flex-start; gap: 6px; padding-inline: 4px; }
  .media-only .tab { min-width: 74px; justify-content: center; padding: 10px 13px; }
  .media-only .tab > span { display: inline; }
  .media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .media-open { border-radius: 10px; }
  .media-grid.large-view { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .media-grid.large-view .media-open { border-radius: 14px; }
  .media-play { width: 34px; height: 34px; left: calc(50% - 17px); top: calc(50% - 17px); }
  .media-play svg { width: 16px; height: 16px; }
  .media-video-badge { right: 6px; bottom: 6px; padding: 3px 5px; border-radius: 6px; font-size: 12px; min-height: 22px; }
  .media-video-badge svg { display: none; }
  .media-tile-caption { display: none; }
  .media-only footer { margin-top: 24px; }
}
/* Dark palette from the current official max.ru stylesheet. */
:root { color-scheme: dark; }
body.media-only { --canvas: #0d0d0d; --ink: #f7f6fa; --muted: #b5b5b5; --line: #26252b; --accent: #b09aff; background: var(--canvas); }
.media-only .sidebar { background: #111114; border-color: #242329; }
.media-only .files-word { color: #c3bccd; }
.media-only .nav-label { color: #8f879d; }
.media-only .nav-item { color: #aaa3b5; }
.media-only .nav-item.active { color: #c4b5ff; background: #251b40; }
.media-only .nav-item b { color: #c9baff; background: #3b2a60; }
.media-only .upload-button, .media-only .primary-button { background: linear-gradient(105deg,#471aff,#6e1aff); color: white; box-shadow: 0 6px 24px #471aff26; }
.media-only .small-note { color: #6f687c; }
.media-only .account { border-color: #26232e; }
.media-only .self { background: #2d2340; color: #c2a4ed; }
.media-only .account strong { color: #dfd9e9; }
.media-only .account span:not(.account-decoration) { color: #8c8397; }
.media-only .topbar { background: #111114e8; border-color: #262329; }
.media-only .breadcrumb { color: #80768d; }
.media-only .breadcrumb strong { color: #bdb2cb; }
.media-only .breadcrumb > span { color: #4c4357; }
.media-only .prototype { color: #a69ab6; border-color: #332b3f; background: #1c1724; }
.media-only .icon-button { color: #aaa0b8; }
.media-only .heading-dot { color: #9470ff; }
.media-only .page-intro { overflow: hidden; }
.media-only .page-intro p { color: #a298ae; }
.media-only .round-action { background: #231a32; color: #c7b0ff; border: 1px solid #352348; }
.media-only .official-gradient { --gb-color-1: #aa4cff; --gb-color-2: #3838ff; --gb-color-3: #3a89fb; --gb-color-4: #630eff; }
.media-only .mobile-gradient { opacity: .25; }
.media-only .section-head h2 { color: #e2dceb; }
.media-only .section-head h2 span { color: #8f809e; }
.media-only .text-button { color: var(--accent); }
.media-only .filter-controls { background: #181818; border-color: #29252f; }
.media-only .search { color: #84778f; }
.media-only .search input { color: #efebf4; }
.media-only .search input::placeholder { color: #928599; }
.media-only .tab { color: #aaa0b7; }
.media-only .tab > span { color: #85798f; }
.media-only .tab.active { color: #d0bdff; background: #2d2048; }
.media-only .tab.active > span { color: #ac94d6; }
.media-only .view-toggle[aria-pressed="true"] { color: #c5adff; background: #2d2048; }
.media-only .media-open { background: #211d29; }
.media-only .empty-state { background: #181818; border-color: #302a38; }
.media-only .empty-icon { background: #302046; color: #be9ce9; }
.media-only .empty-state p { color: #a99ab4; }
.media-only .secondary-button { background: #302044; color: #cfb1f5; }
.media-only footer { color: #8d8099; border-color: #27212e; }
.media-only .viewer { background: #09090b; }
.media-only .info-dialog { background: #181818; color: #f7f3fd; border: 1px solid #2c2634; }
.media-only .info-dialog p { color: #b2a5bf; }
.media-only .info-dialog::before { background: #49404f; }
.media-only .toast { background: #32223f; border: 1px solid #573a6b; }
.media-only .noscript-note { background: #21192d; color: #c9b5ee; }
@media (hover: hover) and (pointer: fine) {
  .media-only .nav-item:hover { background: #211a2d; }
  .media-only .icon-button:hover, .media-only .round-action:hover { background: #30213f; color: #d4b8ff; }
  .media-only .tab:hover:not(.active) { background: #211b2c; }
  .media-only .upload-button:hover, .media-only .primary-button:hover { background: linear-gradient(105deg,#6239ff,#843eff); }
}
@media (max-width: 900px) {
  .media-only .topbar { background: #111114f5; }
  .media-only .mobile-nav { background: #111114f5; border-color: #2a232f; box-shadow: 0 -8px 30px #0003; }
  .media-only .mobile-nav button { color: #93859f; }
  .media-only .mobile-nav .active { color: #be9bff; }
  .media-only .mobile-nav .active::before { background: #302142; }
  .media-only .mobile-nav .mobile-add svg { background: linear-gradient(135deg,#471aff,#9500ff); }
}
/* Operational file controls retain the gallery layout on desktop and phone. */
.media-tile { aspect-ratio:auto; display:flex; flex-direction:column; }
.media-open { aspect-ratio:1; height:auto; flex:none; }
.media-actions { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0; }
.media-actions button { background:#252132; border:1px solid #393046; color:#d4c8ee; border-radius:8px; padding:7px 10px; min-height:34px; font-size:12px; }
.media-tile-caption { opacity:1; display:flex; pointer-events:none; word-break:break-word; }
#activeMedia { max-width:100%; max-height:70vh; }
#authMode { border-radius:12px; width:100%; margin:6px 0 12px; padding:10px; background:#171321; color:#f7f4fc; border:1px solid #413354; }
#authStatus { min-height:24px; overflow-wrap:anywhere; }
@media(max-width:600px) {
 .media-only .tabs { overflow-x:auto; max-width:100%; padding-bottom:6px; }
 .media-only .tab { flex-shrink:0; }
 .media-tile-caption { display:flex; padding:20px 6px 7px; font-size:10px; }
 .media-actions { gap:4px; }
 .media-actions button { padding:5px 6px; min-height:36px; font-size:11px; }
 #storageInfo { font-size:11px; }
}