:root{--bg-color:#f0f0f0;--text-color:#333;--card-bg-color:#fff;--card-border-color:#eee;--button-bg:#ff4d6d;--button-hover:#ff758f;--modal-overlay:#000000b3;--accent-color:#ff4d6d;--chat-bg:#f9f9f9;--my-bubble:#ff4d6d;--other-bubble:#fff}body.dark-mode{--bg-color:#1a1a1a;--text-color:#f0f0f0;--card-bg-color:#2d2d2d;--card-border-color:#444;--chat-bg:#222;--my-bubble:#ff4d6d;--other-bubble:#333}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background-color:var(--bg-color);color:var(--text-color);flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex}.app-container{flex-direction:column;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}#content-container{flex-direction:column;flex:1;width:100%;display:flex;position:relative;overflow:hidden}.tab-content{box-sizing:border-box;flex-direction:column;flex:1;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow-y:auto}.bottom-nav{background-color:var(--card-bg-color);border-top:1px solid var(--card-border-color);z-index:9999;flex-shrink:0;justify-content:space-around;align-items:center;width:100%;height:65px;display:flex}.nav-item{cursor:pointer;height:100%;color:var(--text-color);opacity:.5;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;transition:opacity .2s,color .2s;display:flex}.nav-item.active{opacity:1;color:var(--accent-color)}.nav-icon{margin-bottom:4px;font-size:22px}.nav-label{font-size:10px;font-weight:700}.login-overlay{z-index:10000;color:#fff;background:linear-gradient(135deg,#ff4d6d,#ff758f);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.login-content{text-align:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background-color:#ffffff26;border:1px solid #ffffff4d;border-radius:30px;width:85%;max-width:360px;padding:30px 25px;box-shadow:0 15px 35px #0003}.login-header h1{margin:0;font-size:32px}.login-form{margin:20px 0}.login-form input{box-sizing:border-box;border:none;border-radius:12px;width:100%;padding:0 15px;color:#333!important;background-color:#fff!important}.login-submit-btn{color:#ff4d6d;cursor:pointer;background-color:#fff;border:none;border-radius:15px;width:100%;height:48px;margin-top:15px;font-weight:800;box-shadow:0 8px 20px #0000001a}.home-header{background:linear-gradient(135deg, var(--accent-color), #ff758f);color:#fff;text-align:center;width:100%;padding:40px 20px}.home-section{width:90%;max-width:500px;margin-top:20px}.guide-card{background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:20px;padding:20px;box-shadow:0 4px 15px #0000000d}.guide-item{gap:15px;margin-bottom:15px;display:flex}.guide-num{background-color:var(--accent-color);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-weight:700;display:flex}.profile-header{text-align:center;width:100%;padding:25px 20px}.profile-card{background-color:var(--card-bg-color);border:1px solid var(--card-border-color);box-sizing:border-box;border-radius:25px;width:92%;max-width:450px;margin:10px 0 20px;padding:25px;box-shadow:0 8px 30px #0000000f}.inventory-section{margin-bottom:25px}.item-card{background:linear-gradient(135deg,#fff,#fef2f4);border:1px solid #ffeef1;border-radius:20px;justify-content:space-between;align-items:center;padding:18px;display:flex}.item-info{align-items:center;gap:12px;display:flex}.item-icon{object-fit:contain;width:36px;height:36px}.item-label{font-size:15px;font-weight:700}.item-count{color:var(--accent-color);font-size:20px;font-weight:900}.profile-display{width:100%;margin-bottom:20px}.display-item{border-bottom:1px solid var(--card-border-color);justify-content:space-between;padding:14px 0;display:flex}.display-item:last-child{border-bottom:none}.display-item .label{opacity:.6;font-size:14px}.display-item .value{color:var(--text-color);font-weight:600}.input-group{text-align:left;margin-bottom:20px}.input-group label{opacity:.8;margin-bottom:8px;font-size:13px;font-weight:700;display:block}.input-group input,.input-group select{border:1px solid var(--card-border-color);box-sizing:border-box;background-color:#fcfcfc;border-radius:12px;width:100%;padding:12px;font-size:14px}.gender-selection,.choice-selection{gap:12px;display:flex}.gender-btn{border:1px solid var(--card-border-color);cursor:pointer;background:#fff;border-radius:20px;flex-direction:column;flex:1;align-items:center;gap:8px;padding:15px;transition:all .2s;display:flex}.gender-btn img{width:48px;height:48px}.gender-btn.active{border-color:var(--accent-color);background-color:#ff4d6d14;box-shadow:0 4px 12px #ff4d6d1a}.choice-btn-small{border:1px solid var(--card-border-color);cursor:pointer;background:#fff;border-radius:12px;flex:1;padding:12px;font-weight:700;transition:all .2s}.choice-btn-small.active{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color);box-shadow:0 4px 12px #ff4d6d33}.save-btn,.edit-btn{cursor:pointer;border:none;border-radius:14px;width:100%;margin-top:10px;padding:14px;font-size:15px;font-weight:700}.save-btn{background-color:var(--button-bg);color:#fff}.edit-btn{border:2px solid var(--accent-color);color:var(--accent-color);background:0 0}#map-container{flex:1;width:100%;height:100%;position:relative}#map{background-color:#e5e3df;width:100%;height:100%}.search-overlay{background-color:var(--card-bg-color);z-index:100;border-radius:25px;gap:8px;padding:10px 15px;display:flex;position:absolute;top:15px;left:15px;right:15px;box-shadow:0 4px 20px #00000026}.search-overlay input{color:var(--text-color);background:0 0;border:none;outline:none;flex:1;font-size:14px}.online-count-badge{background-color:var(--card-bg-color);z-index:100;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:700;display:flex;position:absolute;top:75px;right:15px;box-shadow:0 4px 12px #0000001a}.online-count-badge .dot{background-color:#4caf50;border-radius:50%;width:8px;height:8px}.map-control-btn{z-index:100;cursor:pointer;background-color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:absolute;bottom:25px;left:20px;box-shadow:0 4px 15px #00000026}#near-joystick-container{z-index:1000;touch-action:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:absolute;bottom:25px;right:25px}#near-joystick-base{background-color:#ffffffb3;border:2px solid #ffffffe6;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:0 4px 15px #0000001a}#near-joystick-stick{background-color:var(--accent-color);border-radius:50%;width:20px;height:20px;transition:transform .1s;box-shadow:0 2px 8px #0000004d}.chat-list{width:90%;max-width:500px;margin-top:20px}.chat-item{background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:15px;align-items:center;gap:15px;margin-bottom:10px;padding:15px;display:flex}.chat-info h3{margin:0;font-size:16px}.chat-info p{opacity:.7;margin:5px 0 0;font-size:14px}.modal-overlay{background-color:var(--modal-overlay);z-index:10000;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{background-color:var(--card-bg-color);text-align:center;border-radius:25px;width:85%;max-width:360px;padding:25px}.theme-toggle{z-index:1000;background-color:var(--card-bg-color);color:var(--text-color);border:1px solid var(--card-border-color);cursor:pointer;border-radius:20px;padding:6px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px;box-shadow:0 2px 8px #0000001a}.info-card-iw{color:#333;min-width:200px;padding:10px}.iw-header{align-items:center;gap:8px;margin-bottom:10px;font-size:18px;font-weight:800;display:flex}.iw-gender-badge{color:#fff;border-radius:4px;padding:2px 6px;font-size:10px}.iw-gender-badge.male{background-color:#2196f3}.iw-gender-badge.female{background-color:#e91e63}.iw-play-btn{background:linear-gradient(135deg, var(--accent-color), #ff758f);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;margin-top:10px;padding:10px;font-weight:700;box-shadow:0 4px 12px #ff4d6d4d}