@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";.app-mock{--bg: #efece4;--surface: #ffffff;--surface-2: #f6f3ec;--ink: #0e1015;--ink-2: #2a2d34;--muted: #8a8a92;--muted-2: #c4c2bb;--line: #ece9e1;--line-strong: #dcd8cd;--accent: #2f33d1;--accent-soft: #e7e7fb;--green: #2f8a5b;--green-soft: #d6efdf;--amber: #d68b22;--amber-soft: #f8e6c8;--red: #c9442f;--red-soft: #f5d8d1;font-family:Plus Jakarta Sans,-apple-system,system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em;text-align:left}.app-mock .app{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}.app-mock .app-scroll{flex:1;overflow:hidden;padding-bottom:96px}.app-mock .head{padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between}.app-mock .head .hi{font-size:12px;color:var(--muted)}.app-mock .head .name{font-size:19px;font-weight:700;letter-spacing:-.01em}.app-mock .icon-btn{width:38px;height:38px;border-radius:999px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;position:relative;flex-shrink:0}.app-mock .icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:999px;background:var(--red);border:2px solid var(--surface)}.app-mock .card{background:var(--surface);border-radius:22px;padding:16px;box-shadow:0 1px #14141e0a,0 6px 22px -10px #14141e1a}.app-mock .card.flat{box-shadow:none;border:1px solid var(--line)}.app-mock .card.tint-ink{background:#15171c;color:#fff}.app-mock .card.tint-accent{background:var(--accent);color:#fff}.app-mock .btn{height:44px;border-radius:999px;border:0;padding:0 18px;font:inherit;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:7px;letter-spacing:-.01em;cursor:pointer}.app-mock .btn.primary{background:var(--accent);color:#fff}.app-mock .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.app-mock .btn.full{width:100%}.app-mock .btn.sm{height:36px;padding:0 14px;font-size:12.5px}.app-mock .chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}.app-mock .chip.solid{background:var(--ink);color:#fff;border-color:var(--ink)}.app-mock .chip.green{background:var(--green-soft);color:#1e5d3e;border-color:transparent}.app-mock .chip.amber{background:var(--amber-soft);color:#7b4e10;border-color:transparent}.app-mock .chip.red{background:var(--red-soft);color:#802a1c;border-color:transparent}.app-mock .chip.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent}.app-mock .nav{position:absolute;bottom:14px;left:14px;right:14px;height:62px;border-radius:999px;background:#15171c;display:flex;align-items:center;justify-content:space-around;padding:0 8px;box-shadow:0 14px 40px -10px #14141e66;z-index:5}.app-mock .nav-item{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;color:#8d8e96;position:relative}.app-mock .nav-item.active{background:var(--accent);color:#fff}.app-mock .nav-item .badge{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;border:2px solid #15171c}.app-mock .app-h1{font-size:21px;font-weight:700;letter-spacing:-.015em}.app-mock .app-h2{font-size:16px;font-weight:700;letter-spacing:-.01em}.app-mock .mono{font-family:Plus Jakarta Sans,ui-monospace,monospace;font-variant-numeric:tabular-nums}.app-mock .muted{color:var(--muted)}.app-mock .row{display:flex;align-items:center}.app-mock .col{display:flex;flex-direction:column}.app-mock .between{justify-content:space-between}.app-mock .gap-6{gap:6px}.app-mock .gap-8{gap:8px}.app-mock .gap-10{gap:10px}.app-mock .gap-12{gap:12px}.app-mock .gap-14{gap:14px}.app-mock .section-h{display:flex;align-items:center;justify-content:space-between;padding:0 18px;margin:16px 0 10px}.app-mock .section-h .t{font-size:15px;font-weight:700;letter-spacing:-.01em}.app-mock .section-h .a{font-size:12px;color:var(--muted)}.app-mock .avatar{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,#c3c1f5,#6f73e5);color:#fff;font-weight:700;display:grid;place-items:center;font-size:14px;flex-shrink:0}.app-mock .avatar.lg{width:72px;height:72px;font-size:24px}.app-mock .avatar.coral{background:linear-gradient(135deg,#fcc6bb,#e6705c)}.app-mock .avatar.amber{background:linear-gradient(135deg,#fadda4,#d68b22)}.app-mock .avatar.teal{background:linear-gradient(135deg,#b4dedf,#2a8a8f)}.app-mock .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.app-mock .cal-cell{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--ink-2)}.app-mock .cal-cell.present{background:var(--green-soft);color:#1e5d3e}.app-mock .cal-cell.absent{background:var(--red-soft);color:#802a1c}.app-mock .cal-cell.late{background:var(--amber-soft);color:#7b4e10}.app-mock .cal-cell.holiday{background:transparent;color:var(--muted-2)}.app-mock .cal-cell.today{outline:2px solid var(--accent);outline-offset:1px}.app-mock .cal-cell.empty{background:transparent}.app-mock .cal-dow{font-size:10px;color:var(--muted);text-align:center;padding:4px 0;font-weight:600}.app-mock .notif{display:flex;gap:12px;padding:13px 14px;border-radius:18px;background:var(--surface);position:relative}.app-mock .notif .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}.app-mock .tabs{display:inline-flex;padding:3px;background:var(--surface-2);border-radius:999px;border:1px solid var(--line)}.app-mock .tabs .tab{padding:7px 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;flex:1;text-align:center}.app-mock .tabs .tab.active{background:var(--ink);color:#fff}.app-mock .toggle{width:40px;height:24px;border-radius:999px;background:var(--line-strong);position:relative}.app-mock .toggle.on{background:var(--accent)}.app-mock .toggle .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 3px #0003}.app-mock .toggle.on .knob{left:19px}.app-mock .divider{height:1px;background:var(--line);margin:12px 0}.ln-no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.ln-no-scrollbar::-webkit-scrollbar{display:none}