:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--text-primary: #e8e8e8;--text-secondary: #a0a0b0;--accent-green: #4ecca3;--accent-gold: #f0c040;--accent-red: #e74c3c;--accent-blue: #3498db;--border-color: #2a2a4a;--radius: 12px;--nav-height: 64px;--header-height: 56px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh;max-width:428px;margin:0 auto}.main-content{flex:1;overflow-y:auto;padding:12px;padding-bottom:calc(var(--nav-height) + 12px);-webkit-overflow-scrolling:touch}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);height:var(--header-height)}.header-user{display:flex;align-items:center;gap:8px}.header-level{background:var(--accent-green);color:#000;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:700}.header-coins{display:flex;align-items:center;gap:4px;background:#f0c04026;padding:6px 12px;border-radius:20px;font-weight:600;color:var(--accent-gold)}.navbar{display:flex;justify-content:space-around;align-items:center;background:var(--bg-secondary);border-top:1px solid var(--border-color);height:var(--nav-height);position:fixed;bottom:0;left:0;right:0;max-width:428px;margin:0 auto;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border:none;background:none;color:var(--text-secondary);font-size:11px;cursor:pointer;transition:color .2s}.nav-item.active{color:var(--accent-green)}.nav-icon{font-size:22px}.card{background:var(--bg-card);border-radius:var(--radius);padding:16px;margin-bottom:12px;border:1px solid var(--border-color)}.card-title{font-size:16px;font-weight:600;margin-bottom:12px}.slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.slot{aspect-ratio:1;border-radius:var(--radius);border:2px dashed var(--border-color);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:8px;font-size:12px;text-align:center}.slot:active{transform:scale(.95)}.slot.empty{background:#ffffff08}.slot.growing{background:#4ecca31a;border-color:var(--accent-green);border-style:solid}.slot.ready{background:#f0c04026;border-color:var(--accent-gold);border-style:solid;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #f0c0404d}50%{box-shadow:0 0 12px 4px #f0c04033}}.slot-emoji{font-size:28px;margin-bottom:4px}.slot-plant-img{width:56px;height:56px;object-fit:contain;transition:all .5s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.slot-plant-ready{animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.slot-timer{font-size:11px;color:var(--accent-green);font-variant-numeric:tabular-nums}.slot-label{font-size:10px}.slot-harvest-label{color:var(--accent-gold);font-weight:600;font-size:11px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius);border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;width:100%}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent-green);color:#000}.btn-sell{background:var(--accent-gold);color:#000}.btn-disabled{opacity:.4;pointer-events:none}.list-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-color)}.list-item:last-child{border-bottom:none}.list-item-left{display:flex;align-items:center;gap:12px}.list-item-emoji{font-size:32px}.list-item-info h4{font-size:14px;margin-bottom:2px}.list-item-info p{font-size:12px;color:var(--text-secondary)}.loading-screen,.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px}.spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:flex-end;z-index:200}.modal-content{background:var(--bg-secondary);width:100%;max-width:428px;margin:0 auto;border-radius:var(--radius) var(--radius) 0 0;padding:20px 16px;max-height:70vh;overflow-y:auto}.modal-title{font-size:18px;font-weight:700;margin-bottom:16px;text-align:center}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:300;padding:20px}.tutorial-card{background:var(--bg-secondary);border-radius:20px;padding:32px 24px;max-width:360px;width:100%;text-align:center;border:1px solid var(--border-color);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tutorial-emoji{font-size:56px;margin-bottom:16px}.tutorial-title{font-size:20px;font-weight:700;margin-bottom:12px}.tutorial-text{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px}.tutorial-dots{display:flex;justify-content:center;gap:8px;margin-bottom:24px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--border-color);transition:all .3s}.tutorial-dot.active{background:var(--accent-green);width:24px;border-radius:4px}.tutorial-dot.done{background:var(--accent-green);opacity:.5}.tutorial-actions{display:flex;gap:12px}.tutorial-btn-back{background:var(--border-color);color:var(--text-secondary);flex:0 0 auto;width:auto;padding:10px 20px}.tutorial-btn-next{flex:1}