@import url('https://fonts.loli.net/css2?family=Caveat:wght@500;700&family=Playfair+Display:ital,wght@0,800;1,800&family=Nunito:wght@700;800;900&display=swap');

/* 全局变量 */
.ios-grid { 
    --ios-glass: rgba(255, 255, 255, 0.7); 
    --ios-border: rgba(255, 255, 255, 0.9); 
    --color-taro-dark: #9575cd; 
    --color-cocoa-dark: #8d6e63; 
    --accent-pink: #f48fb1; 
    --accent-blue: #90caf9; 
}
body.dark-mode .ios-grid { 
    --ios-glass: rgba(40, 35, 37, 0.6); 
    --ios-border: rgba(255, 255, 255, 0.1); 
    --color-taro-dark: #b39ddb; 
    --color-cocoa-dark: #bcaaa4; 
}

.ios-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 76px; gap: 18px 14px; padding-top: 10px; }

/* 💥 核心修复：只剥离小图标的白底，绝不误伤大卡片！ */
.ios-grid .app-item.taro-card { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; margin: 0 !important;}
.ios-grid .app-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; cursor: pointer; }
.ios-grid .app-item:active { transform: scale(0.92); transition: 0.1s; }

.ios-grid .app-icon { 
    width: 60px; height: 60px; border-radius: 16px; 
    background: var(--ios-glass); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border: 1.5px solid var(--ios-border); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    display: flex; align-items: center; justify-content: center; font-size: 26px; 
}
.ios-grid .app-name { font-family: 'Nunito', system-ui, sans-serif !important; font-size: 11px; font-weight: 800; color: #5c5456; opacity: 0.9; }
body.dark-mode .ios-grid .app-name { color: #e8e2e4; }

/* 图标色彩渐变 */
.ios-grid .app-icon.taro { background: linear-gradient(135deg, rgba(243,229,245,0.9), rgba(225,213,231,0.7)) !important; color: var(--color-taro-dark) !important;}
.ios-grid .app-icon.cocoa { background: linear-gradient(135deg, rgba(239,235,233,0.9), rgba(215,204,200,0.7)) !important; color: var(--color-cocoa-dark) !important;}
.ios-grid .app-icon.pink { background: linear-gradient(135deg, rgba(252,228,236,0.9), rgba(248,187,208,0.7)) !important; color: var(--accent-pink) !important;}
body.dark-mode .ios-grid .app-icon.taro { background: linear-gradient(135deg, rgba(42,34,48,0.9), rgba(51,40,64,0.7)) !important; }
body.dark-mode .ios-grid .app-icon.cocoa { background: linear-gradient(135deg, rgba(46,40,37,0.9), rgba(58,48,44,0.7)) !important; }
body.dark-mode .ios-grid .app-icon.pink { background: linear-gradient(135deg, rgba(46,32,37,0.9), rgba(58,37,44,0.7)) !important; }

/* ==========================================
   💥 大组件 (Widget) 底色恢复：告别灰暗雾霾！
========================================== */
.ios-grid .widget.taro-card { 
    background: var(--ios-glass) !important; /* 恢复卡片的白色不透明底板！ */
    border: 1.5px solid var(--ios-border) !important; 
    border-radius: 24px !important; 
    backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important; 
    position: relative; overflow: hidden; cursor: pointer; 
}
.ios-grid .widget.taro-card::before, .ios-grid .widget.taro-card::after { display: none !important; }
.ios-grid .widget:active { transform: scale(0.96); transition: 0.1s; }

.ios-grid .w-2x2 { grid-column: span 2; grid-row: span 2; padding: 16px !important; display: flex; flex-direction: column; justify-content: space-between; }
.ios-grid .w-4x2 { grid-column: span 4; grid-row: span 2; padding: 18px 20px !important; display: flex; flex-direction: column; justify-content: center; }

/* 星汇专属色彩 */
.ios-grid .wg-star.taro-card { background: linear-gradient(135deg, rgba(255,255,255,0.8) 30%, rgba(227,242,253,0.9) 100%) !important; }
body.dark-mode .ios-grid .wg-star.taro-card { background: linear-gradient(135deg, rgba(40,35,37,0.8) 30%, rgba(21,40,55,0.9) 100%) !important; }
.ios-grid .wg-star .icon-box { width: 36px; height: 36px; border-radius: 11px; background: rgba(144,202,249,0.3); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--accent-blue); z-index: 2; }
.ios-grid .wg-star .title { font-family: 'Playfair Display', serif !important; font-size: 22px; font-weight: 800; color: #5c5456; line-height: 1; margin-top: auto; z-index: 2; position: relative; }
.ios-grid .wg-star .sub { font-family: 'Nunito', system-ui, sans-serif !important; font-size: 10px; color: #a3999b; font-weight: 800; margin-top: 4px; z-index: 2; position: relative; letter-spacing: 0.5px; }
.ios-grid .wg-star .deco-planet { position: absolute; bottom: -15px; right: -15px; font-size: 72px; color: var(--accent-blue); opacity: 0.15; transform: rotate(-15deg); pointer-events: none; z-index: 1;}
body.dark-mode .ios-grid .wg-star .title { color: #e8e2e4; }

/* 织梦专属色彩 */
.ios-grid .wg-dream.taro-card { background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(243,229,245,0.9)) !important; }
body.dark-mode .ios-grid .wg-dream.taro-card { background: linear-gradient(135deg, rgba(40,35,37,0.8), rgba(42,34,48,0.9)) !important; }
.ios-grid .wg-dream .icon-box { width: 36px; height: 36px; border-radius: 11px; background: rgba(149,117,205,0.2); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--color-taro-dark); z-index: 2; }
.ios-grid .wg-dream .title { font-family: 'Playfair Display', serif !important; font-size: 22px; font-weight: 800; color: #5c5456; line-height: 1; margin-top: auto; z-index: 2; position: relative; }
.ios-grid .wg-dream .sub { font-family: 'Nunito', system-ui, sans-serif !important; font-size: 10px; color: #a3999b; font-weight: 800; margin-top: 4px; z-index: 2; position: relative; letter-spacing: 0.5px; }
body.dark-mode .ios-grid .wg-dream .title { color: #e8e2e4; }

/* 💥 新增：与君同行亮色神仙卡片 (复刻图二) */
.ios-grid .wg-companion.taro-card { 
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,240,245,0.85) 100%) !important; 
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; 
    padding: 24px !important; 
}
body.dark-mode .ios-grid .wg-companion.taro-card { background: linear-gradient(135deg, rgba(40,35,37,0.9) 0%, rgba(58,37,44,0.85) 100%) !important; }
.ios-grid .wg-companion .c-content { position: relative; z-index: 2; }
.ios-grid .wg-companion .c-tag { font-family: 'Nunito', sans-serif !important; font-size: 10px; font-weight: 900; color: #f48fb1; letter-spacing: 2px; margin-bottom: 8px; }
.ios-grid .wg-companion .c-title { font-family: 'Playfair Display', serif !important; font-size: 28px; font-weight: 800; color: #5c5456; margin-bottom: 4px; }
body.dark-mode .ios-grid .wg-companion .c-title { color: #e8e2e4; }
.ios-grid .wg-companion .c-sub { font-family: 'Nunito', sans-serif !important; font-size: 12px; font-weight: 700; color: #a3999b; }
.ios-grid .wg-companion .c-glow { position: absolute; bottom: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(244,143,177,0.3) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 1;}

/* 装饰线 */
.ios-grid .wg-deco-line { grid-column: span 4; grid-row: span 1; display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0.7; padding: 0 10px; pointer-events: none; }
.ios-grid .wg-deco-line .line { flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(92,84,86,0.3), transparent); }
.ios-grid .wg-deco-line .text { font-family: 'Caveat', cursive !important; font-size: 22px !important; color: #5c5456; font-weight: 700; }
body.dark-mode .ios-grid .wg-deco-line .text { color: #e8e2e4; }

/* ==========================================
   相册照片体系恢复
========================================== */
.ios-grid .wg-polaroid { grid-column: span 2; grid-row: span 2; display: flex; align-items: center; justify-content: center; position: relative; }
.ios-grid .polaroid-frame { width: 128px; height: 148px; background: #fff !important; padding: 8px 8px 32px 8px; border-radius: 2px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: rotate(3deg); display: flex; flex-direction: column; z-index: 5;}
body.dark-mode .ios-grid .polaroid-frame { background: #262123 !important; }
.ios-grid .polaroid-caption { position: absolute; bottom: 6px !important; left: 0; width: 100%; text-align: center; font-family: 'Caveat', cursive !important; font-size: 22px !important; color: #5c5456 !important; font-weight: 700; opacity: 0.85; }
body.dark-mode .ios-grid .polaroid-caption { color: #e8e2e4 !important; }

.ios-grid .wg-hanging { grid-column: span 4; grid-row: span 2; position: relative; }
.ios-grid .hanging-string { position: absolute; top: 20px; left: -5%; width: 110%; height: 40px; border-bottom: 1.5px solid rgba(109,100,102,0.25); border-radius: 50%; pointer-events: none; }
.ios-grid .hanging-photos { display: flex; justify-content: space-evenly; align-items: flex-start; padding: 0 10px; margin-top: 40px; z-index: 5;}
.ios-grid .mini-polaroid { width: 78px; height: 95px; background: #fff !important; padding: 5px 5px 18px 5px; border-radius: 1px; box-shadow: 0 6px 15px rgba(0,0,0,0.08); display: flex; flex-direction: column; }
body.dark-mode .ios-grid .mini-polaroid { background: #262123 !important; }
.ios-grid .mini-polaroid:nth-child(1) { transform: rotate(-5deg); }
.ios-grid .mini-polaroid:nth-child(2) { transform: rotate(3deg) translateY(6px); }
.ios-grid .mini-polaroid:nth-child(3) { transform: rotate(-2deg) translateY(-2px); }
.ios-grid .mini-caption { position: absolute; bottom: 0px !important; left: 0; width: 100%; text-align: center; font-family: 'Caveat', cursive !important; font-size: 18px !important; color: #5c5456; font-weight: 700; opacity: 0.85; pointer-events: none; }
body.dark-mode .ios-grid .mini-caption { color: #e8e2e4 !important; }