/* avogogo app design system (consumes tokens.css). Topbar + account menu live in <avo-topbar>. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--cream);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--avo-500);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#d6e0c2;border-radius:6px;border:3px solid var(--cream)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;transition:.18s}
.btn-primary{color:#fff;background:var(--avo-600);box-shadow:0 8px 20px -12px rgba(82,122,35,.7)}
.btn-primary:hover{background:var(--avo-700);transform:translateY(-2px)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--avo-800)}
.btn-ghost:hover{background:var(--cream)}
.btn .arr{transition:.25s}.btn:hover .arr{transform:translateX(3px)}
.btn-sm{padding:9px 15px;font-size:14px}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:38px 24px 80px}
@media(max-width:560px){.wrap{padding:26px 16px 60px}}

/* empty */
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty h3{font-family:var(--display);font-size:20px;color:var(--avo-900);margin-bottom:6px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.chip{font-size:12.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-weight:600}
.chip.brand{color:var(--avo-800);background:var(--avo-100);border-color:#d6e8a8}

/* store listing bits (screenshots strip + collapsible description) */
.shots{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.shots img{height:188px;width:auto;border-radius:12px;border:1px solid var(--line);background:var(--cream-2);flex:none}
.desc{font-size:13.5px;color:var(--muted);line-height:1.65;white-space:pre-line;max-height:7.2em;overflow:hidden;position:relative;transition:max-height .3s}
.desc.open{max-height:1400px}

/* 转圈：定义放这里，使用方遍布 agent.html / topup.html / adflow.css 的 .sp 类——别跟着某个组件删掉 */
@keyframes spin{to{transform:rotate(360deg)}}

/* --- 骨架屏（加载占位 + 玻璃扫光）------------------------------------------
   规则：凡是要等接口才能画出来的区域（agent 会话、聊天历史、做同款 overlay、
   任务/作品列表…），加载期一律铺骨架，不要留空白。空白和「本来就没有」长得
   一模一样，用户会以为数据丢了。 */
.sk{position:relative;overflow:hidden;background:var(--cream-2,#efeee6);border-radius:10px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:skshine 1.25s ease-in-out infinite}
@keyframes skshine{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none;opacity:.35}}
.sk-txt{height:12px;margin:8px 0}
.sk-txt.w40{width:40%} .sk-txt.w55{width:55%} .sk-txt.w70{width:70%} .sk-txt.w85{width:85%}
.sk-list{display:flex;flex-direction:column;gap:10px}
.sk-row{height:38px;border-radius:12px}