*{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}

/* 🔒 2026-04-19 修：topbar 响应式布局
   旧版 .title 用 position:absolute 居中，窄屏时会被右侧 user-info 覆盖。
   新版改成 flex 布局，title 紧挨 back，user-info 自动靠右。 */
.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;padding:0 16px 0 20px;z-index:200;background:rgba(0,0,0,0.85);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);gap:16px;flex-wrap:nowrap}
.topbar .back{font-size:14px;color:#7c4dff;text-decoration:none;font-weight:400;flex-shrink:0;white-space:nowrap}
.topbar .title{font-size:14px;font-weight:600;color:#f5f5f7;flex-shrink:0;white-space:nowrap}
.topbar .user-info{font-size:13px;color:#86868b;display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:nowrap;min-width:0}
.topbar .user-info > *{flex-shrink:0}
#userDisplay{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.topbar .logout-btn{font-size:12px;color:#ff453a;background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;padding:0 2px}

/* 窄屏下逐级隐藏次要元素，保证核心按钮不重叠 */
@media (max-width: 900px){
  #userDisplay{max-width:84px;font-size:12px}
  .topbar .user-info{gap:6px}
  .topbar{padding:0 12px;gap:10px}
}
@media (max-width: 700px){
  .topbar .title{display:none}
  #userDisplay{display:none}
  .topbar .user-info button[onclick*='StorageDiag']{display:none}
}
@media (max-width: 520px){
  .topbar .back{font-size:13px;padding:0}
  .credits-badge{padding:2px 6px;font-size:11px}
  .topbar .pill.accent{padding:4px 9px;font-size:11px}
}

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

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;margin-top:40px}
.section-header:first-child{margin-top:0}
.section-header h2{font-size:20px;font-weight:600;color:#f5f5f7;letter-spacing:-0.3px}
.new-btn{padding:8px 18px;border-radius:10px;border:none;background:#7c4dff;color:#fff;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.new-btn:hover{background:#5e35b1}

.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:700px){.project-grid{grid-template-columns:1fr}}

.project-card{background:#1d1d1f;border-radius:16px;padding:22px;cursor:pointer;transition:all .3s;border:1px solid transparent;text-decoration:none;display:block}
.project-card:hover{background:#2d2d2f;transform:scale(1.01)}
.project-card h3{font-size:17px;font-weight:600;color:#f5f5f7;margin-bottom:6px}
.project-card .meta-row{font-size:13px;color:#86868b;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.project-card .meta-row .dot{width:4px;height:4px;border-radius:50%;background:#48484a}
.project-card .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.status-tag{display:inline-block;font-size:11px;font-weight:500;padding:3px 8px;border-radius:6px}
.status-analyzing{background:#1a1505;color:#ffd60a}
.status-ready{background:#061a14;color:#30d158}
.status-error{background:#1a0808;color:#ff453a}
.share-btn{font-size:12px;color:#7c4dff;background:none;border:1px solid #7c4dff;border-radius:8px;padding:4px 12px;cursor:pointer;font-family:inherit;transition:all .2s}
.share-btn:hover{background:#7c4dff;color:#fff}
.del-btn{font-size:12px;color:#ff453a;background:none;border:1px solid rgba(255,69,58,0.3);border-radius:8px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:all .2s;margin-left:6px}
.del-btn:hover{background:#ff453a;color:#fff;border-color:#ff453a}

.shared-badge{font-size:11px;color:#a78bfa;background:#1a1530;padding:2px 8px;border-radius:4px;margin-left:8px}

.empty-state{text-align:center;padding:60px 0;color:#48484a}
.empty-state p{font-size:15px;margin-bottom:12px}
.empty-state a{font-size:14px;color:#7c4dff;text-decoration:none}

/* Share modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:300;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:#1d1d1f;border-radius:18px;width:100%;max-width:400px;padding:36px 32px;position:relative;animation:modalIn .3s ease}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal .close{position:absolute;top:14px;right:18px;background:none;border:none;color:#86868b;font-size:20px;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.modal .close:hover{background:#2d2d2f;color:#f5f5f7}
.modal h3{font-size:20px;font-weight:600;color:#f5f5f7;margin-bottom:6px}
.modal .modal-sub{font-size:13px;color:#86868b;margin-bottom:24px}
.modal input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid #38383a;background:#000;color:#f5f5f7;font-size:15px;outline:none;font-family:inherit;margin-bottom:16px;transition:border-color .2s}
.modal input:focus{border-color:#48484a}
.modal input::placeholder{color:#48484a}
.modal .submit-btn{width:100%;padding:13px;border-radius:12px;border:none;background:#7c4dff;color:#fff;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit}
.modal .submit-btn:hover{background:#5e35b1}
.modal .shared-list{margin-top:20px}
.modal .shared-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #2d2d2f}
.modal .shared-item span{font-size:14px;color:#d1d1d6}
.modal .shared-item .remove-share{font-size:12px;color:#ff453a;background:none;border:none;cursor:pointer;font-family:inherit}
.modal .share-success{font-size:13px;color:#30d158;margin-top:8px;display:none}

.credits-badge{font-size:12px;color:#ffd60a;background:#1a1505;padding:3px 10px;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap}
.credits-badge:hover{background:#2a2008}

.credits-panel{position:fixed;top:48px;right:12px;width:380px;max-height:70vh;background:#1d1d1f;border-radius:16px;border:1px solid #38383a;z-index:250;overflow:hidden;display:flex;flex-direction:column;animation:modalIn .2s ease;box-shadow:0 8px 32px rgba(0,0,0,0.6)}
.credits-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid #2d2d2f}
.credits-panel-header h3{font-size:16px;font-weight:600;color:#f5f5f7}
.credits-panel-close{font-size:22px;color:#86868b;cursor:pointer;line-height:1}
.credits-panel-close:hover{color:#f5f5f7}
.credits-summary{display:flex;align-items:center;gap:20px;padding:16px 20px}
.credits-balance{text-align:center;font-size:32px;font-weight:700;color:#ffd60a;line-height:1.2}
.credits-balance small{display:block;font-size:12px;color:#86868b;font-weight:400;margin-top:4px}
.credits-stats{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#86868b}
.credits-stats b{color:#d1d1d6}
.credits-cost-info{padding:8px 20px 12px;font-size:11px;color:#86868b;border-bottom:1px solid #2d2d2f}
.credits-log{overflow-y:auto;flex:1;padding:8px 20px 16px}
.credits-log-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(45,45,47,0.5);font-size:12px}
.credits-log-item .log-desc{color:#d1d1d6}
.credits-log-item .log-amount{font-weight:600}
.credits-log-item .log-amount.spend{color:#ff453a}
.credits-log-item .log-amount.grant{color:#30d158}
.credits-log-item .log-time{color:#48484a;font-size:11px}

/* ======== 阶段独立入口 ======== */
.card-main{cursor:pointer;padding:16px 18px 10px;transition:background .15s}
.card-main:hover{background:rgba(255,255,255,0.02)}
.stage-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 14px;border-top:1px solid #2d2d2f;border-bottom:1px solid #2d2d2f;background:#0a0a0a}
.stage-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border-radius:8px;border:1px solid transparent;background:transparent;color:#86868b;font-family:inherit;cursor:pointer;transition:all .15s;font-size:11px}
.stage-btn:hover{background:#1d1d1f;color:#d1d1d6}
.stage-btn .stage-icon{font-size:14px;font-weight:600;opacity:.5}
.stage-btn .stage-label{font-size:11px;font-weight:500}
.stage-btn-done{color:#a1a1a6}
.stage-btn-done .stage-icon{opacity:.9;color:#30d158}
.stage-btn-active{background:rgba(124, 77, 255,0.12);color:#7c4dff;border-color:rgba(124, 77, 255,0.3)}
.stage-btn-active .stage-icon{opacity:1;color:#7c4dff}
.stage-btn-active .stage-label{font-weight:600}
.project-card{padding:0;overflow:hidden}
.project-card h3{margin-bottom:4px}
.project-card .card-footer{padding:10px 14px 12px}


/* 2026-05-06 workbench calm canvas-list style: closer to /homo/ 我的画布 */
.project-grid{gap:16px !important;}
.project-card{background:#16181f !important;border:1px solid rgba(255,255,255,0.08) !important;border-radius:12px !important;box-shadow:none !important;transform:none !important;}
.project-card:hover{background:#191b23 !important;border-color:rgba(255,255,255,0.14) !important;transform:none !important;box-shadow:0 14px 32px -18px rgba(0,0,0,0.65) !important;}
.card-main{padding:20px 22px 16px !important;}
.card-main:hover{background:transparent !important;}
.project-card h3{font-size:19px !important;line-height:1.25 !important;letter-spacing:-0.01em;color:#f3f5f8 !important;}
.project-card .meta-row{color:rgba(232,234,239,0.52) !important;font-size:13px !important;}
.project-card .meta-row .dot{background:rgba(232,234,239,0.28) !important;}
.stage-nav{background:#101116 !important;border-top:1px solid rgba(255,255,255,0.06) !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;gap:8px !important;padding:12px 18px !important;}
.stage-btn{min-height:58px;border-radius:10px !important;border:1px solid rgba(255,255,255,0.08) !important;background:rgba(255,255,255,0.03) !important;color:rgba(232,234,239,0.72) !important;}
.stage-btn:hover{background:rgba(255,255,255,0.06) !important;border-color:rgba(255,255,255,0.14) !important;color:#f3f5f8 !important;}
.stage-btn .stage-icon{width:22px !important;height:22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;margin-bottom:2px;border-radius:50% !important;background:rgba(124,77,255,0.08) !important;color:rgba(167,139,250,0.62) !important;opacity:1 !important;font-size:11px !important;}
.stage-btn .stage-label{font-size:12px !important;font-weight:600 !important;}
.stage-btn-active{background:rgba(124,77,255,0.10) !important;border-color:rgba(124,77,255,0.32) !important;color:#e8eaef !important;box-shadow:none !important;}
.stage-btn-active .stage-icon{background:rgba(124,77,255,0.18) !important;color:#a78bfa !important;}
.stage-btn-done{color:rgba(232,234,239,0.62) !important;}
.stage-btn-done .stage-icon{background:rgba(105,240,174,0.08) !important;color:rgba(105,240,174,0.7) !important;}
.project-card .card-footer{padding:12px 22px 16px !important;background:#16181f !important;}
.status-tag{background:transparent !important;color:rgba(232,234,239,0.72) !important;padding:0 !important;border-radius:0 !important;}
.status-tag.analyzing{color:#d6ba55 !important;}
.share-btn{color:#a78bfa !important;border-color:rgba(124,77,255,0.45) !important;background:transparent !important;box-shadow:none !important;}
.share-btn:hover{background:rgba(124,77,255,0.10) !important;color:#d8ccff !important;}
.del-btn{color:rgba(255,94,108,0.86) !important;border-color:rgba(255,94,108,0.32) !important;background:transparent !important;}
.del-btn:hover{background:rgba(255,94,108,0.10) !important;color:#ff8d96 !important;}