/* A single front-facing device system for every standalone Presence UI view.
   Text and original SVG marks remain sharp at every device pixel ratio. */
.presence-device{--pd-bg:#fff;--pd-fg:#111;--pd-muted:#70716d;--pd-line:#e6e6e2;--pd-soft:#f1f1ef;display:block;margin:34px auto 28px;width:100%;max-width:960px;isolation:isolate}
html[data-theme=dark] .presence-device{--pd-bg:#111;--pd-fg:#f3f1eb;--pd-muted:#a5a6a0;--pd-line:#30312e;--pd-soft:#222320}
.pd-frame{position:relative;padding:18px;border:1px solid #777974;border-radius:30px;background:#242522;box-shadow:inset 0 0 0 3px #3b3d38,0 7px 18px #08090812}
.pd-frame:before{content:'';position:absolute;width:5px;height:5px;left:calc(50% - 2.5px);top:6px;border-radius:50%;background:#0c0d0b;box-shadow:0 0 0 1px #4a4b46}
.pd-screen{container-type:inline-size;position:relative;border-radius:13px;overflow:hidden;background:var(--pd-bg);color:var(--pd-fg)}
.pd-ui{position:relative;display:grid;grid-template-columns:25% 1fr;grid-template-rows:15% 1fr;aspect-ratio:1120/720;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.8cqw;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--pd-fg);pointer-events:none;user-select:none}
.pd-ui svg{display:block;width:2.5cqw;height:2.5cqw;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pd-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 4cqw}
.pd-brand{display:flex;align-items:center;gap:1cqw;white-space:nowrap}
.pd-ui .pd-brand img{display:block;width:20cqw;height:auto;border-radius:0;background:transparent;object-fit:contain}
html[data-theme=dark] .pd-brand img{filter:invert(1)}
.pd-brand>span{font-size:1.5cqw;font-weight:500;letter-spacing:-.03em}
.pd-profile svg{width:2.2cqw;height:2.2cqw}
.pd-sidebar{display:flex;flex-direction:column;gap:1cqw;padding:2cqw}
.pd-nav-item{display:flex;gap:1.7cqw;align-items:center;padding:1.6cqw;border-radius:1cqw;color:var(--pd-muted)}
.pd-selected{background:var(--pd-soft);color:var(--pd-fg);font-weight:500}
.pd-account{margin-top:4cqw}
.pd-main{padding:2.9cqw 5cqw 5cqw 4cqw;min-width:0}
.pd-heading{display:flex;justify-content:space-between;align-items:center;gap:1.4cqw;margin-bottom:4cqw}
.pd-heading>strong{font-size:4.2cqw;font-weight:600;letter-spacing:-.05em;line-height:1.1}
.pd-add{display:flex;gap:.8cqw;align-items:center;white-space:nowrap;font-size:1.8cqw;font-weight:500}.pd-add>span{font-size:2.6cqw;font-weight:300}
.pd-row{display:flex;align-items:center;gap:2cqw;padding:3.1cqw 0;border-top:1px solid var(--pd-line)}.pd-row:last-child{border-bottom:1px solid var(--pd-line)}
.pd-row-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:.6cqw}.pd-row-text>strong{font-size:2.1cqw;font-weight:500}.pd-row-text>span{font-size:1.7cqw;color:var(--pd-muted)}
.pd-ui .pd-row>svg{width:1.5cqw;height:1.5cqw;color:var(--pd-muted)}
.pd-ui .pd-key-symbol svg{width:3.5cqw;height:4.8cqw;stroke-width:1.3}
.pd-avatar{width:4.4cqw;height:4.4cqw;border-radius:50%;display:grid;place-items:center;background:var(--pd-soft);color:var(--pd-muted);font-size:1.5cqw;flex:none}
.pd-tabs{display:flex;gap:2.5cqw;font-size:1.5cqw;color:var(--pd-muted);margin:-1.5cqw 0 1.5cqw}.pd-tabs>span:first-child{color:var(--pd-fg);border-bottom:1px solid;padding-bottom:1cqw}
.pd-enterprise .pd-row{padding:2cqw 0}
.pd-status,.pd-bottom,.pd-home-indicator{display:none}
@media(max-width:640px){
 .presence-device{max-width:310px;width:calc(100% - 16px);margin:30px auto 28px}
 .pd-frame{padding:8px;border-radius:43px;box-shadow:inset 0 0 0 2px #454741,0 6px 16px #08090812}
 .pd-frame:before{z-index:2;width:27%;height:19px;left:36.5%;top:17px;border-radius:20px;background:#080908;box-shadow:none}
 .pd-screen{border-radius:34px}
 .pd-ui{display:flex;flex-direction:column;aspect-ratio:390/810;font-size:4cqw}
 .pd-status{display:flex;align-items:center;justify-content:space-between;padding:3.8cqw 7cqw 3cqw;min-height:15cqw;font-size:3.7cqw;font-weight:600}
 .pd-status-indicators svg{width:12cqw;height:4cqw;stroke-width:1.3}
 .pd-top{flex:none;padding:2cqw 6cqw 5cqw;min-height:19cqw}
 .pd-ui .pd-brand img{width:46cqw;height:auto}
 .pd-ui .pd-profile svg{width:5cqw;height:5cqw}
 .pd-enterprise .pd-brand{gap:0;flex-direction:column;align-items:flex-start}
 .pd-enterprise .pd-brand>span{font-size:3.3cqw;margin-left:2.4cqw;margin-top:-1cqw;color:var(--pd-muted)}
 .pd-sidebar{display:none}
 .pd-main{padding:9cqw 6cqw 0;flex:1;min-height:0}
 .pd-heading{margin-bottom:8cqw;gap:3cqw}
 .pd-heading>strong{font-size:9.2cqw}
 .pd-add{font-size:4.2cqw;gap:1.5cqw}.pd-add>span{font-size:6cqw}
 .pd-row{padding:8.2cqw 0;gap:4cqw}
 .pd-row-text{gap:1.5cqw}.pd-row-text>strong{font-size:5cqw}.pd-row-text>span{font-size:4cqw}
 .pd-ui .pd-key-symbol svg{width:7.8cqw;height:10.5cqw}
 .pd-ui .pd-row>svg{width:3cqw;height:3cqw}
 .pd-avatar{width:10cqw;height:10cqw;font-size:3.5cqw}
 .pd-tabs{font-size:3.7cqw;gap:5cqw;margin:-1cqw 0 3cqw}.pd-tabs>span:first-child{padding-bottom:2cqw}
 .pd-enterprise .pd-row{padding:6cqw 0}
 .pd-bottom{display:flex;flex:none;justify-content:space-around;gap:2cqw;border-top:1px solid var(--pd-line);padding:5cqw 4cqw 4cqw}
 .pd-bottom .pd-nav-item{flex-direction:column;gap:2cqw;padding:0;min-width:22cqw;border-radius:0;background:transparent;font-size:3.6cqw}
 .pd-bottom svg{width:6cqw;height:6cqw}
 .pd-home-indicator{display:block;flex:none;background:var(--pd-fg);opacity:.85;width:31%;height:1.2cqw;border-radius:3cqw;margin:1cqw auto 2.5cqw}
}