:root { color-scheme: dark; font-family: "Microsoft YaHei", system-ui, sans-serif; background: #111722; color: #edf1fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #36435b 0, #161d2a 45%, #0d121a 100%); }
button { font: inherit; cursor: pointer; }
.phone-frame { width: min(100%, 480px); min-height: 100vh; margin: auto; overflow: hidden; background: #182131; }
.screen { display: none; min-height: 100vh; padding: 18px 20px 28px; }.screen.active { display: block; }
.home-screen { background: radial-gradient(circle at 80% 10%, #dfc2a8 0, transparent 26%), radial-gradient(circle at 10% 70%, #798e9b 0, transparent 35%), linear-gradient(145deg, #31435a, #1d2739 55%, #171e2d); }
.status-bar, .app-header { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 700; }.status-bar { padding: 2px 3px; }.home-welcome { padding: 56px 4px 28px; }.home-welcome p { margin: 0; color: #dbe4ee; }.home-welcome h1 { margin-top: 7px; font-size: 2rem; }
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 15px; }.app-icon { border: 0; background: transparent; color: white; display: grid; justify-items: center; gap: 7px; padding: 0; font-size: .78rem; text-shadow: 0 1px 3px #111; }.app-icon i { width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; font-style: normal; font-size: 1.45rem; box-shadow: 0 5px 12px rgba(0,0,0,.25); }.activity-icon i { background: linear-gradient(135deg,#e8bc69,#a4673c); }.yearring-icon i { background: linear-gradient(135deg,#7dac9b,#3d716a); }.persona-icon i { background: linear-gradient(135deg,#c392b5,#765283); }.future-icon i { background: rgba(240,245,255,.26); border: 1px dashed rgba(255,255,255,.45); }.app-icon:disabled { opacity: .6; cursor: default; }.home-hint { position: fixed; bottom: 20px; left: 0; right: 0; margin: 0; text-align: center; color: #e2e7ef; font-size: .78rem; }
.album-icon i { background: linear-gradient(135deg,#b9c7e5,#6d84a5); }
.app-screen { background: #182131; }.app-header { margin-bottom: 8px; }.app-header > span:nth-child(2) { font-size: 1rem; }.back { border: 0; padding: 8px 0; background: transparent; color: #b9d6c8; }
header, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { margin: 0; font-size: 1.45rem; } h2 { margin: 4px 0 12px; font-size: 1.18rem; } p { line-height: 1.65; }
.eyebrow, .section-label, .muted, footer { color: #aeb9cb; font-size: .82rem; } .eyebrow, .section-label { letter-spacing: .08em; text-transform: uppercase; margin: 0; }
#offline-badge { padding: 6px 10px; border: 1px solid #6b8a85; border-radius: 99px; color: #bcddd6; font-size: .8rem; }
.now-card, .panel { margin-top: 24px; padding: 20px; border: 1px solid #3a465a; border-radius: 20px; background: rgba(40,52,72,.78); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.now-card h2 span { color: #a9d4c7; } #do-next { border: 0; border-radius: 12px; padding: 11px 14px; background: #a9d4c7; color: #13231f; font-weight: 700; }
.automation-card { margin-top: 18px; padding: 14px; border: 1px solid #4c6970; border-radius: 15px; background: #213941; }.automation-card strong { display: block; margin-top: 4px; color: #d8eee8; }.automation-card p { margin: 0; }.automation-card .muted { margin-top: 3px; }.automation-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.automation-card button, .interval-picker select { border: 0; border-radius: 10px; padding: 9px 10px; background: #b9d8cf; color: #17302a; font-size: .82rem; font-weight: 700; }.interval-picker { display: block; margin-top: 12px; color: #cae0da; font-size: .8rem; }.interval-picker select { margin-left: 5px; background: #34564f; color: #f3fbf8; border: 1px solid #63867d; }
.panel { margin-top: 24px; padding: 20px; border: 1px solid #3a465a; border-radius: 20px; background: rgba(40,52,72,.78); box-shadow: 0 12px 30px rgba(0,0,0,.16); }.panel.active { display: block; }
.quiet-button { border: 0; background: transparent; color: #bcd7e9; text-decoration: underline; font-size: .8rem; }
.activity-log { position: relative; list-style: none; padding: 0 0 0 20px; margin: 0; } .activity-log::before { content: ""; position: absolute; left: 1px; top: 5px; bottom: 5px; width: 1px; background: #445168; } .activity-log li { position: relative; padding: 0 0 28px 20px; } .activity-log li:last-child { padding-bottom: 0; } .activity-log li::before { content: ""; position: absolute; left: -3px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #9bcbbb; box-shadow: 0 0 0 4px rgba(155,203,187,.12); } .activity-log strong, .activity-log time, .activity-log .activity-meta { display: block; } .activity-log time { color: #aeb9cb; font-size: .74rem; margin-bottom: 5px; } .activity-log .activity-tag { display: inline-block; margin-bottom: 5px; color: #cce6df; font-size: .7rem; font-weight: 700; letter-spacing: .04em; } .activity-log strong { color: #f1f5f8; font-size: .96rem; } .activity-log .activity-meta { margin-top: 5px; color: #b9c5d2; font-size: .82rem; line-height: 1.55; }
.note-card { padding: 16px; border-radius: 14px; background: #2b3850; } .note-card time { color: #b9d6c8; font-size: .85rem; }.note-card p { margin-bottom: 0; }
.persona-list { margin: 0; }.persona-list div { padding: 13px 0; border-bottom: 1px solid #445168; }.persona-list div:last-child { border: 0; }.persona-list dt { color: #b9d6c8; font-weight: 700; }.persona-list dd { margin: 5px 0 0; line-height: 1.6; }
.album-panel { display: grid; gap: 15px; }.album-panel > .section-label, .album-panel > h2 { margin-bottom: -6px; }.photo-card { margin: 0; overflow: hidden; border-radius: 15px; background: #222e43; }.photo-card img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }.photo-card.portrait img { aspect-ratio: 9 / 16; object-position: center; }.photo-card figcaption { padding: 10px 12px; color: #d7e1ef; font-size: .9rem; }
.home-welcome { padding: 40px 4px 20px; }.home-widgets { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin: 0 0 26px; }.weather-card, .date-card { min-height: 86px; padding: 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 16px; background: rgba(18,28,42,.38); backdrop-filter: blur(12px); }.weather-card { display: flex; align-items: center; gap: 10px; position: relative; }.weather-icon { font-size: 2rem; }.weather-card strong { font-size: 1.55rem; }.weather-card p, .date-card p { margin: 1px 0; font-size: .78rem; }.weather-card small { position: absolute; bottom: 9px; right: 10px; font-size: .62rem; opacity: .65; }.date-card { text-align: center; }.date-card span { display: block; font-size: 2rem; font-weight: 800; }.date-card p { color: #e6ebf2; }
.album-icon i { background: linear-gradient(135deg,#b9c7e5,#6d84a5); }.chat-icon i { background: linear-gradient(135deg,#70cabb,#268174); font-size: .8rem; letter-spacing: 2px; }.player-icon i { background: linear-gradient(135deg,#e38391,#a44261); }.settings-icon i { background: linear-gradient(135deg,#b5bfca,#697788); }
.reading-icon i { background: linear-gradient(135deg,#d7b06d,#8b5a37); }
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 66px); }.chat-notice { margin: 8px 0 14px; text-align: center; color: #9facbd; font-size: .75rem; }.chat-messages { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }.message { max-width: 80%; padding: 10px 12px; border-radius: 15px; line-height: 1.5; }.message.yanchuan { align-self: flex-start; background: #33445d; border-bottom-left-radius: 4px; }.message.user { align-self: flex-end; background: #74a69b; color: #10231e; border-bottom-right-radius: 4px; }.chat-input { display: flex; gap: 8px; padding-top: 12px; }.chat-input input { min-width: 0; flex: 1; border: 1px solid #53637b; border-radius: 14px; padding: 11px 12px; background: #263248; color: #fff; }.chat-input button { border: 0; border-radius: 13px; padding: 0 14px; background: #a9d4c7; color: #13231f; font-weight: 700; }.online-dot { color: #7ed6a6; font-size: .8rem; }
.reading-hero { display: flex; gap: 18px; align-items: center; margin-top: 24px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg,#79543d,#2e3b51); }.reading-hero > div:last-child { flex: 1; }.book-cover { width: 105px; height: 148px; display: grid; place-items: center; padding: 10px; border-radius: 5px 14px 14px 5px; background: #c79555; color: #3b2619; box-shadow: 8px 8px 0 rgba(0,0,0,.15); font-family: serif; font-size: 1.2rem; font-weight: 800; line-height: 1.25; text-align: center; }.reading-hero h2 { margin: 4px 0; }.reading-hero button { border: 0; border-radius: 10px; padding: 9px 11px; background: #f1d59b; color: #392618; font-weight: 700; }.open-reader { margin-top: 8px; }.epub-link { display: inline-block; margin: 10px 0 0; color: #f4deb1; font-size: .78rem; }.book-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.book { min-height: 95px; border: 0; border-radius: 7px 11px 11px 7px; padding: 10px 7px; background: var(--book-color); color: #fff7e9; text-align: left; font-weight: 700; font-size: .82rem; box-shadow: 4px 4px 0 rgba(0,0,0,.15); }.book.active { outline: 2px solid #f2d798; }.reading-note { margin: 18px 0 0; padding: 12px; border-left: 3px solid #dbb96f; color: #d9e2ee; font-family: serif; }.book-reader { position: fixed; z-index: 10; inset: 0 auto 0 50%; width: min(100vw, 480px); height: 100dvh; transform: translateX(-50%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #f4f0e8; color: #2a241e; }.book-reader[hidden] { display: none; }.reader-header, .reader-controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #e4d9c5; }.reader-header button, .reader-controls button { border: 0; border-radius: 8px; padding: 8px 10px; background: #76563e; color: #fff8ea; }.reader-header span { font-size: .85rem; font-weight: 700; }.book-reader iframe { width: 100%; min-width: 0; height: 100%; border: 0; background: #fffdf7; }.reader-controls { gap: 10px; }.reader-controls button { flex: 1; }
.player-card { text-align: center; margin-top: 24px; padding: 20px; border-radius: 20px; background: #29374e; }.player-card img { width: min(100%, 290px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }.player-card h2 { margin-bottom: 4px; }.player-card audio { width: 100%; margin: 16px 0; }.file-button { display: inline-block; padding: 10px 15px; border-radius: 12px; background: #a9d4c7; color: #13231f; font-weight: 700; }.file-button input { display: none; }
.noise-control { display: grid; gap: 8px; margin-top: 18px; }.noise-control button { border: 1px solid #849eb3; border-radius: 12px; padding: 10px; background: transparent; color: #dce8f1; font-weight: 700; }.noise-control span { color: #aeb9cb; font-size: .75rem; }
.settings-label { margin-top: 28px; }.wallpaper-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.wallpaper-choice { padding: 6px; border: 2px solid transparent; border-radius: 13px; background: #2a3851; color: #e5ecf5; font-size: .75rem; }.wallpaper-choice.selected { border-color: #a9d4c7; }.wallpaper-choice span, .wallpaper-choice img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 6px; border-radius: 8px; object-fit: cover; }.wallpaper-choice span { background: linear-gradient(145deg,#31435a,#1d2739 55%,#171e2d); }.danger-button { border: 1px solid #b97979; border-radius: 10px; padding: 10px 12px; background: transparent; color: #f2b6b6; }.home-screen.wallpaper-empty, .home-screen.wallpaper-together { background-position: center; background-size: cover; }.home-screen.wallpaper-empty { background-image: linear-gradient(rgba(16,23,34,.3),rgba(16,23,34,.55)), url('./assets/cozy-home-empty.png'); }.home-screen.wallpaper-together { background-image: linear-gradient(rgba(16,23,34,.3),rgba(16,23,34,.55)), url('./assets/cozy-home-together.png'); }