:root{--green: #10b981;--gold: #f59e0b;--brown: #92400e;--coral: #f43f5e;--purple: #a855f7;--blue: #0ea5e9;--bg: var(--color-background-primary, #fff);--bg2: var(--color-background-secondary, #f7f7f5);--bg3: var(--color-background-tertiary, #f0efe9);--text: var(--color-text-primary, #1a1a1a);--text2: var(--color-text-secondary, #666);--text3: var(--color-text-tertiary, #aaa);--border: var(--color-border-tertiary, #e8e8e4);--radius: 10px;--max-w: 940px}.app{max-width:var(--max-w);margin:0 auto;padding:16px}.header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:8px}.header-logo{cursor:pointer}.header-title{font-size:26px;font-weight:700;letter-spacing:-.5px;margin:0;line-height:1.1}.header-sub{font-size:12px;color:var(--text2);margin:3px 0 0;max-width:340px}.lang-btn{padding:4px 10px;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:6px;background:var(--bg2);cursor:pointer;color:var(--text);flex-shrink:0}.search-wrap{position:relative;margin-bottom:14px}.search-input{width:100%;padding:11px 14px 11px 38px;font-size:15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:border-radius .15s}.search-input.open{border-radius:var(--radius) var(--radius) 0 0;border-color:#bbb}.search-icon{position:absolute;left:12px;top:13px;opacity:.35}.search-clear{position:absolute;right:10px;top:10px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text3);line-height:1}.search-drop{position:absolute;top:100%;left:0;right:0;z-index:20;border:1px solid #bbb;border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:var(--bg);max-height:70vh;overflow-y:auto;box-shadow:0 6px 20px #00000014}.search-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f0f0ec;transition:background .08s}.search-item:last-child{border-bottom:none}.search-item:hover,.search-item.active{background:var(--bg2)}.tabs{display:flex;gap:2px;margin-bottom:14px;background:var(--bg3);border-radius:8px;padding:3px}.tab{flex:1;padding:8px 4px;font-size:13px;font-weight:400;border:none;border-radius:6px;background:transparent;color:var(--text2);cursor:pointer;text-align:center;transition:all .15s}.tab.active{font-weight:600;background:var(--bg);color:var(--text);box-shadow:0 1px 3px #00000014}.tab-badge{margin-left:4px;font-size:10px;font-weight:700;background:var(--green);color:#fff;border-radius:10px;padding:1px 6px;vertical-align:middle}.ranking-grid{display:grid;grid-template-columns:1fr;gap:14px}.ranking-col{border:1px solid var(--border);border-radius:12px;overflow:hidden}.ranking-header{padding:8px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.ranking-header h3{font-size:14px;font-weight:600;margin:0}.chips{display:flex;gap:4px;padding:6px 10px;flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.chip{font-size:10px;padding:3px 8px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text3);cursor:pointer;white-space:nowrap;transition:all .12s}.chip.active{font-weight:600}.rank-item{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;border-radius:8px;transition:background .1s}.rank-item:hover{background:var(--bg2)}.rank-num{font-size:12px;font-weight:600;color:var(--text3);min-width:16px;text-align:right}.rank-bar{height:4px;border-radius:2px;flex:1;max-width:80px}.rank-bar-fill{height:4px;border-radius:2px;min-width:4px}.rank-count{font-size:9px;font-weight:600;color:var(--text2)}.detail-header{padding:14px 16px;background:var(--bg2);border-radius:12px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start}.detail-header .thumb{flex-shrink:0}.detail-sci{font-size:18px;font-weight:600;font-style:italic;margin:0;color:var(--text)}.detail-common{font-size:13px;color:var(--text2);margin:2px 0 0}.view-toggle{display:flex;gap:2px;background:var(--bg3);border-radius:5px;padding:2px}.view-toggle button{padding:3px 12px;font-size:11px;border:none;border-radius:4px;cursor:pointer;background:transparent;color:var(--text2)}.view-toggle button.active{font-weight:600;background:var(--bg);color:var(--text);box-shadow:0 1px 2px #0000000f}.ix-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;background:var(--bg);display:flex;gap:10px;align-items:flex-start;border-left-width:3px}.ix-card .thumb{flex-shrink:0}.garden-plants{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.garden-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;border:1px solid rgba(45,125,70,.2);background:#2d7d4608}.garden-stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}.garden-stat{text-align:center;padding:8px 14px;border-radius:8px}.graph-container svg{width:100%;height:auto;display:block}.graph-legend{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}.footer{text-align:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}.footer p{font-size:10px;color:var(--text3);margin:0;line-height:1.8}.footer a{color:var(--text3);text-decoration:underline}.thumb{border-radius:6px;object-fit:cover;background:var(--bg3);flex-shrink:0}.thumb-placeholder{display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--bg3);flex-shrink:0;opacity:.25}.badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:500;white-space:nowrap}.badge-type{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px;text-align:center;min-width:36px}.text-italic{font-style:italic}.text-muted{color:var(--text2)}.text-small{font-size:11px}.highlight{background:#f5e64266;border-radius:2px;padding:0 1px;font-weight:600}.back-btn{margin-top:12px;padding:8px 20px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);cursor:pointer;color:var(--text2)}@media(min-width:640px){.app{padding:20px}.header-title{font-size:28px}.header-sub{font-size:13px}.ranking-grid{grid-template-columns:1fr 1fr}.search-input{font-size:15px;padding:12px 16px 12px 40px}.detail-header{padding:16px 20px;gap:16px}.detail-sci{font-size:20px}.ix-card{padding:12px 16px;gap:12px}}@media(min-width:1024px){.app{padding:24px 20px}.garden-stats{gap:12px}.garden-stat{padding:10px 20px}}@media(max-width:380px){.header-title{font-size:22px}.header-sub{font-size:11px;max-width:200px}.tab{font-size:12px;padding:7px 2px}.chips{gap:3px;padding:4px 8px}.chip{font-size:9px;padding:2px 6px}.rank-item{padding:4px 8px;gap:6px}.detail-header{flex-direction:column;align-items:center;text-align:center}.ix-card{flex-direction:column;align-items:stretch}.search-drop{max-height:50vh}}@media(hover:none){.rank-item{padding:8px 12px;min-height:44px}.search-item{padding:10px 12px;min-height:44px}.tab{padding:10px 4px}.chip{padding:4px 10px;min-height:32px}.back-btn{padding:10px 24px;min-height:44px}}@media(max-height:500px)and (orientation:landscape){.search-drop{max-height:40vh}.graph-container svg{max-height:50vh}}@media print{.search-wrap,.tabs,.lang-btn,.back-btn,.view-toggle,.chips{display:none}.app{max-width:100%;padding:0}.ranking-grid{grid-template-columns:1fr 1fr}}