.appmock{--m-page: #f4f6fc;--m-card: #ffffff;--m-box: #e7ebf2;--m-hover: #f3f5f9;--m-border: #e3e8f0;--m-border-soft: #eef1f7;--m-border-strong: #d2d9e6;--m-title: #1a1f2e;--m-body: #3a4250;--m-muted: #4f5868;--m-dim: #6b7588;--m-main: #3b5bdb;--m-main-soft: rgba(59, 91, 219, .1);--m-success: #2f8f57;--m-warning: #bd7d28;--m-error: #c5503f;--m-action: #c98a3c;--m-shadow-sm: 0 1px 2px 0 rgba(30, 41, 90, .06);--m-shadow-md: 0 1px 2px 0 rgba(30, 41, 90, .05), 0 6px 16px -8px rgba(30, 41, 90, .13);font-family:Noto Sans SC,IBM Plex Sans,system-ui,sans-serif;color:var(--m-body);background:var(--m-page);font-size:13px;line-height:1.5;text-align:left}.appmock .mock-mat{border-radius:16px;padding:24px;background:radial-gradient(120% 120% at 0% 0%,rgba(59,91,219,.34) 0%,transparent 54%),radial-gradient(120% 120% at 100% 100%,rgba(138,147,166,.42) 0%,transparent 54%),linear-gradient(135deg,#e3e8f6,#d6deef,#c9d3ea)}@media(min-width:768px){.appmock .mock-mat{padding:48px}}@media(max-width:480px){.appmock .mock-mat{padding:12px;border-radius:12px}.mock-caption{font-size:12px}}@media(max-width:640px){.appmock .mock-body{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}}@media(max-width:640px){.appmock .mka-sm-stack{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}.appmock .mka-sm-stack>*{width:100%!important;max-width:100%!important}.appmock .mka-sm-hide{display:none!important}.appmock .mka-sm-xscroll{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.appmock .mka-sm-xscroll>*{flex:0 0 auto!important}.appmock .mka-sm-xscroll::-webkit-scrollbar{height:0}.appmock .mka-sm-full{width:100%!important;max-width:100%!important;flex:1 1 100%!important}.appmock .mka-sm-wrap{flex-wrap:wrap!important}.appmock .mka-sm-minw{min-width:460px!important}.appmock .mka-sm-rowcard{display:flex!important;flex-wrap:wrap!important;gap:4px 14px!important;align-items:baseline!important;padding:10px 0!important}.appmock .mka-sm-rowcard>*{width:auto!important;text-align:left!important}}.mock-window{border-radius:14px;overflow:hidden;border:1px solid var(--m-border);box-shadow:0 18px 40px -16px #1e295a42,0 0 0 1px #1e295a05;background:var(--m-card);transform:translateZ(0);isolation:isolate}.mock-body{padding:16px;background:var(--m-page)}.appmock .mock-player{display:flex;align-items:center;gap:12px;margin-top:16px;padding:0 2px}.appmock .mock-progress{flex:1;display:flex;gap:5px}.appmock .seg{flex:1;height:4px;border-radius:999px;background:#1c1d2029;overflow:hidden}.appmock .seg-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#1c1d2099;border-radius:inherit}.appmock .mock-replay{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(28,29,32,.18);background:#ffffffb8;color:#44464a;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.appmock .mock-replay:hover{background:#fff;color:#1c1d20;border-color:#1c1d204d}@media(pointer:coarse){.appmock .mock-replay{width:44px;height:44px}}@media(prefers-reduced-motion:reduce){.appmock .mock-player{display:none}}.mock-caption{margin-top:12px;text-align:center;font-size:13px;color:#6b7588}.mock-titlebar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f3f5f9;border-bottom:1px solid var(--m-border)}.mock-dot{width:10px;height:10px;border-radius:50%}.mock-dot.r{background:#ff5f57}.mock-dot.y{background:#febc2e}.mock-dot.g{background:#28c840}.mock-url{margin-left:10px;flex:1;font-size:11px;color:var(--m-dim);background:#fff;border:1px solid var(--m-border);border-radius:6px;padding:3px 10px;font-family:ui-monospace,monospace}.appmock .mk-card{background:var(--m-card);border:1px solid var(--m-border);border-radius:10px;box-shadow:var(--m-shadow-sm)}.appmock .mk-title{color:var(--m-title);font-weight:700}.appmock .mk-muted{color:var(--m-muted)}.appmock .mk-dim{color:var(--m-dim)}.appmock .mk-tabnum{font-variant-numeric:tabular-nums}.appmock .mk-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}.appmock .mk-badge.new{background:#e5ecf9;color:#2a4684}.appmock .mk-badge.read{background:#eae8f6;color:#574a82}.appmock .mk-badge.replied{background:#e1eee6;color:#2f7a4a}.appmock .mk-badge.quoted{background:#f6ead4;color:#9a6a1f}.appmock .mk-badge.closed{background:#e9ebf1;color:#6b7588}.appmock .mk-badge.q-default{background:var(--m-main-soft);color:var(--m-main)}.appmock .mk-badge.q-success{background:#e1eee6;color:var(--m-success)}.appmock .mk-badge.q-voided{background:#f5e2df;color:#b4452f}.appmock .mka-stage{animation:mka-breathe var(--mka-d, 4.5s) ease-in-out infinite}.appmock [class*=mka-r],.appmock [class*=mka-c],.appmock [class*=mka-p]{opacity:0}.appmock .mka-r1{animation:mka-r1 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-r2{animation:mka-r2 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-r3{animation:mka-r3 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-r4{animation:mka-r4 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-r5{animation:mka-r5 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-r6{animation:mka-r6 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-c1{animation:mka-c1 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-c2{animation:mka-c2 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-c3{animation:mka-c3 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-c4{animation:mka-c4 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-c5{animation:mka-c5 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-c6{animation:mka-c6 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-o1{opacity:1;animation:mka-o1 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-o2{opacity:1;animation:mka-o2 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-o3{opacity:1;animation:mka-o3 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-o4{opacity:1;animation:mka-o4 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-p1{animation:mka-p1 var(--mka-d,4.5s) cubic-bezier(.34,1.56,.64,1) infinite}.appmock .mka-p2{animation:mka-p2 var(--mka-d,4.5s) cubic-bezier(.34,1.56,.64,1) infinite}.appmock .mka-p3{animation:mka-p3 var(--mka-d,4.5s) cubic-bezier(.34,1.56,.64,1) infinite}.appmock .mka-p4{animation:mka-p4 var(--mka-d,4.5s) cubic-bezier(.34,1.56,.64,1) infinite}.appmock [class*=mka-g]{width:100%;transform:scaleX(0);transform-origin:left}.appmock .mka-g1{animation:mka-g1 var(--mka-d,4.5s) ease-in-out infinite}.appmock .mka-g2{animation:mka-g2 var(--mka-d,4.5s) ease-in-out infinite}.appmock .mka-g3{animation:mka-g3 var(--mka-d,4.5s) ease-in-out infinite}.appmock .mka-g4{animation:mka-g4 var(--mka-d,4.5s) ease-in-out infinite}.appmock .mka-pulse{animation:mka-pulse 1.6s ease-out infinite}.appmock .mka-pulse-early{animation:mka-pulse-early var(--mka-d,4.5s) ease-out infinite}.appmock .mka-pulse-late{animation:mka-pulse-late var(--mka-d,4.5s) ease-out infinite}.appmock .mka-tap1{animation:mka-tap1 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-tap2{animation:mka-tap2 var(--mka-d,4.5s) ease-out infinite}.appmock .mka-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:1.5px solid var(--m-main);width:0;animation:mka-type var(--mka-d,4.5s) steps(36,end) infinite,mka-caret .7s step-end infinite}.appmock [class*=mka-when-]{opacity:0;transition:opacity .45s ease}.appmock[data-step="0"] .mka-when-0,.appmock[data-step="1"] .mka-when-1,.appmock[data-step="2"] .mka-when-2,.appmock[data-step="3"] .mka-when-3,.appmock[data-step="4"] .mka-when-4,.appmock[data-step="5"] .mka-when-5,.appmock[data-step="6"] .mka-when-6,.appmock[data-step="7"] .mka-when-7{opacity:1}@keyframes mka-breathe{0%{opacity:0}3%{opacity:1}94%{opacity:1}to{opacity:0}}@keyframes mka-r1{0%,6%{opacity:0;transform:translateY(6px)}14%,to{opacity:1;transform:translateY(0)}}@keyframes mka-r2{0%,14%{opacity:0;transform:translateY(6px)}22%,to{opacity:1;transform:translateY(0)}}@keyframes mka-r3{0%,22%{opacity:0;transform:translateY(6px)}30%,to{opacity:1;transform:translateY(0)}}@keyframes mka-r4{0%,30%{opacity:0;transform:translateY(6px)}38%,to{opacity:1;transform:translateY(0)}}@keyframes mka-r5{0%,38%{opacity:0;transform:translateY(6px)}46%,to{opacity:1;transform:translateY(0)}}@keyframes mka-r6{0%,46%{opacity:0;transform:translateY(6px)}54%,to{opacity:1;transform:translateY(0)}}@keyframes mka-c1{0%,24%{opacity:0}32%,to{opacity:1}}@keyframes mka-c2{0%,32%{opacity:0}40%,to{opacity:1}}@keyframes mka-c3{0%,40%{opacity:0}48%,to{opacity:1}}@keyframes mka-c4{0%,48%{opacity:0}56%,to{opacity:1}}@keyframes mka-c5{0%,56%{opacity:0}64%,to{opacity:1}}@keyframes mka-c6{0%,64%{opacity:0}72%,to{opacity:1}}@keyframes mka-o1{0%,24%{opacity:1}32%,to{opacity:0}}@keyframes mka-o2{0%,32%{opacity:1}40%,to{opacity:0}}@keyframes mka-o3{0%,40%{opacity:1}48%,to{opacity:0}}@keyframes mka-o4{0%,48%{opacity:1}56%,to{opacity:0}}@keyframes mka-p1{0%,18%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1.12)}30%,to{opacity:1;transform:scale(1)}}@keyframes mka-p2{0%,28%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(1.12)}40%,to{opacity:1;transform:scale(1)}}@keyframes mka-p3{0%,38%{opacity:0;transform:scale(.4)}46%{opacity:1;transform:scale(1.12)}50%,to{opacity:1;transform:scale(1)}}@keyframes mka-p4{0%,48%{opacity:0;transform:scale(.4)}56%{opacity:1;transform:scale(1.12)}60%,to{opacity:1;transform:scale(1)}}@keyframes mka-g1{0%,22%{transform:scaleX(0)}34%,to{transform:scaleX(1)}}@keyframes mka-g2{0%,34%{transform:scaleX(0)}46%,to{transform:scaleX(1)}}@keyframes mka-g3{0%,46%{transform:scaleX(0)}58%,to{transform:scaleX(1)}}@keyframes mka-g4{0%,58%{transform:scaleX(0)}70%,to{transform:scaleX(1)}}@keyframes mka-pulse{0%{box-shadow:0 0 0 0 var(--m-main-soft)}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes mka-pulse-early{0%{box-shadow:0 0 0 0 var(--m-main-soft)}17%{box-shadow:0 0 0 7px transparent}34%{box-shadow:0 0 0 0 var(--m-main-soft)}40%,to{box-shadow:0 0 0 0 transparent}}@keyframes mka-pulse-late{0%,44%{box-shadow:0 0 0 0 transparent}52%{box-shadow:0 0 0 0 var(--m-main-soft)}64%{box-shadow:0 0 0 7px transparent}80%{box-shadow:0 0 0 0 var(--m-main-soft)}92%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes mka-tap1{0%,44%{transform:scale(1)}47%{transform:scale(.94)}50%,to{transform:scale(1)}}@keyframes mka-tap2{0%,56%{transform:scale(1)}59%{transform:scale(.94)}62%,to{transform:scale(1)}}@keyframes mka-type{0%,8%{width:0}40%,to{width:100%}}@keyframes mka-caret{50%{border-color:transparent}}@media(prefers-reduced-motion:reduce){.appmock .mka-stage,.appmock [class*=mka-r],.appmock [class*=mka-c],.appmock [class*=mka-p],.appmock [class*=mka-o],.appmock [class*=mka-g],.appmock [class*=mka-tap],.appmock .mka-type{animation:none!important}.appmock .mka-stage{opacity:1!important}.appmock [class*=mka-r],.appmock [class*=mka-c],.appmock [class*=mka-p]{opacity:1!important;transform:none!important}.appmock [class*=mka-o]{opacity:0!important}.appmock [class*=mka-g]{transform:scaleX(1)!important}.appmock [class*=mka-pulse]{box-shadow:none!important}.appmock .mka-type{width:auto!important;border-right:none!important}}