:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; background: #050a12; color: #f5f7fc; }
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: #050a12; overscroll-behavior-y: none; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.mobile-shell { width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px calc(94px + env(safe-area-inset-bottom)); position: relative; overflow-x: clip; background: radial-gradient(circle at 83% 8%, #122a52 0, transparent 26%), linear-gradient(152deg, #060c16 0%, #050a12 55%, #09111d 100%); }
.top-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.search-box { height: 52px; flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 15px; color: #aeb7c8; background: rgba(13, 20, 32, .92); border: 1px solid rgba(145, 161, 191, .26); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #f5f7fc; font-size: 15px; }
.search-box input::placeholder { color: #8490a5; }
.notice { width: 43px; height: 48px; background: transparent; color: #f5f7fc; position: relative; }
.notice i { width: 8px; height: 8px; border-radius: 50%; background: #f6bc54; position: absolute; right: 5px; top: 4px; box-shadow: 0 0 12px #f6bc54; }
.hero { min-height: 194px; border: 1px solid rgba(196, 173, 132, .34); border-radius: 21px; overflow: hidden; position: relative; padding: 26px 24px; background: linear-gradient(112deg, #101a2a 2%, rgba(17,34,59,.88) 46%, rgba(17,46,86,.6)), radial-gradient(circle at 88% 12%, #7d89aa 0, #203858 26%, #0b1422 68%); box-shadow: 0 15px 28px rgba(0,0,0,.28); }
.hero:after { content: ''; position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(transparent, rgba(2,7,14,.78)); z-index: 1; }
.hero-glow { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: #f0a84a; filter: blur(68px); opacity: .18; right: 5px; top: -46px; }
.hero-copy { position: relative; z-index: 3; max-width: 250px; }
.hero-copy p { margin: 0 0 9px; font-size: clamp(25px, 7vw, 33px); line-height: 1.12; letter-spacing: -.7px; font-weight: 800; color: #f3d093; }
.hero-copy span { color: #eef2fb; font-size: 14px; }
.hero-copy button { margin-top: 21px; padding: 10px 13px; border-radius: 10px; background: linear-gradient(120deg, #f8d590, #c59246); color: #1d170d; display: flex; align-items: center; gap: 3px; font-weight: 700; font-size: 13px; }
.hero-building { position: absolute; width: 147px; height: 167px; right: 7px; bottom: -4px; z-index: 2; transform: skewY(-4deg); filter: drop-shadow(-8px 14px 13px #03070e); }
.hero-building i { display: block; position: absolute; background: repeating-linear-gradient(90deg, rgba(242,189,111,.92) 0 7px, #162636 7px 11px), repeating-linear-gradient(0deg, transparent 0 12px, #0b1521 12px 16px); border: 2px solid #203447; }
.hero-building i:nth-child(1) { width: 86px; height: 149px; right: 0; bottom: 0; }.hero-building i:nth-child(2) { width: 62px; height: 113px; left: 12px; bottom: 0; }.hero-building i:nth-child(3) { width: 47px; height: 86px; left: -3px; bottom: 0; }
.asset-section { padding-top: 27px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.section-title h1 { font-size: 25px; margin: 0; letter-spacing: -.5px; }.section-title button, .result-line button { color: #aeb8c9; background: transparent; display: flex; align-items: center; gap: 1px; font-size: 13px; }
.chips { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(158,171,191,.32); background: rgba(19,27,40,.72); color: #b8c0d0; font-size: 14px; }.chip.selected { color: #f6ce80; border-color: #c78e3d; background: linear-gradient(135deg, rgba(115,79,30,.45), rgba(38,29,20,.7)); box-shadow: inset 0 0 18px rgba(224,159,62,.1); }
.result-line { min-height: 35px; padding: 16px 1px 4px; display: flex; justify-content: space-between; color: #8995a9; font-size: 12px; }.result-line button { color: #75a7ff; }
.asset-list { display: grid; gap: 14px; }
.asset-card { padding: 12px; border-radius: 19px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; background: linear-gradient(120deg, rgba(19,29,43,.96), rgba(10,16,25,.96)); border: 1px solid rgba(137,151,172,.15); box-shadow: 0 13px 25px rgba(0,0,0,.2); transition: transform .18s ease, border-color .18s ease; outline: 0; }.asset-card:focus-visible, .asset-card:hover { transform: translateY(-2px); border-color: rgba(79,139,255,.52); }
.asset-image { min-height: 174px; overflow: hidden; border-radius: 13px; position: relative; background: #182a44; }.category-badge { position: absolute; top: 8px; left: 8px; font-size: 12px; padding: 5px 7px; border-radius: 6px; color: #fff; background: rgba(17,28,44,.76); backdrop-filter: blur(8px); }
.asset-visual { width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden; }.asset-visual:before, .asset-visual:after, .asset-visual i, .asset-visual b, .asset-visual em { content: ''; position: absolute; display: block; }
.asset-visual.tower { background: linear-gradient(#9fc5f0 0 44%, #e7b777 45%, #30445a 100%); }.tower:before { width: 72%; height: 78%; left: 16%; bottom: -2%; background: repeating-linear-gradient(90deg, #455c72 0 8px, #b7ddfa 8px 12px), repeating-linear-gradient(0deg, transparent 0 14px, #354a5f 14px 17px); transform: skewY(-9deg); border: 2px solid #2a4358; }.tower:after { width: 55%; height: 36%; left: -8%; bottom: -2%; background: rgba(37,57,71,.7); transform: skewY(-9deg); }
.asset-visual.solar { background: linear-gradient(#b9d3ed 0 49%, #e1bd87 50%, #566c55 100%); }.solar:before { width: 120%; height: 34%; left: -15%; bottom: 8%; background: repeating-linear-gradient(90deg, #2e5e7d 0 17px, #8fbad7 17px 19px), repeating-linear-gradient(0deg, transparent 0 10px, #2d5370 10px 12px); transform: skewY(-13deg) rotate(-5deg); border: 2px solid #23465d; }.solar:after { width: 2px; height: 76%; background: #e8eced; left: 73%; top: 5%; box-shadow: -44px 20px 0 #e8eced, 40px 4px 0 #e8eced; }
.asset-visual.warehouse { background: linear-gradient(#a9d1f4 0 48%, #d1c4ad 49%, #53606b 100%); }.warehouse:before { width: 125%; height: 43%; left: -13%; bottom: 24%; background: repeating-linear-gradient(90deg, #e6e9e9 0 34px, #87a9ba 35px 38px); border-top: 8px solid #54748a; box-shadow: 0 10px 0 rgba(42,55,64,.3); }.warehouse:after { width: 20px; height: 10px; left: 12px; bottom: 17px; border-radius: 3px; background: #ececec; box-shadow: 27px 3px 0 #eaeaea, 59px -2px 0 #f2f2f2; }
.asset-visual.residence { background: linear-gradient(#153a72 0 42%, #193c68 43%, #09172a 100%); }.residence:before { width: 120%; height: 65%; bottom: 12%; left: -8%; background: repeating-linear-gradient(90deg, #1a3048 0 12px, #f5bb76 12px 17px), repeating-linear-gradient(0deg, transparent 0 13px, #0a1827 13px 16px); border: 3px solid #263c57; }.residence:after { width: 130%; height: 12%; bottom: 0; left: -10%; background: linear-gradient(#091323, #366a92 30%, #07111e); }
.asset-visual.wine { background: linear-gradient(#b7d2e6 0 42%, #d5a76a 43%, #5d3944 100%); }.wine:before { width: 2px; height: 81%; left: 24%; top: 9%; background: #4d6145; transform: rotate(23deg); box-shadow: 32px -8px 0 #4d6145, 57px 13px 0 #4d6145; }.wine:after { width: 112%; height: 22%; left: -4%; bottom: 3%; background: repeating-linear-gradient(90deg, #51323b 0 6px, #744652 6px 9px); transform: skewY(-12deg); }
.asset-content { min-width: 0; display: flex; flex-direction: column; }.asset-heading { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; }.asset-heading h3 { margin: 0; font-size: 16px; line-height: 1.25; letter-spacing: -.2px; }.status { flex: 0 0 auto; font-size: 11px; padding: 5px 7px; border-radius: 6px; }.status.open { color: #71e9a3; background: rgba(20,106,63,.28); }.status.pending { color: #f1c46f; background: rgba(123,83,21,.26); }.asset-location { margin: 6px 0 10px; color: #9ba6b8; font-size: 12px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(149,160,177,.13); padding-top: 9px; gap: 8px; }.metrics div + div { border-left: 1px solid rgba(149,160,177,.16); padding-left: 9px; }.metrics span { display: block; color: #8793a7; font-size: 11px; margin-bottom: 5px; }.metrics strong { display: block; color: #f2f5fb; font-size: 15px; white-space: nowrap; }.metrics .yield { color: #42da86; }.progress-label { display: flex; justify-content: space-between; align-items: end; gap: 5px; margin-top: auto; padding-top: 11px; color: #9da8b9; font-size: 10px; }.progress-label b { color: #e5bd76; font-weight: 600; }.progress-label span:last-child { white-space: nowrap; }
.progress-track { width: 100%; height: 7px; border-radius: 20px; background: #252e3c; overflow: hidden; margin: 6px 0 10px; }.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d6a354, #e3bf7c); box-shadow: 0 0 11px rgba(225,177,96,.35); }.buy-button { align-self: flex-end; min-height: 34px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 1px; color: #fff; background: linear-gradient(135deg, #0e70ff, #1555ed); border: 1px solid #3587ff; box-shadow: 0 6px 13px rgba(0,87,255,.35), inset 0 1px 0 rgba(255,255,255,.25); font-weight: 700; font-size: 13px; }
.bottom-nav { width: min(430px, 100%); position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); min-height: calc(67px + env(safe-area-inset-bottom)); padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: space-around; background: rgba(8,14,23,.91); border-top: 1px solid rgba(155,171,192,.17); backdrop-filter: blur(18px); z-index: 10; }.nav-item { color: #7f8998; background: transparent; display: grid; gap: 3px; justify-items: center; font-size: 11px; min-width: 52px; }.nav-icon { line-height: 0; padding: 4px 9px; border-radius: 8px; }.nav-item.active { color: #f2c777; }.nav-item.active .nav-icon { color: #171308; background: linear-gradient(135deg, #f9d687, #c59652); box-shadow: 0 3px 10px rgba(238,185,93,.27); }
.empty-state { padding: 48px 15px; text-align: center; border: 1px dashed rgba(132,153,183,.35); border-radius: 18px; background: rgba(13,23,36,.55); }.empty-state div { font-size: 32px; color: #79a8ff; }.empty-state h2 { margin: 9px 0 6px; font-size: 17px; }.empty-state p { color: #9ca7ba; margin: 0 0 16px; font-size: 13px; }.empty-state button { padding: 9px 14px; border-radius: 8px; color: #e5edf9; background: #1b2d49; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); transform: translate(-50%, 15px); opacity: 0; pointer-events: none; white-space: nowrap; padding: 10px 15px; border-radius: 9px; background: rgba(27,38,56,.96); border: 1px solid rgba(137,157,186,.28); color: #f4f7fd; font-size: 13px; transition: .2s; box-shadow: 0 10px 25px rgba(0,0,0,.32); }.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.detail-shell { display: flex; flex-direction: column; }.detail-top { height: 48px; display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; text-align: center; font-weight: 700; font-size: 18px; }.detail-top button { color: #eff4fc; background: transparent; justify-self: start; padding: 5px; }.detail-top .ghost { font-size: 31px; line-height: 1; justify-self: end; font-weight: 300; }.phase-placeholder { margin-top: 28px; padding: 16px; border-radius: 20px; background: linear-gradient(145deg, #101d30, #0a121f); border: 1px solid rgba(102,136,187,.29); }.placeholder-visual { height: 218px; position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 15px; }.phase-placeholder > .status { display: inline-block; margin-bottom: 10px; }.phase-placeholder h1 { margin: 0; font-size: 25px; }.phase-placeholder > p { margin: 7px 0 21px; color: #a7b1c3; }.phase-card { display: grid; gap: 8px; padding: 15px; border-radius: 12px; background: rgba(15,31,52,.86); border: 1px solid rgba(90,130,184,.26); }.phase-card b { color: #75a7ff; }.phase-card span { color: #b7c2d4; line-height: 1.55; font-size: 14px; }
@media (max-width: 350px) { .mobile-shell { padding-left: 12px; padding-right: 12px; }.asset-card { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px; }.asset-image { min-height: 164px; }.asset-heading h3 { font-size: 14px; }.metrics strong { font-size: 13px; }.buy-button { font-size: 12px; padding: 0 9px; }.hero { padding-left: 18px; }.hero-building { right: -13px; opacity: .8; }.hero-copy p { font-size: 25px; }.category-badge { font-size: 11px; } }