/* ==========================================================================
   Settings
   ========================================================================== */

.st-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-10); align-items: start; }

.st-nav {
  position: sticky; top: calc(var(--topbar-h) + var(--s-8));
  display: flex; flex-direction: column; gap: 2px;
}
.st-navitem {
  display: flex; align-items: flex-start; gap: var(--s-6);
  padding: var(--s-6) var(--s-6);
  border-radius: var(--r-8);
  color: var(--tx-2); text-decoration: none;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.st-navitem:hover { background: var(--bg-hover); text-decoration: none; color: var(--tx-1); }
.st-navitem svg { color: var(--tx-3); margin-top: 1px; }
.st-navitem.is-active { background: var(--bg-selected); color: var(--tx-accent); }
.st-navitem.is-active svg { color: var(--a-500); }
.st-navitem__l { font-size: var(--fs-13); font-weight: 570; }
.st-navitem__d { font-size: var(--fs-11); color: var(--tx-3); line-height: 1.4; }
.st-navitem.is-active .st-navitem__d { color: color-mix(in srgb, var(--tx-accent) 70%, var(--tx-3)); }

.st-body { min-width: 0; }
.st-card .card__body { padding-block: var(--s-8); }
.st-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); }

.st-row {
  display: flex; align-items: center; gap: var(--s-8);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--br-1);
}
.st-row:last-child { border-bottom: 0; }
.st-row > .col { flex: 1 1 auto; min-width: 0; }
.st-row > .seg, .st-row > .switch, .st-row > .btn { flex: none; }

/* --------------------------------------------------------- signatures -- */
.st-sigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s-7); }
.st-sig {
  border: 1px solid var(--br-2); border-radius: var(--r-10);
  background: var(--bg-surface); overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.st-sig.is-default { border-color: var(--a-300); box-shadow: 0 0 0 1px var(--a-200); }
.st-sig__head {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--br-1);
}
.st-sig__ink {
  min-height: 78px; display: grid; place-content: center;
  padding: var(--s-6); background: #fff; color: #14181d;
}
:root[data-theme="dark"] .st-sig__ink { background: #f7f9fb; }
.st-sig__foot {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--br-1); background: var(--bg-sunken);
}
.st-sig__init {
  display: inline-grid; place-content: center;
  min-width: 44px; height: 26px; padding: 0 var(--s-4);
  background: #fff; color: #14181d; border: 1px solid var(--br-1); border-radius: var(--r-4);
}
:root[data-theme="dark"] .st-sig__init { background: #f7f9fb; }

.st-sigpreview { padding: var(--s-4) 0; }
.st-sigpreview__paper {
  background: #fff; color: #14181d;
  border: 1px solid var(--br-2); border-radius: var(--r-6);
  padding: var(--s-10) var(--s-10) var(--s-8);
  box-shadow: var(--sh-sm);
  max-width: 620px;
}
.st-sigpreview__row { display: flex; gap: var(--s-10); align-items: flex-end; }
.st-sigpreview__ink { min-height: 40px; display: flex; align-items: flex-end; }
.st-sigpreview__ink--plain { font-family: var(--font-sans); font-size: var(--fs-13); color: #2b333c; }
.st-sigpreview__rule { border-bottom: 1px solid #46525e; margin-top: 3px; }
.st-sigpreview__lbl {
  font-family: var(--font-sans); font-size: 8.8px; text-transform: uppercase;
  letter-spacing: .07em; color: #6d7d8e; margin-top: 4px;
}
.st-sigpreview__meta { margin-top: var(--s-9); font-size: var(--fs-11); color: #6d7d8e; font-family: var(--font-sans); }

.st-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-6); }
.st-gallery__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-6); border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken); min-width: 0; overflow: hidden;
}
.st-gallery__name {
  font-size: var(--fs-11); font-weight: 620; color: var(--tx-4);
  text-transform: uppercase; letter-spacing: .06em;
}
.st-gallery__item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------------- branding -- */
.st-swatches { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.st-swatch {
  width: 32px; height: 32px; border-radius: var(--r-8);
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  display: grid; place-content: center; color: #fff;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease);
  position: relative;
}
.st-swatch:hover { transform: scale(1.08); }
.st-swatch.is-on { border-color: var(--tx-1); }
.st-swatch--custom {
  background: conic-gradient(from 210deg, #2c5ce6, #17864a, #c99a20, #a83b8a, #2c5ce6);
  cursor: pointer; overflow: hidden;
}
.st-swatch--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.st-emailprev {
  max-width: 560px; border: 1px solid var(--br-2); border-radius: var(--r-10);
  overflow: hidden; background: var(--bg-surface);
}
.st-emailprev__head {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-7) var(--s-8); border-bottom: 1px solid var(--br-1);
  background: var(--bg-sunken);
}
.st-emailprev__logo {
  width: 32px; height: 32px; border-radius: var(--r-6);
  background: var(--a-500); color: #fff;
  display: grid; place-content: center; font-weight: 700; font-size: var(--fs-15);
}
.st-emailprev__body { padding: var(--s-9) var(--s-8); }
.st-emailprev__hl { margin-bottom: var(--s-6); }
.st-emailprev__input {
  width: 100%; border: 1px dashed transparent; border-radius: var(--r-4);
  background: transparent; padding: 2px 4px; margin: -2px -4px;
  font-size: var(--fs-18); font-weight: 620; letter-spacing: -.014em; color: var(--tx-1);
  resize: vertical;
}
.st-emailprev__input:hover { border-color: var(--br-2); }
.st-emailprev__input:focus { border-color: var(--a-500); border-style: solid; outline: none; background: var(--bg-surface); }
.st-emailprev__foot { padding: var(--s-6) var(--s-8); border-top: 1px solid var(--br-1); background: var(--bg-sunken); }
.st-emailprev__foot .st-emailprev__input { font-size: var(--fs-11); font-weight: 400; color: var(--tx-3); line-height: 1.5; }
.st-emailprev__btn {
  display: inline-block; margin-top: var(--s-4);
  padding: 10px 22px; border-radius: var(--r-6);
  background: var(--a-500); color: #fff;
  font-size: var(--fs-13); font-weight: 600;
}

.st-signprev { border: 1px solid var(--br-2); border-radius: var(--r-8); overflow: hidden; }
.st-signprev--light { background: #eceff4; }
.st-signprev--slate { background: #2b333c; }
.st-signprev--brand { background: color-mix(in srgb, var(--a-500) 14%, #eceff4); }
.st-signprev__bar {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface); border-bottom: 1px solid var(--br-1);
}
.st-signprev__logo {
  width: 22px; height: 22px; border-radius: var(--r-4);
  background: var(--a-500); color: #fff;
  display: grid; place-content: center; font-weight: 700; font-size: var(--fs-11);
}
.st-signprev__btn {
  padding: 4px 12px; border-radius: var(--r-4);
  background: #ffc832; color: #2a2000; font-size: var(--fs-11); font-weight: 650;
}
.st-signprev__paper {
  height: 86px; margin: var(--s-8) auto; width: 62%;
  background: #fff; box-shadow: var(--sh-sm); border-radius: 1px;
}

/* ------------------------------------------------------------- devices -- */
.st-device {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-6); border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.st-device svg { color: var(--tx-3); flex: none; }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 960px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .st-nav {
    position: static;
    flex-direction: row; overflow-x: auto; gap: var(--s-4);
    padding-bottom: var(--s-4); scrollbar-width: none;
  }
  .st-nav::-webkit-scrollbar { display: none; }
  .st-navitem { flex: none; white-space: nowrap; padding: var(--s-5) var(--s-7); border: 1px solid var(--br-1); }
  .st-navitem__d { display: none; }
  .st-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .st-row { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .st-sigs { grid-template-columns: minmax(0, 1fr); }
  .st-sigpreview__row { flex-direction: column; align-items: stretch; gap: var(--s-8); }
  .st-sigpreview__paper { padding: var(--s-8) var(--s-7); }
}