:root { --navy: #061c44; --deep: #030e28; --cyan: #56e9ff; --blue: #1e8fff; --violet: #9779ff; --gold: #ffb439; --text: #effaff; --muted: #9eb8db; --line: rgba(91, 206, 255, .28); }
.module small { color: var(--gold) !important; }
* { box-sizing: border-box; }
html { background: var(--deep); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); font-family: "Microsoft YaHei", "Segoe UI", sans-serif; background: radial-gradient(ellipse at 50% -10%, #154f9b 0, #092a62 32%, var(--deep) 75%); }
.starfield { position: fixed; z-index: -2; inset: 0; opacity: .44; background-image: radial-gradient(circle, #bdedff 0 1px, transparent 1.5px), radial-gradient(circle, #7aafff 0 1px, transparent 1.5px); background-size: 61px 61px, 97px 97px; background-position: 8px 22px, 34px 8px; mask-image: linear-gradient(to bottom, black, transparent 84%); }
.orbital-line { position: fixed; z-index: -1; width: 86vw; height: 86vw; border: 1px solid rgba(66, 217, 255, .17); border-radius: 50%; pointer-events: none; }
.line-a { top: -58vw; right: -40vw; box-shadow: 0 0 55px rgba(0,158,255,.14); }.line-b { bottom: -66vw; left: -42vw; }
.app-shell { width: min(960px, calc(100% - 34px)); margin: auto; }
.topbar { min-height: 116px; display: grid; grid-template-columns: 1fr 72px; align-items: center; border-bottom: 1px solid var(--line); }
.title-block { text-align: center; }.title-block p { margin: 0 0 5px; color: #83bdf7; font: 10px ui-monospace, Consolas, monospace; letter-spacing: 1.5px; }.title-block h1 { margin: 0; font-size: 28px; letter-spacing: 1px; }.topbar time { color: #ccefff; font: 12px ui-monospace, Consolas, monospace; text-align: right; }
.notice { display: flex; gap: 10px; align-items: center; min-height: 49px; border-bottom: 1px solid rgba(91,206,255,.16); color: #d2efff; font-size: 13px; }.notice small { margin-left: auto; color: var(--cyan); font: 10px ui-monospace, Consolas, monospace; letter-spacing: 1px; }.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(86,233,255,.13), 0 0 16px var(--cyan); }
.category { padding: 34px 0 9px; }.section-title { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-left: 2px solid var(--cyan); background: linear-gradient(90deg, rgba(17, 93, 182, .45), transparent 72%); position: relative; }.section-title::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 200px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); box-shadow: 0 0 12px var(--cyan); }.section-title i { width: 13px; height: 13px; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan), inset 0 0 7px var(--cyan); }.section-title h2 { margin: 0; font-size: 23px; letter-spacing: 1px; }.section-title b { color: #619ee1; font: 12px ui-monospace, Consolas, monospace; margin-left: auto; }
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 28px 2px 14px; }
.module { position: relative; min-height: 184px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 13px 7px; overflow: hidden; border: 1px solid rgba(100, 197, 255, .3); border-radius: 10px; color: var(--text); text-align: center; background: linear-gradient(180deg, rgba(3,11,39,.22), rgba(5,24,65,.88)), url("assets/cyber-city.jpg") center/cover; box-shadow: inset 0 0 22px rgba(57,160,255,.13); }.module::before { content: ""; position: absolute; inset: 0; opacity: .8; background: radial-gradient(circle at 50% 35%, rgba(60,224,255,.34), transparent 32%), linear-gradient(145deg, transparent 36%, rgba(128,112,255,.20) 37% 39%, transparent 40%); }.module.active { border-color: var(--cyan); box-shadow: 0 0 20px rgba(46,205,255,.28), inset 0 0 30px rgba(0,203,255,.22); cursor: pointer; }.module.active:hover { transform: translateY(-4px); border-color: #d8fbff; box-shadow: 0 0 34px rgba(46,205,255,.54), inset 0 0 30px rgba(0,203,255,.3); }.module > * { position: relative; z-index: 1; }.art { width: 86px; height: 86px; margin-bottom: auto; margin-top: 5px; display: grid; place-items: center; border: 1px solid rgba(137,225,255,.66); border-radius: 25px; color: var(--cyan); font: 56px/1 Georgia, serif; text-shadow: 0 0 18px var(--cyan); background: radial-gradient(circle at 50% 50%, rgba(119,236,255,.34), rgba(40,50,164,.27) 48%, transparent 67%); box-shadow: inset 0 0 17px rgba(60,210,255,.32), 0 7px 17px rgba(0,0,0,.35); }.art-radar, .art-orbit { color: #bdacff; text-shadow: 0 0 18px #9074ff; }.art-stock, .art-trend { color: var(--gold); text-shadow: 0 0 18px #ffae2f; }.art-list { font-size: 48px; }.art-lock { color: #79c7ff; }.module strong { font-size: 16px; letter-spacing: 0; }.module small { margin-top: 4px; color: #86b7de; font: 9px ui-monospace, Consolas, monospace; letter-spacing: .8px; }.module.active small { color: var(--gold); }
footer { height: 80px; display: flex; justify-content: space-between; align-items: center; color: #7095c4; border-top: 1px solid rgba(91,206,255,.16); font: 10px ui-monospace, Consolas, monospace; letter-spacing: 1px; }
@media (max-width: 680px) { .app-shell { width: min(100% - 24px, 620px); }.topbar { min-height: 90px; grid-template-columns: 1fr 55px; }.title-block h1 { font-size: 23px; }.topbar time { font-size: 10px; }.module-grid { gap: 12px; padding-top: 20px; }.module { min-height: 145px; border-radius: 8px; padding: 10px 4px; }.art { width: 62px; height: 62px; border-radius: 19px; font-size: 40px; }.art-list { font-size: 34px; }.module strong { font-size: 14px; }.module small { font-size: 7px; }.section-title h2 { font-size: 20px; }.notice { font-size: 12px; } }