*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff;overflow-x:hidden;height:100vh}.live-container{height:100vh;display:flex;flex-direction:column;position:relative;background:linear-gradient(180deg,#0a6033,#000 60%)}.live-header{position:absolute;top:0;left:0;right:0;z-index:100;padding:15px 20px;background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,transparent 100%)}.live-badge{background:#ff0040;color:#fff;padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:800;display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;animation:livePulse 2s infinite,liveBounce 6s ease-in-out infinite;box-shadow:0 4px 20px #ff004066}.live-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:blink 1s infinite}.viewer-count{background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;gap:6px}.title-live{font-size:2.2rem;font-weight:900;color:#fd86c4;text-shadow:2px 2px 8px rgba(0,0,0,.8);margin-top:10px;animation:titleFloat 4s ease-in-out infinite}.content-area{flex:1;overflow-y:auto;padding:120px 20px;position:relative}.tuntutan-stream{display:flex;flex-direction:column;gap:12px}.tuntutan-item{background:#000000b3;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(253,134,196,.3);border-radius:20px;padding:18px;margin-bottom:10px;animation:slideInUp .8s ease forwards,breathe 4s ease-in-out 1s infinite;transform:translateY(30px);opacity:0;transition:all .3s ease}.tuntutan-item:hover{transform:translateY(-5px);border-color:#fd86c4;box-shadow:0 15px 35px #fd86c433;animation-play-state:paused}.item-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.item-number{background:linear-gradient(135deg,#fd86c4,#ff4d94);color:#000;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;animation:numberPulse 3s ease-in-out infinite;box-shadow:0 4px 15px #fd86c466}.item-title{font-size:.95rem;font-weight:700;color:#fd86c4;animation:titleGlow 5s ease-in-out infinite}.item-desc{font-size:.85rem;color:#ffffffe6;line-height:1.3;padding-left:44px}.floating-comments{position:absolute;left:20px;right:20px;bottom:140px;pointer-events:none;z-index:50}.floating-comment{background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:8px 15px;margin-bottom:8px;display:flex;align-items:center;gap:10px;animation:floatIn .5s ease,fadeOut .5s ease 4.5s;animation-fill-mode:both;font-size:.85rem}.float-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#fd86c4,#0a6033);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}.float-user{color:#fd86c4;font-weight:700;margin-right:6px}.input-area{position:fixed;bottom:0;left:0;right:0;background:#000000f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(253,134,196,.3);padding:15px 20px;z-index:200}.input-container{display:flex;gap:12px;align-items:flex-end;max-width:400px;margin:0 auto}.profile-btn{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#fd86c4,#0a6033);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;color:#fff;cursor:pointer;transition:transform .2s ease;flex-shrink:0;border:none}.profile-btn:hover{transform:scale(1.05)}.comment-input-wrapper{flex:1;position:relative}.live-comment-input{width:100%;background:#ffffff1a;border:1px solid rgba(253,134,196,.4);border-radius:25px;padding:10px 45px 10px 15px;color:#fff;font-size:.9rem;resize:none;min-height:40px;max-height:80px;overflow-y:auto}.live-comment-input::placeholder{color:#ffffff80}.live-comment-input:focus{outline:none;border-color:#fd86c4;box-shadow:0 0 0 2px #fd86c44d}.send-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:#fd86c4;color:#000;border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:1rem;transition:all .2s ease}.send-btn:hover{background:#ff9bd4;transform:translateY(-50%) scale(1.05)}.live-actions{position:fixed;right:15px;bottom:100px;display:flex;flex-direction:column;gap:15px;z-index:150}.action-btn{width:50px;height:50px;border-radius:50%;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;transition:all .3s ease;position:relative}.action-btn:hover{transform:scale(1.1);background:#fd86c44d;border-color:#fd86c4}.like-btn{background:#fd86c433;border-color:#fd86c4}.comments-btn{background:#0a60334d;border-color:#0a6033}.comment-badge{position:absolute;top:-5px;right:-5px;background:#ff0040;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;animation:badgePulse 2s infinite}.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:#000000f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:25px 25px 0 0;transform:translateY(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);z-index:500;max-height:70vh;display:flex;flex-direction:column}.bottom-sheet.open{transform:translateY(0)}.sheet-header{padding:20px 20px 10px;border-bottom:1px solid rgba(253,134,196,.2);flex-shrink:0}.sheet-handle{width:40px;height:4px;background:#ffffff4d;border-radius:2px;margin:0 auto 15px;cursor:pointer}.sheet-title{display:flex;align-items:center;justify-content:space-between;font-size:1.2rem;font-weight:700;color:#fd86c4}.close-sheet{background:none;border:none;color:#fff9;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close-sheet:hover{background:#ffffff1a;color:#fff}.sheet-comments{flex:1;overflow-y:auto;padding:15px 20px 20px}.sheet-comment{display:flex;gap:12px;margin-bottom:15px;animation:slideInLeft .3s ease}.sheet-avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,#0a6033,#fd86c4);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;flex-shrink:0;color:#fff}.sheet-comment-content{flex:1}.sheet-comment-header{display:flex;align-items:center;gap:8px;margin-bottom:5px}.sheet-username{font-weight:700;color:#fd86c4;font-size:.9rem}.sheet-time{font-size:.7rem;color:#ffffff80}.sheet-comment-text{color:#ffffffe6;font-size:.85rem;line-height:1.4}.empty-comments{text-align:center;padding:40px 20px;color:#ffffff80}.empty-icon{font-size:3rem;margin-bottom:15px;opacity:.3}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;opacity:0;visibility:hidden;transition:all .3s ease;z-index:400}.overlay.active{opacity:1;visibility:visible}.profile-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:linear-gradient(135deg,#000,#0a6033);border-radius:25px;padding:30px;max-width:300px;width:100%;text-align:center;border:1px solid rgba(253,134,196,.3)}.close-btn{position:absolute;top:15px;right:20px;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;opacity:.7}.avatar-preview{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#fd86c4,#0a6033);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:#fff;margin:0 auto 20px}.name-input{width:100%;padding:12px;border:1px solid rgba(253,134,196,.3);border-radius:20px;background:#ffffff1a;color:#fff;text-align:center;font-size:.9rem;margin-bottom:20px}.save-btn{background:#fd86c4;color:#000;border:none;padding:12px 25px;border-radius:20px;font-weight:700;cursor:pointer;font-size:.9rem;margin-bottom:10px}.change-photo-btn{background:#fd86c433;color:#fd86c4;border:1px solid rgba(253,134,196,.4);padding:10px 20px;border-radius:20px;font-weight:700;cursor:pointer;font-size:.85rem;transition:all .2s ease}.change-photo-btn:hover{background:#fd86c44d;border-color:#fd86c4}.photo-upload-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;display:none;align-items:center;justify-content:center;z-index:1001;padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.photo-modal-content{background:linear-gradient(135deg,#000,#0a6033);border-radius:25px;padding:30px;max-width:350px;width:100%;text-align:center;border:1px solid rgba(253,134,196,.3);position:relative;max-height:90vh;overflow-y:auto}.photo-header h2{color:#fd86c4;font-size:1.5rem;font-weight:900;margin-bottom:8px;text-shadow:0 0 10px rgba(253,134,196,.3)}.photo-header p{color:#ffffffb3;font-size:.9rem;margin-bottom:25px}.upload-area{border:2px dashed rgba(253,134,196,.4);border-radius:20px;padding:40px 20px;cursor:pointer;transition:all .3s ease;background:#fd86c40d;margin-bottom:20px}.upload-area:hover{border-color:#fd86c4;background:#fd86c41a;transform:translateY(-2px)}.upload-area.dragover{border-color:#fd86c4;background:#fd86c426;transform:scale(1.02)}.upload-icon{font-size:3rem;margin-bottom:15px;opacity:.7}.upload-area p{color:#fffc;font-weight:600;font-size:.9rem}.photo-preview-container{margin:20px 0}#photoCanvas{border-radius:20px;border:2px solid rgba(253,134,196,.3);max-width:100%;height:auto;box-shadow:0 10px 30px #00000080}.photo-controls{display:flex;gap:10px;justify-content:center;margin:15px 0}.control-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 15px;border-radius:15px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#fff3;border-color:#fff6}.download-btn{background:#fd86c433;border-color:#fd86c466;color:#fd86c4}.download-btn:hover{background:#fd86c44d;border-color:#fd86c4}.name-section{margin:20px 0}.save-photo-btn{background:linear-gradient(135deg,#fd86c4,#ff9bd4);color:#000;border:none;padding:15px 30px;border-radius:25px;font-weight:800;cursor:pointer;font-size:1rem;width:100%;transition:all .3s ease;box-shadow:0 5px 20px #fd86c466}.save-photo-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #fd86c499}.save-photo-btn:disabled{background:#ffffff1a;color:#ffffff80;cursor:not-allowed;box-shadow:none}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes liveBounce{0%,to{transform:scale(1)}25%{transform:scale(1.02)}75%{transform:scale(.98)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{0%,to{transform:translateY(0) scale(1);border-color:#fd86c44d}50%{transform:translateY(-3px) scale(1.005);border-color:#fd86c480}}@keyframes numberPulse{0%,to{transform:scale(1);box-shadow:0 4px 15px #fd86c466}33%{transform:scale(1.1);box-shadow:0 6px 25px #fd86c499}66%{transform:scale(.95);box-shadow:0 2px 10px #fd86c44d}}@keyframes titleGlow{0%,to{text-shadow:0 0 5px rgba(253,134,196,.3);color:#fd86c4}50%{text-shadow:0 0 15px rgba(253,134,196,.7);color:#ff9bd4}}@keyframes titleFloat{0%,to{transform:translateY(0);text-shadow:2px 2px 8px rgba(0,0,0,.8)}50%{transform:translateY(-2px);text-shadow:2px 4px 12px rgba(0,0,0,.6)}}@keyframes floatIn{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes badgePulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}@keyframes fadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(50px)}}@keyframes heartFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-100px) scale(1.5)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:#fd86c499;border-radius:2px}