[v-cloak] { display: none; }
body { font-feature-settings: "cv11", "ss01"; }
.inp {
  width: 100%; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem;
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.inp:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.lbl { display: block; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .3rem; letter-spacing: .01em; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: .5rem; padding: .5rem .9rem;
  font-size: .875rem; font-weight: 600; transition: background .15s, color .15s, opacity .15s; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #4338ca; }
.btn-ghost { background: #fff; color: #334155; border: 1px solid #e2e8f0; }
.btn-ghost:hover:not(:disabled) { background: #f8fafc; }
.btn-danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; }
.btn-danger:hover:not(:disabled) { background: #fef2f2; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }
.btn-sm { padding: .3rem .6rem; font-size: .78rem; }
.tbl { width: 100%; font-size: .85rem; }
.tbl th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b;
  font-weight: 600; padding: .6rem .75rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.tbl td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tr:hover td { background: #fafbff; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: .5rem;
  font-size: .875rem; color: #cbd5e1; transition: background .15s, color .15s; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(99,102,241,.22); color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.phone { background: #0f172a; border-radius: 2.2rem; padding: .7rem; box-shadow: 0 20px 40px -12px rgba(15,23,42,.35); }
.phone-screen { background: #f1f5f9; border-radius: 1.7rem; min-height: 360px; padding: 1rem .8rem; }
.bubble { background: #fff; border-radius: 1rem 1rem 1rem .25rem; padding: .6rem .8rem; font-size: .85rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); white-space: pre-wrap; word-break: break-word; }
.fade-enter-active, .fade-leave-active { transition: opacity .2s, transform .2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(6px); }
.pulse-dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre.code { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: .6rem; font-size: .78rem; overflow-x: auto; line-height: 1.55; }