:root{--bg:#f8f9fa;--surface:#fff;--primary:#5b7fa4;--primary-light:#e8eef4;--primary-dark:#3d5a80;--text:#2b2d42;--text-light:#6c757d;--border:#dee2e6;--danger:#e07a5f;--success:#81b29a;--warning:#f2cc8f;--radius:12px;--shadow:0 1px 3px #00000014;--shadow-lg:0 4px 12px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{flex-direction:column;min-height:100vh;padding-bottom:72px;display:flex}.bottom-nav{background:var(--surface);border-top:1px solid var(--border);padding:8px 0 max(8px, env(safe-area-inset-bottom));z-index:100;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 8px #0000000d}.nav-btn{color:var(--text-light);cursor:pointer;background:0 0;border:none;border-radius:8px;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:6px 16px;font-size:11px;transition:color .15s;display:flex}.nav-btn.active{color:var(--primary-dark);font-weight:600}.nav-btn svg{width:24px;height:24px}.page{width:100%;max-width:600px;margin:0 auto;padding:16px}.page-title{color:var(--text);margin-bottom:16px;font-size:20px;font-weight:700}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:12px;padding:16px}.quick-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.quick-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text);flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:90px;padding:20px 12px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.quick-btn:active{transform:scale(.97)}.quick-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);flex-direction:row;grid-column:1/-1;min-height:70px;font-size:16px}.quick-btn.primary:active{background:var(--primary-dark)}.quick-btn-icon{font-size:24px}.form-group{margin-bottom:16px}.form-label{color:var(--text-light);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input,.form-select,.form-textarea{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);appearance:none;border-radius:8px;padding:12px;font-family:inherit;font-size:16px}.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236c757d'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.form-textarea{resize:vertical;min-height:80px}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.scale-row{gap:8px;display:flex}.scale-btn{border:2px solid var(--border);background:var(--surface);cursor:pointer;text-align:center;color:var(--text);border-radius:8px;flex:1;padding:12px 4px;font-size:16px;font-weight:600;transition:all .15s}.scale-btn.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}.scale-btn:active{transform:scale(.95)}.chip-group{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1.5px solid var(--border);cursor:pointer;background:var(--surface);color:var(--text);-webkit-user-select:none;user-select:none;border-radius:20px;padding:8px 14px;font-size:14px;transition:all .15s}.chip.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark);font-weight:500}.btn{cursor:pointer;border:none;border-radius:10px;width:100%;padding:14px 24px;font-size:16px;font-weight:600;transition:all .15s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{background:var(--primary-dark)}.btn-secondary{background:var(--primary-light);color:var(--primary-dark)}.btn-row{gap:8px;margin-top:16px;display:flex}.btn-row .btn{flex:1}.feed-item{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);gap:12px;margin-bottom:8px;padding:14px;display:flex}.feed-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.feed-body{flex:1;min-width:0}.feed-title{margin-bottom:2px;font-size:15px;font-weight:600}.feed-meta{color:var(--text-light);font-size:13px}.feed-detail{color:var(--text-light);margin-top:4px;font-size:13px}.type-abc .feed-icon{color:var(--danger);background:#fde8e4}.type-sleep .feed-icon{color:#5b67a4;background:#e4e8fd}.type-meal .feed-icon{color:var(--success);background:#e8f4e4}.type-mood .feed-icon{color:#c5943a;background:#fdf4e4}.type-skill .feed-icon{color:#3d8b7a;background:#e4f4f0}.filter-row{-webkit-overflow-scrolling:touch;gap:8px;margin-bottom:16px;padding-bottom:4px;display:flex;overflow-x:auto}.filter-chip{border:1.5px solid var(--border);cursor:pointer;background:var(--surface);color:var(--text);white-space:nowrap;border-radius:20px;padding:8px 14px;font-size:13px;transition:all .15s}.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.stat-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.stat-card{background:var(--surface);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);padding:16px}.stat-value{color:var(--primary-dark);font-size:28px;font-weight:700}.stat-label{color:var(--text-light);text-transform:uppercase;letter-spacing:.3px;margin-top:4px;font-size:12px}.chart-container{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:16px;padding:16px}.section-title{color:var(--text);margin-bottom:12px;font-size:16px;font-weight:700}.breakdown-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 0;font-size:14px;display:flex}.breakdown-row:last-child{border-bottom:none}.breakdown-bar{background:var(--primary);border-radius:3px;height:6px;margin-top:4px}.modal-overlay{background:var(--bg);z-index:200;-webkit-overflow-scrolling:touch;position:fixed;inset:0;overflow-y:auto}.modal-header{border-bottom:1px solid var(--border);background:var(--surface);z-index:10;justify-content:space-between;align-items:center;padding:16px;display:flex;position:sticky;top:0}.modal-title{font-size:18px;font-weight:700}.modal-close{color:var(--text-light);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:28px;line-height:1}.modal-body{max-width:600px;margin:0 auto;padding:16px}.toast{background:var(--text);color:#fff;z-index:300;box-shadow:var(--shadow-lg);border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;animation:.3s toast-in;position:fixed;bottom:84px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.install-banner{background:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius);justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:14px 16px;display:flex}.install-banner p{color:var(--primary-dark);font-size:14px}.install-banner button{background:var(--primary);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600}.install-dismiss{color:var(--text-light)!important;background:0 0!important;padding:0 4px!important;font-size:20px!important}.date-range{align-items:center;gap:8px;margin-bottom:16px;display:flex}.date-range input{border:1px solid var(--border);border-radius:8px;flex:1;padding:10px;font-family:inherit;font-size:14px}.empty-state{text-align:center;color:var(--text-light);padding:40px 20px}.empty-state p{margin-top:8px;font-size:14px}.matrix-table{border-collapse:collapse;width:100%;font-size:13px}.matrix-table th{color:var(--text-light);text-transform:uppercase;letter-spacing:.3px;text-align:center;border-bottom:2px solid var(--border);white-space:nowrap;padding:6px 8px;font-size:11px;font-weight:600}.matrix-table th:first-child{text-align:left}.matrix-row-label{white-space:nowrap;border-bottom:1px solid var(--border);padding:8px 8px 8px 0;font-size:13px;font-weight:600}.matrix-cell{text-align:center;border-bottom:1px solid var(--border);border-radius:4px;min-width:36px;padding:8px 6px;font-size:14px;font-weight:600}.btn-danger{background:var(--danger);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:14px 24px;font-size:16px;font-weight:600}.btn-danger:active{opacity:.85}.btn-danger-outline{color:var(--danger);border:1.5px solid var(--danger);cursor:pointer;background:0 0;border-radius:10px;width:100%;padding:12px 24px;font-size:14px;font-weight:600}.btn-danger-outline:active{background:#e07a5f14}.feed-item-tap{cursor:pointer;transition:background .1s}.feed-item-tap:active{background:var(--primary-light)}.quick-add-page{flex-direction:column;justify-content:flex-end;min-height:calc(100vh - 72px);display:flex}.quick-add-page .install-banner{margin-bottom:auto}.welcome{max-width:540px;min-height:100vh;padding:0 20px env(safe-area-inset-bottom);flex-direction:column;margin:0 auto;display:flex}.welcome-header{text-align:center;padding:48px 0 24px}.welcome-title{color:var(--primary-dark);letter-spacing:-.5px;margin-bottom:4px;font-size:32px;font-weight:800}.welcome-subtitle{color:var(--text-light);font-size:15px}.welcome-body{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.welcome-section{margin-bottom:20px}.welcome-section h2{color:var(--text);margin-bottom:6px;font-size:15px;font-weight:700}.welcome-section p{color:var(--text-light);font-size:14px;line-height:1.55}.welcome-tabs{flex-direction:column;gap:8px;display:flex}.welcome-tab{background:var(--primary-light);color:var(--text);border-radius:8px;padding:10px 14px;font-size:13px;line-height:1.4}.welcome-tab strong{color:var(--primary-dark);margin-bottom:2px;font-size:14px;display:block}.welcome-tab span{color:var(--text-light)}.welcome-cta{flex-shrink:0;margin:16px 0 24px}.help-btn{border:1.5px solid var(--border);background:var(--surface);width:32px;height:32px;color:var(--text-light);cursor:pointer;z-index:50;box-shadow:var(--shadow);border-radius:50%;justify-content:center;align-items:center;font-size:16px;font-weight:700;line-height:1;display:flex;position:fixed;top:12px;right:12px}.help-btn:active{background:var(--primary-light);color:var(--primary-dark)}