/* skin/css/index.css */

/* Banner: 照片贴纸 */
.photo-banner {
    padding: 12px 20px;
    position: relative;
    transform: rotate(1deg);
}
.tape-piece {
    width: 100px; height: 30px;
    background: rgba(255,255,255,0.5);
    position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(-2deg);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.main-swiper {
    border: 5px solid #fff; /* 白边照片框 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border-radius: 2px;
}
.swiper-pagination-bullet-active { background: var(--marker-pink); }

/* 拍立得网格 (最新应用) */
.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; padding: 0 20px;
}
.polaroid-item {
    background: #fff;
    padding: 4px 4px 8px 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    transform: rotate(var(--r)); /* 随机旋转需要JS，这里用CSS模拟几个 */
}
.polaroid-item:nth-child(odd) { transform: rotate(2deg); }
.polaroid-item:nth-child(even) { transform: rotate(-1deg); }

.polaroid-item img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    margin-bottom: 4px; background: #eee;
}
.polaroid-item span { font-size: 12px; font-weight: bold; }

/* 涂鸦列表 (热门游戏) */
.doodle-list { display: flex; flex-direction: column; gap: 15px; padding: 0 20px; }
.doodle-row {
    display: flex; align-items: center;
    background: #fff;
    padding: 12px;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 手绘边框 */
    border: 2px solid var(--ink-color);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.05);
}
.dr-img { width: 50px; height: 50px; border-radius: 12px; margin-right: 15px; border: 1px solid #ddd; }
.dr-info { flex: 1; }
.dr-info h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.dr-info p { font-size: 12px; color: #666; font-style: italic; }

/* Grid 2 (安卓游戏) */
.note-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 15px; padding: 0 20px;
}
.ng-box {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.6);
    border: 1px dashed var(--ink-color);
    padding: 12px;
    border-radius: 12px;
}
.ng-box img { width: 30px; min-width: 30px; height: 30px; margin-right: 12px; border-radius: 6px; }
.ng-box span { font-weight: bold; font-size: 13px; }

/* 回形针盒 (热门软件) */
.paper-clip-box {
    background: #fff;
    margin: 0 20px;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    position: relative;
    border-top: 4px solid var(--marker-blue);
}
.paper-clip {
    position: absolute; top: -12px; right: 20px;
    width: 12px; height: 30px;
    border: 2px solid #999; border-radius: 12px;
    background: transparent;
    z-index: 10;
}
.mini-row {
    display: flex; align-items: center;
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
}
.mini-row:last-child { border-bottom: none; }
.mini-row img { width: 30px; height: 30px; border-radius: 8px; margin-right: 12px; }
.mini-row span { flex: 1; font-weight: bold; }
.mini-dl { font-weight: 900; }

/* 记事本排行 */
.notepad-list {
background: #fff;
    margin: 0 20px;
    padding: 0px 12px 0px 30px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-image: repeating-linear-gradient(#fff 0, #fff 49px, #0099ff 50px);
}
.holes {
    position: absolute; top: 0; bottom: 0; left: 12px; width: 12px;
    background-image: radial-gradient(#333 20%, transparent 25%);
    background-size: 12px 30px;
    background-position: 0 5px;
}
.np-row {
    display: flex; align-items: center; height: 50px; /* 对齐横线 */
}
.np-num { width: 20px; font-weight: bold; color: #999; margin-right: 12px; }
.np-num.n1 { color: #ff0000; font-size: 18px; transform: rotate(-5deg); }
.np-num.n2 { color: #ff6600; font-size: 16px; }
.np-num.n3 { color: #ffcc00; font-size: 16px; }
.np-name { font-weight: bold; flex: 1; }
.np-hot { color: #ff0000; font-size: 12px; font-weight: bold; }