.records-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 13px;
  align-items: start;
}
.records-aside {
  display: grid;
  gap: 12px;
}
.data-panel {
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.data-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid #eceef5;
  min-height: 60px;
}
.data-toolbar > .btn {
  padding: 8px 12px;
  font-size: 10px;
}
.account-filter {
  position: relative;
  font-size: 12px;
}
.account-filter summary {
  cursor: pointer;
  list-style: none;
  border: 1px solid #e4e7f0;
  border-radius: 999px;
  padding: 8px 12px;
}
.account-filter[open] {
  background: #fff;
}
.account-filter label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
}
.line-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.line-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 10px;
  color: #4e5677;
  font-size: 11px;
}
.line-tabs button.active {
  color: #191037;
  border-color: #c8ef36;
  font-weight: 700;
}
.mini-search {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #e5e8f1;
  background: #fff;
  border-radius: 22px;
  padding: 8px 10px;
  min-width: 130px;
  flex: 1;
  max-width: 250px;
  margin-left: auto;
}
.mini-search input {
  border: 0;
  background: none;
  outline: none;
  min-width: 0;
  width: 100%;
  font-size: 10px;
}
.view-switch {
  display: flex;
  border: 1px solid #e9eaf1;
  border-radius: 14px;
  padding: 0 4px;
}
.view-switch .btn {
  padding: 6px;
}
.col-menu {
  position: relative;
}
.col-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.col-menu > summary::-webkit-details-marker {
  display: none;
}
.col-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 180px;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7ef;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 10px 28px #1112;
  display: grid;
  gap: 4px;
}
.col-menu-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 8px;
}
.col-menu-panel label:hover {
  background: #f4f5f9;
}
.col-menu-panel label.is-locked {
  opacity: 0.55;
}
.col-menu-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}
.dense-table [data-col][hidden],
.table-scroll [data-col][hidden] {
  display: none !important;
}
.dense-table {
  font-size: 11px;
  line-height: 1.4;
}
.dense-table th {
  background: #f8f9fc;
  padding: 12px 9px;
  color: #606b8a;
  font-size: 10px;
}
.dense-table td {
  padding: 12px 9px !important;
  height: 51px;
}
.dense-table td small {
  display: block;
  color: #7c86a2;
  font-size: 10px;
  margin-top: 3px;
}
.dense-table td b {
  font-size: 11px;
  font-weight: 600;
}
.dense-table td .product {
  width: 35px;
  height: 37px;
}
.dense-table td .avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.dense-table .wrap-cell {
  white-space: normal;
  min-width: 90px;
  max-width: 130px;
}
.dense-table input[type="checkbox"],
.table-footer input {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid #a3abc2;
  border-radius: 3px;
  vertical-align: middle;
  cursor: pointer;
}
.dense-table input:checked {
  background: #a68af1;
  border-color: #a68af1;
  box-shadow: inset 0 0 0 2px white;
}
.table-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eeeef4;
  font-size: 11px;
  flex-wrap: wrap;
}
.table-footer > small {
  margin-left: auto;
}
.btn.soft {
  background: #f5f3fd;
  border-color: transparent;
  color: #8278a4;
  padding: 7px 12px;
  font-weight: 400;
}
.side-entry {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #f1f2f7;
  background: none;
  text-align: left;
  color: inherit;
}
.side-entry:last-child {
  border-bottom: 0;
}
.side-entry > div {
  flex: 1;
  min-width: 0;
}
.side-entry b {
  font-size: 11px;
  line-height: 1.3;
  display: block;
}
.side-entry p {
  font-size: 10px;
  margin-top: 4px;
  line-height: 1.35;
}
.side-entry .icon-disc {
  width: 31px;
  height: 31px;
}
.side-entry > svg:last-child {
  margin-left: auto;
}
.side-entry .product {
  width: 34px;
  height: 35px;
}
.side-entry .badge {
  font-size: 9px;
}
.records-aside .panel {
  padding: 15px;
}
.records-aside .panel-title {
  margin-bottom: 6px;
}
.account-lower {
  margin-top: 13px;
}
.account-lower .panel {
  padding: 15px;
}
.account-lower h3 {
  font-size: 13px;
}
.full-width {
  width: 100%;
}
.positive {
  color: #249728 !important;
}
.negative {
  color: #e24161 !important;
}
.vinted-dot {
  font-weight: bold;
  color: white;
  background: #008b9b;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  font-size: 12px;
  margin-right: 4px;
}
.mini-bars {
  height: 130px;
  display: flex;
  gap: 3px;
  align-items: flex-end;
  padding-top: 20px;
}
.mini-bars span {
  flex: 1;
  min-height: 2px;
  background: linear-gradient(#cbb5fa, #b9a0f0);
  border-radius: 2px 2px 0 0;
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #8287a0;
  margin: 8px 0;
}
.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.warehouse-grid button {
  padding: 10px 7px;
  background: linear-gradient(#f2edff, #fafbfc);
  border: 0;
  border-radius: 10px;
  text-align: left;
  min-width: 0;
}
.warehouse-grid b {
  display: block;
  font-size: 10px;
  margin: 7px 0;
  line-height: 1.4;
}
.warehouse-grid p {
  font-size: 10px;
}
.warehouse-grid .progress {
  height: 6px;
  margin-top: 8px;
}
.linked-thumbs {
  display: flex;
  align-items: center;
  gap: 5px;
}
.advanced-settings-layout {
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  gap: 13px;
}
.advanced-settings-content {
  min-width: 0;
}
.advanced-nav {
  height: 100%;
  min-height: 690px;
  align-self: stretch;
}
.advanced-nav > h3 {
  font-size: 15px;
  padding: 7px 7px 18px;
  border-bottom: 1px solid #f0f0f7;
}
.advanced-nav button {
  min-height: 83px;
}
.advanced-nav button p {
  line-height: 1.55;
}
.advanced-nav button .icon-disc {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f0eaff;
}
.advanced-nav button.active .icon-disc {
  background: #e5faa5;
}
.advanced-settings-content .stat {
  padding: 15px;
}
.advanced-settings-content .stat-value {
  font-size: 24px;
}
.advanced-settings-content .stat-title {
  font-size: 11px;
}
.advanced-settings-content .stat p {
  font-size: 10px;
}
.billing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 12px;
}
.billing-layout .grid {
  gap: 10px;
}
.billing-layout .panel {
  padding: 16px;
}
.billing-layout .panel h2 {
  font-size: 27px;
}
.billing-layout .panel-title .btn {
  font-size: 9px;
  padding: 6px 10px;
  min-height: 28px;
}
.plan-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 7px;
  margin-top: 17px;
  font-size: 10px;
  color: #606c87;
}
.plan-features > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.plan-features svg {
  color: #33ae3c;
}
.usage-row {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 16px 0;
}
.usage-row > div {
  flex: 1;
  min-width: 0;
}
.usage-row b {
  font-size: 10px;
}
.usage-row .row {
  justify-content: space-between;
  margin-bottom: 7px;
}
.usage-row .progress {
  flex: 1;
  height: 11px;
  border-radius: 20px;
}
.usage-row .progress span {
  border-radius: 20px;
}
.usage-row small {
  font-size: 9px;
  white-space: nowrap;
}
.payment-card {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
}
.payment-card b {
  font-size: 11px;
}
.payment-card p {
  font-size: 10px;
  margin-top: 5px;
}
.visa {
  color: #1c4cdd;
  font-size: 21px !important;
  font-style: italic;
}
.billing-upsell {
  border-radius: 16px;
  background:
    radial-gradient(ellipse at right 45%, #d8d1ff, transparent 45%),
    linear-gradient(130deg, #f5f1ff, #eee9ff);
  padding: 22px 18px;
  height: max-content;
  display: grid;
  gap: 16px;
}
.billing-upsell h2 {
  font-size: 22px;
  line-height: 1.2;
}
.billing-upsell p {
  font-size: 12px;
}
.billing-upsell > div {
  display: flex;
  gap: 9px;
  font-size: 12px;
}
.billing-upsell > div svg {
  color: #78ad20;
}
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.security-grid > .panel,
.security-grid .stack > .panel {
  padding: 17px;
}
.security-grid .stack {
  display: grid;
  gap: 12px;
}
.security-grid .panel-title .btn {
  font-size: 8px;
  padding: 6px;
  min-height: 28px;
}
.security-grid .panel-title h3 {
  font-size: 12px;
  gap: 7px;
}
.security-grid .panel-title .icon-disc {
  width: 29px;
  height: 29px;
}
.security-grid .panel-title h3 svg {
  width: 16px !important;
}
.security-grid form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.security-grid .btn.full-width {
  margin-top: 8px;
  font-size: 10px;
}
.security-grid .field {
  font-size: 10px;
}
.security-grid .setting-row b {
  font-size: 10px;
}
.requirements {
  background: #f7f6fd;
  border-radius: 9px;
  padding: 13px;
  font-size: 10px;
}
.requirements p {
  font-size: 10px;
  margin-top: 6px;
}
.security-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 11px;
  background: linear-gradient(90deg, #efffe2, #f8ffed);
  border-radius: 12px;
  margin: 20px 0;
}
.security-notice b {
  font-size: 11px;
}
.security-notice p {
  font-size: 10px;
  margin-top: 4px;
}
.security-grid .info-banner {
  padding: 13px;
  margin: 15px 0;
  font-size: 10px;
}
.extension-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px;
}
.extension-heading p {
  font-size: 10px;
  margin-top: 5px;
}
.extension-heading .icon-disc {
  width: 42px;
  height: 42px;
}
.extension-heading .btn {
  font-size: 10px;
}
.pairing-entry {
  background: linear-gradient(90deg, #f3efff, #f9f6ff);
  border-radius: 12px;
  padding: 19px;
  margin: 22px 0 13px;
}
.pairing-entry input {
  background: transparent;
  border: 0;
  outline: none;
  text-align: center;
  width: 100%;
  letter-spacing: 3px;
  font-size: 23px;
  font-weight: 700;
  color: #22253c;
}
.chrome-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #168bd5;
  background: #edf6fc;
  border-radius: 50%;
}
.permission-list {
  background: linear-gradient(100deg, #f1ffdc, #f7fff1);
  border-radius: 12px;
  padding: 8px 14px;
}
.permission-list .icon-disc {
  background: #e2ffc3;
  color: #22a020;
  width: 25px;
  height: 25px;
}
.permission-list .side-entry {
  border: 0;
  padding: 8px 0;
}
.advanced-settings-content .setting-row {
  padding: 10px 0;
}
.advanced-settings-content .setting-row b {
  font-size: 11px;
}
.grid-view tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}
.grid-view thead {
  display: none;
}
.grid-view tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #ececf3;
  border-radius: 12px;
  padding: 10px;
  min-width: 0;
}
.grid-view td {
  height: auto;
  border: 0;
  white-space: normal;
}
.grid-view table {
  white-space: normal;
}
.grid-view td:first-child {
  grid-column: 1/-1;
}
.stock-labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stock-labels > div {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.stock-labels code {
  display: block;
  font-size: 16px;
  margin: 10px 0;
}
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: radial-gradient(
    circle at 50% 40%,
    #e5ffa1 0,
    #d8f58d 35%,
    #cce878 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #19331d;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.intro-overlay img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  animation: logo-float 1.5s ease-in-out infinite;
}
.intro-overlay strong {
  font-size: 29px;
  letter-spacing: -0.7px;
  margin-top: 12px;
}
.intro-overlay .loading-word {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 14px;
  letter-spacing: 1px;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #365a2440;
  border-top-color: #365a24;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.intro-overlay.finish {
  opacity: 0;
  visibility: hidden;
}
.pairing-success {
  text-align: center;
  padding: 22px 12px 35px;
  position: relative;
  overflow: hidden;
}
.pairing-success .success-ring {
  height: 86px;
  width: 86px;
  background: linear-gradient(#ecffb2, #bdf432);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 25px;
  animation: success-pop 0.65s cubic-bezier(0.18, 1.5, 0.4, 1) both;
  box-shadow: 0 0 0 10px #d6fb6730;
}
.pairing-success .success-ring svg {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: draw-check 0.6s 0.35s forwards;
}
.pairing-success h2 {
  margin-bottom: 15px;
}
.confetti-piece {
  position: absolute;
  width: 7px;
  height: 12px;
  background: #c1ee36;
  left: var(--x);
  top: 0;
  border-radius: 2px;
  animation: confetti-fall 1.4s var(--delay) ease-out both;
  pointer-events: none;
}
.confetti-piece:nth-child(3n) {
  background: #b18beb;
}
.confetti-piece:nth-child(3n + 1) {
  background: #90c8ef;
}
.workspace-main main {
  animation: page-enter 0.4s ease both;
}
.stat,
.automation-card,
.records-aside > .panel,
.account-lower > .panel {
  animation: card-enter 0.45s ease both;
}
.stat:nth-child(2) {
  animation-delay: 0.04s;
}
.stat:nth-child(3) {
  animation-delay: 0.08s;
}
.stat:nth-child(4) {
  animation-delay: 0.12s;
}
.stat {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px #24233108;
}
.progress > span {
  transform-origin: left;
  animation: progress-grow 0.7s ease both;
}
.chart polyline {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-chart 1.2s 0.1s ease forwards;
}
.nav a {
  transition:
    background 0.2s,
    transform 0.2s;
}
.nav a:hover {
  transform: translateX(2px);
}
.bars span {
  transform-origin: bottom;
  animation: progress-grow 0.8s ease both;
}
.modal {
  animation: modal-in 0.22s ease both;
}
.dot:not(.off) {
  box-shadow: 0 0 0 0 #b7ed2644;
  animation: status-pulse 3s infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes logo-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.025);
  }
}
@keyframes success-pop {
  from {
    transform: scale(0.35);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes draw-check {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes confetti-fall {
  0% {
    transform: translateY(-15px) rotate(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(290px) rotate(240deg);
    opacity: 0;
  }
}
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes progress-grow {
  from {
    transform: scaleX(0.1);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes draw-chart {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes status-pulse {
  50% {
    box-shadow: 0 0 0 4px #b7ed2610;
  }
}
@media (max-width: 1300px) {
  .records-layout {
    grid-template-columns: minmax(0, 1fr) 235px;
  }
  .advanced-settings-layout {
    grid-template-columns: 225px minmax(0, 1fr);
  }
  .billing-layout {
    grid-template-columns: 1fr;
  }
  .billing-upsell {
    display: none;
  }
  .security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .security-grid .stack {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
  }
  .extension-heading {
    flex-wrap: wrap;
  }
  .advanced-settings-content .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .data-toolbar {
    gap: 5px;
  }
  .data-toolbar > .btn {
    max-width: 160px;
  }
  .line-tabs {
    gap: 0;
  }
  .line-tabs button {
    padding: 10px 8px;
  }
}
@media (max-width: 950px) {
  .records-layout {
    grid-template-columns: 1fr;
  }
  .records-aside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .advanced-settings-layout {
    grid-template-columns: 1fr;
  }
  .advanced-nav {
    display: flex;
    min-height: 0;
    overflow: auto;
    gap: 6px;
    padding: 8px;
  }
  .advanced-nav > h3 {
    display: none;
  }
  .advanced-nav button {
    min-height: 42px;
    white-space: nowrap;
    min-width: max-content;
    padding: 9px;
    border: 0;
  }
  .advanced-nav button p,
  .advanced-nav button > svg,
  .advanced-nav .icon-disc {
    display: none;
  }
  .advanced-nav button b {
    margin: 0;
    font-size: 11px;
  }
  .advanced-settings-content .grid.equal {
    grid-template-columns: 1fr 1fr;
  }
  .account-lower {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 680px) {
  .records-aside {
    grid-template-columns: 1fr;
  }
  .data-toolbar {
    padding: 10px;
    gap: 7px;
  }
  .line-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow: auto;
  }
  .line-tabs button {
    padding: 10px 9px;
    font-size: 10px;
  }
  .data-toolbar > .btn {
    flex: 1;
    max-width: none;
    min-width: 120px;
  }
  .mini-search {
    max-width: none;
    flex: 1;
    min-width: 150px;
    margin: 0;
  }
  .dense-table {
    font-size: 10px;
  }
  .table-footer {
    gap: 7px;
    padding: 10px;
  }
  .table-footer > small {
    width: 100%;
    margin: 0;
  }
  .table-footer .btn {
    font-size: 10px;
  }
  .account-lower {
    grid-template-columns: 1fr !important;
  }
  .advanced-settings-content .grid.equal,
  .security-grid {
    grid-template-columns: 1fr;
  }
  .advanced-settings-content .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .advanced-settings-content .stat-value {
    font-size: 24px;
  }
  .security-grid .stack {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .billing-layout .grid {
    grid-template-columns: 1fr;
  }
  .billing-upsell {
    display: grid;
  }
  .extension-heading {
    padding: 15px;
  }
  .extension-heading .actions {
    flex-wrap: wrap;
  }
  .extension-heading .row {
    align-items: flex-start;
  }
  .extension-heading h3 {
    font-size: 14px;
  }
  .extension-heading p {
    font-size: 11px;
  }
  .pairing-entry input {
    font-size: 21px;
  }
  .plan-features {
    gap: 11px;
  }
  .grid-view tbody {
    grid-template-columns: 1fr;
  }
  .warehouse-grid b {
    font-size: 12px;
  }
  .warehouse-grid button {
    padding: 14px;
  }
  .intro-overlay img {
    width: 80px;
    height: 80px;
  }
  .security-grid .panel-title .btn {
    font-size: 9px;
  }
  .records-aside .panel-title h3 {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .chart polyline {
    stroke-dashoffset: 0 !important;
  }
  .pairing-success .success-ring svg {
    stroke-dashoffset: 0 !important;
  }
  .confetti-piece {
    display: none;
  }
}

.billing-layout > *,
.billing-layout .grid > * {
  min-width: 0;
}
.category-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
  margin-top: 10px;
}
.category-row {
  width: 100%;
  justify-content: space-between;
}
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
}
.message.system > div {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(24, 28, 38, 0.08);
}
.auto-settings .page-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.auto-settings .page-tools select, .auto-settings select, .auto-settings input, .auto-settings textarea { border: 1px solid #e6e6ed; border-radius: 12px; padding: 10px 12px; background: #fff; width: 100%; }
.auto-tabs { display: flex; gap: 8px; margin: 8px 0 16px; flex-wrap: wrap; }
.auto-tabs a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid #e6e6ed; }
.auto-tabs a.selected { background: #151521; color: #fff; }
.auto-grid { display: grid; gap: 12px; }
.auto-settings .aset-card { padding: 16px; }
.auto-settings .field { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.auto-settings .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.auto-settings .switch { position: relative; width: 44px; height: 26px; }
.auto-settings .switch input { opacity: 0; width: 0; height: 0; }
.auto-settings .switch span { position: absolute; inset: 0; background: #ddd; border-radius: 99px; }
.auto-settings .switch span:before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.15s; }
.auto-settings .switch input:checked + span { background: #c4ff38; }
.auto-settings .switch input:checked + span:before { transform: translateX(18px); }
.auto-savebar { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; background: #fff; border: 1px solid #e6e6ed; border-radius: 16px; padding: 12px; }
.timeline, .steps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.timeline div, .steps label { background: #f6f6f8; border-radius: 12px; padding: 8px 10px; }
@media (max-width: 800px) { .auto-settings .field { grid-template-columns: 1fr; } }

#photo-list .photo-tile{position:relative;overflow:hidden}
#photo-list .photo-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#photo-list .photo-remove-x{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(16,16,18,.84);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:5;pointer-events:auto}
#photo-list .photo-tile .photo-actions,
#photo-list .photo-tile [data-action^="photo-edit"]{display:none!important}
.template-picker{min-width:220px}.template-picker .dselect{min-width:220px}