.appmock{--g:#1fac85;--gdeep:#0f6e56;--card:#1a1a1a;--ovr:#c7492b;--ack:#b5651d;--mut:#8c857a;--ln:#f0e9da;background:#15120c;border-radius:38px;width:290px;padding:9px;position:relative;box-shadow:0 50px 90px -40px #281e0ca6,0 0 0 1px #0000004d}.appmock:after{content:"";z-index:5;background:#15120c;border-radius:999px;width:92px;height:22px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.appmock .screen{background:#fff;border-radius:30px;flex-direction:column;width:272px;height:auto;display:flex;position:relative;overflow:hidden}.appmock .canvas{zoom:.66;background:#fff;flex-direction:column;width:412px;display:flex}.appmock .scr-status{color:#15120c;justify-content:space-between;align-items:center;padding:14px 22px 2px;font-weight:600;display:flex}.appmock .scroll{padding-bottom:2px}.appmock .ph-head{justify-content:space-between;align-items:center;padding:12px 18px 0;display:flex}.appmock .av{background:var(--g);color:#fff;width:40px;height:40px;font-size:15px;font-weight:800;font-family:var(--font-display);border-radius:13px;place-items:center;display:grid}.appmock .bell{color:#2a2620;background:#f3ecdd;border-radius:13px;place-items:center;width:40px;height:40px;display:grid;position:relative}.appmock .bell:after{content:"";background:#e0512a;border:1.5px solid #f3ecdd;border-radius:50%;width:7px;height:7px;position:absolute;top:9px;right:10px}.appmock .greet{font-family:var(--font-display);letter-spacing:-.025em;color:#15120c;margin:10px 18px 0;font-size:25px;font-weight:800}.appmock .subc{color:var(--mut);margin:3px 18px 0;font-size:13px}.appmock .today{background:var(--card);border-radius:18px;align-items:center;gap:12px;margin:16px 18px 0;padding:13px 14px;display:flex}.appmock .today .ic{color:#7be0c4;background:#1fac8547;border-radius:12px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.appmock .today .t1{color:#fff;font-size:14.5px;font-weight:700}.appmock .today .t2{color:#ffffff9e;margin-top:2px;font-size:11.5px}.appmock .today .chev{color:#ffffff6b;flex-shrink:0;margin-left:auto}.appmock .kpi2{background:var(--card);color:#fff;border-radius:20px;margin:13px 18px 0;padding:17px 17px 16px;position:relative}.appmock .kpi2 .l{letter-spacing:.1em;text-transform:uppercase;color:#ffffff80;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700}.appmock .kpi2 .pill{color:#4fd0a3;white-space:nowrap;background:#16a37b33;border-radius:11px;padding:6px 11px;font-size:11.5px;font-weight:700;position:absolute;top:15px;right:15px}.appmock .kpi2 .v{letter-spacing:-.035em;font-size:36px;font-weight:800;font-family:var(--font-display);margin-top:8px}.appmock .kpi2 .ln{align-items:center;gap:14px;margin-top:14px;font-size:13.5px;display:flex}.appmock .kpi2 .ln .mut{color:#ffffff80}.appmock .kpi2 .ln .sep{background:#ffffff2e;width:1px;height:15px}.appmock .two{grid-template-columns:1fr 1fr;gap:11px;margin:13px 18px 0;display:grid}.appmock .tc{background:#fbf7ef;border:1px solid #ece3d2;border-radius:16px;padding:13px 14px}.appmock .tc .h{letter-spacing:.05em;text-transform:uppercase;color:var(--mut);align-items:center;gap:6px;font-size:10.5px;font-weight:700;display:flex}.appmock .tc .n{font-size:24px;font-weight:800;font-family:var(--font-display);letter-spacing:-.02em;color:#15120c;margin-top:8px}.appmock .tc .s{color:var(--mut);margin-top:2px;font-size:11px}.appmock .tc.ov .n,.appmock .tc.ov .h{color:var(--ovr)}.appmock .tc.aw .n,.appmock .tc.aw .h{color:var(--ack)}.appmock .live{justify-content:space-between;align-items:center;margin:18px 18px 9px;display:flex}.appmock .live .ll{letter-spacing:.12em;text-transform:uppercase;color:var(--mut);align-items:center;gap:8px;font-size:11px;font-weight:700;display:flex}.appmock .live .dot{background:var(--g);border-radius:50%;width:9px;height:9px}.appmock .live .all{color:var(--g);font-size:13.5px;font-weight:700}.appmock .feed{flex-direction:column;gap:9px;margin:0 18px;display:flex}.appmock .fr{border:1px solid var(--ln);background:#fff;border-radius:15px;align-items:center;gap:12px;padding:11px 13px;display:flex}.appmock .fr .bdg{border-radius:12px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.appmock .fr .ft{letter-spacing:-.01em;color:#15120c;font-size:14px;font-weight:700}.appmock .fr .fs{color:var(--mut);margin-top:1px;font-size:11.5px}.appmock .fr .ra{text-align:right;flex-shrink:0;margin-left:auto}.appmock .fr .amt{color:var(--gdeep);font-size:14px;font-weight:800}.appmock .fr .tm{color:var(--mut);font-size:11px}.appmock .nav2{border-top:1px solid var(--ln);background:#fff;justify-content:space-between;align-items:flex-end;padding:9px 20px 16px;display:flex}.appmock .nav2 .ni{color:var(--mut);flex-direction:column;align-items:center;gap:4px;font-size:9.5px;font-weight:600;display:flex;position:relative}.appmock .nav2 .ni.on{color:var(--g)}.appmock .nav2 .ni svg{width:22px;height:22px}.appmock .nav2 .fab{background:var(--g);color:#fff;width:56px;height:46px;box-shadow:0 10px 22px -8px var(--g);border:3px solid #fff;border-radius:17px;place-items:center;margin-bottom:7px;display:grid}.appmock .nav2 .bdg{color:#fff;background:#e0512a;border:1.5px solid #fff;border-radius:8px;place-items:center;min-width:16px;height:16px;padding:0 3px;font-size:9px;font-weight:800;display:grid;position:absolute;top:-5px;right:2px}