/* Gold Rose iPhone (shared component, site v5.6.2). Same look as the homepage phones: iPhone Pro ratio, natural titanium,
   Dynamic Island, cream screen. Size with --w. Decorative: markup carries role="img" + aria-label. Used on /start/, /login/, /network/join/. */
.gr-phone{--w:250px;position:relative;width:var(--w);aspect-ratio:71.5/146.6;display:flex;flex-direction:column;border-radius:15.5%/7.6%;padding:calc(var(--w)*.027);
  background:linear-gradient(135deg,#F4EFE8 0%,#CFC6BA 20%,#B7AD9F 50%,#D4CBBF 80%,#F7F2EC 100%);color:#1F1A17;font-family:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 0 2.5px #2A2421,inset 0 0 0 3.5px rgba(231,197,122,.35),0 50px 90px -30px rgba(0,0,0,.75),0 18px 34px -16px rgba(0,0,0,.5);
  transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d}
.gr-phone::before{content:"";position:absolute;z-index:3;top:calc(var(--w)*.027 + 2.3%);left:50%;width:31%;height:3.9%;transform:translateX(-50%);border-radius:999px;
  background:radial-gradient(circle at 78% 50%,#1C2433 0 3px,#06080C 4px 5px,transparent 5.5px),#000}
.gr-phone::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 24%,transparent 40%)}
.gr-phone .hw{position:absolute;inset:0;border-radius:inherit;background:#8E8578;transform:translateZ(-12px);box-shadow:0 0 0 1px #CFC6BA}
.gr-phone .hw::before,.gr-phone .hw::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#8E8578,#EDE6DC 60%,#A79D90)}
.gr-phone .hw::before{left:-3px;top:17%;height:4.6%;box-shadow:0 calc(var(--w)*.17) 0 0 #C9C0B3,0 calc(var(--w)*.31) 0 0 #C9C0B3}
.gr-phone .hw::after{right:-3px;top:27%;height:11%}
.gr-screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:12.2%/5.8%;
  background:linear-gradient(180deg,#F1E6D3 0,#FBF7F2 40%);box-shadow:inset 0 0 0 1px rgba(201,164,96,.3);font-size:calc(var(--w)*.046);line-height:1.4}
.gr-screen::before{content:var(--clock,"9:41");flex:none;display:block;height:calc(var(--w)*.15);padding:calc(var(--w)*.047) 0 0 calc(var(--w)*.085);font-weight:600;font-size:calc(var(--w)*.043);line-height:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='13' viewBox='0 0 66 13'%3E%3Cg fill='%231F1A17'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29 3.2a9 9 0 0 1 11 0l-1.3 1.5a7 7 0 0 0-8.4 0zM31.4 6a5.3 5.3 0 0 1 6.2 0l-1.3 1.5a3.4 3.4 0 0 0-3.6 0zM34.5 11.6l-1.6-1.9a2.4 2.4 0 0 1 3.2 0z'/%3E%3Crect x='44.5' y='1.5' width='19' height='10' rx='3' fill='none' stroke='%231F1A17' stroke-opacity='.45'/%3E%3Crect x='46' y='3' width='14' height='7' rx='1.6'/%3E%3Crect x='64.3' y='4.6' width='1.5' height='3.8' rx='.7' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") right calc(var(--w)*.075) top calc(var(--w)*.05)/calc(var(--w)*.18) auto no-repeat}
.gr-top{display:flex;align-items:center;gap:9px;padding:2px 12px 9px;border-bottom:1px solid rgba(201,164,96,.35)}
.gr-top .av{width:calc(var(--w)*.11);height:calc(var(--w)*.11);border-radius:50%;background:#9E3B55;color:#FBF7F2;display:grid;place-items:center;flex:none}
.gr-top .av svg{width:70%;height:70%}
.gr-top b{display:block;font-weight:600;font-size:1em}
.gr-top span{display:flex;align-items:center;gap:5px;font-size:.82em;color:#6B5F57}
.gr-top span i{width:6px;height:6px;border-radius:50%;background:#2F9E5B}
.gr-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 10px 8px}
.gr-chat .m{max-width:86%;padding:7px 10px;border-radius:14px}
.gr-chat .ai{align-self:flex-start;background:#fff;border:1px solid rgba(201,164,96,.45);border-top-left-radius:5px;box-shadow:0 6px 14px -12px rgba(60,30,20,.5)}
.gr-chat .me{align-self:flex-end;background:#9E3B55;color:#fff;border-top-right-radius:5px}
.gr-chips{display:flex;gap:6px;padding:0 10px 4px}
.gr-chips span{border:1.5px solid #9E3B55;color:#9E3B55;background:#fff;border-radius:999px;padding:4px 10px;font-size:.88em;font-weight:500}
.gr-note{flex:none;margin:0;padding:6px 10px calc(var(--w)*.05);text-align:center;font-size:.78em;color:#6B5F57}
/* lock-screen variant (order alert) */
.gr-lock .gr-time{text-align:center;font-size:calc(var(--w)*.17);font-weight:300;line-height:1;margin-top:calc(var(--w)*.03)}
.gr-lock .gr-date{text-align:center;font-size:.88em;color:#6B5F57;margin:4px 0 12px}
.gr-notif{margin:0 9px;background:rgba(255,255,255,.92);border:1px solid rgba(201,164,96,.45);border-radius:16px;padding:9px 10px;box-shadow:0 12px 24px -18px rgba(40,30,10,.6)}
.gr-notif .from{display:flex;align-items:center;gap:6px;font-size:.78em;color:#6B5F57;letter-spacing:.08em;text-transform:uppercase}
.gr-notif .from b{color:#13386A;font-weight:600}
.gr-notif .from em{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:0}
.gr-notif h4{margin:6px 0 2px;font-size:1.02em;font-weight:600}
.gr-notif p{margin:0;color:#4F453E;font-size:.92em}
.gr-notif .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.gr-notif .acts span{text-align:center;border-radius:999px;padding:6px 0;font-weight:500;font-size:.92em}
.gr-notif .acts .y{background:#13386A;color:#fff}.gr-notif .acts .n{border:1.5px solid rgba(201,164,96,.7)}
@media (prefers-reduced-motion:reduce){.gr-phone{transform:none}.gr-phone .hw{transform:none}}