:root {
    /* Common Variables */
    --font-main: 'Noto Sans TC', sans-serif;
    --font-digit: 'Outfit', sans-serif;

    /* Spacing & Layout */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --header-height: 60px;
    --nav-height: 70px;

    /* Default Theme (Deep Matcha Green) */
    --primary-color: #6B8E23;
    /* Deep Matcha */
    --primary-light: #8A9A5B;
    --secondary-color: #3B5323;
    --accent-color: #E6C84C;
    --expense-color: #e74c3c;
    --bg-income-light: rgba(107, 142, 35, 0.1);
    --bg-expense-light: rgba(231, 76, 60, 0.1);
    --bg-color: #f6f8f4;
    --card-bg: #ffffff;
    --text-main: #2d3436;
    --text-secondary: #636e72;
    --border-color: #e0e6d8;
    --gradient-primary: linear-gradient(135deg, #6B8E23 0%, #8A9A5B 100%);
    --gradient-success: linear-gradient(135deg, #6B8E23 0%, #556B2F 100%);
    --gradient-warning: linear-gradient(135deg, #C8B15F 0%, #A69246 100%);
    /* Muted Yellow */
    --gradient-expense: linear-gradient(135deg, #e74c3c 0%, #ff7675 100%);
    --shadow-sm: 0 2px 8px rgba(107, 142, 35, 0.15);
    --shadow-md: 0 8px 16px rgba(107, 142, 35, 0.2);
    --shadow-lg: 0 16px 32px rgba(107, 142, 35, 0.25);
    --glass-bg: rgba(255, 255, 255, 0.92);
}

/* Inventory Management Theme */
.mode-inventory {
    --primary-color: #6B8E23;
    --primary-light: #8A9A5B;
    --secondary-color: #8A9A5B;
    --bg-color: #f6f8f4;
    --card-bg: rgba(255, 255, 255, 0.7);
    --text-main: #2c3e50;
    --text-secondary: #5d6d7e;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
}

/* Packing Mode Theme (Green，與記帳一致) */
.mode-packing {
    --primary-color: #6B8E23;
    --primary-light: #8A9A5B;
    --secondary-color: #8A9A5B;
    --accent-color: #8A9A5B;
    --bg-color: #f6f8f4;
    --bg-income-light: rgba(107, 142, 35, 0.10);
    --gradient-primary: linear-gradient(135deg, #6B8E23 0%, #8A9A5B 100%);
    --gradient-success: linear-gradient(135deg, #6B8E23 0%, #8A9A5B 100%);
    --gradient-warning: linear-gradient(135deg, #f0a830 0%, #e08a1e 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}


body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    /* Increased line height */
    padding-bottom: var(--nav-height);
    overflow-x: hidden;
    font-size: 18px;
    /* Base font size reverted to 18px */
}

#app {
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
    padding: var(--spacing-md);
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 700;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

.amount {
    font-family: var(--font-digit);
    font-weight: 600;
}

/* Bottom Navigation - Floating Dock Style */
.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 0 10px;
}

.nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 60px;
    height: 100%;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-item.active i {
    transform: translateY(-4px);
}

/* FAB - Integrated into dock but popping out */
.nav-item.fab {
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    margin-bottom: 40px;
    /* Pop out effect */
    box-shadow: 0 8px 16px rgba(93, 172, 129, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid var(--bg-color);
}

.nav-item.fab i {
    font-size: 24px;
    margin-bottom: 0;
}

.nav-item.fab:active {
    transform: scale(0.95);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page {
    animation: fadeIn 0.4s ease-out;
}

/* Redesigned Inventory Dashboard */
.mode-inventory .card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.inventory-card {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    padding: 16px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.inventory-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.85);
}

.inventory-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--status-color, #eee);
}

.inventory-card .item-name {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.inventory-card .item-spec {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}

.inventory-card .stock-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--status-color, #2ecc71);
    margin-top: auto;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-color);
    position: absolute;
    top: 12px;
    right: 12px;
    box-shadow: 0 0 8px var(--status-color);
}

/* Components */
.card {
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    padding: 20px;
    /* More padding */
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
    border: none;
}

.mode-card:active {
    transform: scale(0.98);
}

.mode-card:hover {
    box-shadow: var(--shadow-md);
}

.header-title {
    font-size: 28px;
    /* Larger header */
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

/* Utility for small text */
small {
    font-size: 14px;
    /* Even small text should be readable */
}

/* Form Layout Improvements */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Form Styles - Moved from JS */
.label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 16px;
    color: var(--text-main);
}

.input-field {
    width: 100%;
    max-width: 100%;
    /* Prevent overflow */
    box-sizing: border-box;
    /* Ensure padding includes in width */
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    font-family: inherit;
    font-size: 18px;
    color: var(--primary-color);
    /* Change text color to green */
    appearance: none;
    -webkit-appearance: none;
}

/* iOS Date Input Fix */
input[type="date"].input-field {
    min-width: 0;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}

/* Advanced Stats Styles */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

.segmented-control {
    display: flex;
    background: #e0e0e0;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.segmented-control button {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.segmented-control button.active {
    background: white;
    color: var(--text-main);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 0;
    width: 100%;
}

.chart-svg {
    width: 100%;
    height: auto;
    max-width: 600px;
}

.axis-line {
    stroke: #bdc3c7;
    stroke-width: 2;
}

.grid-line {
    stroke: #f0f0f0;
    stroke-width: 1;
}

.chart-text {
    font-size: 12px;
    fill: var(--text-secondary);
    font-family: var(--font-digit);
}

.chart-label {
    font-size: 13px;
    fill: var(--text-main);
    font-family: var(--font-main);
    font-weight: 500;
}

.pie-text {
    font-size: 12px;
    fill: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.clickable-row {
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 8px;
    padding: 8px;
    margin: -8px;
    /* Offset padding */
}

.clickable-row:active {
    background: rgba(0, 0, 0, 0.05);
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 16px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-size: 16px;
}

.submit-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: white;
    border: none;
    padding: 18px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.type-btn {
    font-size: 16px;
}

.type-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Search Bar Styles */
.search-container {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 45px;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    font-size: 16px;
    background: white;
    color: var(--text-main);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.1);
}

.search-icon {
    position: absolute;
    left: 18px;
    color: var(--text-secondary);
    font-size: 16px;
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    display: none;
}

.search-input:not(:placeholder-shown)~.search-clear {
    display: block;
}
/* 客戶版「選配功能」收合面板：隱藏瀏覽器預設三角形，改用右側「展開／收起」按鈕 */
details.hb-feat > summary::-webkit-details-marker { display: none; }
details.hb-feat .hb-feat-chev { transition: transform 0.2s; }
details.hb-feat[open] .hb-feat-chev { transform: rotate(180deg); }
details.hb-feat .hb-feat-close { display: none; }
details.hb-feat[open] .hb-feat-open { display: none; }
details.hb-feat[open] .hb-feat-close { display: inline; }

/* 客戶版：標籤式輸入(取代「一行一個」文字框) */
.hb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 50px; padding: 6px 6px 6px 8px; border: 1px solid var(--border-color, #ddd); border-radius: 12px; background: #fff; cursor: text; box-sizing: border-box; }
.hb-tags:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(111, 138, 63, 0.15); }
.hb-tag { display: inline-flex; align-items: center; max-width: 100%; background: var(--bg-income-light, #eef3e4); color: var(--text-main); border-radius: 18px; padding: 2px 2px 2px 12px; font-size: 15px; line-height: 1.4; word-break: break-all; }
.hb-tag-x { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.hb-tag-x:active { background: rgba(0, 0, 0, 0.08); }
.hb-tag-in { flex: 1; min-width: 130px; border: none; outline: none; background: transparent; font-size: 16px; padding: 8px 4px; color: var(--text-main); }
.hb-tag-add { flex: none; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 15px; cursor: pointer; }
/* 客戶版：可收合的設定列(支出類別) */
details.hb-acc { border: 1px solid var(--border-color, #ddd); border-radius: 12px; margin-bottom: 10px; background: #fff; }
details.hb-acc > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 56px; cursor: pointer; }
details.hb-acc > summary::-webkit-details-marker { display: none; }
.hb-acc-name { display: block; font-weight: 700; }
.hb-acc-sub { display: block; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-acc-chev { flex: none; color: var(--text-secondary); transition: transform 0.2s; }
details.hb-acc[open] .hb-acc-chev { transform: rotate(180deg); }
details.hb-acc > .hb-acc-body { padding: 12px 14px 14px; border-top: 1px solid #f0f0f0; }

/* 客戶版：登入 PIN、身分標籤、權限勾選 */
.hb-role-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--bg-income-light, #eef3e4); color: var(--primary-color); font-size: 12px; font-weight: 700; line-height: 1.5; vertical-align: 0.15em; }
.hb-role-badge:empty { display: none; }
.hb-pin-field { font-size: 22px !important; letter-spacing: 8px; -webkit-text-security: disc; text-align: center; }
.hb-pin-dots { display: flex; justify-content: center; gap: 16px; margin: 22px 0 10px; }
.hb-pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary-color); }
.hb-pin-dots span.on { background: var(--primary-color); }
.hb-pin-dots.shake { animation: hbShake 0.35s; }
@keyframes hbShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.hb-pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 300px; margin: 0 auto; }
.hb-pin-pad button { height: 64px; border-radius: 50%; border: 1px solid var(--border-color, #ddd); background: #fff; font-size: 26px; font-weight: 600; color: var(--text-main); cursor: pointer; }
.hb-pin-pad button:active { background: var(--bg-income-light, #eef3e4); }
.hb-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; cursor: pointer; }
.hb-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* 客戶版：每頁最上面的帳號列(目前是誰＋登出) */
.hb-account-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 0 16px; min-height: 44px; background: #fff; border-bottom: 1px solid var(--border-color, #e5e5e5); font-size: 14px; color: var(--text-main); }
.hb-account-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-account-name i { color: var(--primary-color); font-size: 18px; }
.hb-account-bar button { flex: none; min-height: 44px; padding: 0 12px; border: none; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; }
.hb-account-bar button:active { color: var(--expense-color, #c0392b); }

/* 手機快速連點(輸入 PIN、加減數量)不要被當成「點兩下放大」；雙指縮放仍可用 */
html { touch-action: manipulation; }
.hb-pin-pad button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
/* 可收合列外層的刪除鈕 */
.hb-acc-del { flex: none; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--bg-expense-light, #fdecea); color: var(--expense-color, #c0392b); font-size: 15px; cursor: pointer; }

/* 客戶版「設定」頁的子頁入口 */
.hb-set-link { width: 100%; min-height: 60px; background: #fff; border: 1px solid var(--border-color, #ddd); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--text-main); font-size: 15px; }
.hb-set-link > i:first-child { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--bg-income-light, #eef3e4); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.hb-pin-field::placeholder { letter-spacing: normal; font-size: 15px; }

/* ===== 客戶版：按鈕回饋(滑過、按下、等待雲端) ===== */
.hb-cust button, .hb-cust .mode-card, .hb-cust label.submit-btn, .hb-cust .nav-item { transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.15s ease, background-color 0.12s ease; cursor: pointer; }
@media (hover: hover) {
  .hb-cust button:not(:disabled):hover, .hb-cust label.submit-btn:hover { filter: brightness(0.94); }
  .hb-cust .mode-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10); }
  .hb-cust .hb-tag-x:hover { background: rgba(0, 0, 0, 0.08); color: var(--expense-color, #c0392b); }
}
.hb-cust button:not(:disabled):active, .hb-cust label.submit-btn:active, .hb-cust .nav-item:active { transform: scale(0.96); filter: brightness(0.86); }
.hb-cust .mode-card:active { transform: scale(0.98); }
.hb-cust button:focus-visible, .hb-cust .mode-card:focus-visible { outline: 3px solid rgba(111, 138, 63, 0.45); outline-offset: 2px; }
.hb-cust button:disabled { opacity: 0.55; cursor: not-allowed; }
/* 等待雲端：剛按的按鈕轉圈、不能重複按 */
.hb-cust .hb-busy { position: relative; pointer-events: none; opacity: 0.8; padding-right: 32px !important; }
.hb-cust .hb-busy::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hbSpin 0.7s linear infinite; }
@keyframes hbSpin { to { transform: rotate(360deg); } }
/* 頂端進度條 */
#hb-netbar { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 10000; background: var(--primary-color, #6f8a3f); opacity: 0; pointer-events: none; }
#hb-netbar.on { opacity: 1; animation: hbBar 1.6s ease-in-out infinite; }
@keyframes hbBar { 0% { left: 0; width: 0; } 50% { left: 15%; width: 60%; } 100% { left: 100%; width: 0; } }

/* 客戶版：庫存提醒 */
.hb-stock { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hb-stock.short { color: var(--expense-color, #c0392b); font-weight: 800; }
.card.hb-stock-banner, .hb-stock-banner { background: var(--bg-expense-light, #fdecea); color: var(--expense-color, #c0392b); border-left: 5px solid var(--expense-color, #c0392b); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.inventory-card.hb-neg { outline: 2px solid var(--expense-color, #c0392b); background: var(--bg-expense-light, #fdecea); }
.inventory-card.hb-neg .stock-value { color: var(--expense-color, #c0392b); }
.hb-neg-tag { font-size: 11px; font-weight: 800; color: #fff; background: var(--expense-color, #c0392b); border-radius: 8px; padding: 1px 6px; display: inline-block; margin-top: 4px; }

/* 客戶版：待到貨清單 */
.card.hb-pending { border-left: 5px solid #2f80ed; background: #eef5ff; margin-bottom: 14px; }
.hb-pend-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.hb-pend-btn { flex: none; min-height: 40px; padding: 0 16px; border-radius: 20px; border: none; background: #2f80ed; color: #fff; font-weight: 700; font-size: 14px; }
.hb-pend-form { padding: 8px 0 12px; }

/* 客戶版：庫存分類分頁、單位、低於安全庫存 */
.hb-inv-tabs { display: flex; gap: 6px; background: #e9e4dd; padding: 4px; border-radius: 12px; margin-bottom: 14px; overflow-x: auto; }
.hb-inv-tabs button { flex: 1; min-width: 72px; min-height: 40px; border: none; border-radius: 10px; background: transparent; font-weight: 700; font-size: 14px; color: var(--text-main); white-space: nowrap; }
.hb-inv-tabs button.on { background: var(--primary-color); color: #fff; }
.hb-unit { font-size: 12px; color: var(--text-secondary); margin-top: -2px; }
.card.hb-low-banner { background: #fff8e1; color: #8a5a00; border-left: 5px solid #f2b705; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.hb-stockset { border: 1px solid var(--border-color, #ddd); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }

/* 客戶版：雲端程式需要更新 */
.card.hb-gas-notice { background: #fff8e1; color: #6b4e00; border-left: 5px solid #f2b705; font-size: 14px; line-height: 1.7; }

/* 客戶版：小提示 */
.hb-toast { position: fixed; left: 50%; bottom: calc(128px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3000; max-width: calc(100% - 32px); background: rgba(40, 40, 40, 0.92); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); pointer-events: none; }