/* skin/css/common.css */
:root {
    --glass-surface: rgba(255, 255, 255, 0.65);
    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    --primary-color: #007aff;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --radius-l: 24px;
    --radius-m: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; min-width: 0; }
body, h1, h2, h3, p, ul, li, input, button { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; object-fit: cover; }
ul { list-style: none; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Sf Pro Text", sans-serif;
    color: var(--text-primary);
    line-height: 1.5;
    background-color: #f5f5f7;
    /* 动态极光背景 */
    background-image: 
        radial-gradient(circle at 0% 0%, #e0c3fc 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, #8ec5fc 0%, transparent 50%);
    background-attachment: fixed;
    padding-bottom: 120px;
    -webkit-font-smoothing: antialiased;
}

.spatial-shell {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 1. 顶部栏 (含明显搜索按钮) --- */
.spatial-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(to bottom, rgba(245,245,247,0.95) 0%, rgba(245,245,247,0) 100%);
    gap: 15px;
}
.header-logo {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-primary);
    white-space: nowrap;
}
.header-logo img{
    height: 52px;
}
/* 搜索框容器 */
.header-search-form {
    flex: 1;
    height: 40px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 4px 0 15px; /* 右侧留空给按钮 */
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.header-search-form input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    min-width: 0;
}
/* 搜索按钮 */
.header-search-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 16px;
    height: 32px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- 2. 通用组件 --- */
.glass-card {
    background: var(--glass-surface);
    backdrop-filter: blur(20px);
    border: var(--glass-border);
    border-radius: var(--radius-l);
    box-shadow: var(--glass-shadow);
    padding: 20px;
    margin-bottom: 24px;
}

.section-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; padding: 0 5px;
}
.sh-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.sh-more { font-size: 13px; color: var(--primary-color); font-weight: 500; }

/* --- 3. 布局模式 --- */

/* A. 横向滚动 (最新应用) */
.scroll-row {
    display: flex; gap: 20px; overflow-x: auto;
    padding: 0 5px 20px; margin: 0 -5px;
    scroll-snap-type: x mandatory;
}
.app-icon-item {
    flex: 0 0 64px; text-align: center; scroll-snap-align: start;
}
.app-icon-item img {
    width: 60px; height: 60px; border-radius: 16px;
    margin: 0 auto 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.app-icon-item span { font-size: 12px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* B. 列表模式 (热门游戏/软件) */
.list-box { padding: 5px 20px; }
.list-item {
    display: flex; align-items: center; padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.list-item:last-child { border-bottom: none; }
.list-item img { width: 50px; height: 50px; border-radius: 12px; margin-right: 15px; }
.li-info { flex: 1; min-width: 0; }
.li-info h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.li-info p { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-glass-sm {
    background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.05);
    color: var(--primary-color); padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* C. 网格模式 (安卓游戏/软件) */
.grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
}
.grid-card {
    background: rgba(255,255,255,0.6); backdrop-filter: blur(10px);
    border-radius: var(--radius-m); padding: 12px;
    display: flex; align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.grid-card img { width: 36px; min-width: 36px; height: 36px; border-radius: 10px; margin-right: 10px; }
.gc-name { font-size: 13px; font-weight: 600; }

/* D. 排行榜 */
.rank-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.rank-row:last-child { border-bottom: none; }
.rr-num { width: 24px; text-align: center; font-weight: 700; color: #ccc; margin-right: 10px; }
.rr-num.n1 { color: #ffd700; font-size: 18px; }
.rr-num.n2 { color: #c0c0c0; font-size: 18px; }
.rr-num.n3 { color: #cd7f32; font-size: 18px; }
.rr-name { flex: 1; font-weight: 500; font-size: 14px; }
.rr-hot { font-size: 12px; color: var(--text-secondary); background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 6px; }

/* --- 底部悬浮岛导航 --- */
.floating-dock {
    position: fixed;
    bottom: 30px; left: 50%; transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 10px 30px; border-radius: 32px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    display: flex; gap: 35px; z-index: 999;
}
.dock-item {
    display: flex; flex-direction: column; align-items: center;
    color: var(--text-secondary); transition: all 0.3s; position: relative; width: 24px;
}
.dock-item.active { color: var(--primary-color); transform: translateY(-6px); }
.dock-item.active::after {
    content: ''; position: absolute; bottom: -12px; width: 4px; height: 4px;
    background: var(--primary-color); border-radius: 50%;
}

/* Icons */
.icon-s {
    width: 24px; height: 24px; background-color: currentColor;
    mask-size: contain; -webkit-mask-size: contain;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-position: center; -webkit-mask-position: center;
}
.ic-home { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E"); }
.ic-game { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'/%3E%3C/svg%3E"); }
.ic-soft { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z'/%3E%3C/svg%3E"); }
.ic-rank { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.504-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0V5.625a1.125 1.125 0 0 0-1.125-1.125h-2.25a1.125 1.125 0 0 0-1.125 1.125V14.25m5.007 0h2.742a1.125 1.125 0 0 0 1.125-1.125V9.75a1.125 1.125 0 0 0-1.125-1.125h-2.742V14.25Z'/%3E%3C/svg%3E"); }