*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Microsoft YaHei',sans-serif;background:#000;color:#f5f5f7;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:200;background:rgba(0,0,0,0.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.topbar .back{font-size:14px;color:#7c4dff;text-decoration:none;font-weight:400}
.topbar .title{font-size:14px;font-weight:600;color:#f5f5f7;position:absolute;left:50%;transform:translateX(-50%)}
.topbar .right{display:flex;align-items:center;gap:8px}
.topbar .nav-btn{font-size:12px;color:#7c4dff;background:none;border:1px solid rgba(124, 77, 255,0.3);padding:4px 12px;border-radius:980px;cursor:pointer;font-family:inherit;text-decoration:none;transition:all .2s}
.topbar .nav-btn:hover{background:#7c4dff;color:#fff;border-color:#7c4dff}

.page{max-width:960px;margin:0 auto;padding:64px 24px 80px}

.project-header{margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid #1d1d1f}
.project-header h1{font-size:24px;font-weight:600;color:#f5f5f7;letter-spacing:-0.3px;margin-bottom:6px}
.project-header .meta{font-size:13px;color:#86868b;display:flex;gap:16px;flex-wrap:wrap}
.project-header .status{display:inline-block;font-size:11px;font-weight:500;padding:3px 8px;border-radius:6px}
.st-analyzing{background:#1a1505;color:#ffd60a}
.st-ready{background:#061a14;color:#30d158}
.st-error{background:#1a0808;color:#ff453a}

/* Tabs */
.tabs{display:flex;gap:0;background:#1d1d1f;border-radius:10px;padding:3px;margin-bottom:24px}
.tab{flex:1;padding:8px 0;border:none;background:transparent;color:#86868b;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s;font-family:inherit;text-align:center}
.tab.active{background:rgba(124,77,255,0.18);color:#fff}

/* Section */
.section{display:none}
.section.active{display:block}

.section-title{font-size:16px;font-weight:600;color:#f5f5f7;margin-bottom:16px}

/* Generated assets grid */
.gen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
@media(max-width:700px){.gen-grid{grid-template-columns:repeat(2,1fr)}}
.gen-card{background:#1d1d1f;border-radius:14px;overflow:hidden;transition:all .3s}
.gen-card:hover{background:#242426}
.gen-card .preview{width:100%;aspect-ratio:1;background:#0a0a0a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gen-card .preview img{width:100%;height:100%;object-fit:cover}
.gen-card .preview .ph{color:#38383a;font-size:32px}
.gen-card .info{padding:12px}
.gen-card .info .id{font-size:10px;color:#48484a;font-weight:600;letter-spacing:0.5px;margin-bottom:2px}
.gen-card .info .name{font-size:13px;font-weight:600;color:#f5f5f7;margin-bottom:4px}
.gen-card .info .prompt-preview{font-size:11px;color:#86868b;line-height:1.4;max-height:42px;overflow:hidden;text-overflow:ellipsis}

/* Upload area */
.upload-area{width:100%;border:1px dashed #38383a;border-radius:16px;padding:40px 24px;text-align:center;cursor:pointer;transition:all .3s;margin-bottom:24px}
.upload-area:hover{border-color:#48484a;background:#0a0a0a}
.upload-area.dragover{border-color:#48484a;background:#0d0d0f}
.upload-area h3{font-size:15px;font-weight:600;color:#f5f5f7;margin-bottom:4px}
.upload-area p{font-size:13px;color:#86868b}
.upload-area .formats{font-size:11px;color:#48484a;margin-top:6px}

/* Cat pills */
.cat-pills{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.cat-pill{font-size:12px;padding:5px 12px;border-radius:980px;border:1px solid #38383a;background:transparent;color:#86868b;cursor:pointer;transition:all .2s;font-family:inherit}
.cat-pill:hover{border-color:#86868b;color:#f5f5f7}
.cat-pill.active{background:rgba(124,77,255,0.18);color:#fff;border-color:rgba(124,77,255,0.4)}

/* User asset grid */
.asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:32px}
@media(max-width:700px){.asset-grid{grid-template-columns:repeat(2,1fr)}}
.asset-item{position:relative;background:#1d1d1f;border-radius:12px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.asset-item img{width:100%;height:100%;object-fit:cover}
.asset-item .remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.7);border:none;color:#f5f5f7;font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center}
.asset-item:hover .remove{display:flex}
.asset-item .badge{position:absolute;bottom:6px;left:6px;font-size:10px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,0.7);color:#a1a1a6;cursor:pointer}
.asset-item .file-ph{text-align:center;padding:12px}
.asset-item .file-ph span{font-size:11px;color:#86868b;word-break:break-all}

.empty{text-align:center;padding:48px 0;color:#48484a;font-size:14px}