/* =========================================================================
   v5 — Google Sans Code (bundled locally), asset library, presence, mailer
   ========================================================================= */

@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/GoogleSansCode.woff2') format('woff2');
}

body, input, select, textarea, button, .btn {
  font-family: 'Google Sans Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: 'liga' 0;
  letter-spacing: -.005em;
}
body { font-size: 13px; }
.brand-name { font-family: 'Google Sans Code', ui-monospace, monospace; letter-spacing: .14em; }

/* --- image library grid -------------------------------------------------- */
.asset-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.asset-card {
  margin: 0; background: #0e0e11; border: 1px solid #1f1f24; border-radius: 8px;
  overflow: hidden; transition: border-color .15s ease, box-shadow .2s ease;
}
.asset-card:hover { border-color: #2e2e36; box-shadow: var(--aura); }
.asset-thumb {
  height: 76px; display: grid; place-items: center; background: #0a0a0c;
  border-bottom: 1px solid #1b1b20;
}
.asset-thumb img { max-width: 56px; max-height: 56px; object-fit: contain; }
.asset-card figcaption { padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; }
.asset-name {
  font-size: 9.5px; color: #8b8b93; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.asset-tools { display: flex; gap: 3px; }
.asset-tools .btn.icon { width: 22px; height: 22px; font-size: 10px; }

/* --- page row thumbnail / user presence ---------------------------------- */
.row-thumb {
  width: 30px; height: 30px; border-radius: 6px; background: #141419;
  border: 1px solid #26262c; display: grid; place-items: center; overflow: hidden;
}
.row-thumb img { width: 100%; height: 100%; object-fit: contain; }
.row-thumb .empty { color: #56565e; font-size: 13px; }

.presence {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; background: #5a5a62;
}
.presence.on { background: #3fce8f; box-shadow: 0 0 8px rgba(63, 206, 143, .55); }
.presence.off { background: #a04449; }

/* --- mailer layout ------------------------------------------------------- */
.mailer-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
@media (max-width: 1200px) { .mailer-grid { grid-template-columns: 1fr; } }

.preset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preset {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; border: 1px solid #1f1f24; border-radius: 8px;
  background: #0e0e11; color: #b9b9c2; text-decoration: none;
  font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
}
.preset:hover { border-color: #33333b; background: #131318; color: #fff; text-decoration: none; }
.preset img { width: 26px; height: 26px; object-fit: contain; }
.preset.active { border-color: #e8e8ea; background: #16161b; color: #fff; }

.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid #1f1f24; border-radius: 7px; background: #0e0e11;
  margin-bottom: 6px; font-size: 11.5px; color: #b9b9c2;
}

.vars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.var-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: #141419; border: 1px solid #26262c; color: #9a9aa2; cursor: pointer;
}


/* brand: centred, larger, soft pulse */
.brand { justify-content: center; padding-left: 0; padding-right: 0; }
.brand-name {
  display: block; width: 100%; text-align: center;
  font-size: 15.5px; letter-spacing: .18em;
  animation: brandFlash 3.2s ease-in-out infinite;
}
@keyframes brandFlash {
  0%, 100% { opacity: .88; text-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { opacity: 1; text-shadow: 0 0 14px rgba(255,255,255,.55), 0 0 34px rgba(255,255,255,.22); }
}
.login-head .brand-name { font-size: 26px; letter-spacing: .22em; animation-duration: 2.6s; }
@media (prefers-reduced-motion: reduce) { .brand-name { animation: none; } }