/* ============================================================
 *   Aurora — landing + dashboard styles
 *   Apple "Liquid Glass" inspired (backdrop-filter, soft blobs,
 *   translucent surfaces, spring animations).
 * ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color: #0b0d12;
  background: #f5f5f7;
  overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
  body { color: #f4f5f7; background: #0a0a0f; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }

/* ----------------- glass background blobs ----------------- */
.lg-bg {
  position: fixed; inset: 0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(10,132,255,0.15), transparent 60%),
    radial-gradient(800px 600px at -10% 80%, rgba(191,90,242,0.16), transparent 60%);
}
.lg-bg.dim { filter: brightness(.7); }
.lg-blob {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  filter: blur(80px); opacity: .55;
  animation: float 18s ease-in-out infinite;
}
.lg-blob-1 { top:-120px; right: -100px; background: #0a84ff; }
.lg-blob-2 { bottom:-150px; left: -120px; background: #bf5af2; animation-delay: -6s;}
.lg-blob-3 { top:40%; left:42%; background: #30d158; opacity: .35; animation-delay: -12s; }
@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-30px) scale(1.06); }
}

/* ----------------- glass surface mixin ----------------- */
.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 12px 40px rgba(16,24,40,0.08), 0 2px 6px rgba(16,24,40,0.04);
}
@media (prefers-color-scheme: dark) {
  .glass {
    background: rgba(22,22,28,0.55);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
  }
}

/* ============================================================
 *                          LANDING
 * ============================================================ */
.lg-nav {
  position: sticky; top: 14px; margin: 14px auto 0; z-index: 10;
  width: min(1180px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 18px; border-radius: 18px;
}
.lg-nav nav { display:flex; align-items:center; gap: 22px; font-size: 14px; }
.lg-nav nav a { opacity: .8; }
.lg-nav nav a:hover { opacity: 1; }

.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; }
.brand-dot {
  display:inline-block; width:18px; height:18px; border-radius:50%;
  background: conic-gradient(from 180deg, #0a84ff, #bf5af2, #30d158, #0a84ff);
  box-shadow: 0 0 12px rgba(10,132,255,.5);
}

.btn-primary, .btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 18px; border-radius: 14px; border: 0; font-weight:600;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary {
  background: #0a84ff; color: #fff;
  box-shadow: 0 8px 20px rgba(10,132,255,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(10,132,255,0.45); }
.btn-ghost {
  background: rgba(127,127,127,0.12); color: inherit;
}
.btn-ghost:hover { background: rgba(127,127,127,0.20); }
.btn-primary.big, .btn-ghost.big { padding: 14px 24px; font-size: 15px; border-radius: 16px; }
.btn-primary.block { display:block; width:100%; padding: 12px 0; margin-top: 6px; }
.btn-ghost.small { padding: 6px 12px; font-size: 12px; border-radius: 10px; }

main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 80px; }

.hero {
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
  align-items: center; padding: 50px 0;
}
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; } }
.hero h1 {
  font-size: clamp(34px, 5.5vw, 60px); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; margin: 14px 0 18px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #0a84ff, #bf5af2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: 17px; line-height: 1.55; opacity: .82; max-width: 540px; }
.pill {
  display:inline-block; padding: 6px 14px; border-radius:999px; font-size: 12px; font-weight:600;
}
.hero-cta { display:flex; gap: 12px; flex-wrap:wrap; margin: 28px 0 22px; }
.hero-points {
  list-style:none; padding:0; margin: 18px 0 0; display:grid; gap: 8px; font-size:14px;
}
.hero-points li::before { content:'✓'; margin-right: 8px; color: #30d158; font-weight:700; }

.hero-visual { padding: 18px; border-radius: 28px; }
.mini-chat { display:grid; gap: 10px; }
.mini-chat .bubble {
  padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45;
  max-width: 85%; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.mini-chat .user      { background: #0a84ff; color:#fff; align-self:flex-end; border-bottom-right-radius: 6px; }
.mini-chat .assistant { background: rgba(127,127,127,0.18); align-self:flex-start; border-bottom-left-radius: 6px; }
.mini-chat .low       { border-left: 3px solid #ff9f0a; }
.mini-chat .meta      { font-size: 12px; opacity:.6; padding: 6px 0 0; display:flex; align-items:center; gap:6px; }
.mini-chat .cite { font-size: 10px; opacity:.55; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot.green { background:#30d158; box-shadow: 0 0 8px #30d158; }

section.features { padding: 60px 0; }
section.features h2, section.how h2, section.pricing h2 {
  font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -0.02em; margin: 0 0 36px;
  text-align: center;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }
.card { padding: 22px; border-radius: 20px; }
.card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.card p  { margin: 0; font-size: 14px; line-height: 1.55; opacity: .78; }

section.how { padding: 60px 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.steps li { padding: 18px 22px; border-radius: 16px; font-size: 15px; }
.steps li b { color: #0a84ff; margin-right: 8px; }

.center { text-align:center; }
.foot { padding: 30px 16px; text-align: center; font-size: 13px; opacity: .55; }

/* ----------------- AUTH MODAL ----------------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items:center; justify-content:center;
  background: rgba(8,10,18,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .18s ease;
}
.modal.hidden { display:none; }
.modal-card {
  width: min(420px, calc(100% - 32px));
  padding: 28px 26px 22px; border-radius: 22px;
  position: relative;
  animation: pop .22s cubic-bezier(.2,.9,.2,1.2);
}
.modal-close {
  position:absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius:50%; border:0;
  background: rgba(127,127,127,0.15); font-size: 18px; line-height: 1;
}
.tabs { display:flex; gap:6px; background: rgba(127,127,127,0.10); padding: 4px; border-radius: 12px; margin-bottom: 18px; }
.tab {
  flex:1; padding: 9px 0; border: 0; background: transparent;
  font-weight: 600; font-size: 14px; border-radius: 9px; color: inherit; opacity: .65;
}
.tab.active { background: rgba(255,255,255,0.85); opacity:1; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
@media (prefers-color-scheme: dark) { .tab.active { background: rgba(40,40,48,0.85); } }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display:grid; gap:6px; font-size: 12px; font-weight: 600; opacity: .8; }
.auth-form input {
  padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(127,127,127,0.25);
  background: rgba(255,255,255,0.7); color: inherit; font: inherit; font-size: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.auth-form input:focus { border-color: #0a84ff; box-shadow: 0 0 0 3px rgba(10,132,255,0.18); }
@media (prefers-color-scheme: dark) { .auth-form input { background: rgba(20,20,28,0.7); border-color: rgba(255,255,255,0.10); } }
.form-err { color: #ff453a; font-size: 13px; min-height: 18px; margin: 4px 0 0; }
.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
 *                          DASHBOARD
 * ============================================================ */
body.page-dashboard { background: #f0f1f5; overflow: hidden; }
@media (prefers-color-scheme: dark) { body.page-dashboard { background: #08080d; } }

.sidebar {
  position: fixed; top: 14px; left: 14px; bottom: 14px; width: 232px;
  display: flex; flex-direction: column; padding: 18px 16px; border-radius: 22px; z-index: 5;
}
.sidebar .brand { padding: 4px 6px 22px; }
.side-nav { display: grid; gap: 4px; }
.nav-item {
  padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500;
  display:flex; align-items:center; gap:10px; opacity: .82;
  transition: background .15s;
}
.nav-item:hover { background: rgba(127,127,127,0.10); opacity:1; }
.nav-item.active { background: rgba(10,132,255,0.15); color: #0a84ff; opacity: 1; }
.side-foot { margin-top: auto; padding-top: 18px; display: grid; gap: 8px; font-size: 12px; opacity: .8; }
.who { padding: 4px 6px; }

.dash {
  margin-left: 260px; padding: 20px 24px 24px;
  height: 100vh; overflow-y: auto;
}
@media (max-width: 760px) {
  .sidebar { position: static; width: auto; flex-direction: row; flex-wrap: wrap; margin: 14px; }
  .side-nav { display: flex; flex-direction: row; overflow-x: auto; gap: 4px; flex: 1; }
  .side-foot { flex-direction: row; align-items:center; padding: 0; gap: 12px; }
  .dash { margin-left: 0; padding: 14px; height: auto; }
}

.view-head {
  display: flex; align-items: center; justify-content: space-between; margin: 6px 0 18px;
}
.view-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.view-head .actions { display:flex; gap:10px; }

.panel {
  padding: 20px; border-radius: 20px; margin-bottom: 16px;
}

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 12px 10px; text-align: left; border-bottom: 1px solid rgba(127,127,127,0.18); }
.tbl th { font-weight: 600; font-size: 12px; opacity: .65; text-transform: uppercase; letter-spacing: .05em; }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover { background: rgba(127,127,127,0.06); }

.empty { padding: 60px 20px; text-align: center; opacity: .55; }

/* form fields */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 12px; font-weight: 600; opacity: .8; }
.field input, .field textarea, .field select {
  padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(127,127,127,0.25);
  background: rgba(255,255,255,0.7); color: inherit; font: inherit; font-size: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: #0a84ff; box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
}
@media (prefers-color-scheme: dark) {
  .field input, .field textarea, .field select { background: rgba(20,20,28,0.7); border-color: rgba(255,255,255,0.10); }
}
.row-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

.tag {
  display:inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(127,127,127,0.15);
}
.tag.open      { background: rgba(48,209,88,0.18);  color: #218739; }
.tag.escalated { background: rgba(255,159,10,0.20); color: #b76e00; }
.tag.resolved  { background: rgba(127,127,127,0.15); color: inherit; }
.tag.closed    { background: rgba(127,127,127,0.10); opacity: .7; }
.tag.human     { background: rgba(10,132,255,0.18); color: #0a84ff; }
.tag.ai        { background: rgba(191,90,242,0.18); color: #a040d6; }
@media (prefers-color-scheme: dark) {
  .tag.open { color: #6fd388; } .tag.escalated { color: #ffb446; } .tag.ai { color: #d4a4f0; }
}

/* conversation viewer */
.conv-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 14px; height: calc(100vh - 90px); }
@media (max-width: 880px) { .conv-wrap { grid-template-columns: 1fr; height: auto; } }
.conv-list { padding: 8px; border-radius: 20px; overflow-y: auto; }
.conv-item {
  padding: 12px; border-radius: 12px; cursor: pointer; display:grid; gap: 4px;
  border: 1px solid transparent;
}
.conv-item:hover { background: rgba(127,127,127,0.06); }
.conv-item.active { background: rgba(10,132,255,0.10); border-color: rgba(10,132,255,0.3); }
.conv-item .top { display:flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .65; }
.conv-item .last { font-size: 13px; line-height: 1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.conv-view { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; }
.conv-head { padding: 14px 18px; border-bottom: 1px solid rgba(127,127,127,0.18); display:flex; justify-content:space-between; align-items:center; }
.conv-head .who { font-weight: 600; font-size: 15px; }
.conv-head .meta { font-size: 12px; opacity:.7; }
.conv-stream { flex: 1; overflow-y: auto; padding: 16px 18px; display:flex; flex-direction: column; gap: 6px; }
.conv-stream .m { display: flex; }
.conv-stream .m.user { justify-content: flex-end; }
.conv-stream .m .b {
  max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.conv-stream .m.user  .b { background: #0a84ff; color: #fff; border-bottom-right-radius: 6px; }
.conv-stream .m.assistant .b { background: rgba(127,127,127,0.14); border-bottom-left-radius: 6px; }
.conv-stream .m.agent  .b { background: rgba(48,209,88,0.18); border-bottom-left-radius: 6px; border-left: 3px solid #30d158; padding-left: 11px; }
.conv-stream .m .meta { font-size: 10px; opacity:.55; margin-top: 2px; }

.conv-input {
  padding: 12px; border-top: 1px solid rgba(127,127,127,0.18);
  display: flex; flex-direction: column; gap: 8px;
}
.conv-input .row { display: flex; gap: 8px; align-items: flex-end; }
.conv-input textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 140px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(127,127,127,0.25);
  background: rgba(255,255,255,0.7); color: inherit; font: inherit; font-size: 14px; outline: none;
}
.conv-input .attach-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(127,127,127,0.25);
  background: rgba(255,255,255,0.7); cursor: pointer; display: grid; place-items: center;
  color: inherit; font-size: 18px; flex-shrink: 0;
}
.conv-input .attach-btn:hover { background: rgba(127,127,127,0.12); }
.conv-input .attach-btn.recording { background: rgba(255,69,58,0.14); color: #ff453a; font-size: 11px; font-weight: 700; }

/* admin GIF picker popup */
.gif-popup-admin {
  position: absolute; bottom: 70px; left: 12px; right: 12px;
  background: var(--surface, #fff); border: 1px solid rgba(127,127,127,0.25);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  z-index: 30; max-height: 380px; display: none; flex-direction: column;
}
.gif-popup-admin.open { display: flex; }
.gif-popup-admin .row1 {
  padding: 8px; border-bottom: 1px solid rgba(127,127,127,0.15);
  display: flex; align-items: center; gap: 8px;
}
.gif-popup-admin .label { font-size: 11px; font-weight: 700; opacity: .6; letter-spacing: 0.05em; }
.gif-popup-admin input[type="search"] {
  flex: 1; padding: 6px 10px; border: 1px solid rgba(127,127,127,0.25);
  border-radius: 8px; background: rgba(127,127,127,0.08); color: inherit;
  font-size: 13px; outline: none; font-family: inherit;
}
.gif-popup-admin .grid {
  flex: 1; overflow-y: auto; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.gif-popup-admin .grid img {
  width: 100%; border-radius: 6px; cursor: pointer; background: rgba(127,127,127,0.08);
}
.gif-popup-admin .grid img:hover { opacity: 0.75; }
.gif-popup-admin .empty { text-align: center; padding: 30px; opacity: .55; font-size: 13px; }
@media (prefers-color-scheme: dark) { .gif-popup-admin { background: #1c1c24; } }
.conv-view { position: relative; }   /* anchor for gif popup */
@media (prefers-color-scheme: dark) {
  .conv-input textarea, .conv-input .attach-btn { background: rgba(20,20,28,0.7); border-color: rgba(255,255,255,0.10); }
}

/* admin staged attachments */
.agent-staged { display: none; flex-wrap: wrap; gap: 6px; }
.agent-staged.has { display: flex; }
.agent-staged .chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px; border-radius: 10px;
  background: rgba(127,127,127,0.12); max-width: 240px;
  font-size: 12px;
}
.agent-staged .chip .thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: rgba(0,0,0,0.1); }
.agent-staged .chip .ico   { width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.08); display:grid; place-items:center; font-size: 14px; }
.agent-staged .chip .name  { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.agent-staged .chip .sub   { font-size: 10.5px; opacity: .65; }
.agent-staged .chip .rm    { background: rgba(0,0,0,0.12); border: 0; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1; display:grid; place-items:center; }
.agent-staged .chip.uploading { opacity: .65; }
.agent-staged .chip.failed .name { color: #ff453a; }

/* attachments rendered inside conversation bubbles */
.conv-stream .m .b .attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.conv-stream .m .b .att-img    { display: block; max-width: 240px; max-height: 200px; border-radius: 10px; cursor: zoom-in; }
.conv-stream .m .b .att-audio  { width: 100%; max-width: 260px; }
.conv-stream .m .b .att-video  { display: block; max-width: 280px; max-height: 220px; border-radius: 10px; }
.conv-stream .m .b .att-file   {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(127,127,127,0.2);
  color: inherit; text-decoration: none; max-width: 260px;
}
.conv-stream .m.user .b .att-file { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); color: #fff; }
.conv-stream .m .b .att-file .ico { width: 30px; height: 30px; border-radius: 6px; background: rgba(0,0,0,0.08); display:grid; place-items:center; font-size: 16px; }
.conv-stream .m .b .att-file .name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.conv-stream .m .b .att-file .size { font-size: 11px; opacity: .65; }

/* code blocks */
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55;
  background: rgba(10,10,16,0.85); color: #e9eaee;
  padding: 14px 16px; border-radius: 12px; overflow:auto; white-space: pre;
}
.code-row { display:flex; gap:10px; align-items: flex-start; }
.code-row pre { flex: 1; margin: 0; }
.code .k { color: #ff7ab6; } .code .s { color: #b3e5a7; } .code .a { color: #9fd1ff; }

/* color picker swatch */
.color-row { display:flex; align-items:center; gap: 10px; }
.color-row input[type=color] { width: 38px; height: 38px; padding: 0; border: 0; background: transparent; }

/* widget preview */
.preview-wrap {
  position: relative; height: 540px; border-radius: 20px; overflow:hidden;
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(10,132,255,.15), transparent 60%),
    linear-gradient(180deg, #fafbfd, #eef0f5);
}
@media (prefers-color-scheme: dark) {
  .preview-wrap { background: linear-gradient(180deg, #16161c, #0b0b10); }
}

.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat {
  padding: 16px; border-radius: 16px;
}
.stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity:.6; font-weight: 600; }
.stat .val { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }

.dropzone {
  border: 2px dashed rgba(127,127,127,0.35);
  border-radius: 16px; padding: 28px 16px; text-align: center;
  background: rgba(127,127,127,0.04);
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.dropzone:hover { background: rgba(10,132,255,0.05); border-color: rgba(10,132,255,0.45); }
.dropzone.hover { background: rgba(10,132,255,0.12); border-color: #0a84ff; }
.dz-icon { font-size: 24px; opacity: .55; margin-bottom: 6px; }
.dropzone a { color: #0a84ff; text-decoration: underline; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 12px;
  background: rgba(10,10,16,0.9); color:#fff; font-size: 13px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  animation: pop .25s cubic-bezier(.2,.9,.2,1.2);
  z-index: 200;
}