body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; background-color: #eef1f5; overflow-y: scroll; }
.grid-diary { background-color: #fafaf9; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 24px 24px; background-position: top left; }
.diary-content { line-height: 24px; font-size: 15px; color: #333; }
.os-glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.5); z-index: 50;}
.smooth-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.smooth-wrapper.open { max-height: 2000px; opacity: 1; margin-top: 1rem; }
.smooth-info { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.smooth-info.open { max-height: 300px; opacity: 1; margin-top: 0.75rem; }
.btn-press { transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.btn-press:active { transform: scale(0.95); }
.mac-dots span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; }
.mac-close { background-color: #ff5f56; } .mac-min { background-color: #ffbd2e; } .mac-max { background-color: #27c93f; }
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); color: white; padding: 12px 24px; border-radius: 14px; font-weight: 500; z-index: 9999; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.fade-in-up { opacity: 0; animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.neighbor-card { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transform-origin: center center; }
.neighbor-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(79, 70, 229, 0.15); }
.neighbor-card:active { transform: scale(0.96); box-shadow: 0 4px 8px -4px rgba(79, 70, 229, 0.1); }
.shine-layer { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); z-index: 10; pointer-events: none; }
@keyframes sweep { 0% { left: -100%; } 100% { left: 200%; } }
.neighbor-card:hover .shine-layer { animation: sweep 0.7s ease-in-out; }

/* ================= 动态灵动岛美化样式代码 开始 ================= */
.dynamic-island {
    position: fixed;
    top: 75px; /* 下调至 75px 防止和顶部导航栏重叠 */
    left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: center;
    width: auto;
    max-width: 80%;
    height: 40px;
    background-color: #000;
    border-radius: 25px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.4s ease-in-out, height 0.6s ease-in-out, border-radius 0.6s ease-in-out, box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow: visible;
    z-index: 10000; /* 置于顶层 */
    padding-left: 35px;
    padding-right: 20px;
    opacity: 0;
    box-shadow: 0 0px 10px rgba(0,0,0,0.45);
}
.dynamic-island.active { transform: translateX(-50%) scale(1); opacity: 1; }
.dynamic-island.inactive { transform: translateX(-50%) scale(0); opacity: 0; }
.dynamic-island:hover { height: 60px; border-radius: 50px; }

.island-content { opacity: 0; transition: opacity 0.9s ease-in-out, filter 0.8s ease-in-out; font-weight: bold; flex-grow: 1; text-align: right; width: 100%; }
.dynamic-island.active .island-content { opacity: 1; }

.dynamic-island img {
    position: absolute;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    transition: height 0.8s ease-in-out, width 0.8s ease-in-out, filter 0.8s ease-in-out;
}
.dynamic-island:hover img { width: 34px; height: 34px; left: 12px; }

.bars { display: flex; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.bar { width: 2px; height: 13px; background-color: #10b981; animation: bounce 1s infinite ease-in-out alternate; }
.bar:nth-child(1) { animation-duration: 1s; }
.bar:nth-child(2) { animation-duration: 0.9s; }
.bar:nth-child(3) { animation-duration: 0.8s; }
.bar:nth-child(4) { animation-duration: 0.7s; }
.bar:nth-child(5) { animation-duration: 0.6s; }
.bar:nth-child(6) { animation-duration: 0.9s; }
.bar:nth-child(7) { animation-duration: 0.7s; }

@keyframes bounce {
    0% { transform: scaleY(0.3); background-color: #10b981; }
    50% { transform: scaleY(1); background-color: #f59e0b; }
    100% { transform: scaleY(0.3); background-color: #10b981; }
}
/* ================= 动态灵动岛美化样式代码 结束 ================= */