@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700;800&display=swap";:root{--primary-yellow: #FFD93D;--primary-orange: #FF8A65;--primary-mint: #4ECDC4;--primary-blue: #5B9BD5;--primary-pink: #FF6B9D;--text-dark: #2C3E50;--text-light: #FFFFFF;--bg-cream: #FFF8E7;--shadow-light: rgba(0, 0, 0, .1);--shadow-medium: rgba(0, 0, 0, .15);--shadow-strong: rgba(0, 0, 0, .25);--phone-bg: #f8f8f8;--phone-border: #e0e0e0;--app-icon-bg: #ffffff;--button-hover-scale: 1.05;--button-active-scale: .95;--button-hover-y: -3px;--button-active-y: 2px}body{margin:0;font-family:Quicksand,PingFang SC,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,var(--primary-mint) 0%,var(--primary-blue) 100%);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;color:var(--text-dark)}.phone-wrapper{perspective:1000px}.phone-bezel{width:375px;height:812px;background:var(--phone-bg);border-radius:40px;box-shadow:0 20px 40px var(--shadow-strong),0 0 0 8px var(--phone-border) inset;position:relative;overflow:hidden;display:flex;flex-direction:column;transform:rotateX(5deg) rotateY(5deg) rotate(-5deg);transition:transform .3s ease-out}.phone-bezel:hover{transform:rotateX(0) rotateY(0) rotate(0)}.phone-notch{width:150px;height:25px;background:#222;border-bottom-left-radius:15px;border-bottom-right-radius:15px;position:absolute;top:0;left:50%;transform:translate(-50%);z-index:10}.phone-screen-area{flex-grow:1;background:#fff;border-radius:30px;margin:8px;overflow:hidden;display:flex;flex-direction:column;position:relative}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;font-size:1.2em;color:var(--text-dark)}.loading-spinner{border:4px solid var(--primary-blue);border-top:4px solid var(--primary-mint);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;font-size:.85em;font-weight:700;color:var(--text-dark);background:#ffffffb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:5;position:relative}.cloud-status-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75em;color:var(--text-dark);white-space:nowrap}.cloud-message.saving{color:var(--primary-blue)}.cloud-message.saved{color:var(--primary-mint)}.cloud-message.error{color:var(--primary-orange)}.status-icons{display:flex;gap:5px;align-items:center}.app-content-area{flex-grow:1;position:relative;overflow:hidden;background:var(--bg-cream)}.home-screen,.dialer-screen,.messages-screen,.calculator-screen,.settings-screen,.message-detail-screen,.apps-drawer-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;padding:20px;box-sizing:border-box;background:var(--bg-cream)}.screen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 5px}.screen-title{font-size:1.8em;font-weight:800;color:var(--text-dark);margin:0;flex-grow:1;text-align:center}.header-spacer{width:24px}.back-button{background:none;border:none;cursor:pointer;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-dark);transition:background .2s ease}.back-button:hover{background:#0000000d}.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:20px;flex-grow:1}.app-icon{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--app-icon-bg);border:none;border-radius:20px;padding:15px 5px;cursor:pointer;font-size:.85em;font-weight:700;color:var(--text-dark);box-shadow:0 6px 0 var(--shadow-light),0 4px 10px var(--shadow-light);transition:transform .2s ease,box-shadow .2s ease}.app-icon:hover{transform:translateY(var(--button-hover-y)) scale(var(--button-hover-scale));box-shadow:0 3px 0 var(--shadow-light),0 2px 8px var(--shadow-light)}.app-icon:active{transform:translateY(var(--button-active-y)) scale(var(--button-active-scale));box-shadow:0 1px 0 var(--shadow-light),0 0 5px var(--shadow-light)}.app-icon-svg{color:var(--text-light);padding:10px;border-radius:15px}.phone-icon{background:var(--primary-blue)}.message-icon{background:var(--primary-orange)}.calculator-icon{background:var(--primary-mint)}.settings-icon{background:#8e44ad}.app-icon-img{width:36px;height:36px;border-radius:15px;object-fit:cover}.apps-drawer-screen .app-grid{padding-top:0}.dialer-screen{justify-content:space-between}.dialer-display{background:#fffc;border-radius:15px;padding:20px;font-size:2.5em;font-weight:700;text-align:center;margin-bottom:20px;box-shadow:inset 0 2px 5px var(--shadow-light);color:var(--text-dark);word-break:break-all;min-height:80px;display:flex;align-items:center;justify-content:center}.dial-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;flex-grow:1;padding-bottom:20px}.dial-button{background:var(--app-icon-bg);border:none;border-radius:50%;width:70px;height:70px;display:flex;justify-content:center;align-items:center;font-size:2em;font-weight:700;color:var(--text-dark);box-shadow:0 6px 0 var(--shadow-light),0 4px 10px var(--shadow-light);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;margin:auto}.dial-button:hover{transform:translateY(var(--button-hover-y)) scale(var(--button-hover-scale));box-shadow:0 3px 0 var(--shadow-light),0 2px 8px var(--shadow-light)}.dial-button:active{transform:translateY(var(--button-active-y)) scale(var(--button-active-scale));box-shadow:0 1px 0 var(--shadow-light),0 0 5px var(--shadow-light)}.dialer-actions{display:flex;justify-content:space-around;padding-top:15px}.action-button{background:none;border:none;border-radius:50%;width:60px;height:60px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .2s ease}.call-button{background:var(--primary-mint);color:var(--text-light);box-shadow:0 6px #4ecdc466,0 4px 10px #4ecdc44d}.clear-button{background:var(--primary-orange);color:var(--text-light);box-shadow:0 6px #ff8a6566,0 4px 10px #ff8a654d}.messages-screen{padding:20px 0}.messages-screen .screen-title{padding:0 20px}.message-list{flex-grow:1;overflow-y:auto;padding:0 10px}.message-preview{display:flex;align-items:center;gap:15px;padding:15px 20px;background:var(--app-icon-bg);border-radius:20px;margin-bottom:10px;box-shadow:0 4px 0 var(--shadow-light),0 2px 8px var(--shadow-light);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.message-preview:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 2px 0 var(--shadow-light),0 1px 5px var(--shadow-light)}.message-preview:active{transform:translateY(1px) scale(.99);box-shadow:0 0 0 var(--shadow-light),0 0 2px var(--shadow-light)}.contact-avatar{font-size:2em;width:50px;height:50px;border-radius:50%;background:var(--primary-yellow);display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:inset 0 2px 5px var(--shadow-light)}.message-info{flex-grow:1;display:flex;flex-direction:column}.contact-name{font-weight:700;font-size:1.1em;color:var(--text-dark)}.latest-message-text{font-size:.9em;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-time{font-size:.8em;color:#999;flex-shrink:0}.message-detail-screen{padding:0;justify-content:space-between}.detail-header{display:flex;align-items:center;padding:15px 20px;background:var(--app-icon-bg);box-shadow:0 2px 5px var(--shadow-light);z-index:1}.detail-contact-name{font-size:1.2em;font-weight:700;flex-grow:1;text-align:center;color:var(--text-dark)}.conversation-area{flex-grow:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}.message-bubble{max-width:75%;padding:10px 15px;border-radius:20px;position:relative;box-shadow:0 2px 5px var(--shadow-light)}.message-bubble.sent{align-self:flex-end;background:var(--primary-blue);color:var(--text-light);border-bottom-right-radius:5px}.message-bubble.received{align-self:flex-start;background:var(--app-icon-bg);color:var(--text-dark);border-bottom-left-radius:5px}.message-time-bubble{font-size:.7em;margin-top:5px;text-align:right;color:#ffffffb3}.message-bubble.received .message-time-bubble{color:#999}.message-input-area{display:flex;padding:15px 20px;gap:10px;background:var(--app-icon-bg);box-shadow:0 -2px 5px var(--shadow-light)}.message-input{flex-grow:1;border:1px solid var(--phone-border);border-radius:25px;padding:10px 15px;font-size:1em;outline:none;transition:border-color .2s ease}.message-input:focus{border-color:var(--primary-blue)}.send-button{background:var(--primary-blue);color:var(--text-light);border:none;border-radius:25px;padding:10px 20px;font-size:1em;font-weight:700;cursor:pointer;box-shadow:0 4px #5b9bd566;transition:transform .2s ease,box-shadow .2s ease}.send-button:hover{transform:translateY(-2px);box-shadow:0 2px #5b9bd566}.send-button:active{transform:translateY(1px);box-shadow:0 0 #5b9bd566}.calculator-screen{justify-content:space-between}.calculator-display{background:linear-gradient(to bottom right,#e0e0e0,#f0f0f0);border-radius:20px;padding:20px;font-size:3.5em;font-weight:800;text-align:right;margin-bottom:20px;box-shadow:inset 0 3px 8px var(--shadow-light);color:var(--text-dark);overflow-x:auto;white-space:nowrap;min-height:100px;display:flex;align-items:flex-end;justify-content:flex-end}.calculator-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex-grow:1}.calc-button{background:var(--app-icon-bg);border:none;border-radius:20px;width:100%;height:65px;display:flex;justify-content:center;align-items:center;font-size:1.8em;font-weight:700;color:var(--text-dark);box-shadow:0 6px 0 var(--shadow-light),0 4px 10px var(--shadow-light);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.calc-button.span-2{grid-column:span 2}.calc-button:hover{transform:translateY(var(--button-hover-y)) scale(var(--button-hover-scale));box-shadow:0 3px 0 var(--shadow-light),0 2px 8px var(--shadow-light)}.calc-button:active{transform:translateY(var(--button-active-y)) scale(var(--button-active-scale));box-shadow:0 1px 0 var(--shadow-light),0 0 5px var(--shadow-light)}.calc-button.operator{background:var(--primary-orange);color:var(--text-light);box-shadow:0 6px #ff8a6566,0 4px 10px #ff8a654d}.calc-button.clear{background:var(--primary-yellow);color:var(--text-dark);box-shadow:0 6px #ffd93d66,0 4px 10px #ffd93d4d}.calc-button.equals{background:var(--primary-mint);color:var(--text-light);box-shadow:0 6px #4ecdc466,0 4px 10px #4ecdc44d}.settings-screen{gap:20px;padding-top:30px}.setting-item{display:flex;justify-content:space-between;align-items:center;background:var(--app-icon-bg);padding:15px 20px;border-radius:20px;box-shadow:0 4px 0 var(--shadow-light),0 2px 8px var(--shadow-light);font-size:1.1em;font-weight:700;color:var(--text-dark)}.slider{-webkit-appearance:none;width:150px;height:10px;background:#d3d3d3;outline:none;opacity:.7;transition:opacity .2s;border-radius:5px}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:var(--primary-blue);cursor:pointer;box-shadow:0 2px 5px var(--shadow-light)}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:var(--primary-blue);cursor:pointer;box-shadow:0 2px 5px var(--shadow-light)}.toggle-switch{position:relative;display:inline-block;width:50px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:28px}.toggle-switch .slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--primary-mint)}input:focus+.slider{box-shadow:0 0 1px var(--primary-mint)}input:checked+.slider:before{transform:translate(22px)}.bottom-nav-bar{display:flex;justify-content:space-around;align-items:center;height:60px;background:var(--app-icon-bg);border-top:1px solid var(--phone-border);box-shadow:0 -5px 15px var(--shadow-light);border-bottom-left-radius:30px;border-bottom-right-radius:30px;padding-bottom:10px;z-index:5}.nav-button{background:none;border:none;color:#666;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8em;gap:3px;padding:5px;transition:color .2s ease}.nav-button:hover{color:var(--primary-blue)}.home-gesture-bar{flex-grow:1;display:flex;justify-content:center;align-items:center}.home-indicator{width:100px;height:5px;background:#ccc;border-radius:5px}