.import{display:inline-block;background:var(--orange);color:white;padding:15px 20px;border-radius:14px;font-weight:bold;cursor:pointer}.import input{display:none}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:15px}.media-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}.preview{height:190px;background:#d9d7cf;display:grid;place-items:center;overflow:hidden}.preview img,.preview video{width:100%;height:100%;object-fit:contain}.preview b{font:40px Georgia,serif}.media-body{padding:15px}.media-body label{display:grid;gap:5px;margin:8px 0;color:var(--muted);font-size:12px}.media-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.media-actions button{flex:1}.status{display:inline-block;background:var(--ink);color:white;border-radius:99px;padding:5px 9px;font-size:11px;text-transform:uppercase}.published{background:#297348}.upload-status{margin:14px 0;color:var(--muted)}@media(max-width:950px){.media-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.media-grid{grid-template-columns:1fr}.hero{display:block}.import{width:100%;text-align:center;margin-top:15px}}
.controls{display:grid;grid-template-columns:minmax(260px,2fr) repeat(3,minmax(150px,1fr));gap:10px;margin:14px 0}.client-media-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.media-select{display:flex;gap:7px;align-items:center;padding:10px 15px;margin:0!important;color:var(--ink)!important}.client-file-owner{display:grid;gap:3px;background:color-mix(in srgb,var(--accent) 10%,var(--card));border-left:4px solid var(--accent);padding:10px;margin:10px 0}.client-file-owner span{font-size:12px;color:var(--muted)}@media(max-width:950px){.controls{grid-template-columns:1fr 1fr}}@media(max-width:600px){.controls{grid-template-columns:1fr}.client-media-controls button{flex:1 1 45%}}
.preview audio{width:90%;max-width:320px}
.media-card.needs-sync{box-shadow:inset 0 0 0 2px #c6423b}.media-card.is-synced{box-shadow:inset 0 0 0 1px #3f8f67}.media-state{display:flex;gap:7px;align-items:center;justify-content:space-between}.sync-badge{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:800}.sync-badge i{width:8px;height:8px;border-radius:50%;background:currentColor}.sync-badge.pending{color:#fff;background:#a72e2a}.sync-badge.synced{color:#fff;background:#26744f}.sync-badge.drive{color:#fff;background:#315d8f}.sync-warning{display:block;color:#ffb3ad!important;margin-top:6px}.sync-summary{position:sticky;top:8px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 8px 20px rgb(0 0 0 / 18%);margin:10px 0}.sync-summary>div{display:grid;gap:2px}.sync-summary small{color:var(--muted)}.sync-summary.has-pending{border-color:#d95b53}.sync-summary.has-pending b{color:#ffb3ad}.sync-summary.is-current{border-color:#3f8f67}.sync-summary button{width:auto;white-space:nowrap}@media(max-width:600px){.sync-summary{position:static;align-items:stretch;flex-direction:column}.sync-summary button{width:100%}}

/* Shared media stays a thumbnail-first library; metadata editing is secondary. */
.media-grid{--media-columns:4;display:grid;grid-template-columns:repeat(var(--media-columns),minmax(0,1fr));gap:12px}
.media-card{border-radius:12px;min-width:0;display:flex;flex-direction:column}
.media-card-top{display:flex;align-items:center;gap:7px;min-height:34px;padding:4px 8px;background:var(--card);color:var(--ink)}
.media-card-top .media-select{padding:0;margin:0!important;min-width:24px}
.media-card-top .status{margin-left:auto;font-size:9px;padding:4px 7px}
.media-card-top .sync-badge{font-size:9px;padding:4px 6px}
.media-card .preview{height:clamp(92px,10vw,160px);background:#1a2923}
.media-grid[data-tile-size=compact] .preview{height:92px}
.media-grid[data-tile-size=large] .preview{height:clamp(140px,16vw,230px)}
.media-card .preview img,.media-card .preview video{object-fit:cover}
.media-caption{display:grid;gap:3px;padding:9px 10px 10px;min-width:0}
.media-caption b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.media-caption small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.media-details{border-top:1px solid var(--line);margin-top:auto}
.media-details summary{cursor:pointer;padding:8px 10px;color:var(--user-accent,#80d9ff);font-weight:800;font-size:12px}
.media-details .media-body{padding:4px 10px 10px}
.media-details .media-body label{font-size:11px}
.media-details .media-actions{margin-top:8px}
.media-details .media-actions button,.media-details .media-actions a{font-size:11px;padding:7px 8px}
.view-setting{display:grid;gap:5px;margin:0;color:var(--muted);font-size:12px}
.view-setting select{min-width:84px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:950px){.media-grid{--media-columns:3}.media-grid[style*="--media-columns: 6"]{--media-columns:3}}
@media(max-width:600px){.media-grid{--media-columns:2}.media-grid[style*="--media-columns: 3"],.media-grid[style*="--media-columns: 4"],.media-grid[style*="--media-columns: 6"]{--media-columns:2}.media-card .preview{height:92px}.view-setting{grid-column:span 1}}