.phone{--app:#f76707;--app-soft:#fff1e0;aspect-ratio:9/19;border:9px solid var(--phone);color:#1d1d1f;font-variant-numeric:tabular-nums;background:#fbfbfd;border-radius:38px;flex-direction:column;flex-shrink:0;width:272px;max-width:100%;font-family:Google Sans,system-ui,sans-serif;font-size:11.5px;line-height:1.4;display:flex;overflow:hidden;box-shadow:0 30px 60px -30px #1f191573,0 0 0 1px #ffffff0a}.phone.owner{--app:#4f46e5;--app-soft:#ecebfd}.phone *{box-sizing:border-box}.s-status{justify-content:space-between;padding:8px 18px 4px;font-size:10.5px;font-weight:600;display:flex}.s-status i{border:1.2px solid;border-radius:2px;width:14px;height:8px;margin-left:4px;display:inline-block;position:relative}.s-status i:after{content:"";background:currentColor;border-radius:1px;position:absolute;inset:1px 4px 1px 1px}.s-bar{justify-content:space-between;align-items:center;padding:6px 14px 10px;display:flex}.s-title{letter-spacing:-.01em;font-size:15px;font-weight:700}.s-sub{color:#6e6e73;font-size:10.5px}.s-body{flex-direction:column;flex:1;gap:8px;padding:0 12px 12px;display:flex;overflow:hidden}.s-card{background:#fff;border:1px solid #e8e8ed;border-radius:12px;padding:10px 11px}.s-row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.s-row+.s-row{margin-top:5px}.s-label{color:#6e6e73}.s-big{letter-spacing:-.02em;font-size:22px;font-weight:700}.s-mid{font-size:14px;font-weight:700}.s-plate{letter-spacing:.02em;font-weight:700}.s-chip{background:var(--app-soft);color:var(--app);border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:10px;font-weight:700;display:inline-flex}.s-chip.ok{color:#157a3a;background:#e7f6ec}.s-chip.warn{color:#8a5a00;background:#fff4d6}.s-chip.bad{color:#b42318;background:#fde8e8}.s-chip.mute{color:#6e6e73;background:#f2f2f7}.s-dot{background:currentColor;border-radius:50%;width:6px;height:6px;display:inline-block}.s-btn{background:var(--app);color:#fff;border-radius:10px;justify-content:center;align-items:center;height:34px;font-size:12px;font-weight:700;display:flex}.s-btn.ghost{color:#1d1d1f;background:0 0;border:1px solid #d2d2d7}.s-input{background:#fff;border:1.5px solid #d2d2d7;border-radius:10px;padding:7px 10px;font-size:15px;font-weight:700}.s-input.err{border-color:#b42318}.s-err{color:#b42318;margin-top:4px;font-size:10.5px}.s-hr{background:#e8e8ed;height:1px;margin:6px 0}.s-nav{color:#6e6e73;background:#fff;border-top:1px solid #e8e8ed;justify-content:space-around;padding:7px 0 9px;font-size:9.5px;display:flex}.s-nav span{flex-direction:column;align-items:center;gap:3px;display:flex}.s-nav span:before{content:"";background:#d2d2d7;border-radius:2px;width:16px;height:3px}.s-nav .on{color:var(--app);font-weight:700}.s-nav .on:before{background:var(--app)}.s-pills{flex-wrap:wrap;gap:5px;display:flex}.s-pill{border:1px solid #d2d2d7;border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:600}.s-pill.on{background:var(--app);border-color:var(--app);color:#fff}.s-green{color:#157a3a}.s-red{color:#b42318}.s-accent{color:var(--app)}.phone{transform:perspective(1100px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg)) translateY(var(--lift,0px)) scale(var(--pscale,1));will-change:transform;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s;position:relative}.phone:after{content:"";z-index:10;pointer-events:none;opacity:0;background:linear-gradient(105deg,#0000 38%,#ffffff61 48%,#ffffff1f 54%,#0000 62%);position:absolute;inset:-20%;transform:translate(-75%)}@media (hover:hover) and (pointer:fine){.phone:hover{--lift:-10px;transition:transform .18s ease-out,box-shadow .5s;box-shadow:0 46px 80px -34px #1f19158c,0 18px 40px -24px #f7670773,0 0 0 1px #ffffff0f}.phone:hover:after{opacity:1;transition:transform 1.1s cubic-bezier(.3,.6,.2,1),opacity .2s;transform:translate(75%)}.phone.owner:hover{box-shadow:0 46px 80px -34px #1f19158c,0 18px 40px -24px #4f46e580,0 0 0 1px #ffffff0f}}@media (hover:none){.phone:active{--pscale:.975;transition:transform .15s ease-out}}@media (prefers-reduced-motion:reduce){.phone,.phone:hover,.phone:active{transition:box-shadow .3s;transform:none}.phone:after{display:none}}
