/* Rebuilt Discovery Center (2025-09-27)
	 Goal: Fresh start mirroring Upload Center polish while fixing off-center & square portrait issues.
	 Principles: Pure CSS centering, smooth scale/opacity entrance, fluid mobile layout, accessible focus states. */

/* Root & visibility orchestration (match upload center pattern) */
#discovery-center-root { position:fixed; inset:0; z-index:15000; font-family:var(--font-mono,'VT323',monospace); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 380ms; }
#discovery-center-root.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; }
#dc-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.68); backdrop-filter:blur(2px); opacity:0; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1); }
#discovery-center-root.is-open #dc-backdrop { opacity:1; }

/* Shell (centered) */
#dc-shell { position:absolute; left:50%; top:12vh; transform:translateX(-50%) translateY(-10px) scale(.985); width:min(1040px,92vw); max-height:calc(100vh - 24vh); display:flex; flex-direction:column; background:#101018; border:1px solid #00ff88; border-radius:20px; padding:22px 26px 18px; box-shadow:0 0 28px -6px rgba(0,255,136,0.55),0 0 3px 1px rgba(0,255,136,0.38) inset; box-sizing:border-box; opacity:0; overflow:hidden; transition: opacity 380ms cubic-bezier(0.16,1,0.3,1) 120ms, transform 380ms cubic-bezier(0.16,1,0.3,1) 120ms; }
#discovery-center-root.is-open #dc-shell { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* Medium viewport tighten */
@media (max-width:880px){ #dc-shell { width:min(1000px,94vw); } }
@media (max-width:760px){ #dc-shell { top:8vh; max-height:calc(100vh - 16vh); padding:20px 20px 18px; } }

/* Portrait narrow: previously full-height sheet; adjusted to floating modal to reduce perceived screen consumption */
@media (max-width:560px){
	#dc-shell { top:6vh; width:94vw; max-height:calc(100vh - 12vh); height:auto; border-radius:20px; padding:18px 16px 18px; }
}

/* Ultra small safeguard */
@media (max-width:380px){ #dc-shell { padding:16px 12px 16px; } }

/* Header */
.dc-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 0 14px; border-bottom:1px solid rgba(255,255,255,0.12); }
.dc-header h2 { margin:0; font-size:1.55rem; letter-spacing:1px; color:#00ff88; text-shadow:0 0 8px rgba(0,255,136,0.35); flex:1 1 auto; }
@media (max-width:560px){ .dc-header h2 { font-size:1.35rem; } }

/* Toolbar for filter and sort controls */
.dc-toolbar { display:flex; align-items:center; gap:10px; padding:10px 0 8px; border-bottom:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; }
.dc-toolbar input, .dc-toolbar select { background:#0b0b14; border:1px solid rgba(0,255,136,0.4); color:#d6d6d6; padding:7px 10px 6px; border-radius:12px; font-size:0.7rem; letter-spacing:.6px; flex:1 1 auto; min-width:140px; }
.dc-toolbar input:focus-visible, .dc-toolbar select:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,255,136,.45); }
@media (max-width:560px){ .dc-toolbar { padding:8px 0 6px; gap:8px; } .dc-toolbar input { min-width:0; flex:1 1 100%; } }

.dc-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
@media (max-width:560px){ .dc-header { padding-right:56px; position:relative; } .dc-actions { position:absolute; top:8px; right:8px; gap:8px; } }
.dc-actions select, .dc-actions input { background:#0b0b14; border:1px solid rgba(0,255,136,0.4); color:#d6d6d6; padding:7px 10px 6px; border-radius:12px; font-size:0.7rem; letter-spacing:.6px; }
.dc-actions select:focus-visible, .dc-actions input:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,255,136,.45); }
@media (max-width:640px){ #dc-filter { flex:1 1 160px; } }

.dc-close { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(var(--dark-color-rgb), 0.6); border:1px solid var(--secondary-color); color: var(--primary-color); cursor:pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; font-size:18px; line-height:1; opacity:.9; }
.dc-close:hover, .dc-close:focus-visible { background: rgba(var(--dark-color-rgb), 0.8); border-color: var(--primary-color); opacity:1; transform: translateY(-1px); }
.dc-close:active { transform: translateY(0) scale(1); }

/* Stats bar */
.dc-stats { display:flex; flex-wrap:wrap; gap:16px; padding:16px 0 10px; }
.dc-stat { flex:1 1 120px; min-width:120px; background:#0b0b11; border:1px solid rgba(0,255,136,0.35); border-radius:16px; padding:10px 12px 10px; display:flex; flex-direction:column; justify-content:center; text-align:center; position:relative; overflow:hidden; }
.dc-stat strong { font-size:1.1rem; font-weight:600; letter-spacing:.5px; background:linear-gradient(90deg,#8ff6ff,#35ffc9); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 8px rgba(53,255,201,0.25); }
.dc-stat span { font-size:.55rem; letter-spacing:1px; opacity:.75; text-transform:uppercase; margin-top:2px; }
@media (max-width:560px){ .dc-stat { min-width:100px; padding:8px 10px 8px; border-radius:14px; } .dc-stat strong { font-size:1rem; } }

/* Main scroll area */
.dc-main { flex:1; min-height:0; overflow:auto; padding:4px 4px 86px; scrollbar-width:thin; scrollbar-color:#00ff88 #0b0b14; }
.dc-main::-webkit-scrollbar { width:10px; }
.dc-main::-webkit-scrollbar-track { background:#0b0b14; }
.dc-main::-webkit-scrollbar-thumb { background:linear-gradient(#00ff88,#35ffc9); border-radius:12px; box-shadow:0 0 0 2px #0b0b14 inset; }
.dc-main::-webkit-scrollbar-thumb:hover { filter:brightness(1.1); }
@media (max-width:560px){ .dc-main { padding:2px 2px 92px; } }

/* List */
.dc-list { display:flex; flex-direction:column; gap:8px; }
.dc-item { display:flex; gap:14px; align-items:flex-start; background:#14141d; border:1px solid rgba(0,255,136,0.28); border-radius:16px; padding:12px 14px 12px; position:relative; transition:background .22s ease, border-color .22s ease, transform .25s cubic-bezier(.16,1,.3,1); cursor:pointer; }
.dc-item:hover, .dc-item:focus-visible { background:#1b1b27; border-color:#00ff88; }
.dc-item:active { transform:translateY(1px) scale(.995); }
@media (max-width:560px){ .dc-item { padding:12px 12px 12px; border-radius:18px; } }
.dc-item-main { flex:1 1 auto; min-width:0; }
.dc-item-title { font-size:.92rem; font-weight:600; letter-spacing:.5px; color:#dcdcdc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){ .dc-item-title { font-size:.88rem; } }
.dc-item-meta { font-size:.6rem; opacity:.7; letter-spacing:.7px; margin-top:4px; line-height:1.25; }
@media (max-width:560px){ .dc-item-meta { font-size:.55rem; } }
.dc-item-actions { display:flex; align-items:center; gap:6px; }
.dc-btn { background:none; border:1px solid #00ff88; color:#d6d6d6; font-size:.6rem; letter-spacing:.8px; padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:600; transition:background .2s; }
.dc-btn:hover, .dc-btn:focus-visible { background:#00ff8815; }

.dc-empty { padding:36px 12px; text-align:center; opacity:.65; font-size:.7rem; letter-spacing:.6px; }

/* Footer action bar (sticky) */
.dc-footer { position:absolute; left:0; right:0; bottom:0; padding:12px 20px 18px; display:flex; justify-content:flex-end; gap:12px; background:linear-gradient(180deg,rgba(16,16,24,0.2),#101018 60%); border-top:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(4px); }
@media (max-width:560px){ .dc-footer { padding:12px 14px 20px; } }
.dc-refresh { background:#FFD400; color:#000; border:none; font-weight:700; padding:10px 22px; border-radius:14px; font-size:0.8rem; letter-spacing:.7px; cursor:pointer; box-shadow:0 0 0 1px rgba(255,212,0,0.35),0 3px 10px -2px rgba(0,0,0,.7); }
.dc-refresh:hover, .dc-refresh:focus-visible { filter:brightness(1.08); }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ #dc-shell, #dc-backdrop, .dc-item { transition:none !important; }
	#discovery-center-root { transition:none !important; }
}

/* Discovery open button (map search quick action) */
#map-discover-action { display:flex; justify-content:flex-start; padding:0 4px 2px; animation:fadeSlideIn .35s ease; position:relative; z-index:14; }
#map-discover-action.hidden { display:none !important; }
#map-discover-action .open-discovery-btn { display:flex; align-items:center; gap:8px; background:#101018; color:#d6d6d6; border:1px solid #00ff88; padding:6px 14px; border-radius:16px; font-size:12px; font-weight:600; cursor:pointer; letter-spacing:.6px; box-shadow:0 2px 6px rgba(0,0,0,.55),0 0 0 1px rgba(0,255,136,0.25); transition:background .2s ease, border-color .2s ease, transform .18s ease; }
#map-discover-action .open-discovery-btn:hover, #map-discover-action .open-discovery-btn:focus-visible { background:#162022; border-color:#35ffc9; }
#map-discover-action .open-discovery-btn:active { transform:scale(.97); }
#map-discover-action .open-discovery-btn .mdi { font-size:18px; }
#map-discover-action .open-discovery-btn .shortcut { opacity:.65; font-weight:500; }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }

/* Focus ring unification */
#discovery-center-root :focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,255,136,0.5); }

/* Safety: ensure no accidental horizontal scroll inside shell */
#dc-shell, .dc-main { overscroll-behavior:contain; }

/* Dark mode assumption (project already dark). No light mode variant provided. */

/* Skeleton Loading */
.dc-skel { position:relative; background:#14141d; overflow:hidden; border-radius:14px; }
.dc-skel::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.09) 45%,rgba(255,255,255,0) 90%); animation:dcShine 1.2s linear infinite; }
@keyframes dcShine { from { transform:translateX(-100%);} to { transform:translateX(100%);} }
.dc-skel.stat { height:70px; flex:1 1 120px; }
@media (max-width:560px){ .dc-skel.stat { height:62px; } }
.dc-skel.item { height:70px; }