:root{
  --radius: 16px;
  --ring: rgba(0,122,255,.25);
}

.container {max-width:980px; margin:0 auto; padding:32px 20px 64px}
.header {display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin:10px 0 24px}
.sub{color:#999;max-width:640px;margin-top:6px}

.search {position:relative; flex:1 1 360px}
.search input{width:100%;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--input-bg);padding:0 42px 0 40px;color:var(--text);outline:none;}
.search input:focus{border-color:var(--blue);box-shadow:0 0 0 6px var(--ring)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.7}

.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
.tab{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--input-bg);text-align:center;color:#666;cursor:pointer;user-select:none}
.tab[aria-selected="true"]{background:color-mix(in oklab, var(--blue) 18%, var(--input-bg));color:var(--text);border-color:color-mix(in oklab, var(--blue) 40%, var(--border))}

.list{margin-top:22px;display:grid;gap:12px}
.card{border:1px solid var(--border);background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.acc{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.q{font-weight:300;font-size:clamp(15px,2.4vw,16px);letter-spacing:.1px}
.meta{display:flex;gap:6px;flex-wrap:wrap;justify-self:end}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:var(--input-bg);border:1px solid var(--border);color:#999}
.panel{padding:0px 18px 18px 18px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px}
.a{color:#999; line-height: 1.5rem}

details[open] .arrow{transform:rotate(90deg)}
details[open] .panel{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.empty{padding:64px 14px;text-align:center;color:#999;border:1px dashed var(--border);border-radius:16px}

@media (max-width:640px){
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}