.phone{width:350px;height:700px;padding:8px;position:absolute;left:calc(50% - 175px);top:calc(50% - 350px);border-radius:48px;background:linear-gradient(115deg,#8b8987 0%,#343635 5%,#0a0c0f 16%,#20242a 85%,#8e8d85 98%,#282b30);border:2px solid #4b4e52;box-shadow:3px 5px 0 #111318,7px 7px 0 #35373c,12px 18px 30px rgba(0,0,0,.6),inset 1px 2px 3px #b3b3a4;transform:perspective(1500px) rotateY(-10deg) rotateZ(3deg)}
.phone-screen{position:relative;height:100%;overflow:hidden;border-radius:38px;background:#060918 url('/assets/night-sky.jpg') top center/100% auto no-repeat;box-shadow:inset 0 0 1px 2px #030405;display:flex;flex-direction:column}
.phone-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 1px 0 0 rgba(255,255,255,.06);pointer-events:none}
.phone-camera{position:absolute;top:11px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 55% 45%,#151d30 0 28%,#06080c 30% 60%,#373936 65%,#070a0f 80%);z-index:2}
.phone-header{display:flex;justify-content:space-between;align-items:center;padding:23px 17px 8px;color:var(--gold)}
.phone-header>.icon,.phone-header>span>.icon{width:19px;height:19px}
.phone-header img{width:41px;height:41px}
.phone-body{padding:7px 17px 0;flex:1}
.phone-greeting{display:flex;align-items:center;gap:5px;color:#d4d3db;font-size:10px;line-height:1.4}
.phone-greeting .icon{width:13px;height:13px}
.phone-title{font-size:32px;font-weight:800;letter-spacing:-.045em;line-height:1.08;margin-top:12px;text-shadow:0 2px 12px #000}
.phone-title span{color:var(--gold)}
.phone-subtitle{font-size:9px;letter-spacing:-.02em;line-height:1.4;color:#d0cddb;margin-top:10px}
.phone-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;font-size:9px;font-weight:800}
.phone-actions>span{display:flex;align-items:center;justify-content:center;gap:5px;min-height:41px;padding:6px 5px;border:1px solid #5e5e6d;border-radius:12px;background:rgba(5,8,23,.64)}
.phone-actions>span.phone-action-primary{color:#18130a;background:linear-gradient(110deg,#ffdb72,#f4c34f);border-color:#ffdf83}
.phone-actions .icon{width:14px;height:14px}
.phone-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.phone-metric{padding:12px 8px 10px;background:linear-gradient(120deg,rgba(20,25,49,.94),rgba(9,13,30,.86));border:1px solid rgba(172,176,212,.08);border-radius:11px;min-height:88px}
.phone-metric>p{display:flex;align-items:center;gap:5px;font-size:8px;line-height:1.25;letter-spacing:-.02em;font-weight:700;white-space:nowrap}
.phone-metric .icon{width:13px;height:13px;flex:none}
.phone-metric>p>span{margin-left:auto;font-size:15px;font-weight:400}
.phone-metric strong{display:block;color:var(--gold);font-weight:600;font-size:23px;line-height:1.15;margin-top:8px}
.phone-metric small{font-size:8px;line-height:1.35;display:block;color:#aaa8bb;margin-top:3px}
.phone-recent-heading{display:flex;align-items:center;justify-content:space-between;margin-top:19px}
.phone-recent-heading p{font-size:13px;font-weight:800;letter-spacing:-.02em}
.phone-recent-heading span{font-size:8px;color:#d0cddb}
.phone-entry{display:flex;align-items:center;gap:10px;border-left:2px solid var(--gold);background:linear-gradient(110deg,rgba(29,28,49,.7),rgba(11,13,29,.5));margin-top:9px;padding:11px 8px;font-size:9px;border-radius:0 7px 7px 0}
.phone-entry small{font-size:8px;color:#a7a4b9;display:block;margin-top:3px}.phone-dream-fragment{font-size:8px;color:#c2bfd0;margin-top:5px}
.phone-play{color:var(--gold)}.phone-play .icon{width:17px;height:17px}.phone-chevron{margin-left:auto;font-size:17px}.phone-sample-label{display:block;color:#7f819b;text-align:right;font-size:7px;margin-top:5px}
.phone-tabs{display:flex;align-items:center;justify-content:space-between;padding:13px 20px 10px;background:linear-gradient(0deg,#070a18,rgba(7,10,24,.92));border-top:1px solid rgba(180,180,211,.06);color:#c6c4d6}
.phone-tabs>.icon,.phone-tabs>span>.icon{width:20px;height:20px}.phone-tab-active{color:var(--gold)}.phone-new{display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);border-radius:50%;width:40px;height:40px}.phone-new .icon{width:24px!important;height:24px!important}
.phone-home-bar{width:80px;height:3px;background:#8e8e98;border-radius:5px;margin:0 auto 8px;opacity:.45}
.phone-side-button{position:absolute;right:-7px;top:138px;width:4px;height:63px;background:linear-gradient(90deg,#05070a,#6c6d6c);border-radius:0 3px 3px 0}
.phone-side-button::before{content:"";position:absolute;top:80px;right:0;width:4px;height:35px;border-radius:inherit;background:inherit}
.phone-shadow{position:absolute;bottom:-6px;left:calc(50% - 210px);width:450px;height:65px;border-radius:50%;background:radial-gradient(ellipse,rgba(142,141,167,.24),rgba(0,0,0,.55) 35%,transparent 70%);filter:blur(7px);z-index:-1}
@media(max-width:900px){.phone{transform:perspective(1500px) rotateY(-10deg) rotateZ(3deg) scale(.83)}.phone-shadow{bottom:0;width:340px;left:calc(50% - 170px)}}
@media(max-width:600px){.phone{transform:perspective(1500px) rotateY(-7deg) rotateZ(3deg) scale(.82)}.phone-shadow{bottom:25px}}
@media(max-width:360px){.phone{transform:perspective(1500px) rotateY(-7deg) rotateZ(3deg) scale(.74)}}