:root { --shine: 100%; --wa: #25d366; --wa-icon: #1fa855; --wa-mic: #1daa61; }
.sk { background: linear-gradient(90deg, var(--skel) 0%, var(--skel) 40%, #f3f5f8 50%, var(--skel) 60%, var(--skel) 100%);
      background-size: 300% 100%; background-position: var(--shine) 0; }
.sk--dark { background-image: linear-gradient(90deg, var(--skel-dark) 0%, var(--skel-dark) 40%, #e6e9ed 50%, var(--skel-dark) 60%, var(--skel-dark) 100%); }

#root { background: linear-gradient(135deg, #e6f4ea 10%, #a8dab5 100%); }
.blob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }

/* The camera moves this layer (world px; phone sits to the right of the dashboard) */
#world { position: absolute; left: 0; top: 0; width: 2600px; height: 1080px; transform-origin: 0 0; }

/* ---------- Members dashboard ---------- */
.win { left: 40px; top: 40px; width: 1840px; height: 1000px; }
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 92px; display: flex; align-items: center; gap: 22px; padding: 0 34px; }
.menu { width: 30px; height: 4px; border-radius: 2px; background: #5f6368; box-shadow: 0 -10px 0 #5f6368, 0 10px 0 #5f6368; margin-right: 8px; }
.logo { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.2); }
.logo img { width: 36px; height: 36px; }
.search { display: flex; align-items: center; gap: 14px; width: 560px; height: 58px; margin-left: 280px; padding: 0 24px; border-radius: 29px; background: var(--tile); color: var(--muted); }
.tb-right { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.tb-right span { width: 40px; height: 40px; border-radius: 50%; background: var(--skel-dark); }
.tb-right .cal { width: 170px; height: 50px; border-radius: 25px; background: #fff; border: 2px solid #f2b8b5; }
.rail { position: absolute; left: 20px; top: 112px; display: flex; flex-direction: column; gap: 34px; align-items: center; width: 80px; }
.rail i { display: block; width: 30px; height: 30px; border-radius: 8px; background: var(--skel-dark); }
.rail i.on { width: 62px; height: 40px; border-radius: 20px; background: var(--blue-tint); }

.content { position: absolute; left: 140px; right: 50px; top: 100px; bottom: 20px; }
.pills { display: flex; gap: 14px; margin-bottom: 34px; }
.pills span { height: 48px; border-radius: 24px; background: var(--tile); }
.pills span.on { background: var(--blue-tint); }
.head { display: flex; align-items: flex-start; margin-bottom: 26px; }
.head h2 { font-family: "Outfit"; font-size: 56px; font-weight: 500; line-height: 1.1; }
.head .sk { margin-top: 10px; }
.add { margin-left: auto; width: 230px; height: 60px; border-radius: 30px; background: #0b57d0; opacity: 0.85; }
.filters { display: flex; gap: 14px; margin-bottom: 26px; }
.filters .q { width: 260px; height: 50px; border-radius: 25px; background: var(--tile); }
.filters .f { height: 50px; border-radius: 12px; border: 2px solid #c4c7c5; }

.tr { position: relative; display: grid; grid-template-columns: 120px 1.5fr 1.3fr 0.9fr 0.9fr 0.8fr 140px 180px; align-items: center; gap: 26px; height: 82px; border-top: 2px solid #eef0f3; padding: 0 10px; }
.tr.th { height: 52px; border-top: none; }
.mem { display: flex; align-items: center; gap: 18px; }
.pastel { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.photo-av { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #34a853; }
.name { font-size: 30px; font-weight: 600; white-space: nowrap; }
.contact { display: flex; flex-direction: column; gap: 10px; }
.stat { display: flex; align-items: center; gap: 10px; }
.stat i { width: 14px; height: 14px; border-radius: 50%; background: #c4c7c5; flex-shrink: 0; }
.stat.on { font-size: 26px; font-weight: 600; color: var(--green-dark); }
.stat.on i { background: var(--green); }
.stat.off { font-size: 26px; font-weight: 600; color: var(--red); }
.stat.off i { background: var(--red-mid); }
.acts { display: flex; justify-content: space-between; align-items: center; padding-right: 8px; }
.acts svg, .acts img { width: 40px; height: 40px; }
.ic-wa { color: var(--wa-icon); } .ic-call { color: #1a73e8; } .ic-more { color: #80868b; }
.hit__hl { position: absolute; inset: 4px -8px; border-radius: 22px; background: #e7f6ec; }
.hit > :not(.hit__hl):not(.ping) { position: relative; }
.ping { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--wa); }

/* ---------- Phone ---------- */
.phone { position: absolute; left: 2000px; top: 40px; width: 460px; height: 920px; padding: 14px; border-radius: 76px; background: #2f3033; box-shadow: var(--shadow), inset 0 0 0 3px #4a4b4f; }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 62px; background: #1e2f4a; }
.island { position: absolute; left: 50%; top: 18px; width: 130px; height: 38px; margin-left: -65px; border-radius: 19px; background: #000; z-index: 10; }
.home { position: absolute; left: 50%; bottom: 10px; width: 150px; height: 6px; margin-left: -75px; border-radius: 4px; z-index: 10; }
.bar { display: flex; justify-content: space-between; align-items: center; height: 74px; padding: 14px 36px 0 46px; font-size: 23px; font-weight: 600; }
.bar svg { width: 84px; height: 21px; }

/* Lock screen (iOS style) */
#lock { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(165deg, #34506e 0%, #22385a 45%, #1d3d43 100%); }
.shape { position: absolute; border-radius: 50%; }
.lock-date { width: 170px; height: 22px; margin: 28px auto 0; border-radius: 13px; background: rgba(255, 255, 255, 0.45); }
.clock { margin-top: 6px; text-align: center; color: #fff; font-family: "Outfit"; font-size: 128px; font-weight: 600; line-height: 1.05; opacity: 0.92; }
.lock-btns { position: absolute; left: 40px; right: 40px; bottom: 46px; display: flex; justify-content: space-between; }
.lock-btns span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.25); }
.lock-btns svg { width: 32px; height: 32px; }

.notif { position: absolute; left: 16px; right: 16px; top: 470px; display: flex; gap: 14px; padding: 18px 18px 20px; border-radius: 30px;
         background: rgba(30, 45, 70, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(18px); color: #fff; z-index: 3; }
.n-av { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.n-av .lg { width: 42px; height: 42px; }
.n-av .wa-dot { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: #fff; }
.n-txt { flex: 1; min-width: 0; }
.n-top { display: flex; justify-content: space-between; font-size: 23px; font-weight: 600; }
.n-top span { font-weight: 400; font-size: 19px; opacity: 0.85; }
.n-txt b { display: block; font-size: 22px; font-weight: 600; margin-top: 2px; }
.n-txt p { font-size: 21px; line-height: 1.3; margin-top: 2px; }

/* WhatsApp chat (light iOS style) */
#chat { position: absolute; inset: 0; background: #ece5dd; transform-origin: 50% 62%; }
.chat-top { background: #f6f6f6; border-bottom: 2px solid #e4e4e4; color: #111; }
.chat-head { display: flex; align-items: center; gap: 14px; height: 84px; padding: 0 22px 6px 14px; }
.chev { width: 34px; height: 34px; color: #3b3b3b; }
.c-av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #e4e4e4; flex-shrink: 0; }
.c-av svg, .c-av img { width: 36px; height: 36px; }
.c-name b { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 600; }
.c-name small { font-size: 19px; color: var(--muted); }
.verified { width: 22px; height: 22px; flex-shrink: 0; }
.c-icons { display: flex; gap: 22px; margin-left: auto; color: #3b3b3b; }
.c-icons svg { width: 30px; height: 30px; }
.day { position: absolute; left: 50%; top: 172px; transform: translateX(-50%); padding: 5px 18px; border-radius: 12px; background: #e1f0fb; font-size: 20px; font-weight: 600; color: #3b4a54; }

.msg { position: absolute; left: 22px; right: 82px; top: 214px; overflow: hidden; border-radius: 6px 22px 22px 22px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transform-origin: top left; }
.banner { display: block; width: 100%; height: 246px; object-fit: cover; object-position: 50% 40%; }
.body { padding: 18px 20px 14px; }
.title { font-size: 24px; font-weight: 700; }
.joined { margin-top: 4px; font-size: 19px; color: var(--muted); }
.joined b { color: var(--text); font-weight: 600; }
.rule { height: 2px; margin: 14px 0; background: #eceff1; }
.kv { display: grid; grid-template-columns: 124px 1fr; row-gap: 6px; font-size: 19px; line-height: 1.28; }
.kv dt { font-weight: 600; }
.kv dd { color: var(--muted); }
.invoice { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 12px; border-radius: 12px; background: #eef4fd; font-size: 16px; white-space: nowrap; }
.invoice svg { width: 22px; height: 22px; color: var(--blue); flex-shrink: 0; }
.invoice span { color: var(--muted); }
.invoice u { color: #0b57d0; font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; }
.foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 2px solid #eceff1; font-size: 16px; color: var(--muted); }
.foot em { font-style: italic; }
.ticks { position: relative; display: inline-block; width: 28px; height: 18px; vertical-align: middle; }
.ticks svg { position: absolute; inset: 0; }

.cursor { position: absolute; left: 0; top: 0; z-index: 50; }
.cursor svg { position: absolute; left: -6px; top: -4px; width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cursor .tag { position: absolute; left: 30px; top: 40px; padding: 6px 16px; border-radius: 10px; background: #1967d2; color: #fff; font-size: 26px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.ripple { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: rgba(11, 87, 208, 0.35); z-index: 49; }