* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; width: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; background: #000; }
#phone { position: relative; width: 100%; height: 100%; background-color: #fdf2f5; background-image: radial-gradient(#f7cbd6 2px, transparent 2px); background-size: 25px 25px; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 600px) { body { display: flex; align-items: center; justify-content: center; background: #1c1c1e; } #phone { width: 390px; height: 844px; border-radius: 54px; border: 12px solid #1a1a1a; box-shadow: 0 30px 80px rgba(0,0,0,.8); } }

/* 锁屏与密码键盘 */
#lock-screen { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; color: #333; transition: transform .4s, opacity .4s; padding-top: 100px; background-color: #fdf2f5; background-image: radial-gradient(#f7cbd6 2px, transparent 2px); background-size: 25px 25px; }
#lock-screen.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.lock-time { font-size: 80px; font-weight: 300; letter-spacing: -2px; }
.lock-date { font-size: 20px; font-weight: 500; margin-top: 5px; }
.lock-bottom { position: absolute; bottom: 30px; width: 100%; display: flex; flex-direction: column; align-items: center; }
#lock-prompt { font-size: 15px; font-weight: 600; animation: pulse 1.5s infinite; cursor: pointer; padding: 20px; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

#lock-keypad { display: none; flex-direction: column; align-items: center; width: 100%; margin-top: 20px; }
#lock-keypad.active { display: flex; }
.dots { display: flex; gap: 20px; margin-bottom: 20px; }
.dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #333; }
.dots span.filled { background: #333; }
.keys { display: grid; grid-template-columns: repeat(3, 75px); gap: 15px; justify-content: center; }
.keys button { width: 75px; height: 75px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); color: #1c1c1e; font-size: 32px; cursor: pointer; backdrop-filter: blur(5px); }
.keys button:active { background: rgba(255,255,255,.9); }
.keys button.empty { background: transparent; pointer-events: none; }

/* 主界面 */
#main-ui { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .3s; }
#main-ui.hidden { opacity: 0; pointer-events: none; }
#statusbar { height: 48px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; color: #1c1c1e; font-size: 14px; font-weight: 600; flex-shrink: 0; padding-top: env(safe-area-inset-top); z-index: 50; }
#island { width: 110px; height: 30px; background: #000; border-radius: 20px; position: absolute; left: 50%; transform: translateX(-50%); top: 8px; }
.status-right { display: flex; align-items: center; gap: 5px; }
.signal-icon { width: 14px; height: 11px; position: relative; }
.signal-icon span { position: absolute; bottom: 0; left: 0; width: 3px; background: #1c1c1e; border-radius: 1px; }
.signal-icon span:nth-child(1) { height: 2px; } .signal-icon span:nth-child(2) { height: 4px; left: 4px; } .signal-icon span:nth-child(3) { height: 7px; left: 8px; } .signal-icon span:nth-child(4) { height: 10px; left: 12px; }
.battery-icon { border: 1px solid rgba(0,0,0,0.4); border-radius: 3px; padding: 1px; width: 22px; height: 11px; position: relative; }
.battery-icon::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px; background: rgba(0,0,0,0.4); border-radius: 0 1px 1px 0; }
.battery-level { height: 100%; width: 80%; background: #1c1c1e; border-radius: 1px; }

#screen { flex: 1; position: relative; overflow: hidden; }
.page { position: absolute; inset: 0; overflow-y: auto; display: none; -webkit-overflow-scrolling: touch; }
.page.active { display: block; }

#home { padding: 10px 16px 100px; display: flex; flex-direction: column; }
.widget-row { display: flex; gap: 15px; margin-bottom: 25px; }
.widget { flex: 1; border-radius: 22px; padding: 15px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.widget-weather { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); color: #1c1c1e; }
.widget-weather .temp { font-size: 38px; font-weight: 300; }
.widget-photo { background: url('https://images.unsplash.com/photo-1518098268026-4e89f1a2cd8e?q=80&w=400&auto=format&fit=crop') center/cover; position: relative; }
.widget-photo .date { position: absolute; bottom: 10px; left: 15px; color: #fff; text-shadow: 0 1px 3px #000; }

.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: transform 0.15s; }
.app-icon:active { transform: scale(0.92); }
.icon-box { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); background: #fff; }
.icon-label { font-size: 11px; color: #1c1c1e; font-weight: 500; }
.search-bar { background: rgba(255,255,255,0.6); border-radius: 20px; padding: 6px 15px; margin: 20px auto 0; font-size: 13px; font-weight: 500; }

.dock { position: absolute; bottom: 20px; left: 12px; right: 12px; height: 85px; background: rgba(255,255,255,0.4); backdrop-filter: blur(25px); border-radius: 35px; display: flex; justify-content: space-around; align-items: center; transition: opacity 0.3s; }
.dock.hidden-dock { opacity: 0; pointer-events: none; }
.dock .icon-label { display: none; }
.dock .icon-box { width: 58px; height: 58px; }

.icon-calendar { flex-direction: column; background: #fff; color: #ff3b30; font-weight: 800; }
.icon-calendar .m { font-size: 10px; } .icon-calendar .d { font-size: 24px; color: #000; }
.icon-clock { background: #000; border-radius: 50%; border: 3px solid #555; }
.icon-clock::after { content: ""; width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: -10px 0 0 #fff, 0 -12px 0 #fff; }
.icon-notes { background: #fff; border: 2px solid #fef7d6; background-image: linear-gradient(#ffe37a 2px, transparent 2px); background-size: 100% 12px; background-position: 0 10px; }
.icon-photos { background: #fff; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 2px; }
.icon-photos div { border-radius: 2px; }
.icon-maps { background: #fff; background-image: linear-gradient(rgba(52,199,89,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(52,199,89,.3) 1px, transparent 1px); background-size: 10px 10px; }
.icon-maps div { width: 12px; height: 12px; background: #ff3b30; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.icon-weather { background: linear-gradient(#5ac8fa, #3498db); border-radius: 50%; }
.icon-weather div { width: 18px; height: 18px; background: #ffcc00; border-radius: 50%; box-shadow: 8px 8px 0 #fff; }
.icon-settings { background: #e0e0e0; border-radius: 50%; border: 3px solid #999; }
.icon-settings::after { content: ""; width: 18px; height: 18px; border: 4px solid #999; border-radius: 50%; }
.icon-phone { background: #34c759; border-radius: 14px; display: flex; justify-content: center; align-items: center; }
.icon-phone::after { content: "📞"; font-size: 32px; }

#app-view { background: #f2f2f7; }
.app-topbar { position: sticky; top: 0; z-index: 10; height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; background: rgba(249,249,249,.94); backdrop-filter: blur(20px); border-bottom: .5px solid #d1d1d6; font-size: 16px; font-weight: 600; color: #1c1c1e; }
#back-btn { border: none; background: none; color: #007aff; font-size: 16px; cursor: pointer; }
#app-content { padding: 12px 16px 40px; height: calc(100% - 44px); overflow-y: auto; position: relative; }
#app-content.no-padding { padding: 0; overflow: hidden; }

.chat-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: .5px solid #e5e5ea; cursor: pointer; background: #fff; }
.chat-avatar { width: 50px; height: 50px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.chat-info { flex: 1; min-width: 0; }
.chat-name { font-size: 16px; font-weight: 500; color: #1c1c1e; }
.chat-preview { font-size: 14px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-room-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: #b2c7d9; position: absolute; inset: 0; }
.chat-room { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.msg-row { display: flex; }
.msg-row.me { justify-content: flex-end; }
.bubble { max-width: 75%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; word-break: break-word; display: inline-block; width: fit-content; }
.msg-row.them .bubble { background: #fff; color: #1c1c1e; border-bottom-left-radius: 4px; }
.msg-row.me .bubble { background: #fee500; color: #1c1c1e; border-bottom-right-radius: 4px; }
.msg-sender { font-size: 12px; color: #8e8e93; margin-bottom: 4px; padding-left: 4px; }
.time-divider { text-align: center; margin: 10px 0; }
.time-divider span { background: rgba(0,0,0,0.1); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 12px; }

.reply-modal { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; transform: translateY(100%); transition: transform 0.3s; z-index: 20; padding: 15px; }
.reply-modal.show { transform: translateY(0); }
.reply-option { padding: 12px; background: #f1f1f1; border-radius: 10px; margin-bottom: 8px; font-size: 14px; cursor: pointer; text-align: center; font-weight: 500; }

#ios-notification { position: absolute; top: -100px; left: 10px; right: 10px; z-index: 200; background: rgba(255,255,255,0.95); backdrop-filter: blur(25px); border-radius: 20px; padding: 12px; display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.15); cursor: pointer; transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#ios-notification.show { top: 50px; }
#ios-notification .app-icon-small { width: 40px; height: 40px; border-radius: 10px; }
#ios-notification .notif-title { font-size: 14px; font-weight: 700; }
#ios-notification .notif-body { font-size: 13px; margin-top: 2px; }

.memo-list-item { padding: 15px 20px; background: #fff; border-bottom: 1px solid #e5e5ea; cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.memo-list-title { font-size: 16px; font-weight: 600; color: #1c1c1e;}
.memo-list-date { font-size: 13px; color: #8e8e93;}
.memo-detail { background: #fff; padding: 20px; height: 100%; }
.memo-detail h1 { font-size: 24px; margin-bottom: 10px; }
.memo-detail p { font-size: 15px; line-height: 1.6; color: #333; white-space: pre-wrap; }
.memo-lock-screen { text-align: center; padding: 80px 20px; background: #fff; height: 100%;}
.memo-input { padding: 12px; font-size: 18px; text-align: center; border: 1px solid #ccc; border-radius: 10px; width: 160px; margin-top: 20px; outline:none;}

.ig-header { display: flex; justify-content: space-between; padding: 10px 16px; background: #fff; border-bottom: 1px solid #dbdbdb; }
.ig-logo { font-family: 'Billabong', cursive, sans-serif; font-size: 26px; font-weight: bold; }
.ig-feed-post { background: #fff; margin-bottom: 10px; border-bottom: 1px solid #dbdbdb; }
.ig-feed-header { display: flex; align-items: center; gap: 10px; padding: 10px; }
.ig-feed-img { width: 100%; height: 300px; background: #eee; background-size: cover; background-position: center; }
.ig-feed-actions { padding: 10px; font-size: 24px; display: flex; gap: 15px; }
.ig-heart { cursor: pointer; transition: transform 0.2s; }
.ig-heart.liked { color: #ed4956; transform: scale(1.1); }
.ig-feed-caption { padding: 0 10px 10px; font-size: 14px; }

/* 极简高级网格校园地图 */
.map-container { width: 100%; height: 100%; background-color: #f0f4f8; background-image: linear-gradient(#d0d7e0 1px, transparent 1px), linear-gradient(90deg, #d0d7e0 1px, transparent 1px); background-size: 40px 40px; position: relative; overflow: hidden; }
.map-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s;}
.map-pin:active { transform: translate(-50%, -100%) scale(1.1); }
.map-pin .pin-icon { width: 24px; height: 24px; background: #007aff; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.map-pin .pin-label { background: #fff; padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: bold; margin-top: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); white-space: nowrap; }
.map-bottom-card { position: absolute; bottom: 20px; left: 10px; right: 10px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transform: translateY(150%); transition: transform 0.3s; z-index: 50;}
.map-bottom-card.show { transform: translateY(0); }
.map-btn { display: block; width: 100%; padding: 12px; background: #007aff; color: #fff; text-align: center; border-radius: 12px; font-weight: bold; margin-top: 15px; cursor: pointer; }

/* 橙光地图选项弹窗 */
.map-choice-modal { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 60; display: none; justify-content: center; align-items: center; padding: 20px; }
.map-choice-modal.show { display: flex; }
.map-choice-box { background: #fff; width: 100%; border-radius: 20px; padding: 20px; text-align: center; }
.map-choice-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #1c1c1e; }
.map-choice-btn { padding: 12px; background: #f2f2f7; border-radius: 12px; margin-bottom: 10px; font-size: 15px; font-weight: 500; cursor: pointer; border: 1px solid #e5e5ea; }
.map-choice-btn:active { background: #e5e5ea; }

#home-indicator { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center; justify-content: center; z-index: 100; pointer-events: none; }
#home-indicator::after { content: ""; width: 134px; height: 5px; border-radius: 3px; background: #1c1c1e; opacity: 0.8; }