.apv{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:var(--z-modal,1000);
    width:min(440px,100vw);
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border-left:1px solid var(--border-2);
    box-shadow:var(--shadow-panel,-18px 0 40px rgba(0,0,0,.45));
    color:var(--fg);
}
.apv[hidden]{
    display:none;
}
.apv-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:16px 16px 12px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
}
.apv-who{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.apv-name{
    margin:0;
    font:700 18px/1.2 var(--font-ui);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.apv-sid{
    color:var(--fg-dim);
    font:500 12px/1.2 var(--font-mono);
}
.apv-x{
    flex:none;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
    border-radius:var(--r-s);
    border:1px solid var(--border-2);
    background:var(--surface);
    color:var(--fg);
}
.apv-x:hover{
    border-color:var(--accent);
}
.apv-x:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.apv-x svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}
.apv-body{
    flex:1 1 auto;
    overflow-y:auto;
    padding:14px 16px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.apv-sec{
    border:1px solid var(--border);
    border-radius:var(--r);
    background:var(--surface-2);
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.apv-sec-head{
    display:flex;
    align-items:center;
    gap:10px;
}
.apv-h{
    margin:0;
    font:700 15px/1.2 var(--font-ui);
}
.apv-count{
    min-width:24px;
    padding:2px 8px;
    border-radius:var(--r-pill,999px);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--fg-dim);
    font:600 12px/1.4 var(--font-ui);
    text-align:center;
}
.apv-empty{
    margin:0;
    color:var(--fg-mute);
    font-size:13.5px;
}
.apv-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.apv-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:4px 10px;
    padding:8px 10px;
    border-radius:var(--r-s);
    border:1px solid var(--border);
    background:var(--surface);
    min-width:0;
}
.apv-row.has-pic{
    grid-template-columns:36px minmax(0,1fr) auto;
}
.apv-pic{
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:var(--r-s);
    overflow:hidden;
    display:block;
}
.apv-pic img{
    width:36px;
    height:36px;
    display:block;
    object-fit:cover;
}
.apv-pic.is-blank{
    background:var(--surface-3,var(--surface-2));
    border:1px solid var(--border);
}
.apv-main{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.apv-line{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}
.apv-title{
    font:600 14px/1.25 var(--font-ui);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.apv-meta{
    color:var(--fg-dim);
    font-size:12.5px;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.apv-x-count{
    color:var(--accent);
    font:700 13px/1 var(--font-ui);
    white-space:nowrap;
}
.apv-chips{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
.apv-chip{
    padding:2px 8px;
    border-radius:var(--r-pill,999px);
    border:1px solid var(--border-2);
    color:var(--fg-dim);
    font:600 11px/1.3 var(--font-ui);
    white-space:nowrap;
}
.apv-chip.is-gold{
    color:#d6b25e;
    border-color:#d6b25e88;
}
.apv-chip.is-warn{
    color:var(--warn,#f59e0b);
    border-color:var(--warn,#f59e0b);
}
.apv-side{
    color:var(--fg-mute);
    font-size:12px;
    text-align:right;
    white-space:nowrap;
}
@media (max-width:600px){
    .apv{
        top:auto;
        left:0;
        width:100vw;
        max-height:88vh;
        border-left:0;
        border-top:1px solid var(--border-2);
        border-radius:var(--r) var(--r) 0 0;
    }
    .apv-row{
        grid-template-columns:minmax(0,1fr);
    }
    .apv-row.has-pic{
        grid-template-columns:36px minmax(0,1fr);
    }
    .apv-row.has-pic .apv-pic{
        grid-row:span 2;
        align-self:start;
    }
    .apv-side{
        grid-column:-2 / -1;
        text-align:left;
        white-space:normal;
    }
}