/* ===== 生产管理 - 现代深色玻璃拟态风格 ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color:#1a2238;
    background:#f1f3f8;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}
a { color:#6a5cff; text-decoration:none; }
button { font-family: inherit; outline:none; -webkit-tap-highlight-color:transparent; }
button:focus, button:active { outline:none; }

/* === 登录 / 注册 渐变背景 === */
.auth-bg {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(135deg, #5b46f5 0%, #8e5cff 35%, #ff6ec7 100%);
    overflow:hidden;
    z-index: -1;
}
.auth-bg::before, .auth-bg::after {
    content:''; position:absolute; border-radius:50%; filter: blur(60px); opacity:.55;
}
.auth-bg::before {
    width:380px; height:380px; left:-100px; top:-120px;
    background: radial-gradient(circle, #62e6ff 0%, transparent 70%);
}
.auth-bg::after {
    width:420px; height:420px; right:-140px; bottom:-160px;
    background: radial-gradient(circle, #ffdf6a 0%, transparent 70%);
}

.auth-wrap {
    min-height:100vh;
    display:-webkit-flex; display:flex;
    -webkit-flex-direction:column; flex-direction:column;
    -webkit-align-items:center; align-items:center;
    -webkit-justify-content:center; justify-content:center;
    padding: 28px 22px;
}
.brand {
    text-align:center; color:#fff; margin-bottom: 28px; user-select:none;
}
.brand .logo {
    width:64px; height:64px; margin:0 auto 12px; border-radius:18px;
    background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.3);
    font-size:30px;
}
.brand h1 { margin:0 0 4px; font-size:24px; font-weight:600; letter-spacing:2px; }
.brand p  { margin:0; font-size:13px; opacity:.85; letter-spacing:1px; }

.glass {
    width:100%; max-width: 380px;
    background: rgba(255,255,255,.18);
    border-radius:22px; padding: 26px 22px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 20px 50px rgba(31,38,135,.25);
}
.glass h2 { margin: 0 0 18px; color:#fff; font-size:18px; font-weight:600; text-align:center; letter-spacing:1px; }

.field {
    display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,.95);
    border-radius:12px; padding: 12px 14px; margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .15s;
}
.field:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 4px 14px rgba(0,0,0,.1); }
.field .icon { width:20px; height:20px; flex-shrink:0; color:#8e5cff; }
.field input {
    flex:1; border:none; outline:none; background:transparent;
    font-size:15px; color:#1a2238; min-width:0;
}
.field input::placeholder { color:#a0a4b8; }
.field .captcha-img { height:36px; border-radius:6px; cursor:pointer; user-select:none; }

.btn-primary {
    width:100%; padding: 13px;
    border:none; border-radius:12px;
    background: linear-gradient(135deg, #ff6ec7 0%, #6a5cff 100%);
    color:#fff; font-size:16px; font-weight:600; letter-spacing:2px;
    cursor:pointer; margin-top: 6px;
    box-shadow: 0 8px 22px rgba(106,92,255,.45);
    transition: transform .15s, box-shadow .2s;
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(106,92,255,.4); }

.auth-switch {
    margin-top:18px; text-align:center; color: rgba(255,255,255,.9); font-size:13px;
}
.auth-switch a { color:#fff; font-weight:600; margin-left:6px; text-decoration:underline; }

.foot-tip { margin-top: 26px; text-align:center; color: rgba(255,255,255,.7); font-size:12px; letter-spacing:1px; }

/* === Toast === */
.toast {
    position: fixed; top: 22%; left:50%; transform: translateX(-50%);
    background: rgba(0,0,0,.78); color:#fff; padding: 10px 18px;
    border-radius: 8px; font-size: 14px; z-index: 9999;
    animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity:0; transform: translate(-50%, -10px); } to { opacity:1; transform: translateX(-50%); } }

/* === 主页布局（顶部 + 内容 + 底部 4 菜单）=== */
.app {
    min-height: 100vh; display:flex; flex-direction:column;
    background: #f1f3f8;
    padding-bottom: 70px; /* 给底部 tabbar 留空间 */
}
.app-header {
    padding: 9px 16px 9px;
    background: linear-gradient(135deg, #5b46f5 0%, #8e5cff 100%);
    color:#fff; border-radius: 0 0 18px 18px;
    box-shadow: 0 4px 14px rgba(91,70,245,.22);
    display:flex; align-items:center;
}
#headerTitle { font-size:15px; font-weight:700; letter-spacing:.5px; }

.app-body { flex:1; padding: 16px 16px 24px; }
.placeholder-card {
    background:#fff; border-radius: 16px; padding: 32px 20px;
    text-align:center; box-shadow: 0 4px 16px rgba(0,0,0,.04);
    color:#5b6478; font-size:14px;
}
.placeholder-card .big-icon { font-size:50px; margin-bottom:10px; }
.placeholder-card h3 { margin: 6px 0 4px; color:#1a2238; font-size:18px; }

/* 底部 4 菜单 */
.tabbar {
    position: fixed; left:0; right:0; bottom:0;
    height:62px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,.06);
    display:flex; align-items:stretch;
    box-shadow: 0 -4px 16px rgba(0,0,0,.05);
    z-index: 100;
}
.tab-item {
    -webkit-flex:1; flex:1;
    display:-webkit-flex; display:flex;
    -webkit-flex-direction:column; flex-direction:column;
    -webkit-align-items:center; align-items:center;
    -webkit-justify-content:center; justify-content:center;
    color:#8b91a7; font-size:11px; cursor:pointer;
    transition: color .15s, transform .15s;
    border: none; background: transparent; outline:none;
    padding-top: 6px;
    -webkit-tap-highlight-color: transparent;
}
/* 下拉刷新 */
.pull-indicator { text-align:center; color:#8b91a7; font-size:12px; height:0; overflow:hidden; transition:height .2s; line-height:40px; }
.pull-indicator.pulling { height:40px; }
.pull-indicator.refreshing { height:40px; color:#6a5cff; }

/* 刷新中间loading */
.loading-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    z-index:1500; align-items:center; justify-content:center; pointer-events:none;
}
.loading-overlay.show { display:flex; }
.loading-spinner {
    width:48px; height:48px;
    border:3px solid rgba(106,92,255,.2);
    border-top-color:#6a5cff;
    border-radius:50%;
    animation:spin .7s linear infinite;
    box-shadow:0 4px 18px rgba(106,92,255,.25);
    background:#fff;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* 库存改制行样式 */
.plan-table tr.stock-modify { background:#e8eaf6 !important; color:#283593; }
.plan-table tr.stock-modify td { color:#283593; }
.stock-modify-tag { display:inline-block; background:#5c6bc0; color:#fff; font-size:9px; padding:1px 5px; border-radius:3px; margin-left:4px; vertical-align:middle; font-weight:600; letter-spacing:0.5px; }
.tab-item { font-size:10px; }
.tab-item svg { width:22px; height:22px; margin-bottom:2px; }
.tab-item.active { color:#6a5cff; }
.tab-item.active svg { transform: translateY(-1px); }
.tab-item:active { transform: scale(.95); }

/* === 弹窗 Modal === */
.modal-mask {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: rgba(20, 22, 40, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    padding: 24px;
    animation: maskIn .2s ease;
    -webkit-animation: maskIn .2s ease;
}
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
    width: 100%; max-width: 340px;
    background: #fff; border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    animation: boxIn .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes boxIn { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-head {
    padding: 22px 20px 8px;
    text-align: center;
    background: linear-gradient(135deg, #5b46f5 0%, #8e5cff 60%, #ff6ec7 100%);
    color: #fff;
}
.modal-head .m-icon {
    width: 54px; height: 54px; margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 1px; }

.modal-body {
    padding: 18px 22px 4px;
    color: #4a5170; font-size: 14px; line-height: 1.7; text-align: center;
}

.modal-foot {
    padding: 14px 16px 18px;
    display: flex; gap: 10px;
}
.modal-foot .m-btn {
    flex: 1; padding: 11px 0;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: transform .12s, box-shadow .2s;
}
.modal-foot .m-btn:active { transform: translateY(1px); }
.m-btn-cancel { background: #f1f3f8; color: #5b6478; }
.m-btn-cancel:hover { background: #e7eaf3; }
.m-btn-ok {
    background: linear-gradient(135deg, #6a5cff, #ff6ec7);
    color: #fff;
    box-shadow: 0 6px 16px rgba(106,92,255,.35);
}

/* 测试按钮（首页用）*/
.test-btn {
    display: block; margin: 18px auto 0;
    padding: 12px 28px;
    border: none; border-radius: 24px;
    background: linear-gradient(135deg, #6a5cff, #ff6ec7);
    color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(106,92,255,.4);
}
.test-btn:active { transform: translateY(1px); }

/* === 个人中心 === */
.me-card {
    background:#fff; border-radius:16px; padding:20px; margin-bottom:12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.me-card h4 { margin:0 0 14px; font-size:15px; color:#1a2238; font-weight:600; }
.me-menu { list-style:none; margin:0; padding:0; }
.me-menu li {
    display:flex; align-items:center; padding:14px 0;
    border-bottom:1px solid #f1f3f8; cursor:pointer; font-size:14px; color:#3a3f55;
}
.me-menu li:last-child { border-bottom:none; }
.me-menu li .mi { width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
    justify-content:center; font-size:16px; margin-right:12px; flex-shrink:0; }
.me-menu li .mi-blue { background:#eef1ff; color:#6a5cff; }
.me-menu li .mi-green { background:#e8f8ef; color:#27ae60; }
.me-menu li .mi-orange { background:#fff4e6; color:#f39c12; }
.me-menu li .mi-red { background:#fee; color:#e74c3c; }
.me-menu li .mi-purple { background:#f3f0ff; color:#7c3aed; }
.me-menu li .arrow { margin-left:auto; color:#c8ccd8; font-size:18px; }
.me-avatar {
    width:56px; height:56px; border-radius:50%; margin:0 auto 10px;
    background:linear-gradient(135deg,#6a5cff,#ff6ec7); display:flex;
    align-items:center; justify-content:center; font-size:24px; color:#fff;
    box-shadow:0 4px 14px rgba(106,92,255,.35);
}
.me-info { text-align:center; margin-bottom:18px; }
.me-info .uname { font-size:18px; font-weight:600; color:#1a2238; }
.me-info .uid { font-size:12px; color:#8b91a7; margin-top:2px; }

/* === 子页面通用 === */
.sub-header {
    display:flex; align-items:center; padding:0 0 14px; margin-bottom:14px;
    border-bottom:1px solid #eef0f5;
}
.sub-header .back-btn {
    width:32px; height:32px; border:none; background:#f1f3f8; border-radius:10px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-size:18px; color:#5b6478; flex-shrink:0; margin-right:12px;
}
.sub-header .back-btn:active { background:#e5e7ee; }
.sub-header h3 { margin:0; font-size:17px; font-weight:600; color:#1a2238; }

/* 表单组 */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; color:#8b91a7; margin-bottom:5px; font-weight:500; }
.form-group input, .form-group select {
    width:100%; padding:11px 14px; border:1.5px solid #e5e7ee; border-radius:10px;
    font-size:14px; color:#1a2238; background:#fafbfc; outline:none;
    transition: border-color .2s;
}
.form-group input:focus { border-color:#6a5cff; background:#fff; }
.form-group .hint { font-size:11px; color:#aab0c4; margin-top:4px; }
.btn-save {
    width:100%; padding:12px; border:none; border-radius:12px;
    background:linear-gradient(135deg,#6a5cff,#8e5cff); color:#fff;
    font-size:15px; font-weight:600; cursor:pointer; margin-top:8px;
    box-shadow:0 6px 18px rgba(106,92,255,.35);
}
.btn-save:active { transform:translateY(1px); }

/* 列表项 */
.list-item {
    display:flex; align-items:center; padding:12px 14px; margin-bottom:8px;
    background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.03);
}
.list-item .li-body { flex:1; min-width:0; }
.list-item .li-title { font-size:14px; color:#1a2238; font-weight:500; }
.list-item .li-sub { font-size:12px; color:#8b91a7; margin-top:2px; }
.list-item .li-actions { display:flex; gap:6px; flex-shrink:0; margin-left:10px; }
.btn-sm {
    padding:5px 10px; border:none; border-radius:6px; font-size:11px; font-weight:600;
    cursor:pointer; white-space:nowrap;
}
.btn-sm-primary { background:#6a5cff; color:#fff; }
.btn-sm-primary:active { opacity:.85; }
.btn-sm-green { background:#27ae60; color:#fff; }
.btn-sm-green:active { opacity:.85; }
.btn-sm-danger { background:#fee; color:#e74c3c; }
.btn-sm-danger:active { background:#fdd; }
.btn-sm-gray { background:#f1f3f8; color:#5b6478; }

/* 添加栏 */
.add-bar {
    display:flex; gap:6px; margin-bottom:10px;
}
.add-bar input {
    flex:1; padding:7px 10px; border:1.5px solid #e5e7ee; border-radius:8px;
    font-size:13px; outline:none; min-width:0;
}
.add-bar input:focus { border-color:#6a5cff; }
.add-bar button {
    padding:7px 12px; border:none; border-radius:8px;
    background:#6a5cff; color:#fff; font-size:12px; font-weight:600; cursor:pointer;
    white-space:nowrap;
}

/* 分类标签 */
.cat-tab {
    display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;
}
.cat-tag {
    padding:4px 10px; border-radius:14px; font-size:12px; cursor:pointer;
    border:1.5px solid #e5e7ee; background:#fff; color:#5b6478; transition: all .15s;
}
.cat-tag.active { background:#6a5cff; color:#fff; border-color:#6a5cff; }
.cat-tag .del-x {
    display:inline-block; margin-left:6px; font-size:14px; color:rgba(255,255,255,.7);
    cursor:pointer; font-weight:bold;
}

/* === 计划页 === */
.plan-tabs {
    display:flex; background:#fff; border-radius:10px; overflow:hidden; margin-bottom:10px;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.plan-tab {
    flex:1; padding:9px 0; text-align:center; font-size:13px; font-weight:600;
    border:none; background:none; cursor:pointer; color:#8b91a7; transition:all .15s;
}
.plan-tab.active { background:#6a5cff; color:#fff; }

.plan-table { width:100%; border-collapse:separate; border-spacing:0; font-size:11px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.plan-table th {
    background:linear-gradient(135deg,#f8f9fc,#eef0f6); padding:8px 6px; text-align:center;
    font-weight:700; color:#4a5068; border-bottom:2px solid #e5e7ee; white-space:nowrap; font-size:10px;
    position:sticky; top:0; z-index:2;
}
.plan-table td {
    padding:4px 6px; border-bottom:1px solid #f5f6fa; color:#3a3f55; text-align:center;
    white-space:nowrap; vertical-align:middle;
}
.plan-table tbody tr:nth-child(even) td { background:#fafbfe; }
.plan-table .spec-cell { font-weight:700; color:#6a5cff; text-align:left; }
.plan-table .remark-cell { max-width:80px; overflow:hidden; text-overflow:ellipsis; text-align:left; color:#8b91a7; font-size:10px; }
.plan-table .qty-cell { font-weight:700; color:#1a2238; }

.plan-summary {
    display:flex; gap:12px; margin-bottom:10px; font-size:12px; color:#5b6478;
}
.plan-summary b { color:#6a5cff; }

/* 绑定页顶部 */
.bind-header {
    display:flex; align-items:center; padding:14px 16px;
    background:linear-gradient(135deg,#6a5cff 0%,#8e5cff 100%);
    border-radius:0 0 16px 16px; margin:-16px -16px 14px; color:#fff;
    box-shadow:0 4px 14px rgba(106,92,255,.25);
}
.bind-header .back-btn { color:#fff; font-size:22px; background:none; border:none; cursor:pointer; padding:0 8px 0 0; }
.bind-header h3 { flex:1; text-align:center; margin:0; font-size:16px; font-weight:600; margin-right:28px; }

/* 绑定表格 */
.bind-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.bind-table th {
    background:linear-gradient(135deg,#f8f9fc,#eef0f6); padding:10px 10px; text-align:left; font-weight:700;
    color:#4a5068; border-bottom:2px solid #e5e7ee; white-space:nowrap; font-size:11px; text-transform:uppercase; letter-spacing:.3px;
}
.bind-table td {
    padding:9px 10px; border-bottom:1px solid #f5f6fa; color:#3a3f55; vertical-align:middle;
}
.bind-table tbody tr:last-child td { border-bottom:none; }
.bind-table tbody tr:nth-child(even) td { background:#fafbfe; }
.bind-table td:last-child { white-space:nowrap; }

/* === 首页产量 === */
.stat-card {
    background:#fff; border-radius:14px; padding:16px; margin-bottom:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.stat-row { display:flex; gap:10px; }
.stat-item { flex:1; text-align:center; }
.stat-item .sv { font-size:22px; font-weight:700; color:#6a5cff; }
.stat-item .sl { font-size:11px; color:#8b91a7; margin-top:2px; }

.filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.f-btn {
    padding:5px 10px; border-radius:14px; font-size:11px; border:1.5px solid #e5e7ee;
    background:#fff; color:#5b6478; cursor:pointer; font-weight:500;
}
.f-btn.active { background:#6a5cff; color:#fff; border-color:#6a5cff; }

.date-bar { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.date-bar input {
    flex:1; padding:6px 10px; border:1.5px solid #e5e7ee; border-radius:8px;
    font-size:13px; color:#1a2238; outline:none; text-align:center;
}
.date-bar .d-btn {
    width:28px; height:28px; border:none; border-radius:8px; background:#f1f3f8;
    font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:#5b6478; flex-shrink:0;
}
.date-bar .d-btn:active { background:#e5e7ee; }

.output-list { margin-bottom:20px; }
.output-item {
    display:flex; align-items:center; padding:10px 12px; margin-bottom:6px;
    background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.output-item .oi-name { flex:1; font-size:13px; color:#1a2238; font-weight:500; }
.output-item .oi-qty { font-size:15px; font-weight:700; color:#6a5cff; min-width:50px; text-align:right; }
.output-item .oi-date { font-size:11px; color:#8b91a7; margin-left:8px; min-width:45px; text-align:right; }

/* 浮动按钮组 */
.fab-group {
    position:fixed; right:16px; bottom:80px; display:flex; flex-direction:column; gap:10px; z-index:90;
}
.fab {
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.fab-add { background:linear-gradient(135deg,#6a5cff,#ff6ec7); }
.fab-refresh { background:#27ae60; }
.fab-calc { background:#f39c12; }
.fab:active { transform:scale(.9); }

/* === 虚拟数字键盘 === */
.numpad-mask {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(20,22,40,.5); z-index:1100;
    display:flex; flex-direction:column; justify-content:flex-end;
}
.numpad-panel {
    background:#fff; border-radius:18px 18px 0 0; padding:16px 12px env(safe-area-inset-bottom,8px);
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
}
.numpad-display {
    background:#f8f9fc; border-radius:10px; padding:12px 16px; margin-bottom:12px;
    text-align:right; min-height:44px; display:flex; align-items:center; justify-content:flex-end;
}
.numpad-display .nd-label { flex:1; text-align:left; font-size:12px; color:#8b91a7; }
.numpad-display .nd-value { font-size:26px; font-weight:700; color:#1a2238; letter-spacing:1px; }
.numpad-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.nk {
    padding:14px 0; border:none; border-radius:10px; font-size:18px; font-weight:600;
    background:#f1f3f8; color:#1a2238; cursor:pointer; text-align:center;
    transition: background .1s;
}
.nk:active { background:#e0e3ee; }
.nk-del { background:#fee; color:#e74c3c; font-size:14px; }
.nk-ok { background:linear-gradient(135deg,#6a5cff,#8e5cff); color:#fff; }
.nk-zero { grid-column: span 1; }

/* 添加产量弹出层 */
.prod-picker-mask {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(20,22,40,.55); z-index:1000;
    display:flex; flex-direction:column; justify-content:flex-end;
}
.prod-picker {
    background:#fff; border-radius:18px 18px 0 0;
    max-height:75vh; display:flex; flex-direction:column;
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
}
.prod-picker-head {
    padding:14px 16px; border-bottom:1px solid #f1f3f8;
    display:flex; align-items:center; justify-content:space-between;
}
.prod-picker-head h3 { margin:0; font-size:16px; font-weight:600; color:#1a2238; }
.prod-picker-head .pp-close { border:none; background:none; font-size:22px; color:#8b91a7; cursor:pointer; }
.prod-picker-body { flex:1; overflow-y:auto; padding:12px 16px 20px; }
.pp-cat { margin-bottom:16px; }
.pp-cat-title {
    font-size:11px; color:#fff; font-weight:700; margin-bottom:8px;
    background:linear-gradient(90deg,#6a5cff,#8e5cff); padding:3px 10px;
    border-radius:20px; display:inline-block; letter-spacing:.5px;
}
.pp-products { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pp-prod {
    padding:7px 4px; border-radius:10px; font-size:13px; background:#f4f5fb;
    color:#3a3f55; cursor:pointer; border:1.5px solid #e8eaf0;
    transition:all .15s; font-weight:500; text-align:center;
}
.pp-prod:active { background:#6a5cff; color:#fff; border-color:#6a5cff; transform:scale(.95); }
.pp-prod.common { border-color:#6a5cff; color:#6a5cff; font-weight:700; background:#f0eeff; }

/* 安全区适配（iPhone 等）*/
@supports(padding: max(0px)) {
    .tabbar { padding-bottom: env(safe-area-inset-bottom); height: calc(62px + env(safe-area-inset-bottom)); }
    .app { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}