.media-upload-panel { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:26px; margin-bottom:24px; border:1px solid var(--line); background:var(--card); }
.media-upload-panel h2 { margin:0 0 8px; font:600 22px var(--serif); }
.media-upload-panel p { margin:0; color:var(--muted); font-size:12px; }
.media-upload-panel form { display:flex; align-items:center; gap:14px; }
.media-upload-picker { display:grid; gap:8px; min-width:min(420px,50vw); }
.media-drop-zone { display:grid; justify-items:center; gap:9px; padding:24px 18px; border:1px dashed var(--line); background:var(--paper); text-align:center; outline:none; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.media-drop-zone strong { font:600 17px var(--serif); }
.media-drop-zone span { max-width:420px; color:var(--muted); font-size:11px; line-height:1.7; }
.media-drop-zone:focus-visible,.media-drop-zone.is-dragging { border-color:var(--blue); background:color-mix(in srgb,var(--blue) 7%,var(--paper)); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent); }
.media-file-input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.media-drop-zone .secondary-button { cursor:pointer; padding:9px 14px; }
.media-selection-status { min-height:18px; }
.media-selection-status.is-error { color:#b43e3e; }
.markdown-upload-panel form { min-width:min(470px,52vw); }
.media-selection-list { display:grid; gap:6px; max-height:190px; margin:0; padding:0; overflow:auto; list-style:none; }
.media-selection-list:empty { display:none; }
.media-selection-list li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 9px; background:var(--paper-deep); font-size:11px; }
.media-selection-list span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-selection-remove { flex:none; border:0; background:none; color:#b43e3e; cursor:pointer; padding:3px; }
.media-search { display:flex; align-items:center; gap:10px; margin:0 0 28px; }
.media-search input { width:min(420px,100%); border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:12px 14px; }
.media-search a { color:var(--muted); }
.media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.media-card { min-width:0; border:1px solid var(--line); background:var(--card); }
.media-card > a { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper-deep); }
.media-card img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.media-card:hover img { transform:scale(1.025); }
.media-card-body { display:grid; gap:10px; padding:16px; }
.media-card-body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-card-body small { color:var(--muted); }
.media-card-body code { overflow:hidden; padding:9px; background:var(--paper-deep); color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.media-actions { display:flex; align-items:center; gap:10px; }
.media-actions form { margin-left:auto; }
.media-actions .secondary-button { padding:8px 11px; font-size:11px; }
.danger-button { border:0; background:none; color:#b43e3e; cursor:pointer; padding:8px; }
.media-pagination { display:grid; grid-template-columns:100px 1fr 100px; align-items:center; gap:18px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.media-pagination > div { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.media-pagination a,.media-pagination .disabled { padding:8px 10px; color:var(--muted); font-size:12px; text-align:center; text-decoration:none; }
.media-pagination a:hover,.media-pagination a.active { background:var(--blue); color:white; }
.media-pagination .disabled { opacity:.4; }
.media-page-summary { margin:10px 0 0; color:var(--muted); font-size:11px; text-align:center; }
@media (max-width:1000px) { .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .media-upload-panel,.media-upload-panel form { align-items:stretch; flex-direction:column; } .media-upload-picker { min-width:0; } .media-grid { grid-template-columns:1fr; } .media-search { align-items:stretch; flex-direction:column; } .media-pagination { grid-template-columns:1fr 1fr; } .media-pagination > div { grid-column:1/-1; grid-row:1; } }