:root{--bg:#070b18;--panel:#121b2a;--panel2:#1b2637;--text:#f8fafc;--muted:#91a4bd;--line:#22c55e;--blue:#2563eb;--gold:#f59e0b;--border:#28364a;--danger:#ef4444}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;background:radial-gradient(circle at top,#17213a 0,#070b18 36%,#050817 100%);color:var(--text);min-height:100vh;padding-bottom:76px}
.topbar{height:88px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(5,8,23,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}
.brand h1{font-size:22px;margin:0}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.line-btn,.pill{border:0;background:var(--line);color:#04130a;border-radius:999px;font-weight:900;padding:12px 18px;cursor:pointer}
.app{max-width:1120px;margin:0 auto;padding:20px}
.view{display:none}.view.active{display:block}
.hero{border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,rgba(27,38,55,.95),rgba(45,36,23,.92));box-shadow:0 20px 70px rgba(0,0,0,.28)}
.marketplace-hero{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:center;padding:32px;margin-bottom:18px}
.hero span{display:inline-block;background:var(--gold);color:#111827;border-radius:999px;font-weight:900;font-size:12px;padding:6px 10px}
.hero h2{font-size:40px;line-height:1.12;margin:16px 0 10px}.hero p{color:var(--muted);margin:0;line-height:1.7}
.hero-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.hero-stats{display:grid;gap:12px}.hero-stats div{background:rgba(11,18,32,.7);border:1px solid var(--border);border-radius:18px;padding:18px}.hero-stats b{display:block;font-size:28px;color:var(--gold)}.hero-stats span{color:var(--muted);font-size:13px}
.market-strip{display:grid;grid-template-columns:1fr 1.6fr;gap:12px;margin-bottom:16px}
.market-strip div{background:rgba(18,27,42,.76);border:1px solid var(--border);border-radius:16px;padding:14px}.market-strip b{display:block;margin-bottom:5px}.market-strip span{color:var(--muted);font-size:13px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0;gap:10px}
.filters{display:grid;grid-template-columns:1fr 160px 140px 130px 110px;gap:10px;margin-bottom:16px}
input,select,textarea{width:100%;background:#0b1220;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px;font:inherit}
button{font:inherit;border-radius:12px;border:1px solid var(--border);background:#111a29;color:var(--text);padding:10px 14px;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}.primary{background:var(--blue);border:0;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:rgba(27,38,55,.95);border:1px solid var(--border);border-radius:18px;padding:14px;min-height:150px;transition:.18s transform,.18s border-color;overflow:hidden}
.product-card{cursor:pointer}.product-card:hover{transform:translateY(-3px);border-color:#3b82f6}
.card img{width:100%;height:140px;object-fit:cover;border-radius:14px;margin-bottom:10px;background:#0b1220}
.card h4{margin:0 0 10px;font-size:16px;line-height:1.4}.card p{margin:4px 0;color:var(--muted);font-size:13px}.price{color:var(--gold);font-weight:900;font-size:18px;margin-top:12px}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.card-actions button{font-size:13px;padding:8px 10px}
.badge{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;margin-bottom:8px}
.panel{background:rgba(18,27,42,.75);border:1px solid var(--border);border-radius:18px;padding:22px}
.muted{color:var(--muted)}.form{display:grid;gap:14px;max-width:720px}.form label{font-weight:800}.form input,.form select,.form textarea{margin-top:7px;font-weight:400}.form small{display:block;color:var(--muted);margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.message{min-height:22px}.ok{color:var(--line)}.err{color:var(--danger)}
.member-box{background:#0b1220;border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:18px}
.upload-box{position:relative;border:2px dashed var(--border);border-radius:16px;padding:22px;background:#0b1220;cursor:pointer}.upload-box.drag{border-color:var(--line);background:#0d1f1a}.upload-box p{margin:6px 0 0;color:var(--muted);font-size:13px}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}
.image-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.preview-item{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0b1220;min-height:110px}.preview-item img{width:100%;height:110px;object-fit:cover;display:block}.preview-item .remove{position:absolute;top:6px;right:6px;border:0;background:rgba(0,0,0,.65);color:white;border-radius:999px;width:28px;height:28px;padding:0}.preview-item .status{position:absolute;left:6px;bottom:6px;font-size:11px;background:rgba(0,0,0,.65);padding:3px 6px;border-radius:999px}
.modal.hidden{display:none}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.detail-card{position:relative;z-index:1;width:min(980px,100%);max-height:88vh;overflow:auto;background:#0b1220;border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:0 25px 90px rgba(0,0,0,.55)}.modal-close{position:absolute;right:14px;top:14px;border:0;background:rgba(255,255,255,.1);border-radius:999px;width:36px;height:36px;padding:0;font-size:24px}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-main-img{width:100%;height:420px;object-fit:cover;border-radius:18px;background:#111a29}.thumbs{display:flex;gap:8px;margin-top:10px;overflow:auto}.thumbs img{width:74px;height:74px;border-radius:12px;object-fit:cover;border:2px solid transparent}.thumbs img.active{border-color:var(--gold)}.detail-info h2{margin:8px 0 10px;font-size:30px}.detail-desc{white-space:pre-wrap;line-height:1.7;color:#d9e2ef;background:#111a29;border:1px solid var(--border);padding:14px;border-radius:14px}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.detail-meta div{background:#111a29;border:1px solid var(--border);padding:12px;border-radius:14px}.detail-meta span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.share-box{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:64px;background:#050817;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);z-index:10}.bottom-nav button{border:0;border-radius:0;background:transparent;color:var(--muted);font-weight:800}.bottom-nav button.active{color:var(--gold)}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.marketplace-hero,.market-strip,.detail-layout{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.image-preview{grid-template-columns:repeat(3,1fr)}.detail-main-img{height:320px}}
@media(max-width:760px){.topbar{height:76px;padding:0 14px}.brand h1{font-size:18px}.brand p{font-size:11px}.app{padding:14px}.marketplace-hero{padding:20px}.hero h2{font-size:28px}.filters,.two{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.image-preview{grid-template-columns:repeat(2,1fr)}.detail-main-img{height:260px}.detail-card{padding:12px}.detail-info h2{font-size:24px}}


.member-dashboard{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 22px}
.member-stat{background:#0b1220;border:1px solid var(--border);border-radius:16px;padding:16px}
.member-stat.wide{grid-column:span 2}
.member-stat span{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.member-stat b{display:block;color:var(--gold);font-size:26px;margin-bottom:6px}
.member-stat small{display:block;color:var(--muted);margin-top:6px;line-height:1.5}
.copy-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:6px 0 12px}
.copy-row input{margin:0}
@media(max-width:760px){.member-dashboard{grid-template-columns:1fr}.member-stat.wide{grid-column:span 1}.copy-row{grid-template-columns:1fr}}

.payment-banner{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-weight:700}
.payment-banner.ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.payment-banner.err{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}