:root{
  --bg:#060606;
  --panel:#111;
  --panel2:#181818;
  --line:#303030;
  --text:#f5f5f5;
  --muted:#b9b9b9;
  --gold:#d4af37;
  --gold-glow:rgba(212,175,55,.72);
  --accent:#ffffff;
  --shadow:0 10px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.hidden{display:none !important}

.screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at top, rgba(212,175,55,.12), transparent 35%),
    linear-gradient(180deg, #0b0b0b 0%, #050505 100%);
  padding:24px;
}
.intro-card{
  width:min(760px, 100%);
  background:rgba(18,18,18,.92);
  border:1px solid rgba(212,175,55,.45);
  border-radius:20px;
  padding:32px 28px;
  box-shadow:var(--shadow);
  text-align:center;
}
.intro-card h1{
  margin:0 0 14px;
  font-size:clamp(30px, 5vw, 50px);
  line-height:1.06;
}
.intro-sub{
  margin:0 0 20px;
  font-size:clamp(16px, 2.2vw, 24px);
  color:#ddd;
}
.intro-note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:14px;
}

.primary-btn,.secondary-btn{
  appearance:none;border:0;border-radius:12px;padding:12px 18px;cursor:pointer;
  font-weight:700;font-size:15px;box-shadow:var(--shadow)
}
.primary-btn{background:var(--gold);color:#141414}
.secondary-btn{background:#262626;color:#f2f2f2;border:1px solid #444}
.compact{padding:10px 14px;font-size:14px}

.app{height:100%;display:flex;flex-direction:column}
.topbar{
  display:flex;gap:18px;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(10,10,10,.96)
}
.brand-title{font-weight:700;font-size:18px}
.brand-sub{color:var(--muted);font-size:13px;margin-top:4px}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.search-wrap{position:relative;display:flex;gap:8px;align-items:center}
#searchInput{
  width:min(360px, 52vw);
  max-width:100%;
  background:#111;border:1px solid #444;color:#fff;border-radius:12px;padding:11px 13px;font-size:15px
}
.actions{display:flex;gap:8px}

.suggestions{
  position:absolute;top:calc(100% + 8px);left:0;right:56px;
  background:#141414;border:1px solid #3f3f3f;border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;z-index:30;max-height:280px;overflow-y:auto
}
.suggestion{
  padding:10px 12px;cursor:pointer;border-bottom:1px solid #242424
}
.suggestion:last-child{border-bottom:0}
.suggestion:hover,.suggestion.active{background:#222}
.suggestion .special-pill{
  display:inline-block;margin-left:8px;padding:2px 6px;border-radius:999px;
  background:rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.55);color:#f7e19a;font-size:11px
}

.viewer-shell{position:relative;flex:1;min-height:0}
.viewer{width:100%;height:100%}

.status-bar{
  position:absolute;left:14px;bottom:14px;z-index:15;background:rgba(0,0,0,.68);
  border:1px solid #3a3a3a;border-radius:12px;padding:8px 10px;font-size:13px;color:#ddd
}

.hover-tag{
  position:absolute;z-index:20;pointer-events:none;background:rgba(0,0,0,.86);border:1px solid rgba(212,175,55,.5);
  border-radius:10px;padding:7px 10px;font-size:13px;white-space:nowrap;box-shadow:var(--shadow)
}

.special-overlay{
  border:3px solid rgba(212,175,55,.95);
  box-shadow:
    0 0 12px 2px rgba(212,175,55,.70),
    inset 0 0 10px 1px rgba(212,175,55,.40);
  border-radius:6px;
  pointer-events:none;
}

.focus-overlay{
  border:4px solid rgba(255,255,255,.96);
  box-shadow:
    0 0 0 2px rgba(212,175,55,.9),
    0 0 18px 5px rgba(212,175,55,.55);
  border-radius:6px;
  pointer-events:none;
}

.modal{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px
}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.modal-card{
  position:relative;z-index:1;width:min(920px, 100%);background:#121212;border:1px solid rgba(212,175,55,.4);
  border-radius:18px;box-shadow:var(--shadow);padding:18px
}
.modal-close{
  position:absolute;right:12px;top:8px;font-size:34px;line-height:1;background:transparent;color:#fff;border:0;cursor:pointer
}
.modal-body{display:grid;grid-template-columns:minmax(260px, 360px) 1fr;gap:18px}
.modal-image-wrap{
  background:#070707;border:1px solid #343434;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:12px;min-height:260px
}
.modal-image-wrap img{
  max-width:100%;max-height:72vh;display:block;border-radius:10px;border:1px solid #3b3b3b
}
.preview-fallback{color:#ccc;font-size:14px;text-align:center}
.modal-info h2{margin:0 0 10px;font-size:30px}
.member-meta,.member-flags{color:#d7d7d7;margin-bottom:12px}
.member-flags .flag{
  display:inline-block;margin:0 8px 8px 0;padding:6px 10px;border-radius:999px;font-size:12px
}
.flag.special{
  background:rgba(212,175,55,.18);
  border:1px solid rgba(212,175,55,.65);
  color:#f7e19a
}

@media (max-width: 900px){
  .topbar{flex-direction:column;align-items:stretch}
  .controls{justify-content:space-between}
  #searchInput{width:100%}
  .search-wrap{width:100%}
  .modal-body{grid-template-columns:1fr}
}

.intro-credit {
  margin-top: 22px;
  text-align: center;
}

.credit-text {
  font-size: 15px;
  color: #cfcfcf;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.credit-logo {
  width: 90px;
  height: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeCredit 2.5s ease forwards;
  animation-delay: 1.2s;
}

.fade-in-credit .credit-text {
  opacity: 0;
  animation: fadeText 1.6s ease forwards;
  animation-delay: 0.6s;
}

@keyframes fadeText {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeCredit {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 0.95;
    transform: translateY(0);
  }
}