/* skin/css/common.css */
:root {
    --warm-primary: #ff9f43; /* 暖橙 */
    --warm-bg: #fcfbf9;      /* 奶油底 */
    --warm-card: #ffffff;
    --text-dark: #2f3542;
    --text-grey: #a4b0be;
    --border-soft: #f1f2f6;
    
    --radius-box: 16px;
    --shadow-gentle: 0 5px 20px rgba(0,0,0,0.03);
}

/* Reset */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; min-width: 0;}
body, h1, h2, h3,h4,h5, 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, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background-color: var(--warm-bg);
    color: var(--text-dark);
    line-height: 1.6;
    padding-bottom: 100px; /* 留给悬浮导航 */
}

.daily-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 100vh;
}

/* --- 1. 顶部 Header (搜索条) --- */
.daily-header {
    height: 70px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(252, 251, 249, 0.95); /* 半透明背景 */
    backdrop-filter: blur(10px);
    margin: 0 -20px; padding: 0 20px; /* 抵消容器padding */
}
.daily-header img{
    height: 52px;
}
.brand-logo {
    font-size: 20px;
    font-weight: 900;
    color: var(--warm-primary);
    margin-right: 15px;
    letter-spacing: 1px;
}
.search-pill {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border-soft);
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.search-pill input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text-dark);
    background: transparent;
}
.search-icon-btn {
    border: none; background: transparent; padding: 0;
    color: var(--warm-primary); cursor: pointer;
}

/* --- 2. 通用组件 --- */
/* 白色圆角卡片 */
.w-card {
    background: var(--warm-card);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow-gentle);
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid #f7f7f7;
}

/* 标题栏 */
.block-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; padding: 0 5px;
}
.bh-title {
    font-size: 18px; font-weight: 700; color: var(--text-dark);
    position: relative; padding-left: 12px;
}
.bh-title::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--warm-primary);
}
.bh-more { font-size: 13px; color: var(--text-grey); }

/* 按钮 */
.btn-warm {
    background: var(--warm-primary);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 159, 67, 0.3);
    transition: transform 0.1s;
}
.btn-warm:active { transform: scale(0.96); }
.btn-warm.outline {
    background: #fff; color: var(--warm-primary);
    border: 1px solid var(--warm-primary);
    box-shadow: none;
}

/* 横向滚动容器 (通用) */
.h-scroll-wrap {
    display: flex; gap: 15px; overflow-x: auto;
    padding: 5px 5px 15px 5px; margin: 0 -5px;
}
.h-scroll-wrap::-webkit-scrollbar { display: none; }

.h-icon-box {
    flex: 0 0 68px; text-align: center;
}
.h-icon-box a { display: block; }
.h-icon-box img {
    width: 60px; height: 60px; border-radius: 18px;
    margin: 0 auto 8px; background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.h-icon-box span { font-size: 12px; color: var(--text-dark); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 3. 底部悬浮导航 --- */
.bottom-float-nav {
    position: fixed;
    bottom: 20px; left: 20px; right: 20px;
    max-width: 560px; margin: 0 auto;
    height: 65px;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
}
.nav-btn {
    display: flex; flex-direction: column; align-items: center;
    color: #ccc; transition: all 0.3s;
}
.nav-btn.active { color: var(--warm-primary); }
.nav-svg {
    display: inline-block;
    width: 24px; 
    height: 24px;
    background-color: currentColor; /* 关键：图标颜色跟随文本颜色 */
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    vertical-align: middle;
}

/* SVG 路径定义 (确保 data URI 正确) */
.i-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.i-game { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 12h4m-2-2v4m10-1h2m-5-2h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 12h4m-2-2v4m10-1h2m-5-2h2'/%3E%3C/svg%3E"); }
.i-soft { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E"); }
.i-rank { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9v12m6-18v18m6-9v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9v12m6-18v18m6-9v9'/%3E%3C/svg%3E"); }
.i-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); }
.i-back { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E"); }
.nav-lbl { font-size: 10px; font-weight: bold; }

/* Icons */
.i-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"); }
.i-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"); }
.i-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"); }
.i-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"); }
.i-search { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E"); }
.i-back { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E"); }