html,
body { min-height: max(100%, 100vh); scroll-behavior: smooth; }

:root {
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --radius-xs: 4px; --radius-sm: 6px; --radius: 12px; --radius-pill: 999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --shadow-sm: 0 1px 2px -1px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.25);
  --shadow: 0 4px 12px -2px rgba(0,0,0,.4),0 8px 24px -4px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 28px -6px rgba(0,0,0,.55),0 12px 48px -8px rgba(0,0,0,.45);
  --gradient-bg: linear-gradient(135deg,#0f0f0f,#121212,#1a1a1a,#202020);
  --gradient-accent: linear-gradient(90deg,#57cdac,#6fe7ed,#8d7bff);
  --color-accent: #57cdac;
  --color-accent-rgb: 87 205 172;
  --color-bg: #0f0f0f; --color-bg-alt:#171717; --color-bg-soft:#1e1e1e; --color-surface:#202324;
  --color-border: rgba(255,255,255,0.08); --color-border-strong: rgba(255,255,255,0.2);
  --color-text: #f5f7f9; --color-text-dim:#b8c1c9; --color-text-faint:#788088;
  --color-danger:#ff5470; --color-warn:#f0ad4e; --color-info:#4dbaff; --color-success:#4bd680;
  --focus-ring: 0 0 0 2px #0f0f0f, 0 0 0 4px var(--color-accent);
  color-scheme: dark;
}

html[data-theme='light'] {
  --gradient-bg: linear-gradient(135deg,#e8f1f5,#e4eef3,#dfe9ee);
  --color-bg:#f5f7f9; --color-bg-alt:#eef1f3; --color-bg-soft:#e3e8eb; --color-surface:#ffffff;
  --color-border: rgba(0,0,0,0.08); --color-border-strong: rgba(0,0,0,0.18);
  --color-text:#1b2125; --color-text-dim:#4d5a63; --color-text-faint:#7b868e;
  --focus-ring: 0 0 0 2px #ffffff,0 0 0 4px var(--color-accent);
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  margin: 0; padding: 0; line-height: 1.55; letter-spacing: .25px;
  background: var(--gradient-bg); background-size: 400% 400%; animation: gradient-animation 30s linear infinite;
  color: var(--color-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Typography */
h1,h2,h3,h4,h5,h6 { font-weight:600; margin:0 0 .75rem; line-height:1.2; }
h1 { font-size: clamp(1.9rem,3vw,3.4rem); background: var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color: transparent; letter-spacing:.5px; }
h2 { font-size: clamp(1.4rem,2.2vw,2rem); color: var(--color-accent); display:flex; align-items:center; gap:.65ch; }
p { margin:0 0 1rem; color: var(--color-text-dim); }
a { color: var(--color-accent); text-decoration:none; font-weight:500; position:relative; transition:color .2s var(--ease); }
a:hover { color: #7fe8c9; }
a:focus-visible { outline:none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

html:not(.user-tabbing) :focus { outline:none; }
html.user-tabbing :focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* Navigation */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #57cdac;
}

.nav-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.nav-menu li {
  display: inline;
}

.nav-menu li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #57cdac;
  transition: width 0.3s ease;
}

.nav-menu li a:hover::after {
  width: 100%;
}

/* Content */
.content { max-width: 1650px; margin:0 auto; padding:2.5rem clamp(1rem,3vw,3rem); }

.site-hero { padding: clamp(1.5rem,4vw,4rem) clamp(1rem,3vw,3rem) 1rem; position:relative; overflow:hidden; }
.site-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 35% 20%,rgba(var(--color-accent-rgb)/0.35),transparent 60%); pointer-events:none; }
.site-hero .inner { max-width:1450px; margin:0 auto; }
.hero-head { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.brand-avatar { width:72px; height:72px; border-radius:32%; object-fit:cover; box-shadow:0 4px 18px -4px rgba(var(--color-accent-rgb)/0.55),0 2px 6px -2px rgba(0,0,0,.5); border:2px solid rgba(var(--color-accent-rgb)/0.6); background:var(--color-bg-soft); }
.tagline { font-size: clamp(.95rem,1.2vw,1.15rem); font-weight:500; color: var(--color-text); }
.disclaimer { font-size:.8rem; color: var(--color-text-faint); max-width: 820px; }

.skip-link { position:absolute; top:-50px; left:0; background:var(--color-accent); color:#000; padding:.75rem 1rem; font-weight:600; border-radius:0 0 var(--radius-sm) 0; z-index:999; transition:top .3s; }
.skip-link:focus { top:0; }

.controls { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; margin:1.25rem 0 0; }
.search-wrapper { position:relative; display:flex; align-items:center; }
#searchInput { background: var(--color-bg-soft); border:1px solid var(--color-border); color: var(--color-text); padding:.65rem .9rem; border-radius: var(--radius-sm); font-size:.95rem; min-width: clamp(220px,30vw,360px); backdrop-filter: blur(8px); transition: border-color .25s var(--ease), background .35s var(--ease); }
#searchInput:focus { border-color: var(--color-accent); outline:none; background: var(--color-bg-alt); }
#clearSearch { position:absolute; right:.35rem; background:transparent; border:none; color: var(--color-text-faint); font-size:1.1rem; cursor:pointer; padding:.35rem .55rem; border-radius: var(--radius-xs); line-height:1; }
#clearSearch:hover { color: var(--color-text); }

select#sortSelect { background: var(--color-bg-soft); border:1px solid var(--color-border); color: var(--color-text); padding:.6rem .85rem; border-radius: var(--radius-sm); font-size:.85rem; font-weight:500; cursor:pointer; transition: border-color .25s var(--ease), background .35s var(--ease); }
select#sortSelect:focus { border-color: var(--color-accent); outline:none; }

.toggle { display:inline-flex; align-items:center; gap:.55rem; font-size:.75rem; font-weight:500; cursor:pointer; user-select:none; color: var(--color-text-dim); }
.toggle input { display:none; }
.toggle-track { --h:20px; width:44px; height:var(--h); background: var(--color-bg-soft); border:1px solid var(--color-border); border-radius: var(--radius-pill); position:relative; display:inline-block; transition: background .4s var(--ease), border-color .3s; }
.toggle-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; background: var(--gradient-accent); border-radius:50%; box-shadow: var(--shadow-sm); transition: transform .45s var(--ease); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(24px); }
.toggle input:checked + .toggle-track { background: linear-gradient(90deg,#fafafa,#d0ffef); }
.toggle-text { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; }

.section-block { margin: 2.5rem 0 3.25rem; position:relative; }
.section-head { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; margin-bottom:1.25rem; }
.section-sub { font-size:.75rem; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color: var(--color-text-faint); margin:0; }

.card-grid { --gap:1.1rem; display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); align-items:stretch; }
.card-grid.small { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }

/* Profile Cards */
.profile-card { position:relative; display:flex; flex-direction:column; gap:.65rem; padding:1rem .95rem .95rem; background: linear-gradient(180deg,var(--color-bg-alt),var(--color-bg-soft)); border:1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); isolation:isolate; overflow:hidden; min-height:140px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .55s var(--ease), box-shadow .5s var(--ease), background .6s var(--ease), border-color .4s; }
.profile-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(var(--color-accent-rgb)/0.15),transparent 65%); opacity:0; transition: opacity .5s var(--ease); pointer-events:none; }
.profile-card:hover::before { opacity:1; }
.profile-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(var(--color-accent-rgb)/0.5); }
.profile-card:focus-visible { outline:none; box-shadow: var(--focus-ring), var(--shadow); }
.profile-card h2 { font-size:1.05rem; margin:.25rem 0 .15rem; color: var(--color-text); font-weight:600; letter-spacing:.3px; transition: color .35s var(--ease); }
.profile-card:hover h2 { color: var(--color-accent); }
.profile-card p { font-size:.75rem; color: var(--color-text-faint); margin:0; }
.profile-image { border-radius: 20px; width:100%; aspect-ratio: 16/10; object-fit: contain; background: linear-gradient(145deg,var(--color-bg-soft),var(--color-bg-alt)); box-shadow: inset 0 0 0 1px var(--color-border); transition: transform .6s var(--ease), box-shadow .5s var(--ease); overflow:hidden; padding:4px; }
.profile-image.fallback { object-fit:contain; padding:10%; background:radial-gradient(circle at 50% 50%, rgba(var(--color-accent-rgb)/0.2), transparent 70%); }
.profile-card:hover .profile-image { transform: scale(1.04); box-shadow: 0 4px 24px -4px rgba(var(--color-accent-rgb)/0.45); }

/* Gallery Cards */
/* (legacy gallery-card kept minimal if still used) */
.gallery-card { border:1px solid var(--color-border); background: var(--color-bg-soft); display:flex; padding:1.25rem; border-radius: var(--radius); margin:1.5rem auto; gap:1rem; box-shadow: var(--shadow-sm); transition: background .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.gallery-card:hover { transform:translateY(-4px); box-shadow: var(--shadow); border-color: rgba(var(--color-accent-rgb)/0.5); background: linear-gradient(180deg,var(--color-bg-alt),var(--color-bg-soft)); }

/* Version Tags */
.version-tag { display:inline-flex; align-items:center; gap:.35ch; padding:.2rem .55rem .22rem; border-radius: var(--radius-pill); font-size:.6rem; font-weight:600; line-height:1; margin-left:.5rem; text-transform:uppercase; letter-spacing:.8px; position:relative; top:-1px; background: var(--color-bg-soft); color: var(--color-text-faint); box-shadow: inset 0 0 0 1px var(--color-border); }
.version-tag::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.85; }
.new-tag { background: linear-gradient(90deg,#57cdac,#6fe7ed); color:#002a1e !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.updated-tag { background: linear-gradient(90deg,#f0ad4e,#ffce4e); color:#3d2800 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* Responsive Design */
@media (max-width: 900px) {
  .controls { flex-direction:column; align-items:stretch; }
  #searchInput { width:100%; min-width:unset; }
  select#sortSelect { width:100%; }
  .toggle { align-self:flex-end; }
  .section-block { margin:2rem 0 2.5rem; }
  .profile-card { min-height:130px; }
}

/* Gallery Links */
.gallery-link { text-decoration:none; color:inherit; display:block; position:relative; transition: filter .4s var(--ease), transform .5s var(--ease); }
.gallery-link[hidden] { display:none !important; }
.gallery-link:active .profile-card { transform: translateY(-2px) scale(.98); }

/* Custom Scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#57cdac,#4dbaff); border-radius: var(--radius-pill); border:2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#62e9c9,#5cc8ff); }

.empty-state { padding:2.25rem 1rem; text-align:center; font-size:.95rem; font-weight:500; color: var(--color-text-faint); border:1px dashed var(--color-border); border-radius: var(--radius); margin-top:1.25rem; background: linear-gradient(135deg,var(--color-bg-soft),var(--color-bg-alt)); }

.site-footer { text-align:center; padding:3rem 1rem 4rem; font-size:.8rem; color: var(--color-text-faint); display:flex; flex-direction:column; gap:.65rem; }
.tiny { font-size:.65rem; letter-spacing:.75px; text-transform:uppercase; opacity:.7; }

.card-actions { margin-top:.25rem; display:flex; gap:.4rem; justify-content:flex-end; }
.icon-btn { --btn-bg: var(--color-bg-soft); background: var(--btn-bg); border:1px solid var(--color-border); color: var(--color-text-dim); padding:.45rem .6rem; border-radius: var(--radius-sm); font-size:.85rem; line-height:1; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; position:relative; overflow:hidden; font-weight:500; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease); }
.icon-btn .icon { display:inline-flex; }
.icon-btn:hover { background: linear-gradient(180deg,var(--color-bg-alt),var(--color-bg-soft)); color: var(--color-text); border-color: rgba(var(--color-accent-rgb)/0.5); }
.icon-btn:active { transform: translateY(1px) scale(.96); }
.icon-btn.copy-btn.copied { background: linear-gradient(90deg,#57cdac,#6fe7ed); color:#0d1d17; border-color: rgba(var(--color-accent-rgb)/0.6); }
.warp-btn { text-decoration:none; }
.ext-desc { font-size:.7rem; line-height:1.3; margin:.15rem 0 0; color: var(--color-text-faint); min-height: 2.1em; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  body { animation:none; }
  .profile-card, .gallery-card, .gallery-link { transition:none !important; }
}