:root { --deep:#030d20; --navy:#071a38; --panel:#0a2448; --blue:#315cff; --cyan:#24d8ff; --green:#42e6b0; --orange:#ff8c42; --text:#edf4ff; --muted:#8298b8; --line:rgba(93,145,210,.24); }
* { box-sizing:border-box; }
html { min-width:1280px; scroll-behavior:smooth; }
body { margin:0; color:var(--text); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; background:#041126; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } [hidden] { display:none!important; }
.app-shell { min-height:100vh; }
.app-header { position:fixed; z-index:30; top:0; left:0; right:0; height:82px; padding:0 28px; display:grid; grid-template-columns:250px 1fr auto; align-items:center; border-bottom:1px solid var(--line); background:rgba(3,13,32,.92); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:12px; }.brand-mark { position:relative; width:38px; height:38px; display:block; transform:rotate(45deg); border-radius:9px; background:linear-gradient(135deg,var(--cyan),var(--blue)); box-shadow:0 0 24px rgba(36,216,255,.28); }.brand-mark i { position:absolute; border-radius:3px; background:#071a3c; }.brand-mark i:first-child { top:7px; left:10px; width:7px; height:23px; }.brand-mark i:last-child { top:10px; left:7px; width:23px; height:7px; }.brand-copy { display:flex; flex-direction:column; }.brand-copy strong { font-size:20px; letter-spacing:3px; }.brand-copy small { margin-top:2px; color:#7088aa; font-size:12px; letter-spacing:3px; }
.product-title { justify-self:center; display:flex; align-items:center; gap:12px; }.product-title img { width:43px; height:43px; border-radius:12px; }.product-title div { display:flex; flex-direction:column; }.product-title strong { font-size:20px; letter-spacing:1px; }.product-title span { margin-top:4px; color:#6f88aa; font-size:12px; }.header-actions { display:flex; align-items:center; gap:13px; color:#91a6c4; font-size:12px; }.header-actions a { padding:10px 13px; border:1px solid var(--line); }.header-actions .back-button { color:#fff; border-color:#297ba6; }.system-status i,.tenant-card small i { width:7px; height:7px; margin-right:6px; display:inline-block; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }
.side-nav { position:fixed; z-index:20; top:82px; bottom:0; left:0; width:250px; padding:20px 16px; border-right:1px solid var(--line); background:#051631; overflow:auto; }.tenant-card { position:relative; padding:18px 16px; border:1px solid #24466f; background:linear-gradient(135deg,#0c2a55,#081c3b); }.tenant-card::after { position:absolute; right:-18px; bottom:-20px; width:75px; height:75px; content:""; border:1px solid rgba(36,216,255,.2); border-radius:50%; }.tenant-card>span { color:#7189ab; font-size:12px; }.tenant-card strong { margin:8px 0 11px; display:block; font-size:16px; }.tenant-card small { color:#6e91bc; font-size:12px; }.side-nav nav { margin-top:18px; }.side-nav nav a { position:relative; min-height:68px; padding:13px 10px; display:grid; grid-template-columns:32px 1fr; align-items:center; border-bottom:1px solid rgba(75,112,164,.12); }.side-nav nav a::before { position:absolute; left:0; top:13px; bottom:13px; width:2px; content:""; background:transparent; }.side-nav nav a>span { grid-row:1/3; color:#557092; font:700 12px Arial; }.side-nav nav strong { font-size:14px; }.side-nav nav small { margin-top:4px; color:#657d9f; font-size:12px; }.side-nav nav a.is-active { background:linear-gradient(90deg,rgba(49,92,255,.22),transparent); }.side-nav nav a.is-active::before { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }.side-nav nav a.is-active>span { color:var(--cyan); }.side-usage { margin-top:24px; padding:16px; border:1px solid #24466f; }.side-usage div { display:flex; justify-content:space-between; color:#8297b6; font-size:12px; }.side-usage b { color:#fff; }.side-usage>i { height:4px; margin:12px 0; display:block; background:#102d58; }.side-usage em { height:100%; display:block; background:linear-gradient(90deg,var(--blue),var(--cyan)); }.side-usage p { margin:0; color:#647c9f; font-size:12px; line-height:1.7; }
main { margin-left:250px; padding-top:82px; }.apartment-hero { position:relative; min-height:510px; overflow:hidden; }.apartment-hero>img,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.hero-shade { background:linear-gradient(90deg,rgba(3,13,32,.98),rgba(3,15,37,.76) 48%,rgba(3,15,37,.12) 78%),linear-gradient(0deg,rgba(3,13,32,.76),transparent 52%); }.hero-copy { position:relative; z-index:2; width:64%; padding:80px 48px 150px; }.hero-copy>p { display:flex; align-items:center; gap:10px; color:#73e5ff; font-size:12px; font-weight:700; letter-spacing:3px; }.hero-copy>p span { width:32px; height:2px; background:var(--cyan); }.hero-copy h1 { margin:18px 0; font-size:46px; line-height:1.2; }.hero-copy>small { max-width:690px; display:block; color:#b2c3d9; font-size:16px; line-height:1.9; }.hero-copy>div { margin-top:30px; display:flex; gap:12px; }.button { height:48px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:24px; color:#fff; border:1px solid transparent; background:transparent; }.button.primary { background:linear-gradient(110deg,#2756ff,#3479ff); box-shadow:0 13px 30px rgba(37,88,255,.25); }.button.secondary { border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.06); }.hero-metrics { position:absolute; z-index:3; left:48px; right:48px; bottom:24px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(97,146,211,.28); background:rgba(5,25,54,.82); backdrop-filter:blur(15px); }.hero-metrics article { padding:18px 21px; border-right:1px solid rgba(97,146,211,.24); }.hero-metrics article:last-child { border:0; }.hero-metrics span { color:#7f96b5; font-size:12px; }.hero-metrics strong { margin-top:8px; display:block; font:700 28px Arial; }.hero-metrics em { margin-left:5px; color:#b5c6da; font:12px "Microsoft YaHei"; font-style:normal; }.hero-metrics small { margin-top:6px; display:block; color:#6680a4; font-size:12px; }
.availability-bar { margin:18px 28px; min-height:86px; display:grid; grid-template-columns:1.4fr repeat(4,.55fr) .7fr; align-items:center; border:1px solid var(--line); background:#082044; }.availability-bar>div,.availability-bar article { height:100%; padding:18px 20px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }.availability-bar>div span { color:#7991b2; font-size:12px; }.availability-bar>div span i { width:7px; height:7px; margin-right:7px; display:inline-block; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }.availability-bar>div strong { margin-top:7px; font-size:14px; }.availability-bar article span { color:#7088aa; font-size:12px; }.availability-bar article b { margin-top:7px; font:700 20px Arial; }.availability-bar button { height:100%; color:#fff; border:0; background:linear-gradient(135deg,#2557ee,#3387ff); font-size:14px; }.availability-bar button i,.room-card button i,.submit-apply i { width:15px; height:8px; margin-left:12px; display:inline-block; border-top:1px solid currentColor; transform:skewX(38deg); }
.content-section { padding:64px 36px; }.section-head { margin-bottom:30px; display:flex; align-items:end; justify-content:space-between; }.section-head>div>span,.shared-copy>span { color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:2px; }.section-head h2,.shared-copy h2 { margin:11px 0 8px; font-size:28px; }.section-head p { margin:0; color:#7288a8; font-size:12px; }.room-tabs { display:flex; border:1px solid var(--line); }.room-tabs button { padding:11px 16px; color:#7f94b3; border:0; border-right:1px solid var(--line); background:#081d3c; }.room-tabs button:last-child { border:0; }.room-tabs button.is-active { color:#fff; background:#2356e8; }.room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.room-card { overflow:hidden; border:1px solid var(--line); background:#081d3c; transition:.25s; }.room-card:hover { transform:translateY(-5px); border-color:#4278d1; box-shadow:0 18px 42px rgba(0,0,0,.24); }.room-card[hidden] { display:none!important; }.room-visual { position:relative; height:210px; overflow:hidden; background-color:#0a2852; background-image:linear-gradient(135deg,rgba(21,62,119,.85),rgba(5,18,42,.6)),url("../assets/chengshi-space/apartment/apartment-shared-space-v1.png"); background-size:cover; }.room-b { background-position:center; }.room-c { background-position:right center; }.room-visual>span { position:absolute; z-index:2; top:16px; left:16px; padding:7px 10px; color:#d7f7ff; border:1px solid rgba(68,220,255,.5); background:rgba(5,27,57,.72); font-size:12px; }.room-plan { position:absolute; right:25px; bottom:24px; width:115px; height:82px; border:2px solid rgba(96,222,255,.7); box-shadow:inset 36px 0 0 rgba(44,126,255,.14); }.room-plan::before,.room-plan::after { position:absolute; content:""; background:rgba(96,222,255,.7); }.room-plan::before { left:36px; top:0; bottom:0; width:2px; }.room-plan::after { left:36px; top:40px; right:0; height:2px; }.room-card>div:last-child { padding:23px; }.room-card p { margin:0 0 8px; color:#5ee8ff; font-size:12px; letter-spacing:1px; }.room-card h3 { margin:0; font-size:20px; }.room-card>div>small { min-height:48px; margin-top:12px; display:block; color:#8296b3; font-size:12px; line-height:1.7; }.room-card ul { margin:16px 0; padding:0; display:flex; gap:7px; list-style:none; }.room-card li { padding:6px 8px; color:#8da4c2; border:1px solid #25466e; font-size:12px; }.room-card button { width:100%; height:42px; color:#dceaff; border:1px solid #315687; background:#0d2a54; }.room-card.featured button { border-color:#386aff; background:#2557e7; }
.shared-section { min-height:550px; margin:20px 36px 64px; display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border:1px solid var(--line); background:#071b39; }.shared-image { position:relative; min-height:550px; }.shared-image::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,transparent 60%,#071b39),linear-gradient(0deg,rgba(3,13,32,.65),transparent 48%); }.shared-image img { width:100%; height:100%; object-fit:cover; }.shared-image>span { position:absolute; z-index:2; left:24px; bottom:24px; padding:10px 14px; border:1px solid rgba(62,220,255,.46); background:rgba(3,20,46,.8); font-size:12px; }.shared-copy { padding:48px 38px; }.shared-copy>p { color:#879ab6; font-size:12px; line-height:1.8; }.space-list { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; }.space-list button { min-height:94px; padding:15px; display:flex; align-items:center; gap:12px; color:#8ea1bd; border:1px solid var(--line); border-right:0; border-bottom:0; background:transparent; text-align:left; }.space-list button:nth-child(-n+2) { border-top:1px solid var(--line); }.space-list button.is-active { color:#fff; background:rgba(49,92,255,.26); box-shadow:inset 3px 0 var(--cyan); }.space-list i { position:relative; width:34px; height:34px; flex:0 0 34px; border:1px solid #2d6490; border-radius:8px; }.space-list i::before,.space-list i::after { position:absolute; content:""; }.space-work::before { inset:9px 6px; border:1.5px solid #36d8ff; }.space-book::before { left:7px; top:7px; width:8px; height:18px; border:1.5px solid #36d8ff; }.space-book::after { right:7px; top:7px; width:8px; height:18px; border:1.5px solid #36d8ff; }.space-chat::before { inset:7px 6px 10px; border:1.5px solid #36d8ff; border-radius:8px; }.space-cafe::before { left:8px; top:9px; width:14px; height:14px; border:1.5px solid #36d8ff; border-radius:2px 2px 7px 7px; }.space-cafe::after { right:6px; top:12px; width:7px; height:8px; border:1.5px solid #36d8ff; border-left:0; border-radius:0 5px 5px 0; }.space-list span { display:flex; flex-direction:column; }.space-list strong { font-size:12px; }.space-list small { margin-top:5px; font-size:12px; }
.application-section { background:#061833; }.application-flow { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }.application-flow article { position:relative; padding:25px; display:grid; grid-template-columns:38px 1fr; border-right:1px solid var(--line); }.application-flow article:last-child { border:0; }.application-flow span { grid-row:1/3; color:#4f6c91; font:700 12px Arial; }.application-flow strong { font-size:14px; }.application-flow small { margin-top:7px; color:#7187a7; font-size:12px; }.application-flow article.is-active { background:linear-gradient(90deg,rgba(49,92,255,.25),transparent); box-shadow:inset 3px 0 var(--cyan); }.application-flow article.is-active span { color:var(--cyan); }.policy-grid { margin-top:15px; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.policy-grid article { padding:20px; border:1px solid var(--line); background:#092042; }.policy-grid span { color:#6681a7; font-size:12px; }.policy-grid strong { margin-top:9px; display:block; font-size:12px; line-height:1.7; }
.activity-section { background:#f1f5fb; color:#142039; }.activity-section .section-head h2 { color:#142039; }.activity-section .section-head>a { color:#315cff; font-size:12px; }.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.activity-grid article { padding:23px; display:grid; grid-template-columns:64px 1fr; gap:18px; border:1px solid #dce4ef; background:#fff; box-shadow:0 12px 35px rgba(35,58,96,.07); }.activity-grid time { height:67px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; background:linear-gradient(145deg,#254fe0,#3587ff); }.activity-grid time b { font:700 28px Arial; }.activity-grid time span { font-size:12px; }.activity-grid div>span { color:#315cff; font-size:12px; }.activity-grid h3 { margin:8px 0; font-size:16px; }.activity-grid p { min-height:42px; margin:0; color:#6d7990; font-size:12px; line-height:1.7; }.activity-grid small { color:#9aa5b5; font-size:12px; }
.operation-section { padding:62px 36px; background:#041126; }.section-head.light>div>span { color:var(--cyan); }.section-head.light p { max-width:650px; line-height:1.7; }.section-head.light>b { padding:10px 13px; color:#8ba1be; border:1px solid var(--line); font-size:12px; }.section-head.light>b i { width:6px; height:6px; margin-right:6px; display:inline-block; border-radius:50%; background:var(--green); }.operation-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:#071c3b; }.operation-grid article { min-height:190px; padding:24px; border-right:1px solid var(--line); }.operation-grid article:last-child { border:0; }.operation-grid>article>span { color:#7289aa; font-size:12px; }.operation-grid>article>strong { margin:18px 0; display:block; font:700 28px Arial; }.operation-grid strong small { margin-left:5px; color:#8da1bb; font:12px "Microsoft YaHei"; }.operation-grid>article>i { height:5px; display:block; background:#102f5c; }.operation-grid>article>i em { height:100%; display:block; background:linear-gradient(90deg,var(--blue),var(--cyan)); }.operation-grid>article>p { margin-top:13px; color:#657e9f; font-size:12px; }.operation-grid ul { margin:0; padding:0; list-style:none; }.operation-grid li { padding:7px 0; color:#8da1bd; border-bottom:1px solid rgba(91,134,191,.15); font-size:12px; }.status-bars p { margin:9px 0; }.status-bars b { height:4px; display:block; background:var(--cyan); }.status-bars p:last-child b { background:var(--orange); }.status-bars small { color:#7186a5; font-size:12px; }
footer { padding:25px 36px; display:flex; justify-content:space-between; color:#6f84a2; border-top:1px solid var(--line); background:#020b1a; font-size:12px; } footer p { margin:0; color:#dce8f8; font-weight:700; } footer a { color:#3bdcf7; }
.apply-modal { position:fixed; z-index:60; inset:0; display:grid; place-items:center; }.modal-shade { position:absolute; inset:0; background:rgba(1,7,18,.78); backdrop-filter:blur(7px); }.apply-dialog { position:relative; z-index:2; width:680px; padding:34px; border:1px solid #315a8e; background:#071b39; box-shadow:0 30px 80px rgba(0,0,0,.48); }.apply-dialog>span { color:var(--cyan); font-size:12px; letter-spacing:2px; }.apply-dialog h2 { margin:10px 0; font-size:28px; }.apply-dialog>p { color:#7f94b3; font-size:12px; }.modal-close { position:absolute; right:20px; top:20px; width:32px; height:32px; border:1px solid var(--line); background:transparent; }.modal-close::before,.modal-close::after { position:absolute; left:8px; top:15px; width:15px; height:1px; content:""; background:#9eb0c8; transform:rotate(45deg); }.modal-close::after { transform:rotate(-45deg); }.form-grid { margin-top:23px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }.form-grid label { display:flex; flex-direction:column; }.form-grid label.full { grid-column:1/3; }.form-grid label>span { margin-bottom:7px; color:#8498b5; font-size:12px; }.form-grid input,.form-grid select,.form-grid textarea { width:100%; padding:12px; color:#fff; border:1px solid #27496f; outline:0; background:#06152d; }.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:#36cfff; }.agreement { margin:17px 0; display:flex; align-items:center; gap:8px; color:#7389a8; font-size:12px; }.submit-apply { width:100%; height:46px; color:#fff; border:0; background:linear-gradient(110deg,#2857f0,#3287ff); }.toast { position:fixed; z-index:80; left:50%; bottom:35px; padding:12px 20px; color:#fff; border:1px solid #3186ad; background:#08234a; box-shadow:0 16px 40px rgba(0,0,0,.35); transform:translateX(-50%); font-size:12px; }
@media(max-width:1400px){.hero-copy{width:72%}.room-card>div:last-child{padding:18px}.shared-copy{padding:38px 30px}}
.room-visual {
  background-size: cover;
  background-repeat: no-repeat;
}
.room-a {
  background-image: linear-gradient(135deg,rgba(21,62,119,.2),rgba(5,18,42,.38)),url("../assets/chengshi-space/apartment/apartment-real-sunlight-v1.jpg");
  background-position: center 42%;
}
.room-b {
  background-image: linear-gradient(135deg,rgba(21,62,119,.18),rgba(5,18,42,.36)),url("../assets/chengshi-space/apartment/apartment-real-studio-v1.jpg");
  background-position: center 48%;
}
.room-c {
  background-image: linear-gradient(135deg,rgba(21,62,119,.16),rgba(5,18,42,.34)),url("../assets/chengshi-space/apartment/apartment-real-lounge-v1.jpg");
  background-position: center 62%;
}