html,body,#root{width:100%;height:100%}*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif}body{background:#000;height:100vh}.logo{width:300px;max-width:80%}.auth-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:linear-gradient(135deg,#1a1a1a,#2c2c2c)}.input{padding:14px;border-radius:999px;border:none;outline:none;font-size:15px;width:100%}.page{animation:fadeSlide .4s ease}@keyframes fadeSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input{width:260px;padding:14px;border-radius:12px;border:none;outline:none;font-size:15px}.text{color:#aaa;text-align:center;max-width:260px}.moods{display:flex;flex-direction:column;gap:15px;width:260px}.mood-btn{background:#1e1e1e;color:#fff;border:none;padding:14px;border-radius:14px;font-size:16px;cursor:pointer;transition:all .25s ease}.mood-btn span{margin-right:8px}.mood-btn:hover{background:#2a2a2a;transform:translateY(-2px)}.app-layout{height:100vh;display:flex;flex-direction:column}.app-content{flex:1;display:flex;justify-content:center;align-items:center}.screen{text-align:center}.bottom-bar{height:65px;background:#0f0f0f;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #222}.bottom-bar button{background:none;border:none;color:#888;cursor:pointer;transition:all .25s ease}.bottom-bar svg{width:26px;height:26px}.bottom-bar button:hover{color:#fff;transform:translateY(-3px) scale(1.1)}.bottom-bar button:active{transform:scale(.95)}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .25s ease}.modal{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:24px;padding:30px;max-width:90%;width:340px;border:1px solid #333;animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1)}.modal-title{color:#fff;font-size:22px;font-weight:600;margin-bottom:20px;text-align:center}.mood-btn{background:#1e1e1e;color:#fff;border:1px solid #2a2a2a;padding:16px;border-radius:16px;font-size:16px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;gap:12px}.mood-btn span:first-child{font-size:24px}.mood-btn:hover{background:#2a2a2a;border-color:#7f00ff;transform:translate(5px)}.close-modal{margin-top:15px;width:100%;background:#2a2a2a;color:#aaa;border:none;padding:12px;border-radius:12px;cursor:pointer;transition:all .25s ease}.advice-card{background:linear-gradient(135deg,#7f00ff,#b84dff);padding:25px;border-radius:20px;margin-top:20px;max-width:320px;animation:slideUp .4s ease}.advice-card h3{color:#fff;font-size:18px;margin-bottom:12px}.advice-card p{color:#ffffffe6;line-height:1.6}.mood-trigger{display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;padding:16px 24px;min-width:280px}.mood-trigger .mood-emoji{font-size:24px;animation:float 2s ease-in-out infinite}.mood-display{margin:20px 0}.mood-badge{padding:30px 40px;border-radius:24px;text-align:center;box-shadow:0 10px 40px #0000004d;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1)}.mood-emoji-large{font-size:64px;display:block;margin-bottom:15px;animation:bounce 1s ease}.mood-name{color:#fff;font-size:24px;font-weight:600;margin:0}.advice-card{background:linear-gradient(135deg,#7f00ff,#b84dff);padding:25px;border-radius:20px;max-width:320px;margin:20px 0;animation:slideUp .4s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.advice-card h3{color:#fff;font-size:18px;margin-bottom:12px;font-weight:600}.advice-card p{color:#fffffff2;line-height:1.6;margin:0}.tip-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:18px;border-radius:16px;max-width:320px;display:flex;align-items:center;gap:12px;animation:slideUp .6s ease}.tip-card p{color:#ccc;line-height:1.5;margin:0;font-size:14px}.btn.small-btn{padding:10px 20px;font-size:14px;margin-top:15px}.mood-btn .mood-text{font-weight:500}.home-screen{padding:20px;display:flex;flex-direction:column;gap:15px;height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.home-screen::-webkit-scrollbar{width:0px;display:none}.home-screen{-ms-overflow-style:none;scrollbar-width:none}.home-screen .title{text-align:left;font-size:32px;margin-bottom:10px}.other-features{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.placeholder-text{color:#666;font-size:16px;text-align:center}.modal{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:24px;padding:30px;max-width:90%;width:360px;border:1px solid #333;box-shadow:0 20px 60px #00000080;animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1)}.home-screen{padding:20px;display:flex;flex-direction:column;gap:20px;height:100%;overflow-y:auto}.home-header{text-align:left;margin-bottom:10px}.home-header .title{font-size:32px;margin-bottom:5px}.subtitle{color:#888;font-size:16px}.mood-section{width:100%}.mood-compact-btn{width:100%;background:linear-gradient(135deg,#7f00ff,#b84dff);border:none;border-radius:16px;padding:20px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #7f00ff4d}.mood-compact-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px #7f00ff80}.mood-compact-btn:active{transform:scale(.98)}.mood-icon{font-size:36px;animation:float 2s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.mood-text-container{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.mood-label{color:#fff;font-size:18px;font-weight:600}.mood-sublabel{color:#fffc;font-size:14px}.sos-button{width:100%;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #ef444466;color:#fff;font-size:18px;font-weight:600;position:relative;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 6px 20px #ef444466}50%{box-shadow:0 6px 30px #ef4444b3}}.sos-button:hover{transform:translateY(-3px);box-shadow:0 10px 35px #ef444499}.sos-button:active{transform:scale(.98)}.sos-subtitle{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:12px;color:#888;font-weight:400}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:20px;padding-bottom:80px}.feature-card{background:#fff;border-radius:20px;padding:25px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #0000001a;min-height:160px}.feature-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px #0003}.feature-card:active{transform:scale(.95)}.feature-card h3{color:#fff;font-size:16px;font-weight:600;text-align:center;margin:0}.feature-card p{color:#ffffffe6;font-size:13px;text-align:center;margin:0;line-height:1.4}.floating-mood{position:fixed;bottom:90px;right:20px;background:linear-gradient(135deg,#7f00ff,#b84dff);width:60px;height:60px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px #7f00ff66;transition:all .3s ease;z-index:100;animation:slideInRight .5s ease}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.floating-mood:hover{transform:scale(1.1);box-shadow:0 8px 30px #7f00ff99}.floating-emoji{font-size:28px}.floating-label{position:absolute;bottom:-25px;font-size:10px;color:#fff;background:#000000b3;padding:3px 8px;border-radius:8px;white-space:nowrap;opacity:0;transition:opacity .3s ease}.floating-mood:hover .floating-label{opacity:1}.modal-overlay{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:24px;padding:30px;max-width:90%;width:360px;max-height:85vh;overflow-y:auto;border:1px solid #333;box-shadow:0 20px 60px #00000080;animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-title{color:#fff;font-size:24px;font-weight:600;margin-bottom:8px;text-align:center}.modal-subtitle{color:#888;font-size:14px;text-align:center;margin-bottom:25px}.moods{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.mood-btn{background:#1e1e1e;color:#fff;border:1px solid #2a2a2a;padding:18px 20px;border-radius:16px;font-size:16px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;gap:15px;text-align:left}.mood-btn .mood-emoji{font-size:28px;flex-shrink:0}.mood-btn .mood-name-text{font-weight:500}.mood-btn:hover{background:#2a2a2a;transform:translate(5px);box-shadow:0 5px 20px #7f00ff4d}.mood-btn:active{transform:scale(.98)}.close-modal{width:100%;background:#2a2a2a;color:#aaa;border:none;padding:14px;border-radius:12px;cursor:pointer;transition:all .25s ease;font-size:15px}.close-modal:hover{background:#333;color:#fff}.advice-modal{max-width:90%;width:360px}.mood-badge-modal{padding:30px;border-radius:20px;text-align:center;margin-bottom:25px;animation:bounce .6s ease}@keyframes bounce{0%,to{transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(.95)}75%{transform:scale(1.02)}}.mood-emoji-big{font-size:64px;display:block;margin-bottom:10px}.mood-name-big{color:#fff;font-size:26px;font-weight:600;margin:0}.advice-content{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;margin-bottom:15px}.advice-content h3{color:#fff;font-size:18px;margin-bottom:12px;font-weight:600}.advice-content p{color:#ccc;line-height:1.6;margin:0}.tip-content{background:#7f00ff1a;border:1px solid rgba(127,0,255,.3);border-radius:14px;padding:15px;display:flex;align-items:center;gap:12px;margin-bottom:20px}.tip-icon{font-size:24px;flex-shrink:0}.tip-content p{color:#bbb;line-height:1.5;margin:0;font-size:14px}.sos-modal{max-width:90%;width:380px}.sos-header{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:25px}.sos-options{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.sos-option{background:#1e1e1e;border:1px solid #2a2a2a;border-radius:16px;padding:18px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:all .25s ease;text-align:left}.sos-option:hover{background:#2a2a2a;border-color:#ef4444;transform:translate(5px)}.sos-emoji{font-size:32px;flex-shrink:0}.sos-option strong{color:#fff;font-size:16px;display:block;margin-bottom:4px}.sos-option p{color:#888;font-size:14px;margin:0}.breathing-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}.breathing-circle{width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,#7f00ff,#b84dff);display:flex;align-items:center;justify-content:center;margin-bottom:30px;transition:transform 1s ease}.breathing-circle.inhale,.breathing-circle.hold{transform:scale(1.2)}.breathing-circle.exhale{transform:scale(.8)}.breath-count{font-size:72px;color:#fff;font-weight:700}.breath-text{color:#fff;font-size:24px;margin-bottom:10px}.breath-cycle{color:#888;font-size:16px}.tips-list{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.tip-item{background:#1e1e1e;border:1px solid #2a2a2a;border-radius:12px;padding:15px;display:flex;align-items:center;gap:12px}.tip-number{background:linear-gradient(135deg,#7f00ff,#b84dff);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.tip-item p{color:#ccc;font-size:15px;margin:0;font-style:italic}.sos-reminder{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:15px;margin-bottom:20px;color:#ccc;font-size:14px;line-height:1.5}.sos-reminder strong{color:#fff}.pause-options{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.pause-btn{background:#1e1e1e;border:1px solid #2a2a2a;color:#fff;padding:18px;border-radius:14px;font-size:18px;cursor:pointer;transition:all .25s ease}.pause-btn:hover{background:#2a2a2a;border-color:#7f00ff;transform:scale(1.02)}.pause-text{color:#ccc;text-align:center;line-height:1.8;margin-bottom:25px;font-size:16px}.pause-timer{font-size:48px;color:#fff;text-align:center;margin:30px 0;font-weight:700}.reconciliation-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.reconciliation-item{background:#1e1e1e;border:1px solid #2a2a2a;border-radius:14px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;transition:all .25s ease}.reconciliation-item:hover{background:#2a2a2a;border-color:#10b981;transform:translate(5px)}.reconciliation-item p{color:#ccc;font-size:15px;margin:0;line-height:1.5}.copy-icon{font-size:20px;flex-shrink:0}.love-modal{max-width:90%;width:360px}.love-header{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:25px}.love-message-card{background:linear-gradient(135deg,#ec4899,#f472b6);border-radius:20px;padding:30px;margin-bottom:25px;box-shadow:0 10px 30px #ec48994d}.love-message-text{color:#fff;font-size:18px;line-height:1.6;text-align:center;margin:0;font-weight:500}.love-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:15px}.challenge-modal{max-width:90%;width:360px}.challenge-header{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:25px}.challenge-points{background:#8b5cf633;color:#a78bfa;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600}.challenge-card{background:linear-gradient(135deg,#8b5cf6,#a78bfa);border-radius:20px;padding:30px;text-align:center;margin-bottom:25px;box-shadow:0 10px 30px #8b5cf64d}.challenge-emoji{font-size:64px;display:block;margin-bottom:20px}.challenge-text{color:#fff;font-size:18px;line-height:1.6;margin:0 0 15px;font-weight:500}.challenge-reward{background:#fff3;color:#fff;padding:8px 16px;border-radius:999px;display:inline-block;font-weight:600}.challenge-completed{text-align:center;padding:30px;background:#10b9811a;border:1px solid rgba(16,185,129,.3);border-radius:16px;margin-bottom:20px}.check-icon{font-size:64px;display:block;margin-bottom:15px}.challenge-completed p{color:#ccc;font-size:16px;margin:8px 0}.challenge-next{color:#888;font-size:14px}.btn.secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.btn.secondary:hover{background:#ffffff26;transform:translateY(-2px)}.feature-modal{text-align:center}.feature-modal .modal-title{margin-bottom:15px}.feature-modal .modal-subtitle{margin-bottom:30px}.auth-page{background:#000;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.auth-container{width:100%;max-width:400px;display:flex;flex-direction:column;gap:25px}.auth-icon-container{display:flex;justify-content:center;animation:bounce 1s ease}.auth-description{color:#888;text-align:center;font-size:15px;margin-top:-15px}.auth-form{display:flex;flex-direction:column;gap:15px}.input-group{display:flex;align-items:center;gap:12px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:14px 16px;transition:border-color .3s ease}.input-group:focus-within{border-color:#7f00ff}.input-group .input{background:transparent;border:none;outline:none;color:#fff;font-size:15px;width:100%;padding:0}.input-group .input::placeholder{color:#666}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:12px 16px;border-radius:12px;font-size:14px;text-align:center;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.link-text{color:#888;font-size:14px;text-align:center}.link{color:#b84dff;cursor:pointer;font-weight:600;transition:color .3s ease}.link:hover{color:#d084ff;text-decoration:underline}.btn-link{background:none;border:none;color:#888;font-size:15px;cursor:pointer;padding:12px;transition:color .3s ease;text-align:center}.btn-link:hover{color:#b84dff}.connect-container{max-width:420px}.code-section{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:25px;display:flex;flex-direction:column;gap:15px}.section-title{color:#fff;font-size:18px;font-weight:600;text-align:center;margin:0}.section-description{color:#888;font-size:14px;text-align:center;margin:-5px 0 5px}.code-display{background:linear-gradient(135deg,#7f00ff,#b84dff);border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 8px 25px #7f00ff4d;animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{box-shadow:0 8px 25px #7f00ff4d}50%{box-shadow:0 8px 35px #7f00ff80}}.code-text{color:#fff;font-size:28px;font-weight:700;letter-spacing:4px;font-family:Courier New,monospace}.copy-btn{background:#fff3;border:none;border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#fff}.copy-btn:hover{background:#ffffff4d;transform:scale(1.1)}.copy-btn:active{transform:scale(.95)}.code-input{text-align:center;font-size:24px;letter-spacing:4px;font-weight:600;text-transform:uppercase;font-family:Courier New,monospace}.btn.primary,.btn.omit,.btn.secondary{display:flex;align-items:center;justify-content:center;gap:10px}@keyframes bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-20px)}50%{transform:translateY(-10px)}75%{transform:translateY(-15px)}}@media(max-width:480px){.code-text{font-size:24px;letter-spacing:3px}.auth-container{gap:20px}.code-section{padding:20px}}.install-button{position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#7f00ff,#b84dff);color:#fff;border:none;border-radius:999px;padding:12px 24px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px #7f00ff66;transition:all .3s ease;z-index:1000;animation:slideInDown .5s ease}@keyframes slideInDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.install-button:hover{transform:translateY(-3px);box-shadow:0 10px 30px #7f00ff99}.install-button:active{transform:scale(.95)}.app-layout{display:flex;flex-direction:column;height:100vh;background:#0a0a0a}.app-content{flex:1;display:flex;justify-content:center;align-items:center;color:#fff;overflow-y:auto}.screen{text-align:center;padding:20px;display:flex;flex-direction:column;gap:25px;align-items:center}.bottom-bar{height:70px;background:linear-gradient(to top,#0f0f0f,#1a1a1a);display:flex;justify-content:space-around;align-items:center;border-top:1px solid #2a2a2a;padding:0 20px}.bottom-bar button{background:none;border:none;color:#555;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;padding:12px;border-radius:16px}.bottom-bar button:hover{color:#888;background:#ffffff0d}.bottom-bar button.active{color:#b84dff}.bottom-bar button.active:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:20px;height:3px;background:linear-gradient(90deg,#7f00ff,#b84dff);border-radius:999px;animation:slideIn .3s ease}@keyframes slideIn{0%{width:0;opacity:0}to{width:20px;opacity:1}}.bottom-bar button:active{transform:scale(.9)}*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif}body{background-color:#000;color:#fff}.container{height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}.logo{width:150px;max-width:80%}.buttons{display:flex;flex-direction:column;gap:18px;width:260px}.btn{padding:14px 0;border-radius:999px;font-size:16px;cursor:pointer;transition:all .25s ease;border:none}.btn.primary{background:#fff;color:#000;box-shadow:0 6px 18px #ffffff40}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #ffffff73}.btn.primary:active{transform:translateY(2px);box-shadow:0 4px 12px #fff3}.btn.omit{background:linear-gradient(135deg,#7f00ff,#b84dff);color:#fff;box-shadow:0 6px 18px #b74dff59}.btn.omit:hover{transform:translateY(-2px);box-shadow:0 10px 30px #b74dff99}.btn.omit:active{transform:translateY(2px);box-shadow:0 4px 14px #b74dff59}.title{color:#fff;font-size:28px;font-weight:600;letter-spacing:1px;margin-top:-10px}