:root {
  --paper: #f3efe8;
  --paper-2: #ebe5dc;
  --card: rgba(255, 253, 249, .72);
  --ink: #2f3431;
  --muted: #757b76;
  --faint: #a5a49d;
  --line: rgba(57, 65, 59, .11);
  --sage: #748b7b;
  --sage-deep: #50685a;
  --sage-light: #dce6dd;
  --clay: #bd806a;
  --clay-light: #ead7ce;
  --blue: #708795;
  --blue-light: #dce5e8;
  --gold: #b99a67;
  --shadow: 0 18px 54px rgba(62, 54, 43, .075);
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.paper-noise { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); opacity: .12; animation: drift 13s ease-in-out infinite; }
.ambient i:nth-child(1) { left: 12%; top: 18%; }.ambient i:nth-child(2) { left: 72%; top: 12%; animation-delay: -4s; }.ambient i:nth-child(3) { left: 88%; top: 58%; animation-delay: -8s; }.ambient i:nth-child(4) { left: 35%; top: 82%; animation-delay: -6s; }.ambient i:nth-child(5) { left: 56%; top: 48%; animation-delay: -10s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-24px) scale(1.6); } }

/* 登录 */
.login-screen { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 28px 18px; background: radial-gradient(circle at 50% 12%, #fbf8f3 0, var(--paper) 58%, #eae3d9 100%); }
.login-orbit { position: absolute; border: 1px dashed rgba(80,104,90,.13); border-radius: 50%; animation: rotate 38s linear infinite; }
.login-orbit::before, .login-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 6px rgba(189,128,106,.08); }
.orbit-one { width: 620px; height: 620px; left: -370px; top: -210px; }.orbit-one::before { right: 64px; bottom: 90px; }
.orbit-two { width: 750px; height: 750px; right: -490px; bottom: -380px; animation-direction: reverse; }.orbit-two::before { left: 110px; top: 78px; background: var(--blue); }.orbit-two::after { left: 25px; top: 300px; }
@keyframes rotate { to { transform: rotate(360deg); } }
.login-card { position: relative; width: min(510px,100%); padding: 42px 44px 30px; text-align: center; border: 1px solid rgba(255,255,255,.75); border-radius: 7px 48px 7px 48px; background: rgba(255,253,249,.7); box-shadow: 0 34px 100px rgba(71,62,49,.1); backdrop-filter: blur(18px); animation: cardIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.98); } }
.connection-mark { display: flex; align-items: center; justify-content: center; width: 98px; margin: 0 auto 15px; }
.connection-mark span { width: 7px; height: 7px; border: 1px solid var(--sage); border-radius: 50%; }.connection-mark i { width: 28px; border-top: 1px dashed var(--sage); }.connection-mark b { color: var(--clay); font-size: 10px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.5) rotate(45deg); opacity: .55; } }
.tiny-label, .section-title p, .page-heading p, .modal-head p { margin: 0; color: var(--sage); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.login-card h1 { margin: 7px 0 8px; font: 500 clamp(38px,7vw,49px)/1.2 var(--serif); letter-spacing: .1em; }
.login-intro { margin: 0 0 27px; color: var(--muted); font: 15px/1.9 var(--serif); }
.login-form { text-align: left; }.login-form fieldset { padding: 0; margin: 0 0 20px; border: 0; }.login-form legend, .invite-field > span { margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 600; }
.identity-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.identity-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.45); cursor: pointer; transition: .25s ease; }
.identity-card:hover { transform: translateY(-2px); }.identity-card:has(input:checked) { border-color: rgba(80,104,90,.64); background: rgba(220,230,221,.65); box-shadow: inset 0 -2px var(--sage); }.identity-card input { position: absolute; opacity: 0; }.identity-card > b { margin-left: auto; color: var(--sage-deep); opacity: 0; }.identity-card:has(input:checked) > b { opacity: 1; }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 14px var(--serif); }.tart-avatar { color: #885947; background: var(--clay-light); }.wai-avatar { color: #516e7c; background: var(--blue-light); }
.identity-card strong,.identity-card small { display: block; }.identity-card strong { font: 500 13px var(--serif); }.identity-card small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.invite-field { display: block; }.invite-field > div { display: flex; height: 48px; border: 1px solid var(--line); background: rgba(255,255,255,.62); transition: .2s; }.invite-field > div:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(116,139,123,.1); }.invite-field input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 14px; background: transparent; font-size: 12px; }.invite-field button { width: 55px; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.form-error { min-height: 18px; margin: 5px 0; color: #a55f4d; font-size: 10px; }.primary-button { border: 0; padding: 12px 18px; background: var(--sage-deep); color: white; cursor: pointer; transition: transform .22s, background .22s, box-shadow .22s; }.primary-button:hover { transform: translateY(-2px); background: #435b4c; box-shadow: 0 10px 24px rgba(80,104,90,.17); }.login-button { width: 100%; height: 49px; display: flex; align-items: center; justify-content: center; gap: 12px; }.demo-note { margin: 11px 0 0; color: var(--faint); font-size: 9px; }.demo-note button { border: 0; border-bottom: 1px dotted currentColor; padding: 0; background: none; color: var(--sage-deep); cursor: pointer; }.privacy-copy { margin: 23px 0 0; color: var(--faint); font-size: 9px; }

/* 框架 */
.app-shell { min-height: 100vh; }.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 224px; display: flex; flex-direction: column; padding: 30px 19px 18px; border-right: 1px solid var(--line); background: rgba(235,229,220,.9); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 9px; border: 0; padding: 0 9px; background: transparent; text-align: left; cursor: pointer; }.brand strong,.brand small { display: block; }.brand strong { font: 600 17px var(--serif); letter-spacing: .08em; }.brand small { margin-top: 3px; color: var(--faint); font-size: 8px; letter-spacing: .06em; }
.mini-route { position: relative; display: flex; align-items: center; width: 32px; }.mini-route::before,.mini-route::after { content: ""; width: 6px; height: 6px; border: 1px solid var(--sage); border-radius: 50%; }.mini-route i { flex: 1; border-top: 1px dashed var(--sage); }
.side-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 55px; }.nav-item { position: relative; border: 0; background: transparent; cursor: pointer; }.side-nav .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border-radius: 5px; color: var(--muted); text-align: left; transition: .2s; }.side-nav .nav-item:hover,.side-nav .nav-item.active { color: var(--sage-deep); background: rgba(255,253,249,.74); transform: translateX(2px); }.side-nav .nav-item > span { width: 18px; font: 17px var(--serif); text-align: center; }.side-nav .nav-item b { font-size: 12px; font-weight: 500; }.side-nav em { margin-left: auto; min-width: 19px; padding: 2px 5px; border-radius: 10px; color: #8b5845; background: var(--clay-light); text-align: center; font-size: 8px; font-style: normal; }
.side-whisper { margin: auto 8px 24px; padding: 15px 12px; border-left: 1px solid rgba(116,139,123,.3); color: var(--muted); }.side-whisper > span { color: var(--clay); font: 25px var(--serif); line-height: .4; }.side-whisper p { margin: 3px 0 0; font: 10px/1.8 var(--serif); }
.current-user { display: flex; align-items: center; gap: 8px; padding: 15px 8px 0; border-top: 1px solid var(--line); }.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #769776; box-shadow: 0 0 0 3px rgba(118,151,118,.12); animation: online 2.3s ease-in-out infinite; }@keyframes online { 50% { box-shadow: 0 0 0 6px rgba(118,151,118,.04); } }.current-user strong,.current-user small { display: block; }.current-user strong { font-size: 10px; }.current-user small { margin-top: 2px; color: var(--faint); font-size: 8px; }.current-user button { margin-left: auto; border: 0; background: transparent; color: var(--faint); cursor: pointer; }
.main-content { min-height: 100vh; margin-left: 224px; }.topbar { position: sticky; top: 0; z-index: 20; height: 66px; display: flex; align-items: center; justify-content: center; padding: 0 36px; border-bottom: 1px solid var(--line); background: rgba(243,239,232,.82); backdrop-filter: blur(16px); }.dual-clock { display: flex; align-items: center; gap: 17px; }.dual-clock > div { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.dual-clock i { width: 5px; height: 5px; border-radius: 50%; }.shaoxing-dot { background: var(--clay); }.milan-dot { background: var(--blue); }.dual-clock strong { color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }.clock-gap { color: var(--faint); font-size: 8px; }.quiet-button { position: absolute; right: 35px; display: flex; align-items: center; gap: 7px; border: 0; padding: 8px; background: transparent; color: var(--muted); cursor: pointer; }.quiet-button b { font-size: 9px; font-weight: 500; }.quiet-button[aria-pressed=true] { color: var(--sage-deep); }.mobile-brand,.mobile-nav { display: none; }
.view { display: none; max-width: 1160px; margin: 0 auto; padding: 46px 52px 80px; }.view.active { display: block; animation: viewIn .45s cubic-bezier(.2,.8,.2,1); }@keyframes viewIn { from { opacity: 0; transform: translateY(9px); } }.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }.reveal.visible { opacity: 1; transform: none; }

/* 通用 */
.panel { border: 1px solid var(--line); background: var(--card); box-shadow: 0 8px 28px rgba(62,54,43,.035); transition: transform .25s, box-shadow .25s; }.panel:hover { transform: translateY(-2px); box-shadow: var(--shadow); }.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }.section-title h3 { margin: 5px 0 0; font: 500 18px var(--serif); }.section-title > span { color: var(--faint); font-size: 9px; }.text-button { border: 0; padding: 4px 0; background: transparent; color: var(--sage-deep); font-size: 10px; cursor: pointer; }.circle-button { flex: 0 0 auto; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--sage-deep); cursor: pointer; transition: .25s; }.circle-button:hover { transform: rotate(90deg); background: var(--sage-light); }.subtle-button { width: 100%; border: 1px solid var(--line); padding: 10px; background: transparent; color: var(--sage-deep); cursor: pointer; font-size: 10px; }.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 35px; }.page-heading h2 { margin: 6px 0 8px; font: 400 clamp(31px,4vw,39px) var(--serif); letter-spacing: .04em; }.page-heading span { color: var(--muted); font-size: 10px; }

/* 首页 */
.home-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 36px; }.date-line { margin: 0 0 8px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }.home-hero h2 { margin: 0; font: 400 clamp(29px,4vw,42px)/1.36 var(--serif); }.home-hero h2 strong { color: var(--clay); font-weight: 400; }.home-hero h2 span { color: var(--sage-deep); font-size: .74em; }.route-card { width: 316px; padding: 17px 19px 13px; border: 1px solid var(--line); background: rgba(255,253,249,.48); }.route-track { display: flex; align-items: center; }.route-track i { flex: 1; border-top: 1px dashed rgba(80,104,90,.34); }.route-track b { color: var(--gold); font-size: 10px; animation: routeFly 4s ease-in-out infinite; }@keyframes routeFly { 0%,100% { transform: translateX(-35px) rotate(0); } 50% { transform: translateX(35px) rotate(45deg); } }.route-city { width: 8px; height: 8px; border-radius: 50%; }.shaoxing-point { background: var(--clay); box-shadow: 0 0 0 4px rgba(189,128,106,.1); }.milan-point { background: var(--blue); box-shadow: 0 0 0 4px rgba(112,135,149,.1); }.route-label { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 8px; }.route-label small { color: var(--faint); }.route-card p { margin: 12px 0 0; color: var(--muted); text-align: center; font: 10px var(--serif); }
.weather-section { margin-bottom: 27px; }.weather-section > .section-title { margin-bottom: 13px; }.weather-grid { display: grid; grid-template-columns: 1fr .58fr 1fr; align-items: stretch; }.weather-card { display: grid; grid-template-columns: 74px 1fr; position: relative; min-height: 124px; padding: 18px; border: 1px solid var(--line); background: rgba(255,253,249,.58); overflow: hidden; }.weather-card > div:nth-child(2) { align-self: center; }.weather-card p { margin: 0 0 6px; color: var(--muted); font-size: 9px; }.weather-card strong { margin-right: 8px; font: 400 26px var(--serif); }.weather-card div > span { color: var(--muted); font-size: 10px; }.weather-card > small { position: absolute; right: 16px; bottom: 12px; color: var(--faint); font-size: 8px; }.weather-card small b { font-weight: 500; }.weather-scene { position: relative; height: 68px; }.sun,.moon { position: absolute; top: 10px; left: 8px; width: 31px; height: 31px; border-radius: 50%; }.sun { background: #d9b879; box-shadow: 0 0 0 8px rgba(217,184,121,.1); animation: sunGlow 3s ease-in-out infinite; }@keyframes sunGlow { 50% { box-shadow: 0 0 0 14px rgba(217,184,121,.04); } }.moon { border: 7px solid var(--blue); border-top-color: transparent; transform: rotate(-25deg); }.cloud { position: absolute; left: 27px; top: 37px; width: 31px; height: 11px; border-radius: 15px; background: #d9dcd8; animation: cloudFloat 4.5s ease-in-out infinite; }.cloud::before { content: ""; position: absolute; left: 6px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: inherit; }@keyframes cloudFloat { 50% { transform: translateX(7px); } }.shared-sky { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; color: var(--faint); font-size: 8px; }.shared-sky > span { color: var(--muted); font: 11px var(--serif); }.shared-sky i { height: 15px; border-left: 1px dashed rgba(80,104,90,.28); }.shared-sky b { color: var(--gold); animation: pulse 2.4s infinite; }.shared-sky small { margin-top: 4px; text-align: center; }
.home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 13px; }.mood-panel,.status-mini,.task-preview,.quick-message { padding: 22px; }.mood-options { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top: 17px; }.mood-options button { min-height: 72px; border: 1px solid var(--line); background: rgba(243,239,232,.48); cursor: pointer; transition: .2s; }.mood-options button:hover { transform: translateY(-3px); background: white; }.mood-options button.active { border-color: var(--sage); background: var(--sage-light); box-shadow: inset 0 -2px var(--sage); }.mood-options i,.mood-options span { display: block; }.mood-options i { height: 26px; color: var(--sage-deep); font: 21px var(--serif); font-style: normal; }.mood-options span { font: 10px var(--serif); }.paired-moods { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }.paired-moods .avatar { width: 28px; height: 28px; font-size: 9px; }.paired-moods p { margin: 0; }.paired-moods p strong,.paired-moods p small { display: block; }.paired-moods p strong { font-size: 9px; }.paired-moods p small { margin-top: 2px; color: var(--faint); font-size: 8px; }.paired-moods > i { flex: 1; border-top: 1px dashed var(--line); }
.mini-status-list { display: grid; gap: 11px; margin-top: 17px; }.mini-status-list > div { display: flex; align-items: center; gap: 9px; padding: 10px; background: rgba(243,239,232,.5); }.mini-status-list .avatar { width: 31px; height: 31px; font-size: 10px; }.mini-status-list p { margin: 0; }.mini-status-list strong,.mini-status-list small { display: block; }.mini-status-list strong { font-size: 9px; }.mini-status-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.task-preview { position: relative; overflow: hidden; }.task-ribbon { display: inline-block; margin-bottom: 17px; padding: 5px 8px; color: #8a5946; background: var(--clay-light); font-size: 8px; letter-spacing: .08em; }.task-preview h3 { margin: 0 0 7px; font: 500 19px var(--serif); }.task-preview > p { margin: 0; color: var(--muted); font-size: 9px; }.task-pair { display: flex; gap: 8px; margin: 18px 0 13px; }.task-person { flex: 1; display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; }.task-person.done { color: var(--sage-deep); background: var(--sage-light); }.task-person .avatar { width: 25px; height: 25px; font-size: 8px; }.soft-primary { width: 100%; background: var(--sage); font-size: 10px; }
.quick-message textarea { width: 100%; min-height: 98px; margin-top: 15px; padding: 13px; resize: vertical; border: 1px solid var(--line); outline: 0; background: rgba(243,239,232,.45); font: 12px/1.7 var(--serif); }.quick-message textarea:focus { border-color: var(--sage); }.quick-message-actions { display: flex; align-items: center; gap: 8px; margin-top: 9px; }.quick-message-actions input { flex: 1; min-width: 0; border: 1px solid var(--line); padding: 8px; background: var(--paper); font-size: 8px; }.schedule-toggle { border: 0; padding: 7px 0; background: transparent; color: var(--muted); font-size: 8px; cursor: pointer; }.quick-message-actions .primary-button { margin-left: auto; padding: 9px 12px; font-size: 9px; }
.recent-section { margin-top: 28px; }.recent-section > .section-title { margin-bottom: 13px; }.fragment-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }

/* 碎片与留言 */
.fragment-layout { display: grid; grid-template-columns: 1.55fr .85fr; gap: 18px; align-items: start; }.fragment-wall { columns: 2; column-gap: 12px; }.fragment-card { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); animation: itemIn .45s ease both; }@keyframes itemIn { from { opacity: 0; transform: translateY(9px) scale(.98); } }.fragment-visual { position: relative; height: 178px; overflow: hidden; background: #d7ddd8; }.fragment-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }.fragment-card:hover .fragment-visual img { transform: scale(1.035); }.fragment-art { width: 100%; height: 100%; position: relative; overflow: hidden; }.fragment-art.sky { background: linear-gradient(#bbc8ce 0 55%,#e4c9b8 56% 72%,#898d7b 73%); }.fragment-art.sky::before { content: ""; position: absolute; width: 55px; height: 55px; right: 24px; top: 35px; border-radius: 50%; background: #e7c995; box-shadow: 0 0 45px #efd6a7; }.fragment-art.coffee { background: linear-gradient(135deg,#aa927b,#d9cbbb); }.fragment-art.coffee::before { content: ""; position: absolute; width: 85px; height: 85px; left: calc(50% - 43px); top: 43px; border: 11px solid #e9dfd4; border-radius: 50%; background: radial-gradient(circle,#6e4e3d 0 52%,#d9c1a9 53%); box-shadow: 25px 10px 30px rgba(70,50,35,.22); }.fragment-art.street { background: linear-gradient(160deg,#bac4c1 0 45%,#c69c7c 46% 70%,#74796d 71%); }.fragment-art.street::before { content: ""; position: absolute; left: 15%; bottom: 28%; width: 7px; height: 45%; background: #f1dfbf; box-shadow: 28px 14px #d5a97e,56px -8px #e8d2ac,84px 12px #a98068,112px -5px #d7bc96; }.fragment-body { padding: 14px; }.fragment-author { display: flex; align-items: center; gap: 7px; }.fragment-author .avatar { width: 26px; height: 26px; font-size: 8px; }.fragment-author p { margin: 0; }.fragment-author strong,.fragment-author small { display: block; }.fragment-author strong { font-size: 9px; }.fragment-author small { margin-top: 2px; color: var(--faint); font-size: 8px; }.fragment-text { margin: 12px 0; font: 12px/1.7 var(--serif); }.reaction-bar { display: flex; gap: 5px; border-top: 1px solid var(--line); padding-top: 10px; }.reaction-bar button { border: 1px solid transparent; border-radius: 15px; padding: 4px 8px; background: var(--paper); color: var(--muted); font-size: 9px; cursor: pointer; transition: .2s; }.reaction-bar button:hover,.reaction-bar button.active { border-color: rgba(116,139,123,.35); background: var(--sage-light); transform: scale(1.08); }
.fragment-row .fragment-card:nth-child(n+4) { display: none; }.fragment-row .fragment-card { margin: 0; }.fragment-row .fragment-visual { height: 130px; }.fragment-row .fragment-body { padding: 12px; }.fragment-row .fragment-text { margin: 9px 0; font-size: 11px; }
.message-box { position: sticky; top: 84px; padding: 20px; }.message-list { display: flex; flex-direction: column; gap: 9px; max-height: 490px; margin: 16px 0; overflow: auto; }.message-item { padding: 12px; border-left: 2px solid var(--blue); background: rgba(220,229,232,.32); }.message-item.mine { border-left-color: var(--clay); background: rgba(234,215,206,.29); }.message-item.scheduled { opacity: .65; }.message-item header { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }.message-item p { margin: 9px 0; font: 11px/1.7 var(--serif); white-space: pre-wrap; }.message-item footer { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; }.message-item footer button { border: 0; padding: 0; background: transparent; color: var(--sage-deep); cursor: pointer; font-size: 8px; }.empty-state { padding: 34px 15px; border: 1px dashed var(--line); color: var(--faint); text-align: center; font: 11px/1.8 var(--serif); }

/* 一起做 */
.together-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }.task-board,.future-board,.travel-column { padding: 23px; }.task-list { display: grid; gap: 9px; margin-top: 18px; }.task-item { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); background: rgba(243,239,232,.4); }.task-item > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--sage-deep); background: var(--sage-light); font: 16px var(--serif); }.task-item h4 { margin: 0; font: 500 12px var(--serif); }.task-item p { margin: 4px 0 0; color: var(--faint); font-size: 8px; }.task-checks { display: flex; gap: 5px; }.task-checks button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; background: transparent; padding: 0; cursor: pointer; }.task-checks button.done { border-color: var(--sage); background: var(--sage-light); }.task-checks .avatar { width: 100%; height: 100%; font-size: 8px; }.future-list { display: flex; flex-direction: column; gap: 9px; margin-top: 17px; }.future-item { display: flex; align-items: center; gap: 9px; padding: 11px; border-bottom: 1px solid var(--line); }.future-item > span { color: var(--clay); }.future-item p { flex: 1; margin: 0; font: 11px var(--serif); }.future-item button { border: 0; background: transparent; color: var(--faint); cursor: pointer; }.travel-column { grid-column: 1/-1; }.travel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 17px; }.travel-grid article { border: 1px solid var(--line); background: rgba(243,239,232,.4); overflow: hidden; transition: transform .25s; }.travel-grid article:hover { transform: translateY(-4px); }.travel-art { position: relative; height: 150px; overflow: hidden; }.venice { background: linear-gradient(#b7c7c9 0 55%,#7ca0aa 56%); }.venice::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 55px; height: 64px; background: linear-gradient(90deg,#ad7f64 0 23%,#d7b18b 24% 47%,#9c715e 48% 71%,#cf9b75 72%); clip-path: polygon(0 40%,14% 20%,22% 40%,36% 5%,48% 42%,63% 17%,74% 41%,89% 0,100% 37%,100% 100%,0 100%); }.como { background: linear-gradient(#b8c4c5 0 45%,#91a5a3 46% 67%,#6f8b8e 68%); }.como::before { content: ""; position: absolute; inset: 35px 0 auto; height: 75px; background: #74857d; clip-path: polygon(0 78%,16% 20%,30% 65%,49% 0,64% 67%,80% 29%,100% 76%,100% 100%,0 100%); }.florence { background: linear-gradient(#d0b39b 0 62%,#8f7770 63%); }.florence::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 45px; height: 42px; border: 8px solid #7d6154; border-bottom: 0; border-radius: 50% 50% 0 0; }.travel-art span { position: absolute; right: 26px; top: 22px; width: 26px; height: 26px; border-radius: 50%; background: rgba(239,208,158,.8); box-shadow: 0 0 25px rgba(239,208,158,.7); }.travel-art i { position: absolute; inset: auto 0 22px; border-top: 1px solid rgba(255,255,255,.38); }.travel-grid p { min-height: 67px; margin: 0; padding: 12px; }.travel-grid strong,.travel-grid small { display: block; }.travel-grid strong { font: 500 12px var(--serif); }.travel-grid small { margin-top: 6px; color: var(--muted); font-size: 8px; }.travel-grid footer { padding: 0 12px 12px; color: var(--faint); font-size: 8px; }

/* 成长 */
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.study-board,.growth-notes { padding: 23px; }.study-person { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 12px; border: 1px solid var(--line); background: rgba(243,239,232,.4); }.study-person .avatar { width: 34px; height: 34px; font-size: 11px; }.study-person div { flex: 1; }.study-person strong,.study-person small { display: block; }.study-person strong { font-size: 10px; }.study-person small { margin-top: 3px; color: var(--muted); font-size: 9px; }.study-person > b { color: var(--sage-deep); font-size: 9px; font-weight: 500; }.status-controls { margin-top: 19px; border-top: 1px solid var(--line); padding-top: 16px; }.status-controls > p { margin: 0 0 8px; color: var(--muted); font-size: 9px; }.status-controls > div { display: flex; gap: 6px; }.status-controls > div button { flex: 1; border: 1px solid var(--line); padding: 8px 4px; background: transparent; font-size: 8px; cursor: pointer; }.status-controls > div button.active { border-color: var(--sage); background: var(--sage-light); }.timer-button { width: 100%; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; margin-top: 10px; border: 0; padding: 11px; background: var(--sage-deep); color: white; cursor: pointer; }.timer-button.running { background: var(--clay); animation: timerPulse 2.5s ease-in-out infinite; }@keyframes timerPulse { 50% { box-shadow: 0 0 0 5px rgba(189,128,106,.09); } }.timer-button b { text-align: left; font-size: 9px; font-weight: 500; }.timer-button small { font-variant-numeric: tabular-nums; }.growth-note-list { display: flex; flex-direction: column; gap: 9px; margin-top: 17px; }.growth-note { padding: 13px; border-left: 2px solid var(--sage); background: rgba(220,230,221,.34); }.growth-note header { display: flex; align-items: center; gap: 7px; }.growth-note .avatar { width: 25px; height: 25px; font-size: 8px; }.growth-note header strong { font-size: 9px; }.growth-note header time { margin-left: auto; color: var(--faint); font-size: 8px; }.growth-note p { margin: 10px 0; font: 11px/1.7 var(--serif); }.growth-note footer button { border: 0; padding: 4px 8px; border-radius: 12px; background: var(--paper); color: var(--muted); font-size: 8px; cursor: pointer; }.growth-note footer button.active { background: var(--clay-light); color: #8a5946; }

/* 足迹 */
.footprint-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }.timeline-panel,.playlist-panel { padding: 23px; }.timeline { position: relative; margin-top: 23px; padding-left: 21px; }.timeline::before { content: ""; position: absolute; top: 4px; bottom: 12px; left: 5px; border-left: 1px dashed rgba(80,104,90,.35); }.timeline-item { position: relative; padding: 0 0 24px 17px; }.timeline-item::before { content: ""; position: absolute; left: -20px; top: 4px; width: 8px; height: 8px; border: 2px solid var(--paper); border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 1px var(--clay); }.timeline-item time { color: var(--faint); font-size: 8px; }.timeline-item h4 { margin: 5px 0 0; font: 500 13px var(--serif); }.timeline-item p { margin: 5px 0 0; color: var(--muted); font-size: 8px; }.song-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }.song-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); background: rgba(243,239,232,.4); }.song-cover { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--sage-deep),var(--sage-light),var(--clay),var(--sage-deep)); color: white; animation: spin 8s linear infinite paused; }.song-item:hover .song-cover { animation-play-state: running; }@keyframes spin { to { transform: rotate(360deg); } }.song-item strong,.song-item small { display: block; }.song-item strong { font: 500 11px var(--serif); }.song-item small { margin-top: 4px; color: var(--muted); font-size: 8px; }.song-item a { border: 1px solid var(--line); padding: 6px 8px; color: var(--sage-deep); text-decoration: none; font-size: 8px; }.playlist-note { margin: 15px 0 0; color: var(--faint); text-align: center; font-size: 8px; }

/* 弹窗与反馈 */
.modal { width: min(470px,calc(100% - 28px)); border: 1px solid rgba(255,255,255,.8); padding: 0; color: var(--ink); background: #fffdf9; box-shadow: var(--shadow); }.modal::backdrop { background: rgba(47,52,49,.28); backdrop-filter: blur(5px); }.modal[open] { animation: modalIn .3s ease; }@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }.modal form { padding: 27px; }.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 21px; }.modal-head h3 { margin: 5px 0 0; font: 400 23px var(--serif); }.modal-head button { border: 0; background: transparent; color: var(--muted); font-size: 21px; cursor: pointer; }.modal label { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; }.modal input,.modal textarea,.modal select { width: 100%; margin-top: 7px; border: 1px solid var(--line); outline: 0; padding: 12px; background: var(--paper); }.modal textarea { min-height: 100px; resize: vertical; font: 12px/1.7 var(--serif); }.modal input:focus,.modal textarea:focus,.modal select:focus { border-color: var(--sage); }.modal > form > .primary-button { width: 100%; margin-top: 20px; }.upload-zone { display: grid !important; place-items: center; min-height: 150px; border: 1px dashed rgba(116,139,123,.4); background: rgba(220,230,221,.22); cursor: pointer; overflow: hidden; }.upload-zone input { position: absolute; opacity: 0; pointer-events: none; }.upload-zone > span { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; background: var(--sage-light); color: var(--sage-deep); font-size: 23px; overflow: hidden; }.upload-zone > span img { width: 100%; height: 100%; object-fit: cover; }.upload-zone strong { margin-top: 7px; color: var(--ink); font: 500 12px var(--serif); }.upload-zone small { margin-top: 3px; color: var(--faint); font-size: 8px; }.toast { position: fixed; z-index: 1200; left: 50%; bottom: 28px; transform: translate(-50%,18px); opacity: 0; pointer-events: none; padding: 11px 17px; background: var(--ink); color: white; box-shadow: var(--shadow); font-size: 10px; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%,0); }.spark { position: fixed; z-index: 999; pointer-events: none; color: var(--gold); animation: sparkOut .7s ease forwards; }@keyframes sparkOut { to { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(90deg) scale(.4); } }body.quiet .ambient,body.quiet .route-track b,body.quiet .online-dot { animation-play-state: paused; }body.quiet .message-box,body.quiet .task-preview { opacity: .72; }

@media (max-width: 980px) {
  .view { padding: 39px 32px 72px; }.home-grid { grid-template-columns: 1fr; }.fragment-layout { grid-template-columns: 1fr; }.message-box { position: static; }.together-grid,.growth-grid,.footprint-grid { grid-template-columns: 1fr; }.travel-column { grid-column: auto; }
}
@media (max-width: 720px) {
  .login-card { padding: 34px 20px 25px; border-radius: 6px 34px 6px 34px; }.identity-options { grid-template-columns: 1fr; }.sidebar { display: none; }.main-content { margin-left: 0; padding-bottom: 64px; }.topbar { height: 57px; justify-content: flex-end; padding: 0 13px; }.mobile-brand { display: flex; align-items: center; gap: 7px; margin-right: auto; border: 0; background: transparent; font: 13px var(--serif); }.dual-clock { gap: 7px; }.dual-clock div > span,.clock-gap { display: none; }.dual-clock strong { font-size: 9px; }.quiet-button { position: static; margin-left: 3px; }.quiet-button b { display: none; }.view { padding: 28px 17px 44px; }.home-hero { display: block; margin-bottom: 29px; }.home-hero h2 { font-size: 29px; }.route-card { width: 100%; margin-top: 24px; }.weather-grid { grid-template-columns: 1fr; gap: 7px; }.weather-card { min-height: 108px; }.shared-sky { flex-direction: row; gap: 8px; padding: 3px; }.shared-sky i { width: 20px; height: auto; border-left: 0; border-top: 1px dashed rgba(80,104,90,.28); }.mood-options { grid-template-columns: repeat(5,105px); overflow-x: auto; margin-right: -22px; padding-bottom: 6px; }.mood-options button { min-height: 68px; }.paired-moods { flex-wrap: wrap; }.paired-moods > i { min-width: 25px; }.fragment-row { grid-template-columns: 1fr; }.fragment-row .fragment-card:nth-child(n+3) { display: none; }.fragment-wall { columns: 1; }.travel-grid { grid-template-columns: 1fr; }.page-heading { display: block; }.page-heading .primary-button { margin-top: 18px; }.page-heading h2 { font-size: 30px; }.quick-message-actions { flex-wrap: wrap; }.quick-message-actions input { order: 3; flex-basis: 100%; }.task-item { grid-template-columns: 34px 1fr; }.task-checks { grid-column: 2; }.mobile-nav { position: fixed; z-index: 40; inset: auto 0 0; height: 63px; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); background: rgba(243,239,232,.95); backdrop-filter: blur(15px); }.mobile-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); }.mobile-nav .nav-item.active { color: var(--sage-deep); }.mobile-nav span { font: 17px var(--serif); }.mobile-nav b { font-size: 8px; font-weight: 500; }.toast { bottom: 78px; max-width: calc(100% - 30px); text-align: center; }.modal form { padding: 23px 19px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }