/* =====================
   Diloya - Custom Styles
   ===================== */

.appointment-professional-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 2px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 999px;
  object-fit: cover;
}

.appointment-management-page .appointment-admin-grid {
  align-items: start;
  grid-template-columns: 1fr;
}

.appointment-team-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.appointment-team-note > i {
  margin-top: 0.15rem;
  font-size: 1.25rem;
}
.appointment-team-note p {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.5;
}
.appointment-team-examples {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.appointment-team-examples > span {
  margin-right: 0.2rem;
  color: var(--diloya-grey);
  font-size: 0.65rem;
  font-weight: 750;
}
.appointment-team-examples button {
  padding: 0.38rem 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  color: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  cursor: pointer;
}
.appointment-team-examples button:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}

.appointment-user-picker {
  position: relative;
  margin-top: 0.3rem;
}
.appointment-user-picker-input {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  cursor: text;
  flex-wrap: wrap;
}
.appointment-user-picker-input:focus-within {
  border-color: var(--diloya-primary);
  box-shadow: 0 0 0 0.125em
    color-mix(in srgb, var(--diloya-primary) 22%, transparent);
}
.appointment-user-picker-input .input {
  min-width: 180px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: 1;
}
.appointment-user-picker-input .input:focus {
  box-shadow: none;
}
.appointment-user-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.appointment-user-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.35rem 0.22rem 0.5rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 800;
}
.appointment-user-chip button {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.appointment-user-chip button:hover {
  background: color-mix(in srgb, var(--diloya-primary) 20%, transparent);
}
.appointment-user-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  display: grid;
  max-height: 248px;
  padding: 0.35rem;
  overflow: auto;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 30px rgba(20, 22, 35, 0.16);
}
.appointment-user-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.appointment-user-result:hover {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
}
.appointment-user-result img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.appointment-user-result > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.appointment-user-result strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointment-user-result small {
  color: var(--diloya-grey);
  font-size: 0.62rem;
}
.appointment-user-picker.is-disabled {
  opacity: 0.72;
}
.appointment-user-picker.is-disabled .appointment-user-picker-input {
  cursor: not-allowed;
  background: var(--diloya-surface-2);
}

.commerce-record-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.commerce-record-divider::before,
.commerce-record-divider::after {
  height: 1px;
  background: var(--diloya-border);
  content: "";
  flex: 1;
}
.commerce-record-divider span {
  white-space: nowrap;
}

.assistant-faq-examples {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 0 0.65rem;
  padding: 0.8rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.assistant-faq-examples > div:first-child {
  display: flex;
  flex-direction: column;
}
.assistant-faq-examples strong {
  font-size: 0.7rem;
}
.assistant-faq-examples small {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.58rem;
}
.assistant-faq-example-buttons {
  display: flex;
  gap: 0.4rem;
}
.assistant-faq-example-buttons button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: inherit;
  font-size: 0.63rem;
  font-weight: 750;
  cursor: pointer;
}
.assistant-faq-example-buttons button:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.assistant-faq-example-buttons b {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: var(--diloya-primary);
  color: #fff;
  font-size: 0.58rem;
}
@media (max-width: 760px) {
  .assistant-faq-examples {
    align-items: stretch;
    flex-direction: column;
  }
  .assistant-faq-example-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }
  .assistant-faq-example-buttons button {
    justify-content: flex-start;
  }
}

.ai-knowledge-examples {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 16px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.ai-knowledge-examples-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.ai-knowledge-examples-head strong {
  font-size: 0.78rem;
}
.ai-knowledge-examples-head p {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.63rem;
  line-height: 1.4;
}
.ai-knowledge-example-buttons {
  display: grid;
  gap: 0.55rem;
}
.ai-knowledge-example-buttons button {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  color: inherit;
  text-align: left;
  cursor: pointer;
  grid-template-columns: 24px 30px 1fr;
}
.ai-knowledge-example-buttons button:hover {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
}
.ai-knowledge-example-buttons button > b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--diloya-primary);
  color: #fff;
  font-size: 0.65rem;
}
.ai-knowledge-example-buttons button > i {
  color: var(--diloya-primary);
  font-size: 1rem;
  text-align: center;
}
.ai-knowledge-example-buttons button span {
  display: flex;
  flex-direction: column;
}
.ai-knowledge-example-buttons button strong {
  font-size: 0.7rem;
}
.ai-knowledge-example-buttons button small {
  color: var(--diloya-grey);
  font-size: 0.57rem;
}

.commerce-method-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.commerce-method-info > i {
  margin-top: 0.15rem;
  font-size: 1.15rem;
}
.commerce-method-info p {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.5;
}

.member-inline-form .member-access-submit {
  align-self: center;
  transform: translateY(-3px);
}
@media (max-width: 850px) {
  .member-inline-form .member-access-submit {
    transform: none;
  }
}

.member-access-intro {
  margin: -0.35rem 0 1rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.member-role-help {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 6%,
    var(--diloya-card-bg)
  );
}
.member-role-help > i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.member-role-help strong {
  font-size: 0.76rem;
}
.member-role-help p {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.66rem;
  line-height: 1.45;
}
.member-inline-form button[type="submit"] {
  min-height: 44px;
  font-weight: 800;
}
.member-inline-form:has(.member-access-role) {
  display: grid;
  align-items: end;
  gap: 0.8rem;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr) auto;
}
.member-inline-form .member-access-role,
.member-inline-form .member-access-user {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.member-inline-form .member-access-role > span,
.member-inline-form .member-access-user > span {
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
}
.member-inline-form .member-access-role > small,
.member-inline-form .member-access-user > small {
  margin-top: 0.3rem;
  color: var(--diloya-grey);
  font-size: 0.6rem;
}
.member-inline-form .member-access-role .select,
.member-inline-form .member-access-user .input {
  width: 100%;
  height: 44px;
}
.member-access-user {
  position: relative;
}
.member-candidate-results {
  position: absolute;
  z-index: 12;
  top: calc(100% - 0.1rem);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 30px rgba(30, 21, 60, 0.16);
}
.member-candidate-results button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--diloya-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.member-candidate-results button:last-child {
  border-bottom: 0;
}
.member-candidate-results button:hover {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
}
.member-candidate-results img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.member-candidate-results span {
  min-width: 0;
}
.member-candidate-results strong,
.member-candidate-results small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-candidate-results strong {
  font-size: 0.73rem;
}
.member-candidate-results small {
  margin-top: 0.1rem;
  color: var(--diloya-grey);
  font-size: 0.62rem;
}
.member-access-submit {
  white-space: nowrap;
}
@media (max-width: 850px) {
  .member-inline-form:has(.member-access-role) {
    grid-template-columns: 1fr;
  }
  .member-access-submit {
    width: 100%;
  }
}

.product-taxonomy-select .commerce-choice {
  margin-top: 0;
}
.store-map-panel {
  position: relative;
}
.commerce-information-panel > .store-branches-box {
  order: 2;
}
.commerce-information-panel > .commerce-shipping-box {
  order: 3;
}
.commerce-information-panel > .commerce-banner-box {
  order: 4;
}
.commerce-information-panel > .commerce-payment-box {
  order: 5;
}
.store-directory-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.store-map-panel {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: 0 16px 42px rgba(20, 22, 35, 0.1);
}
.store-map-search {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  grid-template-columns: minmax(220px, 1fr) auto auto auto 32px;
}
.store-map-search > label:first-child {
  position: relative;
}
.store-map-search > label:first-child i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.85rem;
  color: var(--diloya-grey);
  transform: translateY(-50%);
}
.store-map-search > label:first-child input {
  padding-left: 2.4rem;
}
.store-map-radius {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  font-weight: 800;
}
.store-map-status {
  min-height: 1.2rem;
  margin: 0.65rem 0;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.store-map-layout {
  display: grid;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  grid-template-columns: minmax(0, 1.6fr) minmax(290px, 0.7fr);
}
.store-directory-map {
  z-index: 1;
  min-height: 520px;
}
.store-map-results {
  max-height: 520px;
  padding: 0.65rem;
  overflow: auto;
  border-left: 1px solid var(--diloya-border);
  background: var(--diloya-surface-2);
}
.store-map-results.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.store-map-result {
  display: grid;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  grid-template-columns: 40px minmax(0, 1fr) 16px;
}
.store-map-result:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-text);
}
.store-map-result-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--map-result-color) 14%,
    var(--diloya-card-bg)
  );
  color: var(--map-result-color);
}
.store-map-result > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.store-map-result strong,
.store-map-result b,
.store-map-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-map-result strong {
  font-size: 0.78rem;
}
.store-map-result b {
  font-size: 0.68rem;
}
.store-map-result small {
  color: var(--diloya-grey);
  font-size: 0.63rem;
}
.store-map-result div > span {
  margin-top: 0.2rem;
  color: var(--diloya-primary);
  font-size: 0.65rem;
  font-weight: 800;
}
.store-map-result > i {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.store-branch-manager {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
}
.store-branch-editor-map {
  z-index: 1;
  min-height: 390px;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
}
.branch-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
}
.branch-visibility-options {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.branch-visibility-options .branch-check {
  min-height: 82px;
  padding: 1rem;
  cursor: pointer;
}
.branch-visibility-options .branch-check input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  accent-color: var(--diloya-primary);
}
.branch-visibility-options .branch-check > span {
  display: grid;
  gap: 0.15rem;
  grid-template-columns: auto 1fr;
}
.branch-visibility-options .branch-check i {
  margin-right: 0.25rem;
  color: var(--diloya-primary);
  font-size: 1.1rem;
}
.branch-visibility-options .branch-check strong {
  font-size: 0.9rem;
}
.branch-visibility-options .branch-check small {
  grid-column: 1 / -1;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  font-weight: 500;
}
@media (max-width: 560px) {
  .branch-visibility-options {
    grid-template-columns: 1fr;
  }
}
.branch-map-help {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.branch-name-field .input {
  min-height: 52px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 700;
}
.branch-schedule-field > small {
  display: block;
  margin: 0.25rem 0 0.65rem;
}
#branchScheduleEditor {
  display: grid;
  gap: 0.5rem;
}
.branch-schedule-day {
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.branch-schedule-toggle {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  grid-template-columns: auto 1fr auto;
  cursor: pointer;
}
.branch-schedule-toggle span {
  color: var(--diloya-grey);
  font-size: 0.68rem;
  font-weight: 600;
}
.branch-schedule-slots {
  display: none;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.branch-schedule-day.is-open .branch-schedule-slots {
  display: grid;
}
.branch-schedule-slots > div {
  display: grid;
  align-items: end;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr auto;
}
.branch-schedule-slots .input {
  margin-top: 0.2rem;
}
.store-branch-list {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.7rem;
  flex-direction: column;
}
.store-branch-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.store-branch-item > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.store-branch-item strong {
  font-size: 0.75rem;
}
.store-branch-item strong i {
  color: #f59e0b;
}
.store-branch-item small {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-branch-item span {
  color: var(--diloya-primary);
  font-size: 0.6rem;
  font-weight: 800;
}
@media (max-width: 900px) {
  .store-map-layout {
    grid-template-columns: 1fr;
  }
  .store-directory-map {
    min-height: 430px;
  }
  .store-map-results {
    max-height: 360px;
    border-top: 1px solid var(--diloya-border);
    border-left: 0;
  }
  .store-branch-manager {
    grid-template-columns: 1fr;
  }
  .store-branch-manager > div {
    display: flex;
    flex-direction: column;
  }
  .store-branch-editor-map {
    min-height: 420px;
  }
  .store-branch-list {
    order: -1;
    margin: 0 0 0.7rem;
  }
}
@media (max-width: 650px) {
  .store-directory-actions {
    width: 100%;
  }
  .store-directory-actions .button {
    flex: 1;
  }
  .store-map-panel {
    margin-inline: -0.55rem;
    padding: 0.65rem;
    border-radius: 16px;
  }
  .store-map-search {
    grid-template-columns: 1fr 1fr;
  }
  .store-map-search > label:first-child {
    grid-column: 1/-1;
  }
  .store-map-radius {
    justify-content: space-between;
  }
  .store-map-radius .select {
    flex: 1;
  }
  .store-map-search .delete {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
  }
  .store-map-layout {
    min-height: 0;
    border-radius: 14px;
  }
  .store-directory-map {
    min-height: 52vh;
  }
  .store-map-results {
    max-height: 42vh;
    padding: 0.5rem;
  }
  .store-map-result {
    padding: 0.6rem;
  }
  .store-branches-box .commerce-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .store-branches-box #branchUseLocation {
    width: 100%;
  }
  .store-branch-editor-map {
    min-height: 55vh;
  }
  .store-branch-manager .commerce-form-grid {
    grid-template-columns: 1fr;
  }
  .store-branch-manager .commerce-form-wide {
    grid-column: auto;
  }
}
.commerce-choice.is-taxonomy .commerce-choice-tag small,
.commerce-choice.is-taxonomy .commerce-choice-option small {
  display: none;
}
.commerce-choice.is-taxonomy .commerce-choice-tag > span,
.commerce-choice.is-taxonomy .commerce-choice-option > span {
  background: linear-gradient(135deg, #6d55d9, #9a7bea);
}

#productForm > * {
  order: 10;
}
.product-row-name {
  order: 1;
  grid-column: 1/-1;
}
.product-row-code,
.product-row-price,
.product-row-stock {
  order: 2;
}
.product-row-category,
.product-row-subcategory,
.product-row-status {
  order: 3;
}
.product-row-description {
  order: 4;
  grid-column: 1/-1;
}
#productForm > .product-builder {
  order: 5;
}
#productForm > .product-builder:nth-of-type(2) {
  order: 6;
}
#productForm > .product-builder:nth-of-type(3) {
  order: 7;
}
.product-save-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  order: 20;
}
.product-save-actions .button {
  min-width: 180px;
}
.product-taxonomy-select {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.35rem;
  grid-template-columns: minmax(0, 1fr) 42px;
}
.product-taxonomy-select .select {
  width: 100%;
  margin: 0 !important;
}
.product-taxonomy-select .button {
  width: 42px;
  height: 40px;
  padding: 0;
}
.product-preview-modal {
  z-index: 14000;
}
.product-preview-modal .modal-card {
  width: min(980px, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
}
.product-preview-modal .modal-card-head small {
  color: var(--diloya-primary);
  font-size: 0.65rem;
  font-weight: 850;
  text-transform: uppercase;
}
.product-preview-modal .modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.product-preview-modal .modal-card-head > div {
  min-width: 0;
  flex: 1;
}
.product-preview-modal .modal-card-head .delete {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
}
.product-preview-layout {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}
.product-preview-gallery {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, 1fr);
}
.product-preview-gallery img {
  width: 100%;
  height: 78px;
  border-radius: 11px;
  object-fit: contain;
  background: var(--diloya-surface-2);
}
.product-preview-gallery img.is-main {
  height: 380px;
  grid-column: 1/-1;
}
.product-preview-placeholder {
  display: flex;
  height: 380px;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--diloya-border);
  border-radius: 18px;
  color: var(--diloya-grey);
  grid-column: 1/-1;
  flex-direction: column;
}
.product-preview-placeholder i {
  margin-bottom: 0.5rem;
  font-size: 2.4rem;
}
.product-preview-videos {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.product-preview-videos iframe,
.product-preview-videos video,
.product-preview-videos a {
  width: 100%;
  height: 150px;
  border: 0;
  border-radius: 12px;
  background: #111;
}
.product-preview-videos a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.product-preview-info > span {
  color: var(--diloya-primary);
  font-size: 0.65rem;
  font-weight: 850;
  text-transform: uppercase;
}
.product-preview-info h2 {
  margin: 0.4rem 0;
  font-size: 1.7rem;
  font-weight: 900;
}
.product-preview-info > strong {
  display: block;
  margin-bottom: 1rem;
  color: var(--diloya-primary);
  font-size: 1.45rem;
}
.product-preview-info > p {
  color: var(--diloya-grey);
  line-height: 1.6;
  white-space: pre-wrap;
}
.product-preview-variants {
  display: flex;
  gap: 0.4rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.product-preview-variants b {
  width: 100%;
  font-size: 0.72rem;
}
.product-preview-variants button {
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
@media (max-width: 768px) {
  .product-preview-layout {
    grid-template-columns: 1fr;
  }
  .product-preview-gallery img.is-main,
  .product-preview-placeholder {
    height: 300px;
  }
  .product-save-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .product-save-actions .button {
    min-width: 0;
  }
}

/* Evita colisión con las vistas previas de logo y portada. */
.store-media-card .store-media-preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 150px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--diloya-surface-2);
  cursor: pointer;
}
.store-media-card .store-media-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}
.store-media-selected {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.35rem;
}
.store-media-selected-item {
  position: relative;
  display: grid;
  min-width: 190px;
  max-width: 240px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
}
.store-media-selected-item > button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  cursor: pointer;
}
.store-media-selected-item > img {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  object-fit: cover;
}
.store-media-selected-item > span,
.store-media-selected-item strong,
.store-media-selected-item small {
  display: block;
  min-width: 0;
}
.store-media-tag-suggestions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.store-media-tag-suggestions button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0.28rem 0.5rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  cursor: pointer;
  font-size: 0.66rem;
}
.store-media-tag-suggestions small {
  color: var(--diloya-grey);
  font-size: 0.56rem;
}
.store-media-selected-item strong {
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-media-selected-item small {
  margin-top: 0.12rem;
  color: var(--diloya-grey);
  font-size: 0.62rem;
}

/* Biblioteca multimedia de la tienda */
.store-media-upload {
  padding: 1rem;
  border-radius: 18px;
  background: var(--diloya-surface-2);
}
.store-media-drop {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 130px;
  padding: 1.25rem !important;
  border: 2px dashed
    color-mix(in srgb, var(--diloya-primary) 42%, var(--diloya-border));
  border-radius: 16px;
  background: var(--diloya-card-bg);
  cursor: pointer;
  text-align: left;
}
.store-media-drop > i {
  color: var(--diloya-primary);
  font-size: 2rem;
}
.store-media-drop span {
  display: flex;
  flex-direction: column;
}
.store-media-drop small {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.store-media-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.store-media-upload-meta {
  display: grid;
  align-items: end;
  gap: 0.75rem;
  margin-top: 0.9rem;
  grid-template-columns: 1fr 1.25fr auto;
}
.store-media-upload-meta label {
  color: var(--diloya-text);
  font-size: 0.72rem;
  font-weight: 800;
}
.store-media-upload-meta .input {
  margin-top: 0.3rem;
}
.store-media-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.store-media-toolbar > .control {
  min-width: min(360px, 100%);
}
.store-media-tag-filter {
  display: flex;
  flex: 1;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.2rem 0;
}
.store-media-tag-filter .tag {
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.store-media-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.store-media-grid > .commerce-empty {
  grid-column: 1 / -1;
}
.store-media-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow-soft);
}
.store-media-preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--diloya-surface-2);
  cursor: pointer;
}
.store-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.store-media-preview:hover img {
  transform: scale(1.035);
}
.store-media-card-body {
  padding: 0.8rem;
}
.store-media-card-body > strong,
.store-media-card-body > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-media-card-body > small {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.store-media-card-tags {
  display: flex;
  gap: 0.25rem;
  min-height: 24px;
  margin: 0.55rem 0;
  overflow: hidden;
}
.store-media-card-tags span {
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
  font-size: 0.62rem;
  white-space: nowrap;
}
.store-media-card-actions {
  display: flex;
  gap: 0.35rem;
}
.store-media-card-actions [data-media-copy] {
  flex: 1;
}
.store-media-edit-modal .modal-card {
  width: min(560px, calc(100vw - 2rem));
}
.store-media-edit-preview {
  height: 210px;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 14px;
  background: var(--diloya-surface-2);
}
.store-media-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .store-media-upload-meta {
    grid-template-columns: 1fr;
  }
  .store-media-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .store-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .store-media-card-actions [data-media-copy] {
    padding-inline: 0.5rem;
    font-size: 0.65rem;
  }
}
@media (max-width: 600px) {
  #productForm {
    grid-template-columns: 1fr;
  }
  .product-row-name,
  .product-row-description {
    grid-column: auto;
  }
  .product-save-actions {
    grid-template-columns: 1fr;
  }
}

/* Centro empresarial de agentes de IA */
.ai-workspace-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #17143b, #5140bd);
  color: #fff;
}
.ai-workspace-hero h1 {
  margin: 0.35rem 0;
  font-size: 2rem;
  font-weight: 800;
}
.ai-workspace-hero p {
  max-width: 700px;
  color: #e3e0ff;
}
.ai-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--diloya-border);
  overflow: auto;
}
.ai-tabs button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.ai-tabs button.is-active {
  background: var(--diloya-primary);
  color: #fff;
}
.ai-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.ai-metrics article {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
}
.ai-metrics article > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eeebff;
  color: var(--diloya-primary);
}
.ai-metrics strong,
.ai-metrics span {
  display: block;
}
.ai-metrics strong {
  font-size: 1.45rem;
}
.ai-metrics span {
  font-size: 0.8rem;
  color: #64748b;
}
.ai-simple-list {
  display: grid;
  gap: 0.55rem;
}
.ai-simple-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 11px;
}
.ai-simple-list strong,
.ai-simple-list small {
  display: block;
}
.ai-simple-list small {
  color: #64748b;
}
.ai-token-meter {
  height: 10px;
  border-radius: 20px;
  background: #e9e7f5;
  overflow: hidden;
}
.ai-token-meter div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6552d9, #25b99a);
  transition: width 0.25s;
}
.ai-config-card {
  height: 100%;
}
.ai-config-card h2 {
  margin: 0.4rem 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.ai-config-card > p {
  min-height: 42px;
  color: #64748b;
}
.ai-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eeebff;
  color: var(--diloya-primary);
  font-weight: 800;
}
.ai-config-card form {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}
.ai-config-card form label,
.ai-policy-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.ai-field-help {
  display: block;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
}
.ai-field-help i {
  margin-right: 0.3rem;
  color: var(--diloya-primary);
}
.ai-policy-form {
  display: flex;
  align-items: end;
  gap: 1rem;
  margin-top: 1rem;
}
.ai-policy-form .checkbox {
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
}
.ai-inbox {
  display: grid;
  grid-template-columns: 330px 1fr;
  height: 650px;
  padding: 0;
  overflow: hidden;
}
.ai-inbox > aside {
  overflow: auto;
  border-right: 1px solid var(--diloya-border);
}
.ai-inbox > aside button {
  display: block;
  width: 100%;
  padding: 1rem;
  border: 0;
  border-bottom: 1px solid var(--diloya-border);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.ai-inbox > aside button.is-active {
  background: #f0edff;
}
.ai-inbox > aside strong,
.ai-inbox > aside small {
  display: block;
}
.ai-inbox > aside small {
  margin: 0.25rem 0;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-inbox > aside span {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
}
.ai-inbox > aside em {
  font-style: normal;
  color: var(--diloya-primary);
}
.ai-inbox > aside b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
}
.ai-thread {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}
.ai-thread > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--diloya-border);
}
.ai-thread > header strong,
.ai-thread > header small {
  display: block;
}
.ai-thread > header small {
  color: #64748b;
}
.ai-thread > div:nth-child(2) {
  padding: 1rem;
  overflow: auto;
  background: #f8fafc;
}
.ai-thread article {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 78%;
  margin-bottom: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px #0001;
}
.ai-thread article.is-mine {
  margin-left: auto;
  background: #6652d9;
  color: #fff;
}
.ai-thread article small {
  margin-top: 0.25rem;
  font-size: 0.65rem;
  opacity: 0.7;
}
.ai-thread form {
  display: flex;
  gap: 0.6rem;
  padding: 1rem;
  border-top: 1px solid var(--diloya-border);
}
.ai-connection-modal {
  width: min(560px, calc(100vw - 24px));
}

/* Los diálogos siempre deben cubrir navegación fija, drawers y menús móviles. */
.modal {
  z-index: 20000 !important;
}
.ai-connection-modal pre {
  padding: 1rem;
  border-radius: 12px;
  background: #17172d;
  color: #f8fafc;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-qr {
  display: block;
  width: min(320px, 100%);
  margin: auto;
  border-radius: 12px;
}
.ai-knowledge-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(250px, 0.85fr) minmax(
      340px,
      1.2fr
    );
  gap: 1rem;
  align-items: start;
}
.ai-knowledge-layout > .box {
  height: 100%;
}
.ai-knowledge-form {
  display: grid;
  gap: 0.8rem;
}
.ai-knowledge-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.ai-standard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.ai-standard-tags button {
  border: 1px solid #d8ddea;
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
}
.ai-standard-tags button.is-selected {
  background: #eef2ff;
  border-color: #6366f1;
  color: #3730a3;
  font-weight: 700;
}
.ai-knowledge-form label em {
  color: var(--diloya-grey);
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 500;
}
.ai-knowledge-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.ai-knowledge-steps li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--diloya-grey);
  font-size: 0.6rem;
  line-height: 1.2;
}
.ai-knowledge-steps b {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 14%, transparent);
  color: var(--diloya-primary);
  font-size: 0.65rem;
}
.ai-knowledge-field-help,
.ai-knowledge-save-help {
  color: var(--diloya-grey);
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1.4;
}
.ai-knowledge-save-help i {
  color: var(--diloya-primary);
}
.ai-knowledge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ai-knowledge-list {
  display: grid;
  gap: 0.7rem;
}
.ai-knowledge-list > article {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
}
.ai-knowledge-list strong,
.ai-knowledge-list small {
  display: block;
}
.ai-knowledge-list small {
  margin: 0.2rem 0 0.4rem;
  color: #64748b;
}
.ai-knowledge-list div > .tag {
  margin: 0 0.25rem 0.2rem 0;
}
.ai-knowledge-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #eeebff;
  color: var(--diloya-primary);
}
.ai-operations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ai-operations-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
}
.ai-operations-metrics article {
  padding: 0.85rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--diloya-border);
}
.ai-operations-metrics strong,
.ai-operations-metrics span {
  display: block;
}
.ai-operations-metrics strong {
  font-size: 1.25rem;
  color: var(--diloya-primary);
}
.ai-operations-metrics span {
  font-size: 0.72rem;
  color: #64748b;
}
.ai-channel-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.ai-channel-metrics span {
  padding: 0.4rem 0.65rem;
  border-radius: 20px;
  background: #eeebff;
  color: #5140bd;
  font-size: 0.75rem;
}
.ai-conversion-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}
.ai-conversion-totals article {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #b7ead8;
  border-radius: 12px;
  background: #effcf7;
}
.ai-conversion-totals i {
  color: #15916f;
}
.ai-conversion-totals strong,
.ai-conversion-totals span {
  display: block;
}
.ai-conversion-totals span {
  font-size: 0.72rem;
  color: #527064;
}
.ai-inbox-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
  gap: 0.6rem;
  margin-bottom: 1rem !important;
}
@media (max-width: 900px) {
  .ai-operations-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-inbox-filters {
    grid-template-columns: 1fr 1fr;
  }
  .ai-inbox-filters label {
    grid-column: 1/-1;
  }
  .ai-knowledge-layout {
    grid-template-columns: 1fr;
  }
  .ai-knowledge-list > article {
    grid-template-columns: auto 1fr;
  }
  .ai-knowledge-list > article > .tag,
  .ai-knowledge-list > article > .buttons {
    grid-column: 2;
  }
  .ai-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-inbox {
    grid-template-columns: 1fr;
    height: auto;
  }
  .ai-inbox > aside {
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--diloya-border);
  }
  .ai-thread {
    min-height: 560px;
  }
  .ai-policy-form {
    display: grid;
  }
  .ai-workspace-hero {
    align-items: flex-start;
  }
  .ai-workspace-hero h1 {
    font-size: 1.6rem;
  }
}
@media (max-width: 520px) {
  .ai-operations-header {
    align-items: flex-start;
  }
  .ai-operations-metrics,
  .ai-inbox-filters {
    grid-template-columns: 1fr;
  }
  .ai-workspace {
    padding: 1rem 0.65rem;
  }
  .ai-metrics {
    grid-template-columns: 1fr;
  }
  .ai-workspace-hero {
    display: block;
  }
  .ai-workspace-hero button {
    margin-top: 1rem;
  }
  .ai-tabs button {
    flex: 1;
    justify-content: center;
  }
  .ai-tabs button i {
    display: none;
  }
  .ai-thread > header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.appointment-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.appointment-admin-list,
.appointment-list {
  display: grid;
  gap: 0.65rem;
}
.appointment-admin-list article,
.appointment-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface);
}
.appointment-admin-list small,
.appointment-list small {
  display: block;
  color: var(--diloya-muted);
}
@media (max-width: 760px) {
  .appointment-admin-grid {
    grid-template-columns: 1fr;
  }
  .appointment-admin-list article,
  .appointment-list article {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Mensajería directa personal */
.message-count-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e34f67;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2rem;
}
.direct-messages-page {
  min-height: calc(100vh - 52px);
}
.direct-messages-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  height: min(760px, calc(100vh - 130px));
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--diloya-card-bg);
  box-shadow: 0 18px 50px rgba(26, 20, 52, 0.08);
}
.direct-messages-sidebar {
  min-width: 0;
  border-right: 1px solid var(--diloya-border);
  display: flex;
  flex-direction: column;
}
.direct-messages-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.8rem;
}
.direct-messages-title p {
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.direct-messages-title-actions {
  display: flex;
  gap: 0.4rem;
}
.direct-message-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 0.8rem 0.7rem;
  gap: 0.35rem;
}
.direct-message-tabs button {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 0.55rem;
  color: var(--diloya-grey);
  font-weight: 700;
  cursor: pointer;
}
.direct-message-tabs button.is-active {
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
}
.direct-message-tabs span {
  display: inline-flex;
  min-width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--diloya-surface-2);
  font-size: 0.65rem;
}
.direct-conversation-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.55rem 0.8rem;
}
.direct-message-feedback {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0.8rem 0.7rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, #36a269 28%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #36a269 9%, var(--diloya-card-bg));
  color: #268456;
}
.direct-message-feedback > i {
  flex: 0 0 auto;
}
.direct-message-feedback span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.direct-message-feedback strong {
  font-size: 0.78rem;
}
.direct-message-feedback small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.direct-conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.direct-conversation-item:hover,
.direct-conversation-item.is-active {
  background: var(--diloya-surface-2);
}
.direct-conversation-item img,
.direct-request-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}
.direct-conversation-item .direct-conversation-avatar {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
}
.direct-conversation-avatar i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 50%;
  background: #94a3b8;
}
.direct-conversation-avatar i.is-online {
  background: #22c55e;
}
.direct-conversation-item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.direct-conversation-item strong,
.direct-conversation-item small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.direct-conversation-item small {
  color: var(--diloya-grey);
  font-size: 0.73rem;
}
.direct-conversation-item b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--diloya-primary);
  color: #fff;
  font-size: 0.68rem;
}
.direct-list-empty,
.direct-message-loading,
.direct-message-error {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--diloya-grey);
  font-size: 0.82rem;
}
.direct-list-empty i {
  display: block;
  font-size: 1.7rem;
  margin-bottom: 0.6rem;
}
.direct-thread-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.direct-thread-empty {
  margin: auto;
  max-width: 390px;
  padding: 2rem;
  text-align: center;
  color: var(--diloya-grey);
}
.direct-thread-empty > span {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 22px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
  font-size: 2rem;
}
.direct-thread-empty h2 {
  color: var(--diloya-text);
  font-size: 1.15rem;
  font-weight: 800;
}
.direct-thread-empty p {
  margin: 0.4rem 0 1rem;
}
.direct-thread {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.direct-thread-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--diloya-border);
}
.direct-thread-header img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.direct-thread-header div {
  display: flex;
  flex-direction: column;
}
.direct-thread-header .direct-safety-actions {
  margin-left: auto;
  flex-direction: row;
  gap: 0.25rem;
}
.direct-safety-actions button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.direct-safety-actions button:hover,
.direct-safety-actions button.is-active {
  background: color-mix(in srgb, #e34f67 12%, transparent);
  color: #d73854;
}
.direct-thread-header a {
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.direct-typing-status {
  color: var(--diloya-primary);
  font-size: 0.7rem;
  font-weight: 700;
}
.direct-peer-presence {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.direct-peer-presence > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}
.direct-peer-presence.is-online {
  color: #16834f;
  font-weight: 700;
}
.direct-peer-presence.is-online > i {
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 16%, transparent);
}
.direct-thread-back {
  display: none;
}

/* Tableros */
.boards-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: calc(100dvh - 64px);
  margin-top: 64px !important;
  background: var(--diloya-surface-2);
}
.boards-sidebar {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  border-right: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.boards-sidebar > header,
.boards-current-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.boards-sidebar > header small {
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}
.boards-sidebar > header h1 {
  font-size: 1.25rem;
  font-weight: 900;
}
.boards-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
}
.boards-list-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.boards-list-item:hover,
.boards-list-item.is-active {
  background: var(--diloya-surface-2);
}
.boards-list-item > i:first-child {
  width: 8px;
  height: 36px;
  border-radius: 999px;
}
.boards-list-item > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.boards-list-item strong,
.boards-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boards-list-item small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.boards-list-item > i:last-child {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.boards-loading,
.boards-list-empty {
  padding: 2rem 0.5rem;
  color: var(--diloya-grey);
  text-align: center;
}
.boards-workspace {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.boards-empty {
  display: grid;
  height: 100%;
  padding: 2rem;
  place-content: center;
  justify-items: center;
  text-align: center;
}
.boards-empty > span {
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 1rem;
  place-items: center;
  border-radius: 24px;
  background: color-mix(in srgb, var(--diloya-primary) 13%, transparent);
  color: var(--diloya-primary);
  font-size: 2rem;
}
.boards-empty h2 {
  font-size: 1.3rem;
  font-weight: 900;
}
.boards-empty p {
  margin: 0.4rem 0 1rem;
  color: var(--diloya-grey);
}
.boards-current {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
.boards-current-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.boards-current-header > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.boards-current-header h2 {
  font-size: 1.15rem;
  font-weight: 900;
}
.boards-current-header p {
  max-width: 52vw;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boards-color {
  width: 12px;
  height: 42px;
  flex: 0 0 12px;
  border-radius: 999px;
}
.boards-mobile-back {
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
}
.board-columns {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  scroll-snap-type: x proximity;
}
.board-column {
  width: 300px;
  max-height: 100%;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  padding: 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: color-mix(
    in srgb,
    var(--diloya-card-bg) 92%,
    var(--diloya-surface-2)
  );
  scroll-snap-align: start;
}
.board-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.2rem 0.2rem 0.65rem;
}
.board-column > header > div {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  gap: 0.5rem;
}
.board-column > header > div > i {
  width: 8px;
  height: 22px;
  border-radius: 999px;
}
.board-column-settings {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
  place-items: center;
}
.board-column-settings:hover,
.board-column-settings:focus-visible {
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.board-column > header strong {
  flex: 1;
  font-size: 0.82rem;
}
.board-column > header span {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.66rem;
}
.board-card-list {
  display: grid;
  min-height: 52px;
  overflow-y: auto;
  gap: 0.55rem;
  padding: 0.1rem;
  border-radius: 12px;
}
.board-card-list.is-drag-over {
  outline: 2px dashed var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 7%, transparent);
}
.board-card {
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
  background: var(--diloya-card-bg);
  box-shadow: 0 5px 15px rgba(30, 25, 50, 0.07);
  cursor: pointer;
}
.board-card:hover {
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 55%,
    var(--diloya-border)
  );
  transform: translateY(-1px);
}
.board-card.is-dragging {
  opacity: 0.45;
}
.board-card > strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
}
.board-card > p {
  display: -webkit-box;
  margin-top: 0.35rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.board-card-description {
  display: -webkit-box;
  margin-top: 0.35rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.board-card-description > * {
  margin: 0;
}
.board-card-assignees {
  display: flex;
  align-items: center;
  margin-top: 0.65rem;
  padding-left: 0.25rem;
}
.board-card-assignees img,
.board-card-assignees > span {
  width: 28px;
  height: 28px;
  margin-left: -0.25rem;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 50%;
  object-fit: cover;
}
.board-card-assignees > span {
  display: grid;
  place-items: center;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.62rem;
  font-weight: 800;
}
.board-card-labels {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}
.board-card-labels span {
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
  font-size: 0.58rem;
  font-weight: 800;
}
.board-card footer {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.65rem;
  color: var(--diloya-grey);
  font-size: 0.62rem;
}
.board-card footer span,
.board-card footer time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.board-priority.is-urgent,
.board-priority.is-high {
  color: #d73854;
}
.board-priority.is-medium {
  color: #c57b12;
}
.board-priority.is-low {
  color: #268456;
}
.board-add-card {
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--diloya-grey);
  text-align: left;
  cursor: pointer;
}
.board-add-card:hover {
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.board-color-input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  cursor: pointer;
}
.board-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.board-color-input::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
}
.board-color-input::-moz-color-swatch {
  border: 0;
  border-radius: 8px;
}
.board-card-form-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: 1fr 1fr;
}
.board-card-form-grid .select {
  width: 100%;
}
.board-assignee-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.board-assignee-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  cursor: pointer;
}
.board-assignee-option:has(input:checked) {
  border-color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 8%, transparent);
}
.board-assignee-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.board-assignee-option img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.board-assignee-option > span {
  min-width: 0;
}
.board-assignee-option strong,
.board-assignee-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-assignee-option small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.board-assignee-option > i {
  color: transparent;
}
.board-assignee-option:has(input:checked) > i {
  color: var(--diloya-primary);
}
.board-label-picker,
.board-member-search {
  position: relative;
}
.board-selected-labels {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}
.board-selected-labels:empty {
  display: none;
}
.board-selected-labels > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 750;
}
.board-selected-labels button {
  display: grid;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.board-label-suggestions,
.board-member-search-results {
  position: absolute;
  z-index: 12;
  right: 0;
  left: 0;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 0.3rem;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}
.board-label-suggestions button,
.board-member-search-results button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
}
.board-label-suggestions button:hover,
.board-member-search-results button:hover {
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.board-member-search > .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0.65rem;
  color: var(--diloya-grey);
  transform: translateY(-50%);
}
.board-member-search .input {
  padding-left: 2.25rem;
}
.board-member-search-results img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.board-member-search-results span {
  min-width: 0;
  flex: 1;
}
.board-member-search-results strong,
.board-member-search-results small {
  display: block;
}
.board-member-search-results small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.board-member-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}
.board-member-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(130px, auto) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
}
.board-member-row > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.board-member-row > span {
  min-width: 0;
}
.board-member-row strong,
.board-member-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-member-row small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.board-members-empty,
.board-member-no-results {
  padding: 1.25rem;
  color: var(--diloya-grey);
  text-align: center;
}
.board-rich-editor {
  position: relative;
  overflow: visible;
}
.board-rich-editor .community-rich-editor-area {
  min-height: 150px;
  max-height: 320px;
  overflow-y: auto;
}
.board-reference-suggestions {
  position: absolute;
  z-index: 25;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}
.board-reference-suggestions button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
}
.board-reference-suggestions button:hover {
  background: var(--diloya-surface-2);
}
.board-reference-suggestions button > span {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
  place-items: center;
}
.board-reference-suggestions button > div {
  min-width: 0;
}
.board-reference-suggestions strong,
.board-reference-suggestions small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-reference-suggestions small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.board-reference-suggestions button > i {
  color: var(--diloya-grey);
}
.board-reference-empty {
  padding: 1rem;
  color: var(--diloya-grey);
  text-align: center;
}
.board-reference-link,
[data-board-reference-type] {
  padding: 0.08rem 0.3rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
  color: var(--diloya-primary);
  font-weight: 750;
  text-decoration: none;
}
.board-checklist-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}
.board-checklist-progress > div {
  height: 6px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: var(--diloya-surface-2);
}
.board-checklist-progress > div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--diloya-primary);
}
.board-checklist-progress small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
  white-space: nowrap;
}
.board-checklist {
  display: grid;
  gap: 0.4rem;
}
.board-checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}
.board-checklist-item label span {
  display: grid;
  width: 25px;
  height: 25px;
  border: 1px solid var(--diloya-border);
  border-radius: 7px;
  color: transparent;
  cursor: pointer;
  place-items: center;
}
.board-checklist-item label input {
  position: absolute;
  opacity: 0;
}
.board-checklist-item label input:checked + span {
  border-color: var(--diloya-primary);
  background: var(--diloya-primary);
  color: #fff;
}
.board-checklist-item.is-completed .input {
  color: var(--diloya-grey);
  text-decoration: line-through;
}
.board-checklist-item > button {
  padding: 0.45rem;
  border: 0;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.board-checklist-add {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.board-attachments {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}
.board-attachment-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid var(--diloya-border);
  border-radius: 11px;
}
.board-attachment-item > span {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
  place-items: center;
}
.board-attachment-item > div {
  min-width: 0;
}
.board-attachment-item strong,
.board-attachment-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-attachment-item small,
.board-attachment-item em {
  color: var(--diloya-grey);
  font-size: 0.66rem;
  font-style: normal;
}
.board-attachment-item > a,
.board-attachment-item > button {
  padding: 0.4rem;
  border: 0;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.board-attachment-upload {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px dashed
    color-mix(in srgb, var(--diloya-primary) 45%, var(--diloya-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--diloya-primary) 5%, transparent);
  cursor: pointer;
}
.board-attachment-upload > i {
  color: var(--diloya-primary);
  font-size: 1.15rem;
}
.board-attachment-upload span {
  min-width: 0;
}
.board-attachment-upload strong,
.board-attachment-upload small {
  display: block;
}
.board-attachment-upload small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.board-editor-modal .modal-card,
.board-card-modal .modal-card,
.board-members-modal .modal-card {
  display: flex;
  max-height: calc(100dvh - 2rem);
  flex-direction: column;
  overflow: hidden;
}
.board-editor-modal form,
.board-card-modal form,
.board-members-modal form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.board-editor-modal .modal-card-body,
.board-card-modal .modal-card-body,
.board-members-modal .modal-card-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.board-editor-modal .modal-card-head,
.board-editor-modal .modal-card-foot,
.board-card-modal .modal-card-head,
.board-card-modal .modal-card-foot,
.board-members-modal .modal-card-head,
.board-members-modal .modal-card-foot {
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .boards-page {
    grid-template-columns: 1fr;
    height: calc(100dvh - 58px);
    margin-top: 58px !important;
  }
  .boards-sidebar {
    border-right: 0;
  }
  .boards-workspace {
    display: none;
  }
  .boards-page.has-open-board .boards-sidebar {
    display: none;
  }
  .boards-page.has-open-board .boards-workspace {
    display: block;
  }
  .boards-mobile-back {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
  }
  .boards-current-header {
    align-items: flex-start;
    padding: 0.75rem;
  }
  .boards-current-header > div:last-child {
    flex-direction: column;
    gap: 0.35rem;
  }
  .boards-current-header p {
    max-width: 48vw;
  }
  .board-columns {
    padding: 0.75rem;
  }
  .board-column {
    width: 84vw;
    flex-basis: 84vw;
  }
  .board-card-form-grid {
    grid-template-columns: 1fr;
  }
  .board-assignee-options {
    grid-template-columns: 1fr;
  }
  .board-member-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }
  .board-member-row .select {
    grid-column: 2 / -1;
    grid-row: 2;
  }
  .board-checklist-add {
    align-items: stretch;
    flex-direction: column;
  }
}
.direct-thread-messages {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--diloya-primary) 45%, transparent)
    transparent;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem;
  background: color-mix(in srgb, var(--diloya-surface-2) 55%, transparent);
}
.direct-thread-messages::-webkit-scrollbar {
  width: 8px;
}
.direct-thread-messages::-webkit-scrollbar-track {
  background: transparent;
}
.direct-thread-messages::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 45%, transparent);
  background-clip: padding-box;
}
.direct-message-bubble {
  max-width: min(72%, 620px);
  align-self: flex-start;
}
.direct-message-bubble.is-mine {
  align-self: flex-end;
}
.direct-message-content {
  padding: 0.58rem 0.78rem;
  border-radius: 16px 16px 16px 4px;
  background: var(--diloya-card-bg);
  box-shadow: 0 2px 8px rgba(30, 24, 55, 0.06);
  word-break: break-word;
}
.direct-message-bubble.is-mine .direct-message-content {
  border-radius: 16px 16px 4px 16px;
  background: var(--diloya-primary);
  color: #fff;
}
.direct-message-content p a {
  color: var(--diloya-primary);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.direct-message-bubble.is-mine .direct-message-content p a {
  color: #fff;
  text-decoration-color: color-mix(in srgb, #fff 82%, transparent);
}
.direct-message-content p a:hover,
.direct-message-content p a:focus-visible {
  text-decoration-thickness: 2.5px;
}
.direct-message-bubble > small {
  display: block;
  margin: 0.15rem 0.35rem 0;
  color: var(--diloya-grey);
  font-size: 0.61rem;
}
.direct-message-bubble.is-mine > small {
  text-align: right;
}
.direct-message-receipt {
  margin-left: 0.4rem;
  white-space: nowrap;
}
.direct-message-receipt.is-read {
  color: var(--diloya-primary);
  font-weight: 700;
}
.direct-message-bubble > small em {
  margin-left: 0.35rem;
  font-style: normal;
}
.direct-message-automated {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.4rem;
  color: var(--diloya-primary);
  font-weight: 750;
}
.direct-message-actions {
  display: inline-flex;
  gap: 0.15rem;
  margin-left: 0.35rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.direct-message-bubble:hover .direct-message-actions,
.direct-message-bubble:focus-within .direct-message-actions {
  opacity: 1;
}
.direct-message-actions button {
  padding: 0.12rem 0.2rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.direct-message-deleted {
  color: var(--diloya-grey);
  font-style: italic;
}
@media (hover: none) {
  .direct-message-actions {
    opacity: 1;
  }
}
.direct-message-action-modal {
  z-index: 140;
}
.direct-chat-share-modal {
  z-index: 150;
}
.direct-chat-share-modal .modal-card {
  width: min(92vw, 520px);
  border-radius: 20px;
  overflow: hidden;
}
.direct-chat-share-modal .modal-card-head {
  align-items: flex-start;
}
.direct-chat-share-modal .modal-card-title {
  font-size: 1.1rem;
  font-weight: 800;
}
.direct-chat-share-modal .modal-card-head small {
  display: block;
  margin-top: 0.15rem;
  color: var(--diloya-grey);
}
.direct-chat-share-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.direct-chat-share-hero > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
  font-size: 1.2rem;
}
.direct-chat-share-hero p {
  color: var(--diloya-grey);
  font-size: 0.76rem;
}
.direct-chat-share-link {
  display: flex;
  gap: 0.45rem;
}
.direct-chat-share-link .input {
  min-width: 0;
  font-size: 0.78rem;
}
.direct-chat-share-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.direct-chat-share-actions .button,
.direct-chat-share-link .button,
.direct-chat-qr .button {
  gap: 0.4rem;
}
.direct-chat-qr {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 17px;
  background: var(--diloya-surface-2);
  text-align: center;
}
.direct-chat-qr img {
  display: block;
  width: min(240px, 100%);
  height: auto;
  margin: 0 auto 0.65rem;
  border-radius: 13px;
}
.direct-chat-qr img:not([src]) {
  display: none;
}
.direct-chat-qr p {
  margin-bottom: 0.7rem;
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.direct-chat-qr-loading {
  padding: 1.5rem 0;
  color: var(--diloya-grey);
}
.direct-chat-share-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.direct-chat-share-privacy i {
  margin-top: 0.15rem;
  color: #2d9b68;
}
.company-message-ai-panel {
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--diloya-primary) 5%, var(--diloya-card-bg)),
    var(--diloya-card-bg) 52%
  );
}
.company-ai-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.company-ai-flow article {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
}
.company-ai-flow article > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--diloya-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.company-ai-flow strong {
  display: block;
  font-size: 0.82rem;
}
.company-ai-flow p {
  margin-top: 0.2rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.integration-scope-picker {
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
}
.integration-scope-picker > p {
  margin: 0.15rem 0 0.65rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.integration-scope-picker > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.integration-scope-picker label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--diloya-card-bg);
  font-size: 0.76rem;
}
.integration-scope-picker label.is-admin {
  color: #a96d00;
  background: color-mix(in srgb, #e4a42d 10%, var(--diloya-card-bg));
}
.integration-token-card header em {
  display: block;
  margin-top: 0.3rem;
  color: var(--diloya-primary);
  font-size: 0.65rem;
  font-style: normal;
  overflow-wrap: anywhere;
}
.direct-message-action-modal .modal-card {
  width: min(92vw, 470px);
  border-radius: 18px;
  overflow: hidden;
}
.direct-message-action-modal .modal-card-head {
  align-items: flex-start;
}
.direct-message-action-modal .modal-card-title {
  font-size: 1.05rem;
  font-weight: 800;
}
.direct-message-action-modal .modal-card-head small {
  display: block;
  margin-top: 0.15rem;
  color: var(--diloya-grey);
}
.direct-message-action-modal .modal-card-body {
  text-align: center;
}
.message-action-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 0.9rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
  font-size: 1.25rem;
}
.message-action-icon.is-danger {
  background: color-mix(in srgb, #e34f67 12%, transparent);
  color: #d73854;
}
.message-edit-field {
  display: block;
  margin-top: 1rem;
  text-align: left;
}
.message-edit-field > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
}
.message-edit-field > small {
  display: block;
  margin-top: 0.25rem;
  color: var(--diloya-grey);
  text-align: right;
}
.message-report-field {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  text-align: left;
}
.message-report-field label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 800;
}
.message-report-field .select {
  width: 100%;
}
.direct-message-action-modal .modal-card-foot {
  justify-content: flex-end;
}
.direct-message-composer {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border-top: 1px solid var(--diloya-border);
}
.direct-message-composer-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: var(--diloya-card-bg);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--diloya-text) 7%, transparent);
}
.direct-message-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.direct-message-quick-actions .button {
  flex: 1 1 140px;
}
.direct-message-help {
  margin: 0 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.direct-toolbar-button,
.direct-send-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
}
.direct-send-btn {
  flex: 0 0 42px;
}
.direct-blocked-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 58px;
  padding: 0.8rem;
  border-top: 1px solid var(--diloya-border);
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.direct-message-composer .textarea {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  min-height: 42px;
  max-height: 160px;
  resize: none;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  overflow-wrap: anywhere;
  padding-inline: 0.25rem;
}
.direct-emoji-picker-wrap {
  position: relative;
}
.direct-emoji-picker-wrap > .button {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
}
.direct-emoji-picker {
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 0.65rem);
  width: min(292px, calc(100vw - 1.4rem));
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 40px rgba(26, 20, 52, 0.18);
}
.direct-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.2rem;
}
.direct-emoji-grid button {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}
.direct-emoji-grid button:hover,
.direct-emoji-grid button:focus-visible {
  background: var(--diloya-surface-2);
}
.direct-attachment-menu-wrap {
  position: relative;
}
.direct-attachment-menu {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 0.65rem);
  width: min(330px, calc(100vw - 1.4rem));
  padding: 0.55rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 40px rgba(26, 20, 52, 0.18);
}
.direct-attachment-menu button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem 0.6rem;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
}
.direct-attachment-menu button:hover,
.direct-attachment-menu button:focus-visible {
  background: var(--diloya-surface-2);
}
.direct-attachment-menu button i {
  grid-row: span 2;
  color: var(--diloya-primary);
  font-size: 1rem;
}
.direct-attachment-menu button span {
  font-weight: 700;
}
.direct-attachment-menu button small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.voice-record-btn.is-recording {
  background: #e34f67;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 7px color-mix(in srgb, #e34f67 18%, transparent);
}
.video-record-btn.is-recording {
  background: #1c8be3;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 7px color-mix(in srgb, #1c8be3 18%, transparent);
}
.voice-recording-state {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #e34f67;
  flex-wrap: wrap;
}
.direct-message-composer.is-video-locked .voice-recording-state {
  color: #1c8be3;
}
.direct-message-composer.is-recording .direct-attachment-btn,
.direct-message-composer.is-recording .direct-emoji-picker-wrap,
.direct-message-composer.is-recording .voice-record-btn,
.direct-message-composer.is-recording .video-record-btn,
.direct-message-composer.is-recording .textarea,
.direct-message-composer.is-recording #directMessageSend {
  display: none;
}
.voice-recording-state small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
  white-space: nowrap;
}
.voice-recording-state #finishVoiceBtn {
  margin-left: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #e34f67;
  color: #fff;
  font-weight: 700;
}
.direct-message-composer.is-video-locked
  .voice-recording-state
  #finishVoiceBtn {
  background: #1c8be3;
}
.voice-recording-state #cancelVoiceBtn {
  margin-left: 0;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  color: var(--diloya-grey);
  font-weight: 700;
}
.direct-message-composer.is-voice-locked .voice-recording-wave i {
  animation-duration: 1.15s;
}
.direct-message-composer.is-voice-locked .voice-record-btn {
  background: #e34f67;
  color: #fff;
}
.direct-message-composer.is-recording .direct-message-composer-shell,
.direct-message-composer.is-recording .direct-message-quick-actions {
  opacity: 0.6;
  pointer-events: none;
}
.direct-message-composer.is-recording .voice-recording-state {
  opacity: 1;
  pointer-events: auto;
}
.voice-recording-wave {
  height: 28px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}
.voice-recording-wave i {
  width: 3px;
  height: 8px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: currentColor;
  transition: height 80ms linear;
}
.recording-video-preview {
  width: 92px;
  height: 70px;
  flex: 0 0 92px;
  border: 2px solid currentColor;
  border-radius: 12px;
  background: #111;
  object-fit: cover;
}
.recording-video-preview.is-front-camera {
  transform: scaleX(-1);
}
#switchVideoCamera {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: #e8f4ff;
  color: #176da8;
  font-weight: 700;
}
.voice-recording-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: voice-pulse 1s infinite;
}
.voice-recording-state button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
@keyframes voice-pulse {
  50% {
    opacity: 0.3;
  }
}
@keyframes voice-wave {
  from {
    height: 6px;
    opacity: 0.45;
  }
  to {
    height: 25px;
    opacity: 1;
  }
}
.direct-voice-message {
  min-width: min(330px, 55vw);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.direct-voice-message > button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 800;
}
.direct-voice-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.direct-voice-track span {
  display: block;
  width: 0;
  height: 100%;
  background: currentColor;
}
.direct-voice-message time {
  font-size: 0.67rem;
}
.direct-video-message {
  display: grid;
  gap: 0.4rem;
}
.direct-video-player {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.direct-video-message video {
  display: block;
  width: min(360px, 60vw);
  max-width: 100%;
  max-height: 380px;
  border-radius: 13px;
  background: #000;
}
.direct-video-player [data-video-play] {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 18, 28, 0.78);
  color: #fff;
  font-size: 1.05rem;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.direct-video-player [data-video-play]:disabled {
  cursor: wait;
}
.direct-video-message video.is-media-loading {
  opacity: 0.55;
  cursor: wait;
}
.direct-video-message time {
  font-size: 0.67rem;
}
.direct-video-open {
  font-size: 0.72rem;
  text-decoration: underline;
}
.direct-image-message {
  display: block;
  margin: -0.35rem;
}
.direct-image-message img {
  display: block;
  max-width: min(360px, 60vw);
  max-height: 360px;
  border-radius: 13px;
  object-fit: cover;
}
.direct-file-message {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  min-width: min(300px, 55vw);
}
.direct-file-message > i {
  font-size: 1.5rem;
}
.direct-file-message span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.direct-file-message strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-file-message small {
  opacity: 0.75;
}
.direct-thread-notice {
  margin: auto;
  color: var(--diloya-grey);
}
.direct-request-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--diloya-border);
}
.direct-request-item > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.direct-request-item small {
  color: var(--diloya-grey);
}
.direct-request-item p {
  margin: 0.45rem 0;
  font-size: 0.82rem;
  white-space: pre-wrap;
}
.direct-request-item span {
  display: flex;
  gap: 0.35rem;
}
.direct-message-new-card {
  width: min(520px, 94vw);
  border-radius: 18px;
  overflow: hidden;
}
.mutual-contact-list {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
  overflow-x: auto;
}
.mutual-contact-list button {
  min-width: 130px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.mutual-contact-list img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.mutual-contact-list span {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mutual-contact-list small {
  display: block;
  color: var(--diloya-grey);
  font-weight: 400;
}
.direct-recipient-picker {
  position: relative;
}
.direct-recipient-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 35px rgba(25, 20, 48, 0.18);
}
.direct-recipient-option {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.direct-recipient-option:hover,
.direct-recipient-option.is-mutual:hover {
  background: var(--diloya-surface-2);
}
.direct-recipient-option.is-non-mutual {
  color: var(--diloya-grey);
  filter: grayscale(0.75);
}
.direct-recipient-option.is-mutual {
  color: var(--diloya-text);
  background: color-mix(in srgb, var(--diloya-primary) 7%, transparent);
}
.direct-recipient-option img,
.direct-recipient-selected img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.direct-recipient-option span,
.direct-recipient-selected span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.direct-recipient-option strong,
.direct-recipient-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-recipient-option small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.direct-recipient-option em,
.direct-recipient-selected em {
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  color: var(--diloya-grey);
  background: var(--diloya-surface-2);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}
.direct-recipient-option.is-mutual em,
.direct-recipient-selected em.is-mutual {
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
.direct-recipient-selected {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 11px;
  background: var(--diloya-surface-2);
}
.direct-recipient-selected button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.direct-recipient-empty {
  padding: 1rem;
  color: var(--diloya-grey);
  text-align: center;
  font-size: 0.78rem;
}
.direct-new-message-feedback {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, #d73854 30%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #d73854 8%, var(--diloya-card-bg));
  color: #c62f49;
  font-size: 0.76rem;
}
.direct-new-message-feedback.is-success {
  border-color: color-mix(in srgb, #2d9b68 30%, transparent);
  background: color-mix(in srgb, #2d9b68 8%, var(--diloya-card-bg));
  color: #247f56;
}
.store-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.store-service-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: 0 8px 24px rgba(28, 23, 56, 0.06);
}
.store-service-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
}
.store-service-card h3 {
  font-weight: 800;
}
.store-service-card p {
  color: var(--diloya-grey);
  font-size: 0.82rem;
}
.store-service-card span {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.store-service-card > strong,
.store-service-card > .button,
.store-service-card > small {
  grid-column: 1 / -1;
}
.store-service-card > strong {
  font-size: 1.05rem;
  color: var(--diloya-primary);
}
.appointment-modal-card {
  width: min(540px, 94vw);
  border-radius: 18px;
  overflow: hidden;
}
.appointment-modal-card .label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
@media (max-width: 760px) {
  .direct-messages-page {
    padding: 0 !important;
  }
  .direct-messages-shell {
    display: block;
    height: calc(100dvh - 52px - 5.25rem - env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }
  .direct-messages-sidebar {
    height: 100%;
    border: 0;
  }
  .direct-thread-panel {
    display: none;
    position: fixed;
    inset: 52px 0 0;
    z-index: 110;
    background: var(--diloya-card-bg);
  }
  .direct-messages-page.has-open-thread .direct-thread-panel {
    display: flex;
  }
  .direct-thread-back {
    display: inline-flex;
  }
  .direct-message-bubble {
    max-width: 85%;
  }
  .direct-message-actions {
    gap: 0.1rem;
    margin-left: 0.2rem;
  }
  .direct-message-actions button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.72rem;
  }
  .direct-message-actions button:active {
    background: var(--diloya-surface-2);
  }
  .direct-chat-share-modal .modal-card {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem - env(safe-area-inset-bottom));
  }
  .direct-chat-share-modal .modal-card-body {
    padding: 1rem;
  }
  .direct-chat-share-link .button span {
    display: none;
  }
  .direct-chat-share-actions {
    grid-template-columns: 1fr;
  }
  .company-ai-flow {
    grid-template-columns: 1fr;
  }
  .integration-scope-picker > div {
    grid-template-columns: 1fr;
  }
  .direct-voice-message {
    min-width: min(260px, 68vw);
  }
  .direct-video-message video {
    width: min(300px, 68vw);
  }
  .direct-message-composer {
    gap: 0.2rem;
    padding: 0.55rem max(0.45rem, env(safe-area-inset-right))
      max(0.55rem, env(safe-area-inset-bottom))
      max(0.45rem, env(safe-area-inset-left));
    background: var(--diloya-card-bg);
    box-shadow: 0 -8px 24px rgba(26, 20, 52, 0.06);
  }
  .direct-message-composer-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.3rem;
    padding: 0.4rem;
  }
  .direct-message-composer .textarea {
    min-height: 38px;
    padding: 0.55rem 0.65rem;
    font-size: 16px;
  }
  .direct-toolbar-button,
  .direct-send-btn,
  .direct-emoji-picker-wrap > .button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .direct-message-quick-actions .button {
    flex-basis: calc(50% - 0.25rem);
  }
  .direct-attachment-menu {
    right: -0.2rem;
    width: min(300px, calc(100vw - 1rem));
  }
  .voice-recording-state {
    min-width: 0;
    gap: 0.35rem;
  }
  .voice-recording-state small {
    display: none;
  }
  .voice-recording-wave {
    min-width: 18px;
  }
  .voice-recording-state button span {
    display: none;
  }
  .voice-recording-state #cancelVoiceBtn,
  .voice-recording-state #finishVoiceBtn {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
  }
  body.has-open-direct-thread {
    padding-bottom: 0;
    overflow: hidden;
  }
  body.has-open-direct-thread .auth-bottom-nav {
    display: none;
  }
}

/* Loader de marca reutilizable */
.diloya-brand-loader {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--diloya-text);
}
.diloya-brand-loader-mark {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
}
.diloya-brand-loader-mark img {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  filter: drop-shadow(0 8px 16px rgba(86, 56, 199, 0.2));
  animation: diloya-loader-breathe 1.6s ease-in-out infinite;
}
.diloya-brand-loader-glow {
  position: absolute;
  inset: 3px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--diloya-primary) 28%, transparent);
  filter: blur(10px);
  animation: diloya-loader-glow 1.6s ease-in-out infinite;
}
.diloya-brand-loader-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.2;
}
.diloya-brand-loader-copy strong {
  color: var(--diloya-primary);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.015em;
}
.diloya-brand-loader-copy small {
  margin-top: 0.22rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.diloya-brand-loader.is-compact {
  min-height: 82px;
  gap: 0.65rem;
}
.diloya-brand-loader.is-compact .diloya-brand-loader-mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
.diloya-brand-loader.is-compact .diloya-brand-loader-mark img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.diloya-brand-loader.is-compact .diloya-brand-loader-copy strong {
  font-size: 0.86rem;
}
.diloya-brand-loader.is-compact .diloya-brand-loader-copy small {
  font-size: 0.65rem;
}
.diloya-navigation-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  padding: 1rem;
  place-items: center;
  background: color-mix(in srgb, var(--diloya-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  animation: diloya-loader-enter 0.18s ease-out both;
}
.diloya-brand-loader.is-fullscreen {
  min-width: min(88vw, 300px);
  min-height: auto;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: 0 24px 70px rgba(26, 20, 65, 0.18);
}
@keyframes diloya-loader-breathe {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@keyframes diloya-loader-glow {
  0%,
  100% {
    transform: scale(0.86);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.16);
    opacity: 0.7;
  }
}
@keyframes diloya-loader-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diloya-brand-loader-mark img,
  .diloya-brand-loader-glow,
  .diloya-navigation-loader {
    animation: none;
  }
}

.articles-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.articles-hero small {
  color: var(--diloya-primary);
  font-weight: 850;
  text-transform: uppercase;
}
.articles-hero h1 {
  margin: 0.15rem 0;
  font-size: 2rem;
  font-weight: 900;
  color: var(--diloya-text);
}
.article-manage-hero {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.45rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 88% 15%,
      color-mix(in srgb, var(--diloya-primary) 18%, transparent),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--diloya-card-bg),
      color-mix(in srgb, var(--diloya-primary) 7%, var(--diloya-card-bg))
    );
  box-shadow: 0 14px 36px
    color-mix(in srgb, var(--diloya-primary) 8%, transparent);
}
.article-manage-hero-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}
.article-manage-hero-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--diloya-primary), #7c3aed);
  color: #fff;
  box-shadow: 0 9px 22px
    color-mix(in srgb, var(--diloya-primary) 28%, transparent);
  font-size: 1.25rem;
}
.article-manage-hero p {
  color: var(--diloya-grey);
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.article-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
}
.article-card > a > img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.article-card > div {
  padding: 1rem;
}
.article-card h2 {
  margin: 0.45rem 0;
  font-size: 1.2rem;
  font-weight: 900;
}
.article-card h2 a {
  color: var(--diloya-text);
}
.article-card footer,
.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 1rem;
}
.article-card footer a,
.article-byline {
  color: var(--diloya-text);
}
.article-card footer img,
.article-byline img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.article-card footer a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.article-topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.article-topic-row span {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--diloya-surface-2);
  font-size: 0.68rem;
}
.article-topic-row a,
.article-tag-row a,
.article-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
  font-size: 0.74rem;
  font-weight: 700;
}
.article-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.article-tags-field {
  position: relative;
}
.article-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 42px;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 8px;
  background: var(--diloya-card-bg);
}
.article-tags-input:focus-within {
  border-color: var(--diloya-primary);
  box-shadow: 0 0 0 0.125em
    color-mix(in srgb, var(--diloya-primary) 22%, transparent);
}
.article-tags-chips {
  display: contents;
}
.article-tags-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.35rem 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 13%, transparent);
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 750;
}
.article-tags-chip button {
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.article-tags-chip button:hover {
  background: color-mix(in srgb, var(--diloya-primary) 16%, transparent);
}
.article-tags-input > input {
  min-width: 155px;
  flex: 1;
  padding: 0.3rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--diloya-text);
  font-size: 0.88rem;
}
.article-tags-suggestions {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  background: var(--diloya-card-bg);
}
.article-tags-suggestions button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--diloya-text);
  cursor: pointer;
  text-align: left;
}
.article-tags-suggestions button:hover,
.article-tags-suggestions button:focus {
  background: var(--diloya-hover);
}
.article-tags-suggestions small {
  color: var(--diloya-grey);
}
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.article-breadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-breadcrumb i {
  font-size: 0.55rem;
}
.article-author-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.article-author-hero img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}
.article-author-hero h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
}
.article-discovery-filters {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.article-discovery-filters > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.article-discovery-filters strong {
  margin-right: 0.35rem;
}
.article-filter-chip.is-active {
  background: var(--diloya-primary);
  color: white;
}
.article-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.article-stat-grid article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: 0 7px 20px color-mix(in srgb, #000 5%, transparent);
}
.article-stat-grid article > i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.article-stat-grid article > div {
  min-width: 0;
}
.article-stat-grid strong,
.article-stat-grid span {
  display: block;
}
.article-stat-grid strong {
  line-height: 1.05;
  font-size: 1.6rem;
  color: var(--diloya-primary);
}
.article-stat-grid span {
  margin-top: 0.16rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-manage-list {
  display: grid;
  gap: 0.7rem;
}
.article-manage-list > article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.article-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
}
.article-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--diloya-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--diloya-surface-2);
}
.article-toolbar button {
  min-width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--diloya-text);
  cursor: pointer;
}
.article-toolbar button:hover {
  background: var(--diloya-hover);
  color: var(--diloya-primary);
}
.article-editor-content {
  position: relative;
  min-height: 460px;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  outline: 0;
  color: var(--diloya-text);
}
.article-editor-content ul,
.article-rich-content ul {
  margin: 0.75rem 0;
  padding-left: 2rem;
  list-style: disc outside;
}
.article-editor-content ol,
.article-rich-content ol {
  margin: 0.75rem 0;
  padding-left: 2rem;
  list-style: decimal outside;
}
.article-editor-content ul ul,
.article-rich-content ul ul {
  list-style-type: circle;
}
.article-editor-content ul ul ul,
.article-rich-content ul ul ul {
  list-style-type: square;
}
.article-editor-content li,
.article-rich-content li {
  display: list-item;
  margin: 0.25rem 0;
}
.article-indent-1 {
  margin-left: 2rem !important;
}
.article-indent-2 {
  margin-left: 4rem !important;
}
.article-indent-3 {
  margin-left: 6rem !important;
}
.article-editor-tabs-shell {
  margin-top: 1rem;
}
.article-editor-tabs,
.article-document-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--diloya-border);
}
.article-editor-tab {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.article-editor-tab.is-active {
  border-color: var(--diloya-border);
  background: var(--diloya-card-bg);
}
.article-editor-tab button,
.article-add-tab,
.article-document-tabs button {
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--diloya-text);
  cursor: pointer;
  white-space: nowrap;
}
.article-editor-tab.is-active > button:first-child,
.article-document-tabs button.is-active {
  color: var(--diloya-primary);
  font-weight: 800;
}
.article-editor-tab .article-remove-tab,
.article-editor-tab .article-rename-tab {
  min-height: 34px;
  padding: 0.4rem;
  color: var(--diloya-grey);
}
.article-editor-tab .article-rename-tab:hover {
  color: var(--diloya-primary);
}
.article-add-tab {
  min-width: 42px;
  color: var(--diloya-primary);
}
.article-tab-title-field {
  margin-top: 0.7rem;
}
.article-document-tabs {
  margin: 1.5rem 0 1rem;
}
.article-document-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 3px solid transparent;
}
.article-document-tabs button.is-active {
  border-bottom-color: var(--diloya-primary);
}
.article-reader {
  margin: 1.25rem 0;
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
}
.article-reader-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem;
}
.article-reader-controls label {
  display: grid;
  gap: 0.2rem;
  color: var(--diloya-grey);
  font-size: 0.67rem;
  font-weight: 700;
}
.article-reader-controls select {
  min-height: 32px;
  max-width: 190px;
  border: 1px solid var(--diloya-border);
  border-radius: 7px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
.article-reader-status {
  margin: 0.55rem 0 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.74rem;
}
.article-reader > small {
  display: block;
  color: var(--diloya-grey);
  font-size: 0.64rem;
  line-height: 1.35;
}
.article-reader-highlight {
  border-radius: 4px;
  outline: 3px solid color-mix(in srgb, var(--diloya-primary) 28%, transparent);
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
  scroll-margin-top: 110px;
  transition: background 0.2s ease;
}
.article-reader-floating {
  display: none;
}
.article-editor-content:empty:before {
  content: attr(data-placeholder);
  color: var(--diloya-grey);
}
.article-editor-content.is-visually-empty:before {
  position: absolute;
  content: attr(data-placeholder);
  color: var(--diloya-grey);
  pointer-events: none;
}
.article-wysiwyg > footer {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  border: 1px solid var(--diloya-border);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
#articleCoverPreview img {
  width: 100%;
  margin: 0.6rem 0;
  border-radius: 12px;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.article-cover-requirements {
  display: block;
  margin-top: 0.4rem;
  color: var(--diloya-grey);
  font-size: 0.68rem;
  line-height: 1.4;
}
.article-cover-requirements i,
.article-cover-requirements strong {
  color: var(--diloya-primary);
}
.article-detail {
  max-width: 820px !important;
}
.article-detail > header h1 {
  margin: 0.6rem 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 950;
  line-height: 1.08;
}
.article-byline {
  justify-content: flex-start;
}
.article-byline span {
  display: flex;
  flex-direction: column;
}
.article-cover {
  width: 100%;
  margin: 1.5rem 0;
  border-radius: 22px;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.article-export-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
}
.article-export-actions .button {
  gap: 0.45rem;
  border-radius: 999px;
}
.article-export-actions .button i {
  color: #dc2626;
}
.article-print-url,
.article-print-tab-title {
  display: none;
}
.article-rich-content {
  font-size: 1.08rem;
  line-height: 1.8;
}
.article-rich-content h2 {
  margin: 1.7rem 0 0.6rem;
  font-size: 1.7rem;
  font-weight: 900;
}
.article-rich-content h3 {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 850;
}
.article-rich-content blockquote {
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--diloya-primary);
  background: var(--diloya-surface-2);
}
.article-social-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--diloya-border);
}
.post-article-preview {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.8rem;
  margin-top: 0.8rem;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  color: var(--diloya-text);
  background: var(--diloya-surface-2);
}
.post-article-preview > img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
}
.post-article-preview > span {
  display: flex;
  min-width: 0;
  padding: 0.8rem 0.8rem 0.8rem 0;
  flex-direction: column;
}
.post-article-preview small,
.post-article-preview b {
  color: var(--diloya-primary);
  font-size: 0.7rem;
}
.post-article-preview strong {
  margin: 0.2rem 0;
  font-size: 1rem;
}
.post-article-preview p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.post-article-preview b {
  margin-top: auto;
}
@media (max-width: 768px) {
  .articles-hero,
  .article-manage-list > article {
    align-items: stretch;
    flex-direction: column;
  }
  .article-grid,
  .article-editor-layout {
    grid-template-columns: 1fr;
  }
  .article-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-manage-page {
    padding: 1rem 0.75rem 5rem;
  }
  .article-manage-hero {
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
  }
  .article-manage-hero-copy {
    align-items: flex-start;
    gap: 0.75rem;
  }
  .article-manage-hero-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    font-size: 1rem;
  }
  .article-manage-hero h1 {
    margin-top: 0.05rem;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    line-height: 1.1;
  }
  .article-manage-hero p {
    margin-top: 0.3rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .article-manage-hero > .button {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
  }
  .article-stat-grid {
    gap: 0.55rem;
  }
  .article-stat-grid article {
    gap: 0.55rem;
    padding: 0.75rem;
    border-radius: 14px;
  }
  .article-stat-grid article:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .article-stat-grid article > i {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
    font-size: 0.85rem;
  }
  .article-stat-grid strong {
    font-size: 1.25rem;
  }
  .article-stat-grid span {
    font-size: 0.65rem;
  }
  .article-editor-layout aside {
    order: -1;
  }
  .article-editor-content {
    min-height: 360px;
  }
  .article-social-actions {
    overflow-x: auto;
  }
  .article-reader-controls label,
  .article-reader-controls select {
    width: 100%;
    max-width: none;
  }
  .article-reader-floating.is-active {
    position: fixed;
    z-index: 14500;
    top: max(4.4rem, calc(env(safe-area-inset-top) + 3.8rem));
    right: 0.65rem;
    left: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid
      color-mix(in srgb, var(--diloya-primary) 38%, var(--diloya-border));
    border-radius: 17px;
    background: color-mix(in srgb, var(--diloya-card-bg) 94%, transparent);
    color: var(--diloya-text);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px) saturate(1.25);
    animation: article-reader-floating-in 0.2s ease both;
  }
  .article-reader-floating > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
  }
  .article-reader-floating > div > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }
  .article-reader-floating strong,
  .article-reader-floating small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-reader-floating strong {
    font-size: 0.75rem;
  }
  .article-reader-floating small {
    max-width: 145px;
    color: var(--diloya-grey);
    font-size: 0.6rem;
  }
  .article-reader-floating-pulse {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--diloya-primary) 13%, transparent);
    color: var(--diloya-primary);
  }
  .article-reader-floating:not(.is-paused) .article-reader-floating-pulse i {
    animation: article-reader-pulse 1.4s ease-in-out infinite;
  }
  .article-reader-floating nav {
    display: flex;
    flex: 0 0 auto;
    gap: 0.3rem;
  }
  .article-reader-floating nav button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--diloya-border);
    border-radius: 12px;
    background: var(--diloya-card-bg);
    color: var(--diloya-text);
  }
  .article-reader-floating nav button:last-child {
    border-color: color-mix(in srgb, #dc3545 35%, var(--diloya-border));
    color: #dc3545;
  }
  .article-reader-floating nav button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .article-reader-highlight {
    scroll-margin-top: 170px;
  }
  .article-indent-1 {
    margin-left: 1rem !important;
  }
  .article-indent-2 {
    margin-left: 2rem !important;
  }
  .article-indent-3 {
    margin-left: 3rem !important;
  }
}
@keyframes article-reader-floating-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes article-reader-pulse {
  50% {
    transform: scale(1.16);
    opacity: 0.72;
  }
}
@media (max-width: 768px) {
  .article-detail-page {
    width: 100%;
    max-width: 100vw;
    padding: 0.85rem 0.7rem 5.5rem;
    overflow-x: clip;
  }
  .article-detail,
  .article-detail > *,
  .article-tab-panels,
  .article-tab-panel {
    min-width: 0;
    max-width: 100%;
  }
  .article-breadcrumb {
    gap: 0.4rem;
    margin: 0 0.15rem 0.75rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .article-breadcrumb::-webkit-scrollbar {
    display: none;
  }
  .article-detail > header {
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--diloya-border);
    border-radius: 19px;
    background:
      radial-gradient(
        circle at 96% 4%,
        color-mix(in srgb, var(--diloya-primary) 13%, transparent),
        transparent 36%
      ),
      var(--diloya-card-bg);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 6%, transparent);
  }
  .article-detail > header h1 {
    margin: 0.65rem 0 0.5rem;
    overflow-wrap: anywhere;
    font-size: clamp(1.65rem, 8.2vw, 2.25rem);
    line-height: 1.08;
  }
  .article-detail > header > p {
    overflow-wrap: anywhere;
    color: var(--diloya-grey);
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .article-topic-row,
  .article-tag-row {
    max-width: 100%;
    flex-wrap: nowrap;
    padding-bottom: 0.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .article-topic-row::-webkit-scrollbar,
  .article-tag-row::-webkit-scrollbar {
    display: none;
  }
  .article-topic-row a,
  .article-tag-row a {
    flex: 0 0 auto;
    max-width: 78vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-byline {
    width: 100%;
    min-width: 0;
    align-items: center;
    margin-top: 0.9rem;
  }
  .article-byline img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .article-byline span {
    min-width: 0;
  }
  .article-byline strong,
  .article-byline small {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .article-byline small {
    color: var(--diloya-grey);
    font-size: 0.64rem;
    line-height: 1.35;
  }
  .article-export-actions {
    width: 100%;
    margin-top: 0.75rem;
  }
  .article-export-actions .button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 14px;
  }
  .article-cover {
    display: block;
    width: 100%;
    max-height: 58dvh;
    margin: 0.85rem 0;
    border-radius: 18px;
    object-fit: cover;
  }
  .article-reader {
    width: 100%;
    margin: 0.85rem 0;
    padding: 0.75rem;
    overflow: hidden;
    border-radius: 17px;
  }
  .article-reader-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  .article-reader-controls > .button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-right: 0.45rem;
    padding-left: 0.45rem;
    border-radius: 11px;
  }
  .article-reader-controls label {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .article-reader-controls select {
    width: 100%;
    max-width: 100%;
  }
  .article-document-tabs {
    width: 100%;
    margin: 1rem 0 0.75rem;
    padding: 0 0.15rem;
    scroll-snap-type: x proximity;
  }
  .article-document-tabs button {
    max-width: 82vw;
    overflow: hidden;
    scroll-snap-align: start;
    text-overflow: ellipsis;
  }
  .article-rich-content {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 1rem;
    line-height: 1.72;
  }
  .article-rich-content h2 {
    font-size: 1.45rem;
    line-height: 1.2;
  }
  .article-rich-content h3 {
    font-size: 1.2rem;
    line-height: 1.25;
  }
  .article-rich-content img,
  .article-rich-content video,
  .article-rich-content iframe,
  .article-rich-content figure {
    max-width: 100% !important;
    height: auto;
  }
  .article-rich-content iframe,
  .article-rich-content video {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .article-rich-content pre,
  .article-rich-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .article-rich-content pre {
    padding: 0.8rem;
    font-size: 0.78rem;
    white-space: pre;
  }
  .article-rich-content blockquote {
    margin-right: 0;
    margin-left: 0;
    padding: 0.7rem 0.8rem;
  }
  .article-rich-content ul,
  .article-rich-content ol {
    padding-left: 1.35rem;
  }
  .article-rich-content .article-indent-1 {
    margin-left: 0.65rem !important;
  }
  .article-rich-content .article-indent-2 {
    margin-left: 1.15rem !important;
  }
  .article-rich-content .article-indent-3 {
    margin-left: 1.65rem !important;
  }
  .article-social-actions {
    width: 100%;
    justify-content: space-between;
    gap: 0.15rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
    overflow-x: auto;
  }
  .article-social-actions .button {
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0.5rem 0.65rem;
    border-radius: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .article-reader-floating.is-active,
  .article-reader-floating-pulse i {
    animation: none !important;
  }
}
@media (max-width: 520px) {
  .post-article-preview {
    grid-template-columns: 1fr;
  }
  .post-article-preview > img {
    max-height: 180px;
  }
  .post-article-preview > span {
    padding: 0.8rem;
  }
}

@media print {
  @page {
    size: A4;
    margin: 16mm 17mm 18mm;
  }
  body {
    background: #fff !important;
    color: #111 !important;
    font-family: Georgia, "Times New Roman", serif;
  }
  body > .diloya-navbar,
  body > nav,
  .article-breadcrumb,
  .article-export-actions .button,
  .article-reader,
  .article-document-tabs,
  .article-social-actions,
  #toast {
    display: none !important;
  }
  .article-detail-page {
    padding: 0 !important;
  }
  .article-detail {
    width: 100% !important;
    max-width: none !important;
  }
  .article-detail > header {
    padding-bottom: 1rem;
    border-bottom: 1px solid #bbb;
  }
  .article-detail > header h1 {
    color: #111 !important;
    font-size: 28pt;
  }
  .article-detail > header > p {
    color: #444 !important;
    font-size: 12pt;
  }
  .article-topic-row a,
  .article-tag-row a {
    border: 1px solid #bbb;
    background: transparent !important;
    color: #333 !important;
  }
  .article-byline,
  .article-byline strong,
  .article-byline small {
    color: #222 !important;
  }
  .article-export-actions {
    display: block;
    margin: 0.7rem 0;
  }
  .article-print-url {
    display: block;
    color: #555;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    overflow-wrap: anywhere;
  }
  .article-cover {
    max-height: 115mm;
    margin: 1rem 0;
    border-radius: 0;
    object-fit: contain;
    break-inside: avoid;
  }
  .article-tab-panel,
  .article-tab-panel.is-hidden {
    display: block !important;
  }
  .article-tab-panel + .article-tab-panel {
    break-before: page;
  }
  .article-print-tab-title {
    display: block;
    margin-bottom: 1rem !important;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid #222;
    color: #111 !important;
    font-size: 19pt !important;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.2;
    break-after: avoid;
  }
  .article-rich-content {
    color: #111 !important;
    font-size: 11pt;
    line-height: 1.65;
  }
  .article-rich-content h2,
  .article-rich-content h3 {
    color: #111 !important;
    break-after: avoid;
  }
  .article-rich-content p {
    margin: 0 0 0.7rem;
    orphans: 3;
    widows: 3;
  }
  .article-rich-content li,
  .article-rich-content blockquote,
  .article-rich-content pre,
  .article-rich-content img {
    break-inside: avoid;
  }
  .article-rich-content a {
    color: #111 !important;
    text-decoration: underline;
  }
  .article-rich-content pre {
    border: 1px solid #bbb;
    background: #f4f4f4 !important;
    white-space: pre-wrap;
  }
}

.video-preview-grid article {
  grid-template-columns: minmax(0, 1fr) 25px !important;
}
.video-preview-grid article > iframe,
.video-preview-grid article > video,
.video-preview-grid article > a {
  width: 100%;
  height: 140px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #111;
  color: #fff;
  grid-column: 1/-1;
}
.video-preview-grid article > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.video-preview-grid article > div {
  grid-column: 1;
}
.video-preview-grid article > button {
  grid-column: 2;
  grid-row: 2;
}

.store-preview-banner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(90deg, #8b5a09, #c5861d);
  color: #fff;
}
.store-preview-banner > i {
  font-size: 1.2rem;
}
.store-preview-banner > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.store-preview-banner strong {
  font-size: 0.8rem;
}
.store-preview-banner span {
  font-size: 0.68rem;
  opacity: 0.9;
}
.store-preview-banner > a {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
}
.product-editor {
  border-top: 4px solid var(--diloya-primary) !important;
}
.category-create-row {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 260px auto;
}
.category-chip-list {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.category-chip-list > div {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.category-chip-list strong {
  font-size: 0.72rem;
}
.category-chip-list span {
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 11%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.6rem;
}
.product-builder {
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--diloya-primary) 4%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.product-builder-head {
  display: flex;
  margin-bottom: 0.8rem;
}
.product-builder-head > div {
  display: grid;
  align-items: center;
  gap: 0.15rem;
  grid-template-columns: 35px 1fr;
}
.product-builder-head i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  grid-row: span 2;
}
.product-builder-head strong {
  font-size: 0.82rem;
}
.product-builder-head small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.builder-add-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr auto;
}
.video-preview-grid {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.video-preview-grid article {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  grid-template-columns: 30px 1fr 25px;
}
.video-preview-grid article > i {
  color: #e04f68;
  font-size: 1.3rem;
}
.video-preview-grid article > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.video-preview-grid strong,
.video-preview-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-preview-grid strong {
  font-size: 0.7rem;
}
.video-preview-grid small {
  color: var(--diloya-grey);
  font-size: 0.56rem;
}
.video-preview-grid button,
.image-preview-grid article > button {
  border: 0;
  background: transparent;
  color: #d84c5e;
  cursor: pointer;
}
.variant-builder-row {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1.3fr 0.8fr 0.6fr 0.8fr 0.6fr 0.9fr auto auto;
}
.variant-chip-list {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.variant-chip-list > span {
  display: grid;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
  grid-template-columns: 20px 1fr auto auto;
}
.variant-chip-list > span.is-editing {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
}
.variant-chip-list i {
  color: var(--diloya-primary);
}
.variant-chip-list b {
  font-size: 0.68rem;
}
.variant-chip-list small {
  color: var(--diloya-grey);
  font-size: 0.58rem;
  grid-column: 2;
}
.variant-chip-list button {
  border: 0;
  background: transparent;
  color: #d84c5e;
  cursor: pointer;
  grid-row: 1/3;
}
.variant-chip-list button[data-edit-variant] {
  color: var(--diloya-primary);
  grid-column: 3;
}
.variant-chip-list button[data-remove-variant] {
  grid-column: 4;
}
.product-image-drop {
  display: flex !important;
  min-height: 135px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 1rem;
  border: 2px dashed
    color-mix(in srgb, var(--diloya-primary) 42%, var(--diloya-border));
  border-radius: 16px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
  text-align: center;
  cursor: pointer;
  flex-direction: column;
}
.product-image-drop:hover {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
}
.product-image-drop > i {
  margin-bottom: 0.35rem;
  color: var(--diloya-primary);
  font-size: 1.7rem;
}
.product-image-drop > span {
  color: var(--diloya-grey);
  font-size: 0.64rem;
}
.product-image-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.image-preview-grid {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.image-preview-grid article {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  grid-template-columns: 70px 1fr 25px;
}
.image-preview-grid img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--diloya-surface-2);
}
.image-preview-grid article > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.image-preview-grid strong,
.image-preview-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-preview-grid strong {
  font-size: 0.66rem;
}
.image-preview-grid small {
  margin-bottom: 0.3rem;
  color: var(--diloya-grey);
  font-size: 0.55rem;
}
.image-preview-grid .input {
  height: 32px;
  margin: 0 !important;
  font-size: 0.65rem;
}
.store-category-filters {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}
.store-category-filters button {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  color: var(--diloya-grey);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.store-category-filters button.is-active {
  border-color: var(--diloya-primary);
  background: var(--diloya-primary);
  color: #fff;
}
.product-category-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--diloya-primary);
  font-size: 0.6rem;
  font-weight: 850;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .variant-builder-row {
    grid-template-columns: 1fr 1fr;
  }
  .variant-builder-row button {
    grid-column: 1/-1;
  }
  .category-create-row {
    grid-template-columns: 1fr 1fr;
  }
  .category-create-row button {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .category-create-row,
  .variant-builder-row,
  .builder-add-row {
    grid-template-columns: 1fr;
  }
  .variant-builder-row button,
  .category-create-row button {
    grid-column: auto;
  }
  .product-builder {
    padding: 0.75rem;
  }
}

.commerce-choice[data-value="active"] .commerce-choice-tag > span {
  background: linear-gradient(135deg, #16a66a, #42cf8b);
}
.commerce-choice[data-value="active"] .commerce-choice-tag small {
  border-color: rgba(22, 166, 106, 0.25);
  background: rgba(22, 166, 106, 0.1);
  color: #128354;
}
.commerce-choice[data-value="draft"] .commerce-choice-tag > span {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}
.commerce-choice[data-value="draft"] .commerce-choice-tag small {
  border-color: rgba(100, 116, 139, 0.25);
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}
.commerce-choice[data-value="paused"] .commerce-choice-tag > span {
  background: linear-gradient(135deg, #e68a16, #f5b849);
}
.commerce-choice[data-value="paused"] .commerce-choice-tag small {
  border-color: rgba(230, 138, 22, 0.25);
  background: rgba(230, 138, 22, 0.1);
  color: #bd6c08;
}
.commerce-choice[data-value="archived"] .commerce-choice-tag > span {
  background: linear-gradient(135deg, #a05261, #d37b8b);
}
.commerce-choice[data-value="archived"] .commerce-choice-tag small {
  border-color: rgba(160, 82, 97, 0.25);
  background: rgba(160, 82, 97, 0.1);
  color: #a05261;
}

.product-row-category,
.product-row-subcategory,
.product-row-status {
  grid-column: auto;
  align-self: end;
}
.product-row-status {
  min-width: 0;
}
.product-taxonomy-select {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.35rem;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: end;
}
.product-taxonomy-select .commerce-choice {
  margin-top: 0;
  min-width: 0;
  width: 100%;
}
.product-taxonomy-select .commerce-choice-control,
.product-row-status .commerce-choice-control {
  min-height: 52px;
  padding-inline: 0.95rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: 0 8px 22px rgba(20, 22, 35, 0.05);
}
.product-taxonomy-select .button {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 16px;
}
.product-row-status .commerce-choice-control {
  width: 100%;
}
.tailwind-underline-select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.625rem 1.75rem 0.625rem 0;
  border: 0;
  border-bottom: 2px solid var(--diloya-border);
  border-radius: 0;
  background-color: transparent;
  color: var(--diloya-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  appearance: auto;
}
.tailwind-underline-select:focus {
  border-bottom-color: var(--diloya-primary);
  outline: none;
  box-shadow: none;
}
.tailwind-underline-select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.tailwind-underline-select option {
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
.product-taxonomy-select .tailwind-underline-select {
  min-width: 0;
  margin: 0;
}
.iso-mmc-select-wrap {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  grid-template-columns: 42px minmax(0, 1fr);
}
.iso-mmc-select-wrap > span {
  display: grid;
  width: 42px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  transition:
    background 0.18s,
    color 0.18s;
}
.iso-mmc-select-wrap .select {
  margin-top: 0 !important;
}

:root {
  --diloya-primary: #1a8cd8;
  --diloya-dark: #0f0f0f;
  --diloya-bg: #f5f8fa;
  --diloya-card-bg: #ffffff;
  --diloya-border: #e1e8ed;
  --diloya-text: #14171a;
  --diloya-grey: #657786;
  --diloya-hover: #f5f8fa;
}

/* Groups dashboard and PWA install action */
.auth-install-pwa {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.auth-install-pwa .auth-menu-icon {
  color: #20a464;
  background: color-mix(in srgb, #20a464 11%, transparent);
}
.groups-dashboard-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.groups-dashboard-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: var(--diloya-shadow);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}
.groups-dashboard-nav a:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-text);
  transform: translateY(-1px);
}
.groups-dashboard-nav a > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.groups-dashboard-nav a > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.groups-dashboard-nav strong {
  font-size: 1.2rem;
  line-height: 1.1;
}
.groups-dashboard-nav small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.groups-dashboard-section {
  scroll-margin-top: 5rem;
}
.groups-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.groups-section-heading > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.groups-section-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.groups-section-heading h2 {
  color: var(--diloya-text);
  font-size: 1.05rem;
  font-weight: 850;
}
.groups-section-heading p {
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.group-card:has(.group-card-main) {
  display: flex;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
}
.group-card-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  min-height: 145px;
  flex: 1;
  padding: 1.25rem;
  color: var(--diloya-text);
}
.group-card-main:hover {
  color: var(--diloya-text);
}
.group-card-main > div {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
}
.group-card-main small {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--diloya-grey);
}
.group-card-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.7rem;
  border-top: 1px solid var(--diloya-border);
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
  font-size: 0.76rem;
  font-weight: 800;
}
.group-card-manage:hover {
  color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
}
.group-card-manage span {
  display: grid;
  min-width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--diloya-accent);
  color: #fff;
  font-size: 0.6rem;
}

@media (max-width: 768px) {
  .groups-dashboard-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
  }
  .groups-dashboard-nav a {
    padding: 0.75rem;
  }
  .groups-dashboard-nav a > span {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .groups-section-heading,
  .groups-section-heading > div {
    align-items: flex-start;
  }
  .groups-section-heading > .button {
    flex: 0 0 auto;
  }
}

body {
  background-color: var(--diloya-bg);
  color: var(--diloya-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

img {
  max-width: 100%;
}

@media (max-width: 768px) {
  .section {
    padding: 1rem 0.5rem;
  }
  .column.is-6,
  .column.is-7 {
    padding-left: 0;
    padding-right: 0;
  }
  .box,
  .post-card,
  .compose-box {
    border-radius: 0;
  }
  .post-actions {
    gap: 0;
  }
  .post-actions .button {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
}

/* ==========================
   Groups and group webhooks
   ========================== */
.groups-page,
.group-wall-page {
  max-width: 1180px;
  margin-inline: auto;
}
.groups-hero,
.group-wall-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 12%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  box-shadow: var(--diloya-shadow);
}
.groups-hero > div:first-child {
  flex: 1;
}
.groups-hero p,
.group-wall-header p {
  color: var(--diloya-grey);
}
.groups-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.group-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 180px;
  padding: 1.25rem;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: var(--diloya-shadow);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}
a.group-card:hover {
  color: var(--diloya-text);
  border-color: var(--diloya-primary);
  transform: translateY(-2px);
}
.group-card > div {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
}
.group-card h3 {
  margin: 0.45rem 0 0.35rem;
  font-size: 1.08rem;
  font-weight: 800;
}
.group-card p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.86rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.group-card small {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--diloya-grey);
}
.group-card-icon,
.group-wall-symbol {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.groups-empty,
.group-locked-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 180px;
  color: var(--diloya-grey);
  text-align: center;
}
.groups-empty > i,
.group-locked-state > i {
  color: var(--diloya-primary);
  font-size: 2.2rem;
}
.group-locked-state h2 {
  color: var(--diloya-text);
  font-size: 1.2rem;
  font-weight: 800;
}
.personal-webhook-panel {
  padding: 1.5rem;
}
.personal-webhook-copy {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.personal-webhook-copy p {
  color: var(--diloya-grey);
}
.webhook-event-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.webhook-event-options input {
  margin-right: 0.35rem;
  accent-color: var(--diloya-primary);
}
.personal-webhook-panel code,
.group-webhook-box code {
  color: var(--diloya-primary);
  background: var(--diloya-surface-2);
}
.webhook-request-guide {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-surface-2);
}
.webhook-request-guide summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  color: var(--diloya-text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.webhook-request-guide summary::-webkit-details-marker {
  display: none;
}
.webhook-request-guide summary span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.webhook-request-guide summary span i {
  color: var(--diloya-primary);
}
.webhook-guide-chevron {
  color: var(--diloya-grey);
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.webhook-request-guide[open] .webhook-guide-chevron {
  transform: rotate(180deg);
}
.webhook-guide-content {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--diloya-border);
}
.webhook-guide-content > p {
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 0.84rem;
  line-height: 1.55;
}
.webhook-guide-content h3 {
  margin: 1.15rem 0 0.45rem;
  color: var(--diloya-text);
  font-size: 0.82rem;
  font-weight: 800;
}
.webhook-guide-content pre {
  overflow-x: auto;
  margin: 0;
  padding: 1rem;
  border-radius: 12px;
  background: #171923;
  color: #eef1f7;
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre;
}
.webhook-guide-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}
.webhook-guide-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.8rem;
  border-radius: 11px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
}
.webhook-guide-note > i {
  margin-top: 0.2rem;
  color: var(--diloya-primary);
}
.integrations-page {
  min-height: calc(100vh - 4rem);
}
.integrations-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 10%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.integrations-hero-icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 18px;
  background: var(--diloya-primary);
  color: #fff;
  font-size: 1.3rem;
}
.integrations-hero p,
.integration-direction-grid p {
  color: var(--diloya-grey);
}
.integration-direction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.integration-direction-grid article {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 17px;
  background: var(--diloya-card-bg);
}
.integration-direction-grid article > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.integration-direction-grid article > div {
  min-width: 0;
  flex: 1;
}
.integration-direction-grid strong {
  color: var(--diloya-text);
}
.integration-direction-grid p {
  font-size: 0.72rem;
}
.integration-help-modal {
  z-index: 12000;
}
.integration-help-modal .modal-card {
  width: min(760px, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
}
.integration-help-modal .webhook-guide-content {
  border-top: 0;
  padding: 1.25rem;
}
.integration-help-modal .modal-card-head small {
  color: var(--diloya-grey);
}
@media (max-width: 768px) {
  .integrations-page {
    padding: 0.8rem;
  }
  .integrations-hero {
    align-items: flex-start;
    padding: 1rem;
  }
  .integration-direction-grid {
    grid-template-columns: 1fr;
  }
  .integration-direction-grid article {
    flex-wrap: wrap;
  }
  .integration-direction-grid article .button {
    width: 100%;
  }
  .integration-help-modal .modal-card {
    margin: 0.5rem;
  }
  .integration-help-modal .modal-card-body {
    overflow-y: auto;
  }
  .integration-help-modal pre {
    font-size: 0.68rem;
  }
}
.group-back {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
}
.group-wall-header small {
  color: var(--diloya-grey);
}
.group-compose {
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 28%,
    var(--diloya-border)
  );
}
.group-post-card {
  border-radius: 18px;
}
.group-post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.group-post-meta time {
  margin-left: auto;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.group-post-content {
  color: var(--diloya-text);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.group-admin-box,
.group-members-box,
.group-webhook-box {
  border-radius: 18px;
}
.group-member-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.group-member-row:last-child {
  border-bottom: 0;
}
.group-member-row img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  object-fit: cover;
}
.group-member-row > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.group-member-row strong,
.group-member-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-member-row small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.notification-system-icon span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
@media (max-width: 768px) {
  .groups-page,
  .group-wall-page {
    padding-inline: 0.75rem;
  }
  .groups-hero,
  .group-wall-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1.15rem;
    border-radius: 18px;
  }
  .groups-hero .button {
    width: 100%;
  }
  .group-wall-symbol {
    order: -1;
  }
  .groups-grid {
    grid-template-columns: 1fr;
  }
  .group-card {
    min-height: 150px;
  }
  .personal-webhook-copy {
    flex-direction: column;
  }
  .group-member-row .button {
    max-width: 9rem;
    white-space: normal;
  }
}

/* ==========================
   Diloya 2.0 · Light / Dark
   ========================== */
:root {
  color-scheme: light;
  --diloya-primary: #7557e8;
  --diloya-primary-hover: #6244d4;
  --diloya-accent: #ff6f61;
  --diloya-bg: #f4f7fb;
  --diloya-card-bg: rgba(255, 255, 255, 0.92);
  --diloya-surface-2: #eef3f8;
  --diloya-border: #dce4ec;
  --diloya-text: #101820;
  --diloya-grey: #657481;
  --diloya-hover: #edf6fe;
  --diloya-shadow: 0 10px 35px rgba(19, 44, 67, 0.07);
  --diloya-navbar: rgba(255, 255, 255, 0.88);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --diloya-primary: #9b87f5;
  --diloya-primary-hover: #b1a0ff;
  --diloya-accent: #ff8175;
  --diloya-bg: #070a0d;
  --diloya-card-bg: rgba(16, 21, 26, 0.94);
  --diloya-surface-2: #171d23;
  --diloya-border: #27313a;
  --diloya-text: #eef4f8;
  --diloya-grey: #8b98a5;
  --diloya-hover: #152330;
  --diloya-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  --diloya-navbar: rgba(7, 10, 13, 0.86);
}

html {
  background: var(--diloya-bg);
  transition: background-color 0.25s ease;
}

body,
body.has-background-light {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 15% -10%,
      color-mix(in srgb, var(--diloya-primary) 12%, transparent),
      transparent 30rem
    ),
    var(--diloya-bg) !important;
  color: var(--diloya-text);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.diloya-navbar,
.navbar.is-dark.diloya-navbar {
  background: var(--diloya-navbar) !important;
  border-color: var(--diloya-border);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--diloya-border) 70%, transparent);
}

.diloya-navbar .navbar-item,
.diloya-navbar .navbar-link,
.diloya-brand,
.diloya-brand-name,
.navbar-burger {
  color: var(--diloya-text) !important;
}

.diloya-navbar .navbar-item:hover,
.diloya-navbar .navbar-link:hover,
.diloya-navbar .navbar-item:focus,
.diloya-navbar .navbar-link:focus {
  color: var(--diloya-primary) !important;
  background: var(--diloya-hover) !important;
}

.diloya-logo,
.diloya-logo-large {
  background: linear-gradient(
    145deg,
    var(--diloya-primary),
    var(--diloya-accent)
  );
  border-radius: 13px;
  transform: rotate(-4deg);
  box-shadow: 0 8px 22px
    color-mix(in srgb, var(--diloya-primary) 32%, transparent);
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.theme-toggle:hover {
  transform: rotate(10deg) scale(1.06);
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}

.mobile-theme-toggle {
  display: none;
}

.box,
.post-card,
.compose-box,
.notification,
.modal-card,
.navbar-dropdown {
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  border-color: var(--diloya-border);
  box-shadow: var(--diloya-shadow);
}

.post-card {
  border-radius: 18px;
  padding: 1.2rem !important;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.post-card:hover {
  background: var(--diloya-card-bg);
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 45%,
    var(--diloya-border)
  );
  transform: translateY(-2px);
  box-shadow: 0 15px 40px
    color-mix(in srgb, var(--diloya-primary) 10%, transparent);
}

.compose-box {
  border-radius: 20px;
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 25%,
    var(--diloya-border)
  );
}

.compose-box:focus-within {
  border-color: var(--diloya-primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--diloya-primary) 12%, transparent),
    var(--diloya-shadow);
}

.textarea,
.input,
.select select {
  background: var(--diloya-surface-2);
  border-color: var(--diloya-border);
  color: var(--diloya-text);
}

.compose-box .textarea {
  background: transparent;
  color: var(--diloya-text);
}

.textarea::placeholder,
.input::placeholder {
  color: var(--diloya-grey);
}

.title,
.subtitle,
.label,
.content,
.has-text-dark,
a.has-text-dark {
  color: var(--diloya-text) !important;
}

.has-text-grey,
.help {
  color: var(--diloya-grey) !important;
}

a {
  color: var(--diloya-primary);
}

.button {
  border-radius: 999px;
  font-weight: 650;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.is-primary {
  background: linear-gradient(
    135deg,
    var(--diloya-primary),
    var(--diloya-accent)
  );
  box-shadow: 0 7px 18px
    color-mix(in srgb, var(--diloya-primary) 24%, transparent);
}

.button.is-light,
.button.is-dark {
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  border-color: var(--diloya-border);
}

.post-actions {
  border-top: 1px solid var(--diloya-border);
  padding-top: 0.55rem;
}

.post-actions .button.is-ghost:hover {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    transparent
  ) !important;
  border-radius: 999px;
}

.media-left img,
.navbar img {
  object-fit: cover;
  background: var(--diloya-surface-2);
  box-shadow:
    0 0 0 2px var(--diloya-card-bg),
    0 0 0 3px var(--diloya-border);
}

.sidebar-right .box {
  border-radius: 20px;
  position: sticky;
  top: 5.5rem;
}

.trending-item {
  border-radius: 12px;
  padding: 0.7rem;
  border-bottom: 0;
}

.trending-item:hover {
  background: var(--diloya-hover);
}

.explore-result-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  color: var(--diloya-text);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.explore-result-title > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.explore-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.explore-account-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: var(--diloya-shadow);
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.explore-account-card:hover {
  color: var(--diloya-text);
  border-color: var(--diloya-primary);
  transform: translateY(-1px);
}
.explore-account-card > img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  object-fit: cover;
}
.explore-account-card > .fa-chevron-right {
  flex: 0 0 auto;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.explore-account-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.explore-account-copy strong,
.explore-account-copy small,
.explore-account-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.explore-account-copy strong {
  font-size: 0.87rem;
}
.explore-account-copy small,
.explore-account-copy > span {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}

@media (max-width: 600px) {
  .explore-account-grid {
    grid-template-columns: 1fr;
  }
}

.explore-geo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.explore-geo-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--diloya-grey);
}
.explore-geo-label i {
  color: var(--diloya-primary);
}
.explore-geo-toggle {
  flex: 0 0 auto;
}
.explore-trending-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.explore-trending-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.explore-trending-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2, #f5f8fa);
  color: var(--diloya-text);
  font-size: 0.74rem;
  font-weight: 600;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.explore-trending-chip:hover {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.explore-trending-chip small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}

.notification-item.is-unread {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
}

.diloya-toast {
  background: color-mix(in srgb, var(--diloya-text) 92%, transparent);
  color: var(--diloya-bg);
  backdrop-filter: blur(14px);
}

.home-feed-load-more {
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  color: var(--diloya-grey);
  font-size: 0.9rem;
}

.home-feed-load-more[hidden] {
  display: none;
}

.home-feed-loader i {
  margin-right: 0.4rem;
  color: var(--diloya-primary);
}

@media (max-width: 768px) {
  body {
    padding-bottom: 4.5rem;
  }
  .diloya-navbar ~ .section,
  .diloya-navbar ~ main {
    margin-top: 4.25rem;
  }
  .section {
    padding: 0.75rem 0 !important;
  }
  .section.home-feed-section {
    padding-top: 1.5rem !important;
  }
  .post-card,
  .compose-box,
  .box {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .post-card {
    margin-bottom: 0 !important;
    box-shadow: none;
  }
  .post-card:hover {
    transform: none;
  }
  .diloya-navbar .navbar-brand {
    padding-inline: 0.5rem;
  }
  .diloya-navbar .navbar-menu.is-active {
    background: var(--diloya-card-bg);
  }
  .post-content {
    font-size: 0.98rem;
  }
  .diloya-toast {
    width: calc(100% - 2rem);
    text-align: center;
    bottom: 1rem;
  }
}

/* ---- Navbar ---- */
.diloya-navbar {
  background: #000 !important;
  border-bottom: 1px solid #1a1a1a;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.diloya-navbar ~ .section,
.diloya-navbar ~ main {
  margin-top: 3.25rem;
}

@media (max-width: 1023px) {
  .diloya-navbar .navbar-menu.is-active {
    max-height: calc(100vh - 3.25rem);
    overflow-y: auto;
    background: var(--diloya-card-bg);
    border-bottom: 1px solid var(--diloya-border);
  }
}

.diloya-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: white !important;
  text-decoration: none;
}

.diloya-brand:hover {
  color: var(--diloya-primary) !important;
}

.diloya-brand-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.diloya-navbar .diloya-brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  max-height: none;
  flex: 0 0 36px;
  border-radius: 9px;
  object-fit: contain;
  filter: drop-shadow(
    0 6px 12px color-mix(in srgb, var(--diloya-primary) 28%, transparent)
  );
}

.post-mention,
.post-hashtag {
  color: var(--diloya-primary);
  font-weight: 700;
}

.mention-autocomplete {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
}

.mention-autocomplete button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem;
  border: 0;
  border-radius: 9px;
  color: var(--diloya-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.mention-autocomplete button:hover,
.mention-autocomplete button:focus,
.mention-autocomplete button.is-active {
  background: var(--diloya-hover);
}

.mention-autocomplete img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.mention-autocomplete span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mention-autocomplete small {
  color: var(--diloya-muted);
}

.diloya-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--diloya-primary);
  color: white;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* ---- Auth pages ---- */
.diloya-auth-page {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);
  min-height: 100vh;
}

.diloya-auth-page .box {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.auth-logo-link {
  display: inline-block;
  border-radius: 50%;
}
.auth-logo-link .diloya-logo-large {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.auth-logo-link:hover .diloya-logo-large,
.auth-logo-link:focus-visible .diloya-logo-large {
  transform: rotate(-4deg) translateY(-2px) scale(1.04);
  box-shadow: 0 10px 28px
    color-mix(in srgb, var(--diloya-primary) 35%, transparent);
}
.auth-logo-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--diloya-primary) 55%, transparent);
  outline-offset: 4px;
}

.auth-feedback {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.95rem 1rem;
  color: var(--diloya-text);
  background: color-mix(in srgb, #e5484d 8%, var(--diloya-card-bg));
  border: 1px solid color-mix(in srgb, #e5484d 42%, var(--diloya-border));
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 10px 28px color-mix(in srgb, #e5484d 10%, transparent);
}

.auth-feedback[hidden] {
  display: none;
}

.auth-feedback.is-visible {
  animation: auth-feedback-in 0.28s ease both;
}

.auth-feedback-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: #d9363e;
  background: color-mix(in srgb, #e5484d 14%, transparent);
  border-radius: 10px;
}

.auth-feedback strong,
.auth-feedback-text {
  display: block;
}

.auth-feedback strong {
  margin-bottom: 0.15rem;
  color: var(--diloya-text);
  font-size: 0.93rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.auth-feedback-text {
  color: var(--diloya-grey);
}

.auth-feedback-close {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--diloya-grey);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.auth-feedback-close:hover {
  color: var(--diloya-text);
  background: color-mix(in srgb, #e5484d 10%, transparent);
}

.auth-feedback.is-success {
  background: color-mix(in srgb, #20a464 9%, var(--diloya-card-bg));
  border-color: color-mix(in srgb, #20a464 38%, var(--diloya-border));
  box-shadow: 0 10px 28px color-mix(in srgb, #20a464 10%, transparent);
}

.auth-feedback.is-success .auth-feedback-icon {
  color: #17834e;
  background: color-mix(in srgb, #20a464 14%, transparent);
}

.has-auth-error .input[aria-invalid="true"] {
  border-color: color-mix(in srgb, #e5484d 68%, var(--diloya-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 10%, transparent);
}

@keyframes auth-feedback-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-feedback.is-visible {
    animation: none;
  }
}

.auth-forgot-link {
  float: right;
  color: var(--diloya-primary);
  font-size: 0.82rem;
  font-weight: 700;
}

.auth-forgot-link:hover,
.auth-back-link:hover,
.auth-home-link:hover {
  color: var(--diloya-primary-hover);
}

.auth-home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--diloya-grey);
  font-size: 0.9rem;
  font-weight: 700;
}

.auth-recovery-box {
  padding: clamp(1.5rem, 5vw, 2.25rem) !important;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.75rem;
  color: var(--diloya-grey);
  font-size: 0.85rem;
  font-weight: 700;
}

.auth-recovery-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 14px;
  font-size: 1.2rem;
}

.auth-recovery-copy {
  margin-bottom: 1.75rem;
  color: var(--diloya-grey);
  font-size: 0.95rem;
  line-height: 1.65;
}

.auth-password-toggle {
  padding: 0;
  color: var(--diloya-grey);
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: all !important;
}

/* ---- Logo large ---- */
.diloya-logo-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--diloya-primary);
  color: white;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 900;
  margin: 0 auto;
}

.diloya-hero-box {
  background: linear-gradient(135deg, #1a1a2e, #0f0f0f);
  color: white !important;
  border-radius: 12px;
}

.diloya-hero-box .title,
.diloya-hero-box .subtitle {
  color: white !important;
}

.diloya-hero-box .subtitle {
  color: #aaa !important;
}

/* ---- Post cards ---- */
.post-card {
  border-radius: 12px;
  border: 1px solid var(--diloya-border);
  transition: background 0.15s;
  cursor: default;
}

.post-card:hover {
  background: #f9f9f9;
}

.post-content {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.post-author-block {
  min-width: 0;
  padding-top: 0.05rem;
}

.post-author-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  min-width: 0;
}

.post-author-name {
  color: var(--diloya-text);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.post-author-username {
  color: var(--diloya-grey);
  font-size: 0.78rem;
  line-height: 1.3;
}

.post-author-name:hover,
.post-author-username:hover,
.post-author-meta a:hover {
  color: var(--diloya-primary);
}

.post-author-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.post-author-badges .earned-badge,
.post-author-badges .official-ai-badge {
  margin-left: 0;
}

.post-author-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.28rem;
  color: var(--diloya-grey);
  font-size: 0.75rem;
  line-height: 1.35;
}

.post-author-meta a {
  color: inherit;
}

.post-card-layout {
  min-width: 0;
}

.post-card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.post-card-avatar {
  flex: none;
}

.post-card-avatar .image {
  overflow: hidden;
  border-radius: 50%;
}

.post-card-avatar .image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.post-card-body {
  min-width: 0;
  width: 100%;
}

.post-live-comments {
  margin-top: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--diloya-border);
}

.post-live-comments-head,
.post-live-comment-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.post-live-comments-head a {
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.post-live-comments-list {
  display: grid;
  gap: 0.65rem;
  max-height: 310px;
  margin: 0.75rem 0;
  overflow-y: auto;
}

.post-live-comment-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: var(--diloya-surface-2);
}

.post-live-comment-item img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.post-live-comment-item strong,
.post-live-comment-item p,
.post-live-comment-item small {
  display: block;
  overflow-wrap: anywhere;
}

.post-live-comment-item p {
  margin: 0.12rem 0;
  white-space: pre-wrap;
}

.post-live-comment-item small,
.post-live-comments-empty {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}

.post-live-comment-form .textarea {
  min-height: 64px;
  resize: vertical;
}

.post-live-comment-controls {
  margin-top: 0.5rem;
}

.post-card .media,
.post-detail .media,
.reply-composer .media {
  min-width: 0;
}

.post-card .media-content,
.post-detail .media-content,
.reply-composer .media-content {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.post-card .media-left .image,
.post-detail .media-left .image,
.reply-composer .media-left .image,
.notification-item .media-left .image {
  flex: none;
  overflow: hidden;
  border-radius: 50%;
}

.post-card .media-left .image img,
.post-detail .media-left .image img,
.reply-composer .media-left .image img,
.notification-item .media-left .image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.post-detail {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.post-detail-content {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.post-detail-actions {
  width: 100%;
  gap: 0.5rem 1rem;
}

.post-detail-actions > * {
  min-width: 0;
  margin-left: 0 !important;
  white-space: nowrap;
}

.reply-composer {
  width: 100%;
  overflow: hidden;
  scroll-margin-top: 4.5rem;
  border-radius: 20px;
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 24%,
    var(--diloya-border)
  );
}

.reply-composer:focus-within {
  border-color: var(--diloya-primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--diloya-primary) 10%, transparent),
    var(--diloya-shadow);
}

.reply-composer-content {
  width: 100%;
}

.reply-composer .textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 6rem;
  resize: vertical;
  overflow-wrap: anywhere;
}

.reply-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.reply-composer-footer .button {
  min-width: 7.5rem;
  flex: none;
}

@media (max-width: 480px) {
  .post-detail,
  .reply-composer {
    border-radius: 0;
  }
  .post-detail-actions {
    justify-content: space-between;
    gap: 0.5rem;
  }
  .post-detail-actions .button {
    padding-inline: 0.35rem;
  }
  .reply-composer {
    padding: 1rem !important;
  }
  .reply-composer .media-left {
    margin-right: 0.75rem;
  }
  .reply-composer .image {
    width: 32px;
    height: 32px;
  }
}

.post-actions .button.is-ghost {
  color: var(--diloya-grey);
  border: none;
  padding: 4px 8px;
  transition: color 0.15s;
}

.post-actions .button.is-ghost:hover {
  color: var(--diloya-primary);
  background: transparent;
}

.post-actions .button.has-text-danger:hover {
  color: #e0245e !important;
}

.post-actions .post-owner-action {
  gap: 0.28rem;
  min-height: 34px;
  padding: 0.3rem 0.58rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  font-weight: 750;
}

.post-actions .post-owner-edit-action {
  color: var(--diloya-primary);
}

.post-actions .post-owner-edit-action:hover,
.post-actions .post-owner-edit-action:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 45%,
    var(--diloya-border)
  );
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
}

.post-actions .post-owner-delete-action {
  color: #d63b5c;
}

.post-actions .post-owner-delete-action:hover,
.post-actions .post-owner-delete-action:focus-visible {
  border-color: color-mix(in srgb, #d63b5c 45%, var(--diloya-border));
  background: color-mix(in srgb, #d63b5c 10%, var(--diloya-card-bg));
  color: #c82549;
}

.diloya-removing {
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  border-width: 0;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  pointer-events: none;
  transition:
    height 0.32s ease,
    margin 0.32s ease,
    padding 0.32s ease,
    border-width 0.32s ease,
    opacity 0.22s ease,
    transform 0.26s ease;
}

@media (prefers-reduced-motion: reduce) {
  .diloya-removing {
    transition-duration: 0.01ms;
  }
}

.diloya-confirm-modal {
  --diloya-confirm-color: #dc3545;
  position: fixed;
  z-index: 18000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  animation: diloya-confirm-in 0.18s ease both;
}
.diloya-confirm-modal.is-primary {
  --diloya-confirm-color: var(--diloya-primary);
}
.diloya-confirm-modal.is-success {
  --diloya-confirm-color: #17bf63;
}
.diloya-confirm-modal.is-error {
  --diloya-confirm-color: #e0245e;
}
.diloya-confirm-modal.is-info {
  --diloya-confirm-color: #3273dc;
}
.diloya-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.68);
  backdrop-filter: blur(7px);
}
.diloya-confirm-panel {
  position: relative;
  display: grid;
  width: min(100%, 440px);
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.3rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-confirm-color) 28%, var(--diloya-border));
  border-radius: 22px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}
.diloya-confirm-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(
    in srgb,
    var(--diloya-confirm-color) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-confirm-color);
  font-size: 1.1rem;
}
.diloya-confirm-copy small {
  color: var(--diloya-confirm-color);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.diloya-confirm-copy h2 {
  margin: 0.2rem 0 0.35rem;
  color: var(--diloya-text);
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.2;
}
.diloya-confirm-copy p {
  color: var(--diloya-grey);
  font-size: 0.82rem;
  line-height: 1.5;
}
.diloya-confirm-panel footer {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 0.65rem;
  padding-top: 0.35rem;
}
.diloya-confirm-panel .button {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}
.diloya-confirm-modal.is-closing {
  animation: diloya-confirm-out 0.14s ease both;
}
@keyframes diloya-confirm-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes diloya-confirm-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (max-width: 480px) {
  .diloya-confirm-modal {
    align-items: end;
    padding: 0.65rem;
  }
  .diloya-confirm-panel {
    width: 100%;
    padding: 1.1rem;
    border-radius: 22px 22px 16px 16px;
  }
  .diloya-confirm-panel footer {
    flex-direction: column-reverse;
  }
  .diloya-confirm-panel .button {
    width: 100%;
    min-height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diloya-confirm-modal,
  .diloya-confirm-modal.is-closing {
    animation-duration: 0.01ms;
  }
}

/* ---- Compose box ---- */
.compose-box {
  border-radius: 12px;
  border: 1px solid var(--diloya-border);
}

.compose-box .textarea {
  border: none;
  resize: none;
  box-shadow: none;
  font-size: 1.1rem;
  padding: 0;
}

.compose-box .textarea:focus {
  box-shadow: none;
}

.poll-composer {
  padding: 1rem;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 6%,
    var(--diloya-card-bg)
  );
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 25%, var(--diloya-border));
  border-radius: 16px;
}

.quiz-composer {
  padding: 1rem;
  background: color-mix(
    in srgb,
    var(--diloya-accent) 5%,
    var(--diloya-card-bg)
  );
  border: 1px solid
    color-mix(in srgb, var(--diloya-accent) 25%, var(--diloya-border));
  border-radius: 16px;
}

.quiz-composer-header,
.quiz-question-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.quiz-question-fields {
  display: grid;
  gap: 0.8rem;
}
.quiz-question-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 0.65rem;
  align-items: end;
}
.quiz-question-meta label span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 700;
}
.quiz-points-earned {
  color: #d69d00;
  font-weight: 850;
}

.quiz-question-editor {
  padding: 0.9rem;
  background: var(--diloya-card-bg);
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
}

.quiz-answer-row {
  margin-bottom: 0.45rem !important;
}
.quiz-answer-letter {
  width: 2.5rem;
  color: var(--diloya-grey) !important;
  font-weight: 800;
}
.quiz-answer-input {
  min-width: 0;
}
.quiz-correct-label {
  color: var(--diloya-grey);
  cursor: pointer;
}
.quiz-correct-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiz-correct-label.is-correct {
  color: white;
  background: #20a464;
  border-color: #20a464;
}

.quiz-post-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 9%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 16px;
}

.quiz-post-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 13%, transparent);
  border-radius: 12px;
}

.quiz-post-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.quiz-post-copy span {
  color: var(--diloya-grey);
  font-size: 0.78rem;
}

@media (max-width: 480px) {
  .quiz-composer {
    padding: 0.7rem;
  }
  .quiz-question-editor {
    padding: 0.7rem;
  }
  .quiz-answer-letter {
    width: 2rem;
  }
  .quiz-question-meta {
    grid-template-columns: 1fr;
  }
  .quiz-post-card {
    grid-template-columns: auto 1fr;
  }
  .quiz-post-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.quiz-page-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: clamp(1.25rem, 4vw, 2rem) !important;
  border-radius: 22px;
}

.quiz-page-icon,
.quiz-result-icon {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(
    145deg,
    var(--diloya-primary),
    var(--diloya-accent)
  );
  border-radius: 16px;
  font-size: 1.4rem;
  box-shadow: 0 12px 28px
    color-mix(in srgb, var(--diloya-primary) 25%, transparent);
}

.quiz-kicker {
  margin-bottom: 0.4rem;
  color: var(--diloya-primary);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.quiz-wizard {
  padding: clamp(1.25rem, 5vw, 2.5rem) !important;
  border-radius: 22px;
}
.quiz-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--diloya-grey);
  font-size: 0.8rem;
  font-weight: 700;
}
.quiz-wizard .progress {
  height: 0.45rem;
  margin: 0.65rem 0 2rem;
}
.quiz-wizard-question {
  display: none;
  min-width: 0;
  border: 0;
}
.quiz-wizard-question.is-active {
  display: block;
  animation: quiz-step-in 0.25s ease;
}
.quiz-wizard-question legend {
  width: 100%;
  margin-bottom: 1.5rem;
  color: var(--diloya-text);
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}
.quiz-wizard-question legend span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--diloya-primary);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quiz-multiple-help {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: -0.6rem 0 1.2rem;
  color: var(--diloya-grey);
  font-size: 0.86rem;
  line-height: 1.45;
}
.quiz-multiple-help i {
  margin-top: 0.2rem;
  color: var(--diloya-primary);
}
.interactive-owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.quiz-wizard-options {
  display: grid;
  gap: 0.7rem;
}

.quiz-wizard-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem;
  color: var(--diloya-text);
  background: var(--diloya-card-bg);
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.quiz-wizard-option > span {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  border-radius: 9px;
  font-weight: 850;
}
.quiz-wizard-option > b {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quiz-wizard-option > i {
  color: var(--diloya-grey);
}
.quiz-wizard-option:hover {
  border-color: var(--diloya-primary);
  transform: translateY(-1px);
}
.quiz-wizard-option.is-selected {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
}
.quiz-wizard-option.is-selected > i {
  color: var(--diloya-primary);
}
.quiz-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.quiz-wizard-actions #quizNext,
.quiz-wizard-actions #quizSubmit {
  margin-left: auto;
}

.quiz-result-summary {
  position: relative;
  overflow: hidden;
  padding: 2rem !important;
  text-align: center;
  border-radius: 22px;
}
.quiz-result-summary .quiz-result-icon {
  margin: 0 auto 1rem;
}
.quiz-result-summary.is-passed {
  border-color: color-mix(in srgb, #20a464 40%, var(--diloya-border));
}
.quiz-result-summary.is-failed {
  border-color: color-mix(
    in srgb,
    var(--diloya-accent) 40%,
    var(--diloya-border)
  );
}
.quiz-review-item {
  border-left: 4px solid var(--diloya-border);
}
.quiz-review-item.is-correct {
  border-left-color: #20a464;
}
.quiz-review-item.is-incorrect {
  border-left-color: #e5484d;
}
.quiz-review-heading {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
.quiz-review-item.is-correct .quiz-review-heading .icon {
  color: #20a464;
}
.quiz-review-item.is-incorrect .quiz-review-heading .icon {
  color: #e5484d;
}

.quiz-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.quiz-stats-grid .box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 18px;
}
.quiz-stats-grid span {
  color: var(--diloya-grey);
  font-size: 0.8rem;
}
.quiz-stats-grid strong {
  font-size: 2rem;
}
.quiz-attempt-list {
  display: grid;
  gap: 0.8rem;
}
.quiz-attempt-card {
  border-radius: 18px;
}
.quiz-attempt-card summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  list-style: none;
}
.quiz-attempt-card summary::-webkit-details-marker {
  display: none;
}
.quiz-attempt-card summary > img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}
.quiz-attempt-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.quiz-attempt-person small,
.quiz-attempt-date {
  color: var(--diloya-grey);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.quiz-attempt-score {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.quiz-attempt-score b {
  color: var(--diloya-primary);
}
.quiz-attempt-details {
  display: grid;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid var(--diloya-border);
}
.quiz-attempt-answer {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem;
  background: var(--diloya-surface-2);
  border-left: 3px solid;
  border-radius: 10px;
  font-size: 0.86rem;
}
.quiz-attempt-answer.is-correct {
  border-left-color: #20a464;
}
.quiz-attempt-answer.is-incorrect {
  border-left-color: #e5484d;
}

@keyframes quiz-step-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}

@media (max-width: 700px) {
  .quiz-page-header {
    flex-direction: column;
  }
  .quiz-stats-grid {
    grid-template-columns: 1fr;
  }
  .quiz-attempt-card summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .quiz-attempt-date {
    grid-column: 2;
  }
  .quiz-attempt-score {
    grid-column: 2;
  }
  .quiz-attempt-card summary > i {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-wizard-question.is-active {
    animation: none;
  }
}

.poll-composer-header,
.poll-composer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.poll-option-input {
  margin-bottom: 0.55rem !important;
}
.poll-option-number {
  width: 2.5rem;
  color: var(--diloya-grey) !important;
}
.poll-option-input .input {
  min-width: 0;
}
.poll-end-conditions {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(130px, 0.65fr);
  gap: 0.7rem;
  flex: 1;
}

.poll-condition-label {
  display: grid;
  gap: 0.35rem;
  color: var(--diloya-grey);
  font-size: 0.76rem;
  font-weight: 700;
}
#attachImagesLabel.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.post-poll {
  width: 100%;
  padding: 0.9rem;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 4%,
    var(--diloya-card-bg)
  );
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 20%, var(--diloya-border));
  border-radius: 16px;
}

.poll-options {
  display: grid;
  gap: 0.55rem;
}

.poll-option {
  position: relative;
  width: 100%;
  min-height: 2.75rem;
  overflow: hidden;
  padding: 0.65rem 0.85rem;
  color: var(--diloya-text);
  background: var(--diloya-card-bg);
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}

.poll-option:not(:disabled):hover {
  border-color: var(--diloya-primary);
  transform: translateY(-1px);
}

.poll-option:disabled {
  cursor: default;
  opacity: 1;
}
.poll-option.is-selected {
  border-color: var(--diloya-primary);
}

.poll-option-progress {
  position: absolute;
  inset: 0 auto 0 0;
  max-width: 100%;
  background: color-mix(in srgb, var(--diloya-primary) 15%, transparent);
  transition: width 0.4s ease;
}

.poll-option-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.poll-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.poll-option-label i {
  margin-right: 0.4rem;
  color: var(--diloya-primary);
}
.poll-option-percentage {
  flex: none;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--diloya-grey);
}
.poll-meta,
.poll-login-hint {
  color: var(--diloya-grey);
  font-size: 0.78rem;
}

@media (max-width: 480px) {
  .poll-composer-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .poll-composer-controls .button {
    width: 100%;
  }
  .poll-end-conditions {
    grid-template-columns: 1fr;
  }
  .post-poll {
    padding: 0.7rem;
    border-radius: 12px;
  }
}

.post-image-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.post-image-preview {
  position: relative;
}

.post-image-previews.is-single {
  display: flex;
  justify-content: center;
}

.post-image-previews.is-single .post-image-preview {
  width: fit-content;
  max-width: min(100%, 520px);
}

.post-image-previews.is-single .post-image-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

.post-image-previews.is-single .post-image-preview.is-portrait {
  max-width: min(100%, 320px);
}

.post-image-preview img,
.post-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--diloya-border);
}

.post-image-preview.is-video {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: #050608;
}
.post-image-preview.is-video video {
  width: min(100%, 270px);
  max-height: 480px;
  aspect-ratio: 9/16;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}
.post-video-wrap {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: #050608;
}
.post-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: #000;
  border: 0;
}
.post-video-wrap.is-vertical .post-video {
  width: min(100%, 420px);
  max-height: 640px;
  aspect-ratio: 9/16;
}
.video-link-composer {
  padding: 0.8rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 28%, var(--diloya-border));
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 6%,
    var(--diloya-card-bg)
  );
}

.post-link-attachments,
.post-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.post-link-attachment,
.post-link-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
}
.post-link-card {
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.post-link-card:hover {
  color: var(--diloya-text);
  border-color: var(--diloya-primary);
  transform: translateY(-1px);
}
.post-link-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.post-link-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.post-link-copy strong,
.post-link-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-link-copy strong {
  font-size: 0.82rem;
}
.post-link-copy small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.post-link-card > .fa-arrow-up-right-from-square {
  flex: 0 0 auto;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.post-link-attachment .delete {
  flex: 0 0 auto;
}

.post-image-preview .delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.75);
}

/* ---- Group cover + avatar ---- */
.group-cover {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #2d6a9f;
  border-radius: 12px 12px 0 0;
  position: relative;
}

.group-cover .group-back {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: #fff;
}

.group-header-box {
  border-radius: 0 0 12px 12px;
  border-top: none;
  margin-top: -4px;
}

.group-header-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.group-avatar-wrapper {
  flex: 0 0 auto;
  margin-top: -36px;
}

.group-avatar-wrapper img {
  width: 72px;
  height: 72px;
  border: 4px solid white;
  border-radius: 12px;
  object-fit: cover;
}

.group-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.25rem;
}

/* Group appearance editor in manage page */
.group-cover-preview {
  height: 130px;
  border-radius: 10px;
  background: var(--diloya-surface-2) center/cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.group-avatar-preview-editor {
  position: relative;
  display: inline-block;
}

.group-avatar-preview-editor img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid var(--diloya-border);
  display: block;
}

.group-media-action {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s;
  border-radius: inherit;
}

.group-cover-preview:hover .group-media-action,
.group-avatar-preview-editor:hover .group-media-action {
  opacity: 1;
}

/* ---- Profile ---- */
.profile-cover {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #1a8cd8;
  border-radius: 12px 12px 0 0;
}

.profile-header-box {
  border-radius: 0 0 12px 12px;
  border-top: none;
  margin-top: -4px;
}

.profile-header-controls {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.profile-avatar-wrapper {
  flex: 0 0 auto;
  margin-top: var(--profile-avatar-offset, -20px);
}

.profile-avatar-wrapper img {
  width: var(--profile-avatar-size, 40px);
  height: var(--profile-avatar-size, 40px);
  border: 4px solid white;
  object-fit: cover;
}

.post-card.is-reply > .media > .media-left .image,
.post-card.is-reply > .media > .media-left img,
.reply-composer > .media > .media-left .image,
.reply-composer > .media > .media-left img {
  width: var(--profile-avatar-response-size, 40px) !important;
  height: var(--profile-avatar-response-size, 40px) !important;
  min-width: var(--profile-avatar-response-size, 40px);
  object-fit: cover;
}

.edit-profile-button {
  position: relative;
  z-index: 2;
  padding-inline: 1.15rem;
}

.profile-primary-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.profile-social-links {
  width: 100%;
  margin-top: 0.75rem;
}

.profile-social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  font-size: 0.78rem;
  transition:
    transform 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.profile-social-links a:hover {
  color: var(--diloya-primary);
  border-color: var(--diloya-primary);
  transform: translateY(-1px);
}

.social-domain-prefix {
  max-width: 13rem;
  min-height: 2.75rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  color: var(--diloya-grey) !important;
  background: var(--diloya-surface-2) !important;
  border-color: var(--diloya-border) !important;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-handle-field .input {
  min-height: 2.75rem;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-weight: 650;
}

@media (max-width: 560px) {
  .social-handle-field .field.has-addons {
    display: block;
  }
  .social-handle-field .field.has-addons .control:first-child {
    display: block;
  }
  .social-domain-prefix {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: unset !important;
    height: 1.85rem;
    padding: 0.2rem 0.75rem !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: none !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--diloya-grey) !important;
    letter-spacing: 0.01em;
  }
  .social-handle-field .control.is-expanded {
    display: block;
  }
  .social-handle-field .control.is-expanded .input {
    border-radius: 0 0 6px 6px !important;
    font-size: 0.95rem;
    width: 100%;
  }
}

.profile-media-editor {
  position: relative;
}
.profile-cover-preview {
  height: 155px;
  border-radius: 16px;
  background: var(--diloya-surface-2) center/cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.profile-media-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: white;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.profile-avatar-preview {
  position: relative;
  width: var(--profile-avatar-size, 40px);
  height: var(--profile-avatar-size, 40px);
  margin: var(--profile-avatar-offset, -20px) 0 0 1rem;
}
.profile-avatar-preview img {
  width: var(--profile-avatar-size, 40px);
  height: var(--profile-avatar-size, 40px);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--diloya-card-bg);
}
.profile-avatar-action {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.profile-avatar-preview:hover .profile-avatar-action {
  opacity: 1;
}
.avatar-crop-card {
  width: min(480px, calc(100vw - 1.5rem));
}
.avatar-crop-subtitle {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.avatar-crop-help {
  color: var(--diloya-grey);
  font-size: 0.86rem;
}
.avatar-crop-stage {
  position: relative;
  display: inline-flex;
  width: min(300px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background-color: #d9dee5;
  background-image:
    linear-gradient(45deg, #c7cdd5 25%, transparent 25%),
    linear-gradient(-45deg, #c7cdd5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c7cdd5 75%),
    linear-gradient(-45deg, transparent 75%, #c7cdd5 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  touch-action: none;
  cursor: grab;
}
.avatar-crop-stage.is-dragging {
  cursor: grabbing;
}
.avatar-crop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(5, 10, 18, 0.52);
}
.avatar-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.avatar-crop-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--diloya-grey);
}
.avatar-crop-zoom input {
  width: min(260px, 72%);
  accent-color: var(--diloya-primary);
}
.modal-card {
  border-radius: 20px;
  overflow: hidden;
}
.modal-card-body {
  background: var(--diloya-card-bg);
}
.modal-card-head,
.modal-card-foot {
  background: var(--diloya-surface-2);
  border-color: var(--diloya-border);
}
.modal-card-title {
  color: var(--diloya-text);
}

.admin-users-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.admin-users-toolbar form {
  align-items: center;
  display: flex;
}
.admin-users-table-wrap {
  overflow-x: auto;
}
.admin-users-table {
  min-width: 920px;
}
.admin-user-activity {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.admin-user-activity small {
  color: var(--diloya-grey);
  margin-top: 0.2rem;
}
.admin-password-reset-card {
  max-width: 520px;
}
.admin-password-reset-recipient {
  align-items: center;
  background: var(--diloya-surface-2);
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  display: flex;
  gap: 0.8rem;
  padding: 1rem;
}
.admin-password-reset-recipient > .icon {
  background: rgba(29, 155, 240, 0.12);
  border-radius: 50%;
  color: var(--diloya-primary);
  height: 2.5rem;
  width: 2.5rem;
}
.pagination .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 768px) {
  .admin-users-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
  .admin-users-table-wrap {
    border-radius: 10px;
  }
}

#shareModal {
  position: fixed;
  z-index: 13000;
  inset: 0;
}
.share-modal-card {
  width: min(620px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
}
.share-modal-card .modal-card-head {
  align-items: flex-start;
  gap: 0.75rem;
}
.share-modal-card .share-modal-close {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  margin-left: auto;
}
.share-modal-subtitle {
  color: var(--diloya-grey);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
.share-section-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.share-section-heading > div {
  min-width: 0;
  flex: 1;
}
.share-select-all {
  flex: none;
}
.share-section-heading p {
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.share-section-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
.content-highlights {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 16%, var(--diloya-border));
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 6%, var(--diloya-card-bg)),
    var(--diloya-card-bg) 58%
  );
}
.content-highlights-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.content-highlights-heading span {
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.content-highlights-heading h2 {
  margin: 0.1rem 0 0;
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 850;
}
.content-highlights-heading > a {
  color: var(--diloya-primary);
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}
.content-highlights-list {
  display: grid;
  grid-auto-columns: minmax(190px, 220px);
  grid-auto-flow: column;
  gap: 0.7rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.35rem;
  scroll-snap-type: x proximity;
}
.content-highlight-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  color: inherit;
  background: var(--diloya-card-bg);
  scroll-snap-align: start;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.content-highlight-card:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(28, 20, 58, 0.1);
}
.content-highlight-preview {
  position: relative;
  height: 124px;
  overflow: hidden;
  background: #21183b;
}
.content-highlight-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-highlight-preview.is-empty {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--diloya-primary), #5540a5);
  font-size: 1.8rem;
}
.content-highlight-type {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 8, 28, 0.72);
  font-size: 0.62rem;
  font-weight: 750;
}
.content-highlight-body {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.65rem 0.3rem;
}
.content-highlight-body img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.content-highlight-body strong,
.content-highlight-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-highlight-body strong {
  font-size: 0.75rem;
}
.content-highlight-body small {
  color: var(--diloya-grey);
  font-size: 0.64rem;
}
.content-highlight-card > p {
  display: -webkit-box;
  min-height: 2.5em;
  margin: 0;
  padding: 0 0.65rem 0.65rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.explore-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.8rem;
}
.explore-content-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  color: inherit;
  background: var(--diloya-card-bg);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.explore-content-card:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(28, 20, 58, 0.1);
}
.explore-content-cover {
  position: relative;
  height: 126px;
  overflow: hidden;
  background: var(--diloya-surface-2);
}
.explore-content-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.explore-content-cover.is-empty {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--diloya-primary), #5540a5);
  font-size: 1.8rem;
}
.explore-content-cover span {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 8, 28, 0.74);
  font-size: 0.64rem;
  font-weight: 750;
}
.explore-content-copy {
  padding: 0.65rem 0.75rem 0.75rem;
}
.explore-content-copy strong,
.explore-content-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.explore-content-copy strong {
  font-size: 0.82rem;
}
.explore-content-copy small {
  margin-top: 0.14rem;
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.explore-content-copy p {
  display: -webkit-box;
  margin: 0.42rem 0 0;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.share-contacts-list {
  display: grid;
  gap: 0.45rem;
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding-right: 0.2rem;
}
.share-contact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  width: 100%;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.share-contact:hover,
.share-contact.is-selected {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
}
.share-contact img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.share-contact-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.share-contact-identity strong,
.share-contact-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-contact-identity small {
  color: var(--diloya-grey);
}
.share-contact-marker {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--diloya-border);
  color: transparent;
}
.share-contact.is-selected .share-contact-marker {
  border-color: var(--diloya-primary);
  color: white;
  background: var(--diloya-primary);
}
.share-contacts-empty,
.share-contacts-loading {
  min-height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  text-align: center;
  color: var(--diloya-grey);
  border: 1px dashed var(--diloya-border);
  border-radius: 14px;
}
.share-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.2rem 0 0.9rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.share-divider::before,
.share-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--diloya-border);
}
.share-networks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.65rem;
}
.share-network {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--diloya-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.share-network span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: white;
  font-size: 1.15rem;
  transition: transform 0.18s ease;
}
.share-network:hover span {
  transform: translateY(-3px);
}
.share-network.is-facebook span {
  background: #1877f2;
}
.share-network.is-messenger span {
  background: linear-gradient(135deg, #00b2ff, #a033ff, #ff5c87);
}
.share-network.is-whatsapp span {
  background: #25d366;
}
.share-network.is-email span {
  background: #ea4335;
}
.share-network.is-linkedin span {
  background: #0a66c2;
}
.share-network.is-threads span,
.share-network.is-x span {
  background: #111;
}
.share-network.is-copy span {
  background: var(--diloya-primary);
}
.share-network.is-qr span {
  border: 2px solid color-mix(in srgb, var(--diloya-text) 18%, transparent);
  background: #fff;
  color: #171421;
  box-shadow:
    inset 0 0 0 4px #fff,
    0 5px 14px color-mix(in srgb, #111 12%, transparent);
  font-size: 1.35rem;
}
.official-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.3rem;
  padding: 0.18rem 0.42rem;
  border: 1px solid color-mix(in srgb, #7757e8 25%, transparent);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #7757e8 13%, var(--diloya-card-bg)),
    color-mix(in srgb, #3c9bdc 9%, var(--diloya-card-bg))
  );
  color: #6847cf;
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.015em;
  vertical-align: middle;
  white-space: nowrap;
}
.official-ai-badge i {
  font-size: 0.62rem;
}
.official-ai-badge.is-profile {
  position: relative;
  top: -0.15rem;
  font-size: 0.64rem;
}
.official-ai-badge.is-profile i {
  font-size: 0.7rem;
}
.profile-completion {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 10%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  box-shadow: 0 10px 28px
    color-mix(in srgb, var(--diloya-primary) 7%, transparent);
}

.profile-public-visits {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.profile-social-counts {
  align-items: center;
}
.profile-follow-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--diloya-text);
  cursor: pointer;
}
.profile-follow-count:hover strong,
.profile-follow-count:focus-visible strong {
  color: var(--diloya-primary);
  text-decoration: underline;
}
.profile-follows-modal .modal-card {
  width: min(500px, calc(100vw - 2rem));
  max-height: min(720px, calc(100vh - 2rem));
  border-radius: 20px;
}
.profile-follows-subtitle {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.profile-follows-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.profile-follow-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem;
  border-radius: 14px;
  color: var(--diloya-text);
}
.profile-follow-row:hover {
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
}
.profile-follow-row > img {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-follow-row > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.profile-follow-row strong,
.profile-follow-row small,
.profile-follow-row p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-follow-row strong i {
  color: var(--diloya-primary);
  font-size: 0.7rem;
}
.profile-follow-row small,
.profile-follow-row p,
.profile-follow-row-arrow {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.profile-follow-row p {
  margin-top: 0.15rem;
}
.profile-follows-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  color: var(--diloya-grey);
  text-align: center;
}
.profile-follows-empty > i {
  color: var(--diloya-primary);
  font-size: 1.7rem;
}
.profile-follows-empty p {
  max-width: 280px;
  font-size: 0.72rem;
}
.profile-content-tabs {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  overflow-x: auto;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--diloya-card-bg) 94%, transparent);
  box-shadow: 0 8px 24px rgba(18, 18, 35, 0.06);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.profile-content-tabs::-webkit-scrollbar {
  display: none;
}
.profile-content-tabs button {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.38rem;
  padding: 0.55rem 0.72rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--diloya-grey);
  font-weight: 800;
  cursor: pointer;
}
.profile-content-tabs button:hover {
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
}
.profile-content-tabs button.is-active {
  background: var(--diloya-primary);
  color: #fff;
}
.profile-content-tabs button b {
  min-width: 20px;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.15);
  font-size: 0.58rem;
}
.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.profile-summary-grid button {
  display: grid;
  min-height: 120px;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    var(--diloya-card-bg),
    var(--diloya-surface-2)
  );
  color: var(--diloya-text);
  cursor: pointer;
}
.profile-summary-grid button:hover {
  border-color: var(--diloya-primary);
  transform: translateY(-2px);
}
.profile-summary-grid i {
  color: var(--diloya-primary);
  font-size: 1.25rem;
}
.profile-summary-grid strong {
  font-size: 1.35rem;
  font-weight: 950;
}
.profile-summary-grid span {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.profile-store-feature,
.profile-summary-entries {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 25%, var(--diloya-border));
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 10%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  color: var(--diloya-text);
}
.profile-summary-entries {
  border-color: var(--diloya-border);
  text-align: left;
  cursor: pointer;
}
.profile-store-feature > img,
.profile-summary-entries > span {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 16px;
  object-fit: cover;
}
.profile-summary-entries > span {
  display: grid;
  place-items: center;
  background: var(--diloya-primary);
  color: #fff;
}
.profile-store-feature > div,
.profile-summary-entries > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.profile-store-feature small {
  color: var(--diloya-primary);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.profile-store-feature strong,
.profile-summary-entries strong {
  font-size: 1rem;
  font-weight: 950;
}
.profile-store-feature p,
.profile-summary-entries p {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-store-feature > span {
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 850;
}
.profile-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
}
.profile-section-heading small {
  color: var(--diloya-primary);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.profile-section-heading h3 {
  font-size: 1.05rem;
  font-weight: 950;
}
.profile-section-heading > a {
  font-size: 0.7rem;
  font-weight: 800;
}
.profile-reel-grid,
.profile-story-grid,
.profile-product-grid,
.profile-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.profile-article-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  grid-template-rows: 150px 1fr;
}
.profile-article-card > img,
.profile-article-card > span {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--diloya-surface-2);
}
.profile-article-card > span {
  display: grid;
  place-items: center;
  color: var(--diloya-primary);
  font-size: 2rem;
}
.profile-article-card > div {
  display: flex;
  min-width: 0;
  padding: 0.85rem;
  flex-direction: column;
}
.profile-article-card small,
.profile-article-card p {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.profile-article-card strong {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}
.profile-article-card p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0.6rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.profile-article-card b {
  margin-top: auto;
  color: var(--diloya-primary);
  font-size: 0.7rem;
}
.profile-reel-card,
.profile-story-card,
.profile-product-grid > a,
.profile-event-grid > a,
.profile-community-grid > a {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
.profile-reel-card {
  position: relative;
  aspect-ratio: 9 / 14;
}
.profile-reel-card > img,
.profile-reel-placeholder,
.profile-story-card > img,
.profile-story-card > span,
.profile-product-grid > a > img,
.profile-product-grid > a > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(145deg, #2f2468, #161322);
  object-fit: cover;
}
.profile-reel-placeholder i,
.profile-story-card > span i,
.profile-product-grid > a > span i {
  color: #fff;
  font-size: 2rem;
}
.profile-reel-card > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 0.65rem 0.65rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: #fff;
}
.profile-reel-card strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-reel-card small {
  font-size: 0.6rem;
}
.profile-story-card {
  position: relative;
  aspect-ratio: 4 / 5;
}
.profile-story-card > div {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 2rem 0.65rem 0.65rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.84));
  color: #fff;
}
.profile-story-card strong {
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-story-card small {
  font-size: 0.6rem;
}
.profile-community-grid,
.profile-event-grid {
  display: grid;
  gap: 0.7rem;
}
.profile-community-grid > a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
}
.profile-community-grid img {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 15px;
  object-fit: cover;
}
.profile-community-grid div {
  min-width: 0;
}
.profile-community-grid strong,
.profile-community-grid p,
.profile-community-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-community-grid p,
.profile-community-grid small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.profile-event-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-event-grid img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.profile-event-grid a > div,
.profile-product-grid a > div {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
}
.profile-event-grid span,
.profile-product-grid small {
  color: var(--diloya-primary);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.profile-event-grid strong,
.profile-product-grid strong {
  margin: 0.2rem 0;
  font-weight: 900;
}
.profile-event-grid time,
.profile-event-grid small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.profile-product-grid > a > img,
.profile-product-grid > a > span {
  height: 170px;
}
.profile-product-grid b {
  color: var(--diloya-primary);
}
@media (max-width: 600px) {
  .profile-summary-grid,
  .profile-reel-grid,
  .profile-story-grid,
  .profile-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-article-grid {
    grid-template-columns: 1fr;
  }
  .profile-event-grid {
    grid-template-columns: 1fr;
  }
  .profile-store-feature > span {
    display: none;
  }
}
.auth-reserved-name-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 800;
  text-decoration: underline;
}
.diloya-prompt-modal {
  z-index: 900;
}
.diloya-prompt-modal .modal-card {
  width: min(460px, calc(100vw - 2rem));
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}
.reserved-claim-page {
  padding-bottom: 6rem;
}
.reserved-claim-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 1.3rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #33226e, var(--diloya-primary));
  color: #fff;
}
.reserved-claim-hero > span {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.5rem;
}
.reserved-claim-hero small {
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reserved-claim-hero h1 {
  margin: 0.15rem 0;
  font-size: 1.45rem;
  font-weight: 950;
}
.reserved-claim-hero p {
  max-width: 620px;
  font-size: 0.78rem;
}
.reserved-my-claims {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reserved-claim-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
}
.reserved-claim-summary > div {
  display: flex;
  flex-direction: column;
}
.reserved-claim-summary small {
  color: var(--diloya-grey);
}
.reserved-claim-summary > span {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--diloya-surface-2);
  font-size: 0.65rem;
  font-weight: 800;
}
.admin-reserved-claims {
  display: grid;
  gap: 1rem;
}
.admin-reserved-name-list {
  display: flex;
  max-height: 420px;
  overflow-y: auto;
  flex-direction: column;
  gap: 0.4rem;
}
.admin-reserved-name-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
}
.admin-reserved-name-list article > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.admin-reserved-name-list small {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-reserved-claim > header,
.admin-reserved-claim > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.admin-reserved-claim h2 {
  font-size: 1.1rem;
  font-weight: 950;
}
.admin-reserved-claim header p {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.admin-reserved-claim-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}
.admin-reserved-claim-details div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.6rem;
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.admin-reserved-claim-details span {
  overflow-wrap: anywhere;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.admin-reserved-claim footer {
  justify-content: flex-end;
}
.reserved-status-pending {
  background: #fff2ca !important;
  color: #765300 !important;
}
.reserved-status-more_info {
  background: #dbeafe !important;
  color: #174ea6 !important;
}
.reserved-status-approved {
  background: #d8f5e8 !important;
  color: #126a47 !important;
}
.reserved-status-rejected {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
@media (max-width: 600px) {
  .reserved-claim-hero {
    align-items: flex-start;
  }
  .admin-reserved-claim-details {
    grid-template-columns: 1fr;
  }
}
.profile-public-visits > i {
  color: var(--diloya-primary);
  font-size: 0.75rem;
}
.profile-visit-insights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 8%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.profile-visit-insights-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.8rem;
}
.profile-visit-insights-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--diloya-primary);
  color: #fff;
}
.profile-visit-insights h2 {
  margin: 0.1rem 0;
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 900;
}
.profile-visit-insights p {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.profile-visit-insights-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 0.45rem;
}
.profile-visit-insights-grid div {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  text-align: center;
}
.profile-visit-insights-grid strong,
.profile-visit-insights-grid span {
  display: block;
}
.profile-visit-insights-grid strong {
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 900;
}
.profile-visit-insights-grid span {
  color: var(--diloya-grey);
  font-size: 0.58rem;
}
@media (max-width: 760px) {
  .profile-visit-insights {
    align-items: stretch;
    flex-direction: column;
    padding: 0.9rem;
  }
  .profile-visit-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.profile-completion.is-complete {
  border-color: color-mix(in srgb, #20a474 30%, var(--diloya-border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #20a474 10%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.profile-completion-meter {
  --meter-color: var(--diloya-primary);
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--meter-color) calc(var(--profile-completion) * 1%),
    color-mix(in srgb, var(--diloya-border) 72%, transparent) 0
  );
}
.profile-completion.is-complete .profile-completion-meter {
  --meter-color: #20a474;
}
.profile-completion-meter:before {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--diloya-card-bg);
  content: "";
}
.profile-completion-meter > div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.profile-completion-meter strong {
  color: var(--diloya-text);
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
}
.profile-completion-meter span {
  margin-top: 0.18rem;
  color: var(--diloya-grey);
  font-size: 0.54rem;
  font-weight: 750;
  text-transform: uppercase;
}
.profile-completion-copy {
  min-width: 0;
  flex: 1;
}
.profile-completion-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--diloya-primary);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.profile-completion.is-complete .profile-completion-kicker {
  color: #16845d;
}
.profile-completion-copy h2 {
  margin: 0.18rem 0;
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 900;
}
.profile-completion-copy > p {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.profile-missing-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.profile-missing-fields span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.48rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  color: var(--diloya-grey);
  font-size: 0.61rem;
}
.profile-missing-fields i {
  color: var(--diloya-primary);
  font-size: 0.52rem;
}
@media (max-width: 600px) {
  .profile-completion {
    align-items: flex-start;
    padding: 0.9rem;
    gap: 0.75rem;
    border-radius: 16px;
  }
  .profile-completion-meter {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }
  .profile-completion-meter:before {
    width: 52px;
    height: 52px;
  }
  .profile-completion-meter strong {
    font-size: 0.95rem;
  }
  .profile-completion-meter span {
    font-size: 0.43rem;
  }
  .profile-missing-fields span {
    font-size: 0.56rem;
  }
}
@media (max-width: 520px) {
  .official-ai-badge span {
    display: none;
  }
  .official-ai-badge {
    width: 24px;
    height: 24px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    font-size: 0.7rem;
  }
  .official-ai-badge.is-profile {
    width: auto;
    height: auto;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
  }
  .official-ai-badge.is-profile span {
    display: inline;
  }
}
.share-login-hint {
  display: flex;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 14px;
  background: var(--diloya-surface-2);
}
.share-login-hint p {
  color: var(--diloya-grey);
  font-size: 0.82rem;
}
.notification-share-message {
  border-left: 3px solid var(--diloya-primary);
  padding-left: 0.6rem;
  color: var(--diloya-text);
}

@media (max-width: 768px) {
  #shareModal {
    z-index: 13000;
  }
  #shareModal.is-active {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  #shareModal .share-modal-card {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem - env(safe-area-inset-bottom));
    max-height: none;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    border-radius: 18px;
  }
  #shareModal .modal-card-head {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
  }
  #shareModal .modal-card-body {
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 0.85rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #shareModal #shareSendContacts {
    position: sticky;
    z-index: 2;
    bottom: 0;
    min-height: 44px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }
  .share-networks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .share-network {
    font-size: 0.65rem;
  }
}

.integration-panel {
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 35%, var(--diloya-border));
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 8%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}

.integration-panel code {
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.integration-token-list {
  display: grid;
  gap: 0.75rem;
}
.integration-token-card {
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
  background: var(--diloya-card-bg);
}
.integration-token-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.integration-token-card > header div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.integration-token-card small,
.integration-activity-row small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}
.integration-activity summary {
  color: var(--diloya-primary);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}
.integration-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.integration-activity-row:last-child {
  border-bottom: 0;
}
.integration-activity-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.integration-activity-row strong {
  color: var(--diloya-text);
  font-size: 0.72rem;
}

/* Landing */
html:has(.landing-page) {
  scroll-behavior: smooth;
}
.landing-page {
  overflow-x: hidden;
}
.landing-page #inicio,
.landing-page .landing-section {
  scroll-margin-top: 90px;
}
.landing-nav {
  width: min(1180px, calc(100% - 2rem));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  padding-inline: 0.75rem;
  background: var(--diloya-navbar);
  border: 1px solid var(--diloya-border);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--diloya-shadow);
}
.landing-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.landing-services-menu {
  position: relative;
}
.landing-services-trigger {
  gap: 0.55rem;
}
.landing-services-trigger > i {
  font-size: 0.68rem;
  transition: transform 0.18s ease;
}
.landing-services-trigger[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.landing-services-panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 50%;
  display: none;
  width: min(650px, calc(100vw - 3rem));
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
  transform: translateX(-42%);
}
.landing-services-panel.is-active {
  display: block;
  animation: landing-mega-menu-in 0.16s ease-out;
}
@keyframes landing-mega-menu-in {
  from {
    opacity: 0;
    transform: translateX(-42%) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(-42%) translateY(0);
  }
}
.landing-services-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.35rem 0.85rem;
  border-bottom: 1px solid var(--diloya-border);
}
.landing-services-heading span {
  color: var(--diloya-primary);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.landing-services-heading strong {
  color: var(--diloya-grey);
  font-size: 0.75rem;
  font-weight: 600;
}
.landing-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding-top: 0.75rem;
}
.landing-service-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 14px;
  color: var(--diloya-text);
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.landing-service-link:hover,
.landing-service-link:focus-visible {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-text);
  transform: translateY(-1px);
}
.landing-service-link > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}
.landing-service-link strong {
  font-size: 0.88rem;
}
.landing-service-link strong em {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.55rem;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1rem;
}
.landing-service-link small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
  line-height: 1.35;
}
.landing-service-link > i {
  color: var(--diloya-grey);
  font-size: 0.7rem;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.landing-service-link:hover > i,
.landing-service-link:focus-visible > i {
  opacity: 1;
  transform: translateX(0);
}
.landing-service-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.landing-service-icon.is-stories {
  background: color-mix(in srgb, #a855f7 14%, var(--diloya-card-bg));
  color: #a855f7;
}
.landing-service-icon.is-messages {
  background: color-mix(in srgb, #22c55e 14%, var(--diloya-card-bg));
  color: #16a34a;
}
.landing-service-icon.is-reels {
  background: color-mix(in srgb, #ec4899 14%, var(--diloya-card-bg));
  color: #db2777;
}
.landing-service-icon.is-events {
  background: color-mix(in srgb, #f97316 14%, var(--diloya-card-bg));
  color: #ea580c;
}
.landing-service-icon.is-groups {
  background: color-mix(in srgb, #0ea5e9 14%, var(--diloya-card-bg));
  color: #0284c7;
}
.landing-service-icon.is-stores {
  background: color-mix(in srgb, #10b981 14%, var(--diloya-card-bg));
  color: #059669;
}
.landing-service-icon.is-websites {
  background: color-mix(in srgb, #6366f1 14%, var(--diloya-card-bg));
  color: #4f46e5;
}
.landing-service-icon.is-plans {
  background: color-mix(in srgb, #8b5cf6 14%, var(--diloya-card-bg));
  color: #7c3aed;
}
.landing-service-icon.is-marketplace {
  background: color-mix(in srgb, #eab308 15%, var(--diloya-card-bg));
  color: #ca8a04;
}
.landing-service-icon.is-articles {
  background: color-mix(in srgb, #14b8a6 15%, var(--diloya-card-bg));
  color: #0f766e;
}
.landing-nav-burger {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
}
.landing-hero {
  width: min(1180px, calc(100% - 2rem));
  min-height: 76vh;
  margin: 76px auto 0;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 4rem;
  padding: 5rem 0;
}
.landing-kicker,
.section-heading > span {
  display: inline-block;
  color: var(--diloya-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.landing-copy h1 {
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 900px;
}
.landing-copy > p {
  max-width: 720px;
  color: var(--diloya-grey);
  font-size: 1.18rem;
  line-height: 1.7;
  margin: 1.8rem 0;
}
.landing-visual {
  display: grid;
  place-items: center;
}
.landing-orbit {
  width: 300px;
  height: 300px;
  border: 1px solid var(--diloya-border);
  border-radius: 45% 55% 60% 40%;
  position: relative;
  display: grid;
  place-items: center;
  animation: float 5s ease-in-out infinite;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--diloya-primary) 20%, transparent),
    color-mix(in srgb, var(--diloya-accent) 16%, transparent)
  );
}
.landing-orbit strong {
  font-size: 6rem;
  background: linear-gradient(
    135deg,
    var(--diloya-primary),
    var(--diloya-accent)
  );
  color: transparent;
  background-clip: text;
}
.landing-orbit span {
  position: absolute;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
  color: var(--diloya-primary);
}
.landing-orbit span:nth-child(1) {
  top: -20px;
  left: 30px;
}
.landing-orbit span:nth-child(2) {
  right: -20px;
  top: 90px;
}
.landing-orbit span:nth-child(3) {
  bottom: -10px;
  left: 70px;
}
.landing-orbit span:nth-child(4) {
  right: 12px;
  bottom: 25px;
  color: #22c55e;
}
@keyframes float {
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}
.landing-section {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 6rem 0;
}
.section-heading {
  max-width: 680px;
  margin-bottom: 2.5rem;
}
.section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.landing-grid article {
  padding: 2rem;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}
.landing-grid article > i {
  font-size: 1.5rem;
  color: var(--diloya-primary);
  margin-bottom: 2rem;
}
.landing-grid h3 {
  font-size: 1.25rem;
  font-weight: 750;
  margin-bottom: 0.7rem;
}
.landing-grid p {
  color: var(--diloya-grey);
  line-height: 1.6;
}
.landing-grid b {
  color: var(--diloya-accent);
  font-size: 0.8rem;
}
.landing-groups {
  width: min(1180px, calc(100% - 2rem));
  padding-inline: 3rem;
  border: 1px solid var(--diloya-border);
  border-radius: 32px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 10%, var(--diloya-card-bg)),
    color-mix(in srgb, var(--diloya-accent) 6%, var(--diloya-card-bg))
  );
  box-shadow: var(--diloya-shadow);
}
.landing-groups .section-heading > p {
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 1.08rem;
  line-height: 1.65;
}
.landing-commerce {
  width: min(1180px, calc(100% - 2rem));
  padding-inline: 3rem;
  border: 1px solid color-mix(in srgb, #22c55e 24%, var(--diloya-border));
  border-radius: 32px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #22c55e 8%, var(--diloya-card-bg)),
    color-mix(in srgb, var(--diloya-primary) 7%, var(--diloya-card-bg))
  );
  box-shadow: var(--diloya-shadow);
}
.landing-commerce .section-heading > p {
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 1.08rem;
  line-height: 1.65;
}
.landing-commerce-highlight {
  display: grid;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.2rem;
  padding: 1.5rem;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--diloya-card-bg) 88%, transparent);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.landing-commerce-highlight > div:first-child {
  position: relative;
  padding-left: 68px;
}
.landing-commerce-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, #22c55e 16%, var(--diloya-card-bg));
  color: #16a34a;
  font-size: 1.25rem;
}
.landing-commerce-highlight small {
  color: #16a34a;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-commerce-highlight h3 {
  margin: 0.2rem 0;
  font-size: 1.15rem;
  font-weight: 850;
}
.landing-commerce-highlight p {
  color: var(--diloya-grey);
  font-size: 0.78rem;
  line-height: 1.5;
}
.landing-commerce-flow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.landing-commerce-flow span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  font-size: 0.68rem;
  font-weight: 800;
}
.landing-commerce-flow span i {
  color: var(--diloya-primary);
}
.landing-commerce-flow > i {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.landing-commerce-grid article {
  box-shadow: 0 10px 25px color-mix(in srgb, #111 5%, transparent);
}
.landing-messages,
.landing-plans {
  width: min(1180px, calc(100% - 2rem));
  padding-inline: 3rem;
  border: 1px solid var(--diloya-border);
  border-radius: 32px;
  box-shadow: var(--diloya-shadow);
}
.landing-messages {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #22c55e 9%, var(--diloya-card-bg)),
    color-mix(in srgb, var(--diloya-primary) 6%, var(--diloya-card-bg))
  );
}
.landing-plans {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #8b5cf6 9%, var(--diloya-card-bg)),
    color-mix(in srgb, #06b6d4 6%, var(--diloya-card-bg))
  );
}
.landing-messages .section-heading > p,
.landing-plans .section-heading > p {
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 1.08rem;
  line-height: 1.65;
}
.landing-messages-icon {
  background: color-mix(in srgb, #22c55e 16%, var(--diloya-card-bg));
  color: #16a34a;
}
.landing-plans-icon {
  background: color-mix(in srgb, #8b5cf6 16%, var(--diloya-card-bg));
  color: #7c3aed;
}
.landing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.landing-plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}
.landing-plan-card.is-featured {
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 30%,
    var(--diloya-border)
  );
  box-shadow: 0 18px 45px
    color-mix(in srgb, var(--diloya-primary) 16%, transparent);
}
.landing-plan-card.is-custom {
  border-style: dashed;
}
.landing-plan-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.landing-plan-card-top small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-plan-card-top h3 {
  margin: 0.25rem 0 0;
  font-size: 1.3rem;
}
.landing-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.landing-plan-badge.is-custom {
  background: color-mix(in srgb, #8b5cf6 14%, var(--diloya-card-bg));
  color: #7c3aed;
}
.landing-plan-card > p {
  margin: 0;
  color: var(--diloya-grey);
  line-height: 1.6;
}
.landing-plan-price {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.landing-plan-price strong {
  font-size: 1.8rem;
  line-height: 1;
}
.landing-plan-price small {
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.landing-plan-limits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.landing-plan-limits span,
.landing-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  font-size: 0.74rem;
  font-weight: 700;
}
.landing-plan-limits i {
  color: var(--diloya-primary);
}
.landing-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.landing-plan-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.landing-plan-notes article {
  padding: 1rem 1.1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--diloya-card-bg) 92%, transparent);
}
.landing-plan-notes article i {
  color: var(--diloya-primary);
  font-size: 1.1rem;
}
.landing-plan-notes h3 {
  margin: 0.6rem 0 0.35rem;
  font-size: 1rem;
}
.landing-plan-notes p {
  margin: 0;
  color: var(--diloya-grey);
  line-height: 1.55;
}
.landing-articles,
.landing-marketplace {
  width: min(1180px, calc(100% - 2rem));
  padding-inline: 3rem;
  border: 1px solid var(--diloya-border);
  border-radius: 32px;
  box-shadow: var(--diloya-shadow);
}
.landing-articles {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #14b8a6 9%, var(--diloya-card-bg)),
    color-mix(in srgb, var(--diloya-primary) 6%, var(--diloya-card-bg))
  );
}
.landing-marketplace {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #eab308 9%, var(--diloya-card-bg)),
    color-mix(in srgb, #f97316 5%, var(--diloya-card-bg))
  );
}
.landing-articles .section-heading > p,
.landing-marketplace .section-heading > p {
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 1.08rem;
  line-height: 1.65;
}
.landing-commerce-icon.landing-articles-icon {
  background: color-mix(in srgb, #14b8a6 16%, var(--diloya-card-bg));
  color: #0f766e;
}
.landing-commerce-icon.landing-marketplace-icon {
  background: color-mix(in srgb, #eab308 17%, var(--diloya-card-bg));
  color: #ca8a04;
}
.donation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.donation-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.donation-card code {
  word-break: break-all;
  color: var(--diloya-primary);
  background: var(--diloya-surface-2);
  padding: 0.6rem;
  border-radius: 8px;
}
.donation-goal {
  padding: 1.5rem;
  border-color: color-mix(in srgb, #e25454 28%, var(--diloya-border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #e25454 8%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.donation-goal-heading,
.donation-goal-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.donation-goal-heading span {
  color: var(--diloya-grey);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.donation-goal-heading h2 {
  margin-top: 0.15rem;
  font-size: 1.55rem;
  font-weight: 850;
}
.donation-goal-heading > strong {
  color: #e25454;
  font-size: 1.4rem;
}
.donation-goal-track {
  height: 14px;
  overflow: hidden;
  margin: 1rem 0;
  border-radius: 999px;
  background: var(--diloya-surface-2);
}
.donation-goal-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e25454, #f08b68);
}
.donation-goal-summary {
  align-items: center;
  font-size: 0.82rem;
}
.donation-goal-summary span {
  color: var(--diloya-grey);
  text-align: right;
}
@media (max-width: 520px) {
  .donation-report-form .columns {
    display: block;
  }
  .donation-report-form .column {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .donation-report-form .is-fullwidth-mobile {
    width: 100%;
  }
  .donation-receipt-upload {
    align-items: stretch;
    flex-direction: column;
  }
  .donation-receipt-filename {
    max-width: 100%;
    margin-left: 0 !important;
    white-space: normal;
  }
  .donation-goal-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  .donation-goal-summary span {
    text-align: left;
  }
}
.donation-report-box {
  margin-top: 2.5rem;
  padding: 1.75rem;
  border-radius: 18px;
  border: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.donation-report-intro {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.donation-report-intro > i {
  font-size: 1.5rem;
  color: #e25454;
  flex: 0 0 auto;
  margin-top: 0.2rem;
}
.donation-report-intro p {
  color: var(--diloya-grey);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
.donation-report-form .columns {
  margin-bottom: 0;
}
.donation-row-rejected {
  opacity: 0.82;
}
.donation-review-comment {
  max-width: 240px;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.donation-actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.donation-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--diloya-grey);
}
.donation-thankyou i {
  font-size: 2rem;
  color: #e25454;
}
.donation-thankyou strong {
  color: var(--diloya-text);
  font-size: 1.1rem;
}
.donation-receipt-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.donation-receipt-filename {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donation-receipt-preview {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.donation-receipt-preview img {
  width: auto;
  max-width: min(100%, 320px);
  max-height: 180px;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  object-fit: contain;
}
.donation-supporters {
  margin-top: 2.5rem;
}
.donation-supporters-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--diloya-grey);
}
.donation-supporters-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.donation-supporter-card {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.donation-supporter-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
}
.donation-supporter-header strong {
  font-size: 0.92rem;
}
.donation-supporter-user {
  font-size: 0.78rem;
  color: var(--diloya-primary);
}
.donation-supporter-amounts {
  font-size: 0.78rem;
  color: var(--diloya-grey);
  margin-top: 0.35rem;
}
.donation-supporter-msg {
  font-size: 0.82rem;
  color: var(--diloya-grey);
  margin-top: 0.4rem;
  line-height: 1.5;
  border-top: 1px solid var(--diloya-border);
  padding-top: 0.4rem;
}
.donation-admin-message {
  max-width: 280px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
}
.donation-row-approved {
  background: color-mix(in srgb, #48c78e 5%, transparent) !important;
}
.donation-row-pending {
  background: color-mix(in srgb, #ffdd57 8%, transparent) !important;
}
.donation-actions-cell {
  white-space: nowrap;
}

.report-row-pending {
  background: color-mix(in srgb, #ffdd57 8%, transparent) !important;
}
.report-row-reviewed {
  background: color-mix(in srgb, #48c78e 5%, transparent) !important;
}
.report-row-dismissed {
  opacity: 0.55;
}
.report-details-cell {
  max-width: 220px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  color: var(--diloya-grey);
}
.report-target-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  max-width: 200px;
}
.report-target-ref {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  display: inline-block;
}
.report-actions-cell {
  white-space: nowrap;
}
.post-report-btn {
  opacity: 0.45;
  transition: opacity 0.15s;
}
.post-report-btn:hover {
  opacity: 1 !important;
  color: #e05c5c !important;
}
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-section > div > p {
  color: var(--diloya-grey);
  font-size: 1.1rem;
  line-height: 1.7;
}
.landing-footer {
  padding: 3rem;
  text-align: center;
  border-top: 1px solid var(--diloya-border);
  color: var(--diloya-grey);
}
.landing-legal-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 1.4rem 0 0.75rem;
}
.landing-legal-links a {
  color: var(--diloya-text);
  font-size: 0.92rem;
  font-weight: 650;
}
.landing-legal-links a:hover {
  color: var(--diloya-primary);
}
.contact-message-new {
  border-left: 4px solid var(--diloya-accent);
}
.contact-body {
  white-space: pre-wrap;
}
@media (max-width: 768px) {
  .landing-nav {
    width: 100%;
    min-height: 3.75rem;
    border-radius: 0;
    padding-inline: 1rem;
  }
  .landing-nav-burger {
    display: block;
  }
  .landing-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--diloya-card-bg);
    border-bottom: 1px solid var(--diloya-border);
    box-shadow: var(--diloya-shadow);
  }
  .landing-nav-menu.is-active {
    display: flex;
  }
  .landing-nav-menu .button {
    width: 100%;
    justify-content: flex-start;
  }
  .landing-services-menu {
    width: 100%;
  }
  .landing-services-trigger > i {
    margin-left: auto;
  }
  .landing-services-panel {
    position: static;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem;
    border-radius: 15px;
    box-shadow: none;
    transform: none;
  }
  .landing-services-panel.is-active {
    display: block;
    animation: none;
  }
  .landing-services-heading {
    display: block;
    padding: 0.25rem 0.35rem 0.65rem;
  }
  .landing-services-heading strong {
    display: none;
  }
  .landing-services-grid {
    grid-template-columns: 1fr;
    padding-top: 0.45rem;
  }
  .landing-service-link {
    padding: 0.65rem;
  }
  .landing-hero {
    grid-template-columns: 1fr;
    margin-top: 3.75rem;
    padding: 3rem 0;
  }
  .landing-copy h1 {
    font-size: 2.8rem;
  }
  .landing-visual {
    display: none;
  }
  .landing-grid,
  .contact-section {
    grid-template-columns: 1fr;
  }
  .landing-section {
    padding: 4rem 0;
  }
  .landing-groups {
    width: calc(100% - 2rem);
    padding-inline: 1rem;
    border-radius: 24px;
  }
  .landing-commerce {
    width: calc(100% - 2rem);
    padding-inline: 1rem;
    border-radius: 24px;
  }
  .landing-articles,
  .landing-marketplace {
    width: calc(100% - 2rem);
    padding-inline: 1rem;
    border-radius: 24px;
  }
  .landing-commerce-highlight {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .landing-messages,
  .landing-plans {
    width: calc(100% - 2rem);
    padding-inline: 1rem;
    border-radius: 24px;
  }
  .landing-plans-grid,
  .landing-plan-notes {
    grid-template-columns: 1fr;
  }
  .landing-commerce-highlight > div:first-child {
    padding-left: 0;
    padding-top: 62px;
  }
  .landing-commerce-flow {
    justify-content: flex-start;
  }
  .landing-commerce-flow > i {
    display: none;
  }
  .contact-section {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.landing-page) {
    scroll-behavior: auto;
  }
}

/* Legal pages */
.legal-page {
  overflow-x: hidden;
}
.legal-nav .button.is-active {
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
}
.legal-nav .theme-toggle {
  flex: 0 0 auto;
}
.legal-page main {
  width: min(1180px, calc(100% - 2rem));
  margin: 76px auto 0;
}
.legal-hero {
  position: relative;
  padding: 6.5rem max(1rem, 6vw) 5.5rem;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-top: 0;
  border-radius: 0 0 36px 36px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 14%, var(--diloya-card-bg)),
    color-mix(in srgb, var(--diloya-accent) 8%, var(--diloya-card-bg))
  );
}
.legal-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -60px;
  top: -80px;
  border: 1px solid color-mix(in srgb, var(--diloya-primary) 30%, transparent);
  border-radius: 44% 56% 63% 37%;
  transform: rotate(20deg);
}
.legal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.2rem;
  color: var(--diloya-primary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 850px;
  font-size: clamp(2.7rem, 6vw, 5.5rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.legal-hero p {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 1.5rem 0;
  color: var(--diloya-grey);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}
.legal-hero small {
  color: var(--diloya-grey);
  font-weight: 650;
}
.legal-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: 4.5rem;
  padding: 5rem 1rem 6rem;
}
.legal-index {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}
.legal-index strong {
  margin-bottom: 0.7rem;
  padding: 0.3rem 0.6rem;
  color: var(--diloya-text);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.legal-index a {
  padding: 0.52rem 0.6rem;
  border-radius: 9px;
  color: var(--diloya-grey);
  font-size: 0.9rem;
}
.legal-index a:hover {
  color: var(--diloya-primary);
  background: var(--diloya-hover);
}
.legal-document section {
  position: relative;
  padding-bottom: 3.5rem;
  scroll-margin-top: 100px;
}
.legal-document section + section {
  padding-top: 3.5rem;
  border-top: 1px solid var(--diloya-border);
}
.legal-section-number {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: var(--diloya-accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.legal-document h2 {
  margin-bottom: 1.2rem;
  color: var(--diloya-text);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.legal-document p,
.legal-document li {
  color: var(--diloya-grey);
  font-size: 1.04rem;
  line-height: 1.82;
}
.legal-document p + p {
  margin-top: 1rem;
}
.legal-document ul {
  margin: 1.2rem 0 0 1.15rem;
}
.legal-document li {
  margin-bottom: 0.65rem;
  padding-left: 0.3rem;
}
.legal-document strong {
  color: var(--diloya-text);
}
.legal-document a {
  color: var(--diloya-primary);
  font-weight: 650;
}
.legal-document code {
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.legal-callout {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 30%, var(--diloya-border));
  border-radius: 16px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
}
.legal-callout > i {
  margin-top: 0.35rem;
  color: var(--diloya-primary);
}
.legal-callout p {
  font-size: 0.96rem;
}
.legal-cookie-table {
  margin: 1.4rem 0;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.legal-cookie-table > div {
  display: grid;
  grid-template-columns: 1fr 2.4fr 1fr;
  gap: 1rem;
  padding: 1rem 1.2rem;
  align-items: center;
}
.legal-cookie-head {
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.legal-cookie-table > div:not(.legal-cookie-head) span {
  color: var(--diloya-grey);
  line-height: 1.5;
}
.legal-contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    var(--diloya-primary),
    color-mix(in srgb, var(--diloya-primary) 65%, var(--diloya-accent))
  );
  color: #fff;
  box-shadow: var(--diloya-shadow);
}
.legal-contact-card > i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.2rem;
}
.legal-contact-card strong,
.legal-contact-card p,
.legal-contact-card a {
  color: #fff;
}
.legal-contact-card p {
  margin: 0;
  font-size: 0.94rem;
}
.legal-footer {
  width: min(1120px, calc(100% - 2rem));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
  padding: 2.5rem 0;
  border-top: 1px solid var(--diloya-border);
  color: var(--diloya-grey);
}
.legal-footer > div p {
  margin-top: 0.55rem;
  font-size: 0.88rem;
}
.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.legal-footer nav a {
  color: var(--diloya-grey);
  font-weight: 650;
}
.legal-footer nav a:hover {
  color: var(--diloya-primary);
}
@media (max-width: 768px) {
  .legal-page main {
    width: 100%;
    margin-top: 3.75rem;
  }
  .legal-hero {
    padding: 4rem 1.25rem 3.5rem;
    border-radius: 0 0 26px 26px;
  }
  .legal-hero h1 {
    font-size: 2.75rem;
  }
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.25rem 4rem;
  }
  .legal-index {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-index strong {
    grid-column: 1/-1;
  }
  .legal-cookie-table > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .legal-cookie-head {
    display: none !important;
  }
  .legal-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 2rem 1rem;
  }
  .legal-nav .landing-nav-menu .theme-toggle {
    align-self: flex-start;
    margin: 0.35rem 0.7rem;
  }
}

/* ---- Admin ---- */
.admin-stat-card {
  border-radius: 12px;
  transition: transform 0.2s;
}

.admin-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.admin-online-card {
  border-color: color-mix(in srgb, #20a474 30%, var(--diloya-border));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #20a474 9%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.admin-online-card .icon {
  position: relative;
}
.admin-online-card .icon:after {
  position: absolute;
  right: 4px;
  bottom: 7px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 50%;
  background: #20a474;
  content: "";
}
.platform-announcement-slot {
  position: relative;
  z-index: 28;
  width: min(1120px, calc(100% - 1.5rem));
  margin: 120px auto 0;
}
.platform-announcement {
  --announcement-color: #3975d5;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.78rem 1rem;
  border: 1px solid
    color-mix(in srgb, var(--announcement-color) 28%, var(--diloya-border));
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--announcement-color) 9%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  box-shadow: 0 7px 22px color-mix(in srgb, #111 7%, transparent);
  color: var(--diloya-text);
}
.platform-announcement.is-success {
  --announcement-color: #21865f;
}
.platform-announcement.is-warning {
  --announcement-color: #d18a24;
}
.platform-announcement-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(
    in srgb,
    var(--announcement-color) 14%,
    var(--diloya-card-bg)
  );
  color: var(--announcement-color);
}
.platform-announcement > div {
  min-width: 0;
  flex: 1;
}
.platform-announcement strong {
  display: block;
  font-size: 0.82rem;
}
.platform-announcement p {
  color: var(--diloya-grey);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.platform-announcement a {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--announcement-color);
  font-size: 0.72rem;
  font-weight: 800;
}
.platform-announcement-close {
  border: 0;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.admin-announcement-panel {
  border-radius: 20px;
}
.admin-announcement-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.admin-announcement-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.admin-announcement-head > div {
  min-width: 0;
  flex: 1;
}
.admin-announcement-head h3 {
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 850;
}
.admin-announcement-head p {
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.announcement-audience-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.announcement-recipient-picker {
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
  background: var(--diloya-surface-2);
}
.announcement-user-results {
  overflow: hidden;
  margin-top: 0.3rem;
  border: 1px solid var(--diloya-border);
  border-radius: 11px;
  background: var(--diloya-card-bg);
}
.announcement-user-result {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--diloya-border);
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
}
.announcement-user-result:last-child {
  border-bottom: 0;
}
.announcement-user-result img,
.announcement-selected-user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.announcement-selected-users {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.announcement-selected-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  font-size: 0.7rem;
}
.announcement-selected-user button {
  border: 0;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.admin-announcement-preview {
  margin-top: 0.7rem;
  box-shadow: none;
}
.admin-security-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.admin-security-kicker {
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-security-panel {
  border-radius: 20px;
}
.admin-security-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-security-panel-head > div {
  min-width: 0;
}
.admin-security-filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-end;
}
.admin-security-stat {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}
.admin-security-stat > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 1.1rem;
}
.admin-security-stat small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-security-stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
}
.admin-security-stat p {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.admin-security-table code {
  font-size: 0.7rem;
  word-break: break-all;
}
.admin-security-table td,
.admin-security-table th {
  vertical-align: middle;
}
.admin-security-table .tag {
  font-weight: 800;
}
.admin-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}
.admin-platform-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  cursor: pointer;
}
.admin-platform-option:has(input:checked) {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
}
.admin-analytics {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--diloya-primary) 6%, var(--diloya-card-bg)),
    var(--diloya-card-bg) 35%
  );
  box-shadow: 0 18px 50px color-mix(in srgb, #111 8%, transparent);
}
.admin-analytics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
}
.admin-analytics-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.85rem;
}
.admin-analytics-title > span {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 1.1rem;
}
.admin-analytics-title > div {
  min-width: 0;
}
.admin-analytics-title small {
  color: var(--diloya-primary);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-analytics-title h3 {
  color: var(--diloya-text);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.admin-analytics-title p {
  color: var(--diloya-grey);
  font-size: 0.76rem;
}
.admin-analytics-refresh {
  border-color: var(--diloya-border);
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  font-weight: 750;
}
.admin-analytics-metrics {
  display: grid;
  padding: 0 1.35rem 1.2rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}
.admin-analytics-metric {
  --metric-color: var(--diloya-primary);
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid
    color-mix(in srgb, var(--metric-color) 20%, var(--diloya-border));
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--metric-color) 9%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.admin-analytics-metric.is-blue {
  --metric-color: #4285e8;
}
.admin-analytics-metric.is-green {
  --metric-color: #20a474;
}
.admin-analytics-metric.is-orange {
  --metric-color: #e68a2e;
}
.admin-analytics-metric.is-pink {
  --metric-color: #d75d92;
}
.admin-analytics-metric > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(
    in srgb,
    var(--metric-color) 14%,
    var(--diloya-card-bg)
  );
  color: var(--metric-color);
}
.admin-analytics-metric > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.admin-analytics-metric small {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-analytics-metric strong {
  color: var(--diloya-text);
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.admin-analytics-metric strong b {
  font: inherit;
}
.admin-analytics-metric p {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-analytics-detail-grid {
  display: grid;
  padding: 1.2rem 1.35rem 1.35rem;
  border-top: 1px solid var(--diloya-border);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  background: color-mix(in srgb, var(--diloya-surface-2) 45%, transparent);
}
.admin-analytics-detail {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 17px;
  background: var(--diloya-card-bg);
  box-shadow: 0 6px 18px color-mix(in srgb, #111 4%, transparent);
}
.admin-analytics-detail h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  color: var(--diloya-text);
  font-size: 0.78rem;
  font-weight: 850;
}
.admin-analytics-detail h4 span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.7rem;
}
.admin-analytics-detail .progress {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--diloya-surface-2);
}
.admin-analytics-detail [data-analytics-list="sharers"] > div {
  align-items: flex-start;
  gap: 0.5rem;
  border-bottom: 1px solid var(--diloya-border);
  font-size: 0.68rem;
}
.admin-analytics-detail [data-analytics-list="sharers"] > div:last-child {
  border-bottom: 0;
}
.admin-analytics-detail [data-analytics-list="sharers"] strong {
  text-align: right;
}
@media (max-width: 1100px) {
  .admin-analytics-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-analytics-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .admin-analytics {
    border-radius: 20px;
  }
  .admin-analytics-head {
    align-items: flex-start;
    padding: 1rem;
  }
  .admin-analytics-title > span {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .admin-analytics-title p {
    max-width: 230px;
  }
  .admin-analytics-refresh {
    padding-inline: 0.65rem;
  }
  .admin-analytics-refresh .mr-2 {
    margin-right: 0 !important;
  }
  .admin-analytics-refresh {
    font-size: 0;
  }
  .admin-analytics-refresh i {
    font-size: 0.75rem;
  }
  .admin-analytics-metrics {
    padding: 0 0.8rem 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .admin-analytics-metric {
    padding: 0.7rem;
    gap: 0.5rem;
  }
  .admin-analytics-metric:last-child {
    grid-column: 1/-1;
  }
  .admin-analytics-metric > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .admin-analytics-metric strong {
    font-size: 1.25rem;
  }
  .admin-analytics-detail-grid {
    padding: 0.8rem;
    grid-template-columns: 1fr;
  }
  .admin-analytics-detail {
    padding: 0.85rem;
  }
}

/* ---- Notifications ---- */
.notifications-container {
  width: 100%;
  max-width: 760px;
}
.notifications-panel {
  width: 100%;
  min-width: 0;
}
.notifications-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.notifications-header-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 1.1rem;
}
.notifications-header > div {
  min-width: 0;
}
.notifications-header .title {
  color: var(--diloya-text);
  overflow-wrap: anywhere;
}
.notifications-header p {
  color: var(--diloya-grey);
  font-size: 0.8rem;
  line-height: 1.35;
}
.notification-item {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--diloya-border);
  transition: background 0.15s;
}

.notification-item.is-unread {
  border-left: 3px solid var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
}
.notification-item .media {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
}
.notification-item .media-left {
  flex: 0 0 auto;
  margin-right: 0.75rem;
}
.notification-item-content {
  min-width: 0;
  overflow: hidden;
}
.notification-item-content p,
.notification-item-content a {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.notification-item-summary {
  line-height: 1.4;
}
.notification-share-message {
  white-space: pre-wrap;
}
.live-update-banner {
  position: fixed;
  z-index: 390;
  top: 5.25rem;
  left: 50%;
  display: flex;
  width: min(440px, calc(100vw - 2rem));
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 2.35rem 0.7rem 0.85rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 30%, var(--diloya-border));
  border-radius: 999px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  animation: live-update-in 0.2s ease-out;
}
.live-update-banner > span {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.live-update-banner > span i {
  color: var(--diloya-primary);
}
.live-update-banner > .delete {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
}
@keyframes live-update-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (max-width: 768px) {
  .live-update-banner {
    top: 4.35rem;
    width: calc(100vw - 1.25rem);
  }
}
.pwa-install-invite {
  position: fixed;
  z-index: 400;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: min(430px, calc(100vw - 2rem));
  gap: 0.9rem;
  padding: 1.2rem;
  padding-top: 1.1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 28%, var(--diloya-border));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 95% 5%,
      color-mix(in srgb, var(--diloya-primary) 18%, transparent),
      transparent 35%
    ),
    var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}
.pwa-install-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pwa-install-brand img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
}
.pwa-install-brand span {
  display: flex;
  flex-direction: column;
}
.pwa-install-brand small {
  color: var(--diloya-primary);
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}
.pwa-install-brand strong {
  color: var(--diloya-text);
  font-size: 1.05rem;
}
.push-permission-invite-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 1.2rem;
}
.pwa-install-invite p {
  color: var(--diloya-grey);
  font-size: 0.76rem;
  line-height: 1.35;
}
.pwa-install-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pwa-install-benefits span {
  padding: 0.32rem 0.5rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-grey);
  font-size: 0.62rem;
  font-weight: 700;
}
.pwa-install-benefits i {
  color: var(--diloya-primary);
}
.pwa-install-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}
.pwa-install-actions .button {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}
.pwa-install-invite > .delete {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
}
@media (max-width: 768px) {
  .pwa-install-invite {
    right: 0.65rem;
    bottom: calc(0.65rem + env(safe-area-inset-bottom));
    width: calc(100vw - 1.3rem);
    border-radius: 20px;
  }
  .pwa-install-actions {
    flex-direction: column-reverse;
  }
  .pwa-install-actions .button {
    width: 100%;
    min-height: 46px;
  }
}
.notification-item-time {
  flex: 0 0 auto;
  margin-left: 0.65rem;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .notifications-page {
    padding: 1rem 0.75rem 5.75rem;
  }
  .notifications-container {
    max-width: 100%;
    padding: 0;
  }
  .notification-item {
    padding: 0.85rem;
  }
  .notification-item .media-left {
    margin-right: 0.65rem;
  }
  .notification-item-time {
    margin-left: 0.45rem;
  }
}

@media (max-width: 420px) {
  .notifications-header {
    align-items: flex-start;
  }
  .notification-item .media {
    flex-wrap: wrap;
  }
  .notification-item-content {
    flex: 1 1 calc(100% - 48px);
  }
  .notification-item-time {
    flex: 0 0 100%;
    margin: 0.4rem 0 0 48px;
  }
}

/* ---- Trending ---- */
.trending-item {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--diloya-border);
  text-decoration: none;
  color: inherit;
}

.trending-item:last-child {
  border-bottom: none;
}

.trending-item:hover {
  background: var(--diloya-hover);
}

/* ---- Toast ---- */
.diloya-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #14171a;
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  z-index: 9999;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s;
}

.diloya-toast.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.diloya-alert-modal {
  position: fixed;
  inset: 0;
  z-index: 30050;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, #0f172a 28%, transparent);
  backdrop-filter: blur(2px);
  animation: diloya-alert-in 0.18s ease-out;
}
.diloya-alert-modal.is-closing {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.diloya-alert-card {
  position: relative;
  display: grid;
  width: min(430px, calc(100vw - 2rem));
  grid-template-columns: 44px minmax(0, 1fr) 30px;
  gap: 0.8rem;
  align-items: center;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 24px 75px rgba(15, 23, 42, 0.32);
}
.diloya-alert-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
  font-size: 1.25rem;
}
.diloya-alert-modal.is-error .diloya-alert-icon {
  background: color-mix(in srgb, #e0245e 12%, transparent);
  color: #e0245e;
}
.diloya-alert-modal.is-success .diloya-alert-icon {
  background: color-mix(in srgb, #17a86b 12%, transparent);
  color: #17a86b;
}
.diloya-alert-card strong,
.diloya-alert-card p {
  display: block;
}
.diloya-alert-card p {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.78rem;
  line-height: 1.35;
}
.diloya-alert-card button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  cursor: pointer;
}
.diloya-alert-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  transform-origin: left;
  animation: diloya-alert-progress 3.4s linear forwards;
}
.diloya-alert-modal.is-error .diloya-alert-progress {
  animation-duration: 5.2s;
  color: #e0245e;
}
@keyframes diloya-alert-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes diloya-alert-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Notificación global única; los diálogos de confirmación permanecen modales. */
.diloya-system-toast {
  position: fixed;
  z-index: 30050;
  top: 5.5rem;
  right: 1.25rem;
  display: grid;
  width: min(420px, calc(100vw - 2rem));
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 0.75rem;
  align-items: center;
  overflow: hidden;
  padding: 0.9rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
  animation: diloya-system-toast-in 0.18s ease-out;
}
.diloya-system-toast.is-closing {
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.diloya-system-toast-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
}
.diloya-system-toast.is-success .diloya-system-toast-icon {
  background: color-mix(in srgb, #17a86b 12%, transparent);
  color: #15865a;
}
.diloya-system-toast.is-error .diloya-system-toast-icon {
  background: color-mix(in srgb, #e0245e 12%, transparent);
  color: #d51f55;
}
.diloya-system-toast strong,
.diloya-system-toast p {
  display: block;
  margin: 0;
}
.diloya-system-toast strong {
  font-size: 0.82rem;
}
.diloya-system-toast p {
  margin-top: 0.12rem;
  color: var(--diloya-grey);
  font-size: 0.78rem;
  line-height: 1.35;
}
.diloya-system-toast button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.diloya-system-toast button:hover {
  background: var(--diloya-hover);
  color: var(--diloya-text);
}
.diloya-system-toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  transform-origin: left;
  animation: diloya-alert-progress 3.4s linear forwards;
}
.diloya-system-toast.is-error .diloya-system-toast-progress {
  animation-duration: 5.2s;
  color: #e0245e;
}
@keyframes diloya-system-toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .diloya-system-toast {
    top: auto;
    right: 1rem;
    bottom: 5.5rem;
  }
}

/* Avisos breves del centro comercial */
.commerce-toast {
  position: fixed;
  top: 5.5rem;
  right: 1.25rem;
  z-index: 30050;
  display: grid;
  width: min(420px, calc(100vw - 2rem));
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
  color: var(--diloya-text);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.commerce-toast.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.6rem);
}

.commerce-toast-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #16a34a 14%, var(--diloya-card-bg));
  color: #15803d;
}

.commerce-toast.is-danger .commerce-toast-icon {
  background: color-mix(in srgb, #dc2626 14%, var(--diloya-card-bg));
  color: #dc2626;
}

.commerce-toast strong,
.commerce-toast p {
  display: block;
  margin: 0;
}

.commerce-toast strong {
  font-size: 0.82rem;
}

.commerce-toast p {
  margin-top: 0.12rem;
  color: var(--diloya-grey);
  font-size: 0.78rem;
  line-height: 1.35;
}

.commerce-toast button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}

.commerce-toast button:hover {
  background: var(--diloya-hover);
  color: var(--diloya-text);
}

.catalog-import-help-modal {
  z-index: 10000;
}

@media (max-width: 768px) {
  .commerce-toast {
    top: auto;
    right: 1rem;
    bottom: 5.5rem;
  }
}

/* ---- Sidebar ---- */
.sidebar-right .box {
  border-radius: 12px;
  border: 1px solid var(--diloya-border);
}

/* ---- General tweaks ---- */
.box {
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid var(--diloya-border);
}

.button.is-primary {
  background-color: var(--diloya-primary);
  border-color: transparent;
}

.button.is-primary:hover {
  background-color: #1a7bc5;
}

/* Estado de seguimiento legible tanto en tema claro como oscuro. */
.button.is-primary.is-following,
.button.is-primary.is-following:hover,
.button.is-primary.is-following:focus {
  color: var(--diloya-primary) !important;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 65%,
    var(--diloya-border)
  ) !important;
  box-shadow: none;
}

.follow-btn,
.follow-profile-btn {
  min-width: 6.5rem;
}

.navbar-dropdown {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Post images */
.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.post-image {
  border-radius: 8px;
  max-height: 300px;
  object-fit: cover;
  width: 100%;
}

.post-image-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--diloya-surface-2);
}
.post-images.is-single {
  display: flex;
  justify-content: center;
}
.post-images.is-single .post-image-item {
  width: fit-content;
  max-width: min(100%, 520px);
  max-height: 560px;
  background: transparent;
}
.post-images.is-single .image-comment-trigger {
  width: fit-content;
  max-width: 100%;
  height: auto;
  margin: auto;
}
.post-images.is-single .image-comment-trigger .post-image,
.post-images.is-single .post-image-item > .post-image {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: 560px;
  object-fit: contain;
  margin: auto;
}

.image-comment-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: white;
  cursor: pointer;
}

.image-comment-trigger .post-image {
  display: block;
  height: 100%;
  min-height: 150px;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.image-comment-hint {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(7, 10, 13, 0.72);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 750;
  backdrop-filter: blur(10px);
}

.image-comment-trigger:hover .post-image,
.image-comment-trigger:focus-visible .post-image {
  transform: scale(1.02);
  filter: brightness(0.88);
}
.image-comment-trigger:focus-visible {
  outline: 3px solid var(--diloya-primary);
  outline-offset: -3px;
}

.image-comments-modal {
  z-index: 1100;
}
.image-comments-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  width: min(1120px, calc(100vw - 2rem));
  height: min(760px, calc(100vh - 3rem));
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}
.image-comments-close {
  position: absolute;
  z-index: 4;
  top: 0.85rem;
  right: 0.85rem;
}
.image-comments-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  background: #050608;
}
.image-comments-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.zoomable-image-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
}
.zoomable-image-stage > img {
  transform-origin: center;
  transition: transform 0.08s linear;
  will-change: transform;
}
.image-zoom-controls {
  position: absolute;
  z-index: 5;
  bottom: 0.75rem;
  left: 50%;
  display: flex;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.76);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}
.image-zoom-controls button {
  display: grid;
  width: 42px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.image-zoom-controls button:last-child {
  border-right: 0;
}
.zoomable-image-stage.is-photo-maximized {
  position: fixed !important;
  z-index: 2200 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  background: #030406 !important;
  border-radius: 0 !important;
}
.zoomable-image-stage.is-photo-maximized > img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.zoomable-image-stage.is-photo-maximized .image-zoom-controls {
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
}
.image-comments-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--diloya-card-bg);
}
.image-comments-panel > header {
  padding: 1.25rem 3.5rem 1rem 1.25rem;
  border-bottom: 1px solid var(--diloya-border);
}
.image-comments-kicker {
  margin-bottom: 0.15rem;
  color: var(--diloya-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.image-comments-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.35rem 1.1rem;
}
.image-comment-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.image-comment-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--diloya-surface-2);
  object-fit: cover;
}
.image-comment-body {
  min-width: 0;
  flex: 1;
}
.image-comment-body p {
  color: var(--diloya-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.image-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
}
.image-comment-meta a,
.image-comment-meta strong {
  overflow: hidden;
  color: var(--diloya-text);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-comment-meta span,
.image-comment-meta time {
  color: var(--diloya-grey);
  white-space: nowrap;
}
.image-comment-meta time {
  margin-left: auto;
  font-size: 0.68rem;
}
.image-comments-empty,
.image-comments-loading {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  padding: 2rem;
  color: var(--diloya-grey);
  text-align: center;
}
.image-comments-empty i {
  margin-bottom: 0.35rem;
  color: var(--diloya-primary);
  font-size: 2rem;
}
.image-comments-empty strong {
  color: var(--diloya-text);
}
.image-comments-empty span {
  font-size: 0.78rem;
}
.image-comments-more {
  align-self: center;
  margin: 0.55rem;
}
.image-comment-form {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.image-comment-form .textarea {
  min-height: 4.6rem;
  resize: none;
}
.image-comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .image-comment-hint {
    right: 0.45rem;
    bottom: 0.45rem;
    padding: 0.35rem 0.55rem;
  }
  .image-comments-modal.is-active {
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }
  .image-comments-dialog {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(190px, 38dvh) minmax(0, 1fr);
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .image-comments-preview {
    padding: 0;
  }
  .image-comments-panel {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
  }
  .image-comments-panel > header {
    flex: 0 0 auto;
    padding: 0.7rem 3.2rem 0.6rem 0.9rem;
  }
  .image-comments-list {
    min-height: 0;
    padding-inline: 0.9rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .image-comment-item {
    gap: 0.55rem;
    padding: 0.65rem 0;
  }
  .image-comment-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .image-comment-form {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.1);
  }
  .image-comment-form .textarea {
    min-height: 56px;
    max-height: 80px;
  }
  .image-comment-form-footer .button {
    min-height: 40px;
  }
  .image-zoom-controls {
    bottom: 0.55rem;
  }
  .image-zoom-controls button {
    width: 46px;
    height: 40px;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--diloya-border);
  border-radius: 3px;
}

/* Gap utility */
.gap-2 {
  gap: 8px;
}

/* Loading spinner */
.diloya-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(26, 140, 216, 0.3);
  border-top-color: var(--diloya-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .section {
    padding: 1rem 0.75rem;
  }
  .profile-cover {
    height: 120px;
  }
}

/* ---- Error pages ---- */
.diloya-error-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.error-navbar .navbar-menu {
  max-width: 1120px;
  margin-inline: auto;
}

.error-main {
  position: relative;
  min-height: calc(100vh - 3.25rem);
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vw, 7rem) 1.25rem;
  isolation: isolate;
}

.error-main::before,
.error-main::after {
  position: absolute;
  z-index: -1;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  content: "";
  filter: blur(20px);
  opacity: 0.25;
}

.error-main::before {
  top: -13rem;
  right: -9rem;
  background: color-mix(in srgb, var(--diloya-primary) 38%, transparent);
}

.error-main::after {
  bottom: -17rem;
  left: -10rem;
  background: color-mix(in srgb, var(--diloya-accent) 30%, transparent);
}

.error-shell {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 8vw, 7rem);
}

.error-copy {
  max-width: 610px;
}

.error-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding: 0.55rem 0.85rem;
  color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 23%, var(--diloya-border));
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.error-copy h1 {
  margin-bottom: 1.3rem;
  color: var(--diloya-text);
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.error-message {
  max-width: 560px;
  margin-bottom: 2rem;
  color: var(--diloya-grey);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.75;
}

.error-copy .buttons {
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.error-copy .button {
  min-height: 3rem;
  padding-inline: 1.25rem;
  border-radius: 12px;
  font-weight: 750;
  box-shadow: none;
}

.error-copy .button.is-primary {
  box-shadow: 0 12px 30px
    color-mix(in srgb, var(--diloya-primary) 25%, transparent);
}

.error-help {
  color: var(--diloya-grey);
  font-size: 0.9rem;
}

.error-help a {
  color: var(--diloya-primary);
  font-weight: 700;
}

.error-visual {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.error-orbit {
  position: absolute;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 50%;
}

.error-orbit-outer {
  inset: 2%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--diloya-primary) 10%, transparent),
    transparent 65%
  );
  animation: error-pulse 5s ease-in-out infinite;
}

.error-orbit-inner {
  inset: 19%;
  border-style: dashed;
  animation: error-spin 24s linear infinite;
}

.error-visual-center {
  position: relative;
  z-index: 2;
  width: 9.5rem;
  height: 9.5rem;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(
    145deg,
    var(--diloya-primary),
    var(--diloya-accent)
  );
  border: 10px solid color-mix(in srgb, var(--diloya-card-bg) 82%, transparent);
  border-radius: 38% 62% 58% 42%;
  font-size: 3.4rem;
  box-shadow: 0 25px 60px
    color-mix(in srgb, var(--diloya-primary) 32%, transparent);
  transform: rotate(-5deg);
}

.error-float {
  position: absolute;
  z-index: 3;
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  color: var(--diloya-primary);
  background: var(--diloya-card-bg);
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  box-shadow: var(--diloya-shadow);
  font-size: 1.15rem;
  animation: error-float 4s ease-in-out infinite;
}

.error-float-home {
  top: 10%;
  left: 14%;
}
.error-float-search {
  top: 24%;
  right: 4%;
  animation-delay: -1.3s;
}
.error-float-chat {
  right: 16%;
  bottom: 8%;
  animation-delay: -2.6s;
}

.error-dot {
  position: absolute;
  z-index: 2;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--diloya-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 7px
    color-mix(in srgb, var(--diloya-accent) 12%, transparent);
}

.error-dot-one {
  right: 15%;
  top: 14%;
}
.error-dot-two {
  bottom: 20%;
  left: 9%;
  width: 0.55rem;
  height: 0.55rem;
}

@keyframes error-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes error-pulse {
  50% {
    transform: scale(1.035);
    opacity: 0.75;
  }
}
@keyframes error-float {
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

@media (max-width: 900px) {
  .error-nav-actions {
    display: flex;
    gap: 0.5rem;
  }
  .error-nav-actions .button {
    flex: 1;
  }
  .error-main {
    padding: 3rem 1.25rem 4rem;
  }
  .error-shell {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  .error-copy {
    margin-inline: auto;
  }
  .error-copy .buttons {
    justify-content: center;
  }
  .error-visual {
    width: min(310px, 82vw);
    grid-row: 1;
  }
  .error-visual-center {
    width: 7.25rem;
    height: 7.25rem;
    font-size: 2.5rem;
  }
  .error-float {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .error-copy h1 {
    font-size: 2.65rem;
  }
  .error-copy .buttons {
    flex-direction: column;
  }
  .error-copy .button {
    width: 100%;
  }
  .error-help {
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error-orbit,
  .error-float {
    animation: none;
  }
}

/* Authenticated navigation */
.diloya-navbar {
  background: var(--diloya-navbar) !important;
  border-bottom-color: var(--diloya-border);
  backdrop-filter: blur(18px) saturate(150%);
}
.auth-primary-nav {
  align-items: center;
  gap: 0.2rem;
  padding-left: 1rem;
}
.auth-primary-nav .navbar-item {
  margin-block: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
}
.auth-primary-menu {
  position: relative;
}
.auth-primary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--diloya-border);
  background: var(--diloya-surface-2) !important;
  color: var(--diloya-text) !important;
  cursor: pointer;
}
.auth-primary-toggle::after {
  border-color: var(--diloya-grey);
}
.auth-primary-dropdown {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 340px;
  max-height: calc(100dvh - 5rem);
  padding: 0.55rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.22);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, #fff 88%, var(--diloya-grey)) transparent;
}
.auth-primary-menu.is-active .auth-primary-dropdown {
  display: flex;
}
.auth-primary-dropdown .navbar-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
  color: var(--diloya-text) !important;
  justify-content: flex-start;
}
.auth-primary-dropdown .navbar-item > span:last-child,
.auth-primary-dropdown .navbar-item > .auth-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}
.auth-primary-dropdown .navbar-item > span:last-child > strong,
.auth-primary-dropdown .navbar-item > span:last-child > small,
.auth-primary-dropdown .navbar-item > .auth-menu-text > strong,
.auth-primary-dropdown .navbar-item > .auth-menu-text > small {
  display: block;
}
.auth-primary-dropdown .navbar-item small {
  color: var(--diloya-grey);
  font-size: 0.66rem;
}
.auth-primary-dropdown .auth-menu-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.auth-primary-dropdown .navbar-divider {
  margin: 0.35rem 0;
}
.auth-primary-nav .navbar-item.is-current {
  color: var(--diloya-primary) !important;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 11%,
    transparent
  ) !important;
}

.content-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}

.content-switcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  color: var(--diloya-grey);
  font-size: 0.86rem;
  font-weight: 750;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.content-switcher a:hover {
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 7%, transparent);
}

.content-switcher a.is-active {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}

.interest-topic-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 230px;
  padding: 0.75rem;
  overflow-y: auto;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
}

.interest-topic-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.interest-topic-option input {
  position: static;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--diloya-primary);
  cursor: pointer;
}

.interest-topic-option span,
.interest-topic-list span {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  font-size: 0.76rem;
  font-weight: 700;
}

.interest-topic-option input:checked + span {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}

.interest-topic-option input:focus-visible + span {
  outline: 2px solid var(--diloya-primary);
  outline-offset: 2px;
}

.interest-topic-option:has(input:focus-visible) {
  border-radius: 999px;
  outline: 2px solid var(--diloya-primary);
  outline-offset: 2px;
}

.interest-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.personalized-recommendations {
  padding: 0.9rem;
}

.personalized-recommendations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.personalized-recommendations-head small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.personalized-recommendations-head h3 {
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 850;
}

.personalized-recommendations-head > i {
  color: var(--diloya-primary);
}

.personalized-recommendation {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--diloya-border);
}

.personalized-recommendation:last-child {
  border-bottom: 0;
}

.personalized-recommendation-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  flex: 1;
  gap: 0.55rem;
  min-width: 0;
  color: var(--diloya-text);
}

.personalized-recommendation-main img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--diloya-surface-2);
}

.personalized-recommendation-main strong,
.personalized-recommendation-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personalized-recommendation-main strong {
  font-size: 0.76rem;
}

.personalized-recommendation-main small {
  color: var(--diloya-grey);
  font-size: 0.66rem;
}

.personalized-recommendation-main em {
  display: inline-flex;
  margin-top: 0.2rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 750;
}

.personalized-recommendation .follow-btn,
.personalized-recommendation-open {
  display: grid;
  flex: none;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
}

.personalized-recommendation .personalized-recommendation-follow {
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 28%, var(--diloya-border));
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  box-shadow: none;
  font-size: 0.68rem;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.personalized-recommendation .personalized-recommendation-follow:hover,
.personalized-recommendation .personalized-recommendation-follow:focus-visible {
  border-color: var(--diloya-primary);
  background: var(--diloya-primary);
  color: #fff;
  box-shadow: 0 5px 14px
    color-mix(in srgb, var(--diloya-primary) 26%, transparent);
  transform: translateY(-1px);
}

.personalized-recommendation-open {
  color: var(--diloya-grey);
}

#createGroupModal {
  z-index: 16000;
  align-items: flex-start;
  padding: 1rem;
  overflow-y: auto;
}

#createGroupModal .modal-card {
  width: min(680px, 100%);
  max-height: calc(100dvh - 2rem);
  margin: auto;
}

#createGroupModal .modal-card > form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

#createGroupModal .modal-card-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#createGroupModal .modal-card-head,
#createGroupModal .modal-card-foot {
  flex: none;
}

@media (max-width: 768px) {
  #createGroupModal {
    align-items: stretch;
    padding: 0;
  }
  #createGroupModal .modal-card {
    width: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  #createGroupModal .modal-card-foot {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 520px) {
  .content-switcher {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .content-switcher::-webkit-scrollbar {
    display: none;
  }
  .content-switcher a {
    flex: 0 0 auto;
    min-width: 105px;
  }
}
.nav-notification-link {
  position: relative;
}
.auth-activity-item {
  padding-right: 0.15rem;
  padding-left: 0.15rem;
}
.auth-activity-item .auth-icon-button {
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.auth-activity-item .notification-count-badge,
.auth-activity-item .message-count-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.32rem;
  z-index: 1;
  margin: 0;
  border: 2px solid var(--diloya-card-bg);
}
.auth-activity-item .message-count-badge {
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  font-size: 0.58rem;
}
.notification-count-badge {
  display: inline-grid;
  min-width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  padding-inline: 0.25rem;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 999px;
  background: var(--diloya-accent);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
}
.nav-notification-link .notification-count-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
}
.auth-navbar-actions {
  align-items: center;
}
.auth-icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--diloya-border);
  border-radius: 50%;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  cursor: pointer;
}
.auth-icon-button:hover {
  color: var(--diloya-primary);
  border-color: var(--diloya-primary);
}
.mobile-more-sheet .mobile-activity-link {
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 18%, var(--diloya-border));
  background: color-mix(
    in srgb,
    var(--diloya-primary) 6%,
    var(--diloya-card-bg)
  );
}
.mobile-more-sheet .mobile-activity-link + .mobile-activity-link {
  margin-top: 0.4rem;
}
.auth-account-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2) !important;
  color: var(--diloya-text) !important;
  cursor: pointer;
}
.auth-account-toggle .image {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.auth-account-toggle .image img {
  display: block;
  width: 32px;
  height: 32px;
  max-height: none;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.auth-account-toggle::after {
  border-color: var(--diloya-grey);
}
.auth-account-name {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 750;
}
.auth-account-menu .navbar-dropdown {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 320px;
  max-height: calc(100dvh - 5rem);
  padding: 0.55rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.22);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, #fff 88%, var(--diloya-grey)) transparent;
}
.auth-account-menu.is-active .navbar-dropdown {
  display: block;
}
.auth-account-dropdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.auth-account-dropdown::-webkit-scrollbar {
  width: 8px;
}
.auth-account-dropdown::-webkit-scrollbar-track {
  margin-block: 0.8rem;
  background: transparent;
}
.auth-account-dropdown::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 88%, var(--diloya-grey));
  background-clip: padding-box;
}
.auth-account-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.35rem;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 10%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.auth-account-summary img {
  display: block;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: none;
  flex: 0 0 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.auth-account-summary > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.auth-account-summary strong,
.auth-account-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-account-summary span {
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.auth-menu-label {
  padding: 0.65rem 0.75rem 0.25rem;
  color: var(--diloya-grey);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.auth-account-dropdown .navbar-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
  color: var(--diloya-text) !important;
  justify-content: flex-start;
}
.auth-account-dropdown button.navbar-item {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.auth-account-dropdown .navbar-item > span:last-child,
.auth-account-dropdown .navbar-item > .auth-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}
.auth-account-dropdown .navbar-item > span:last-child > strong,
.auth-account-dropdown .navbar-item > span:last-child > small,
.auth-account-dropdown .navbar-item > .auth-menu-text > strong,
.auth-account-dropdown .navbar-item > .auth-menu-text > small {
  display: block;
}
.auth-account-dropdown .navbar-item small {
  color: var(--diloya-grey);
  font-size: 0.66rem;
  margin-top: 0.18rem;
  white-space: normal;
}
.auth-menu-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.auth-account-dropdown .auth-logout {
  position: sticky;
  z-index: 2;
  bottom: 0;
  color: #e24b62 !important;
  background: var(--diloya-card-bg);
  box-shadow: 0 -8px 14px var(--diloya-card-bg);
}
.auth-account-dropdown .navbar-item strong {
  font-size: 0.9rem;
  font-weight: 850;
  white-space: normal;
}
.auth-account-dropdown .auth-logout .auth-menu-icon {
  color: #e24b62;
  background: color-mix(in srgb, #e24b62 10%, transparent);
}
.auth-bottom-nav {
  display: none;
}

.diloya-onboarding-overlay {
  position: fixed;
  z-index: 650;
  inset: 0;
  display: grid;
  pointer-events: none;
}
.diloya-onboarding-overlay.is-hidden {
  display: none;
}
.diloya-onboarding-backdrop {
  grid-area: 1 / 1;
  background: rgba(4, 8, 15, 0.58);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
.diloya-onboarding-spotlight {
  position: fixed;
  border: 2px solid color-mix(in srgb, var(--diloya-primary) 72%, #fff);
  border-radius: 18px;
  box-shadow:
    0 0 0 9999px rgba(4, 8, 15, 0.1),
    0 0 0 3px color-mix(in srgb, var(--diloya-primary) 40%, transparent),
    0 22px 50px rgba(0, 0, 0, 0.32);
  transition:
    top 0.2s ease,
    left 0.2s ease,
    width 0.2s ease,
    height 0.2s ease,
    opacity 0.2s ease;
  pointer-events: none;
}
.diloya-onboarding-card {
  position: fixed;
  z-index: 1;
  width: min(360px, calc(100vw - 1.4rem));
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
}
.diloya-onboarding-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.diloya-onboarding-kicker {
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diloya-onboarding-card h3 {
  margin-top: 0.1rem;
  font-size: 1rem;
  font-weight: 850;
}
.diloya-onboarding-card p {
  color: var(--diloya-grey);
  font-size: 0.84rem;
  line-height: 1.45;
}
.diloya-onboarding-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: 1rem;
}
.diloya-onboarding-progress {
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 700;
}
.is-onboarding-target {
  position: relative;
  z-index: 651;
  border-radius: 14px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--diloya-primary) 82%, white),
    0 0 0 10px color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
.is-onboarding-target,
.is-onboarding-target * {
  pointer-events: none !important;
}

/* Group wall and separate management center */
.group-section-nav {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.group-section-nav a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  color: var(--diloya-grey);
  font-size: 0.82rem;
  font-weight: 750;
}
.group-section-nav a:hover,
.group-section-nav a.is-active {
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
}
.group-compose-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.group-compose-heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.group-compose-heading div {
  display: flex;
  flex-direction: column;
}
.group-compose-heading p {
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.group-management-callout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 28%, var(--diloya-border));
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 11%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  color: var(--diloya-text);
}
.group-management-callout:hover {
  color: var(--diloya-text);
  border-color: var(--diloya-primary);
}
.group-management-callout > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--diloya-primary);
  color: #fff;
}
.group-management-callout > div {
  min-width: 0;
  flex: 1;
}
.group-management-callout p {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.group-role-icon {
  color: var(--diloya-primary);
}
.group-offline-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #e4a42d;
  border-radius: 14px;
  background: color-mix(in srgb, #e4a42d 12%, var(--diloya-card-bg));
  color: var(--diloya-text);
  font-size: 0.8rem;
}
.group-offline-status i {
  color: #d38d0a;
}
.group-management-page {
  max-width: 1120px;
  margin-inline: auto;
}
.management-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: var(--diloya-shadow);
}
.management-header p {
  color: var(--diloya-grey);
}
.management-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}
.management-tabs a {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 0.7rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 17px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
.management-tabs a:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-text);
}
.management-tabs a > span {
  display: grid;
  grid-row: 1/3;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.management-tabs small {
  color: var(--diloya-grey);
}
.management-section {
  scroll-margin-top: 5rem;
  border-radius: 20px;
}
.management-section-title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.management-section-title > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.management-section-title h2 {
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 800;
}
.management-section-title p {
  color: var(--diloya-grey);
  font-size: 0.74rem;
}
.management-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--diloya-border);
}
.management-person img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: cover;
}
.management-person > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.management-person small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.management-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 13px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
}
.management-empty i {
  color: #20a464;
}
.management-sticky {
  position: sticky;
  top: 5rem;
}
.webhook-security-note {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 13px;
  background: color-mix(in srgb, #e4a42d 10%, var(--diloya-card-bg));
  color: var(--diloya-grey);
  font-size: 0.75rem;
}
.webhook-security-note i {
  color: #d38d0a;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 5.25rem;
  }
  /* Los detalles y editores de perfil deben quedar sobre la navegación fija. */
  .modal.is-active {
    z-index: 500;
  }
  .auth-primary-nav {
    display: none;
  }
  .auth-activity-item {
    display: none;
  }
  .auth-navbar-actions > .navbar-item:first-child,
  .auth-push-item {
    display: none;
  }
  .auth-account-menu {
    width: 100%;
    padding: 0.25rem 0.75rem 0.75rem;
  }
  .auth-account-toggle {
    display: none;
  }
  .auth-account-menu .navbar-dropdown,
  .auth-account-menu:not(.is-active) .navbar-dropdown {
    position: static;
    display: block;
    width: 100%;
    max-height: calc(100dvh - 9rem);
    margin-top: 0;
    border: 0;
    box-shadow: none;
  }
  .auth-bottom-nav {
    position: fixed;
    z-index: 105;
    right: 0.6rem;
    bottom: calc(0.55rem + env(safe-area-inset-bottom));
    left: 0.6rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--diloya-border) 85%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--diloya-card-bg) 94%, transparent);
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
  }
  .auth-bottom-nav a,
  .auth-bottom-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.42rem 0.15rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--diloya-grey);
    font-size: 0.6rem;
    font-weight: 750;
    cursor: pointer;
  }
  .auth-bottom-nav a > i,
  .bottom-nav-icon {
    font-size: 1.05rem;
  }
  .auth-bottom-nav a img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
  }
  .auth-bottom-nav a.is-current,
  .auth-bottom-more.is-active {
    color: var(--diloya-primary);
    background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
  }
  .bottom-nav-icon {
    position: relative;
  }
  .bottom-nav-icon .notification-count-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.8rem;
  }
  .group-manage-link {
    width: 100%;
  }
  .group-section-nav {
    overflow-x: auto;
  }
  .management-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1rem;
    border-radius: 17px;
  }
  .management-tabs {
    grid-template-columns: 1fr;
  }
  .management-sticky {
    position: static;
  }
  .management-person {
    flex-wrap: wrap;
  }
  .management-person .button {
    margin-left: 45px;
  }
  .group-management-page {
    padding-inline: 0.75rem;
  }
}

@media (max-width: 1023px) {
  .mobile-theme-toggle {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    margin-left: auto;
    align-self: center;
  }
  .diloya-navbar .navbar-burger {
    position: relative;
    display: block;
    width: 3.25rem;
    height: 3.25rem;
  }
  .diloya-navbar .navbar-burger span {
    position: absolute;
    right: 0.85rem;
    left: 0.85rem;
    display: block;
    width: auto;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
    transition:
      transform 0.18s,
      opacity 0.18s,
      top 0.18s;
  }
  .diloya-navbar .navbar-burger span:nth-child(1) {
    top: 1.05rem;
  }
  .diloya-navbar .navbar-burger span:nth-child(2) {
    top: 1.58rem;
  }
  .diloya-navbar .navbar-burger span:nth-child(3) {
    top: 2.1rem;
  }
  .diloya-navbar .navbar-burger.is-active span:nth-child(1) {
    top: 1.58rem;
    transform: rotate(45deg);
  }
  .diloya-navbar .navbar-burger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .diloya-navbar .navbar-burger.is-active span:nth-child(3) {
    top: 1.58rem;
    transform: rotate(-45deg);
  }
}

/* Community Topics */
.community-topics-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
}
.community-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.community-topic-pill:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.community-topic-pill.is-active {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 13%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.community-topic-pill.is-full {
  display: flex;
  width: 100%;
  border-radius: 13px;
  margin-bottom: 0.3rem;
}
.community-topic-emoji {
  font-size: 0.95rem;
  line-height: 1;
}
.community-topics-sidebar {
  border-radius: 18px;
}
.community-topics-sidebar-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.65rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.community-active-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.9rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 28%, var(--diloya-border));
  border-radius: 13px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
}
.community-active-topic-label {
  color: var(--diloya-text);
  font-size: 0.78rem;
  font-weight: 700;
}
.community-topic-select .select select {
  font-size: 0.82rem;
}
.group-post-topic-badge {
  margin-bottom: 0.45rem;
}
.community-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 11%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.7rem;
  font-weight: 750;
}
.topic-emoji-preview {
  font-size: 1.4rem;
  flex: 0 0 2rem;
  text-align: center;
}

/* Topic Tag system */
.community-tag-selector {
  border: 1px dashed var(--diloya-border);
  border-radius: 13px;
  padding: 0.75rem;
}
.community-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.community-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.community-tag-chip:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.community-tag-chip.is-active {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 15%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.community-tag-suggest {
  display: flex;
  gap: 0.4rem;
}
.community-tag-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
  background: var(--diloya-card-bg);
  flex-wrap: wrap;
}
.community-tag-filter-label {
  color: var(--diloya-grey);
  font-size: 0.8rem;
  flex: 0 0 auto;
}
.community-tag-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.community-tag-filter-chip {
  display: inline-flex;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.community-tag-filter-chip:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.community-tag-filter-chip.is-active {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 15%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.community-post-tag {
  display: inline-flex;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 750;
}
.group-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.community-topic-tag-manage {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  font-size: 0.74rem;
  font-weight: 700;
  margin: 0.2rem 0.2rem 0 0;
}
.topic-manage-item {
  border-top: 1px solid var(--diloya-border);
  padding: 0.75rem 0;
}
.topic-manage-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.topic-manage-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topic-manage-info small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.topic-edit-panel {
  margin-top: 0.65rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.topic-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 0.65rem;
}
.topic-emoji-picker-btn {
  display: inline-flex;
  min-width: 4.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.topic-emoji-picker-btn span {
  font-size: 1.2rem;
  line-height: 1;
}
.topic-emoji-picker-btn i {
  color: var(--diloya-grey);
  font-size: 0.6rem;
}
.topic-emoji-picker-modal .modal-card {
  width: min(94vw, 520px);
}
.topic-emoji-category-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}
.topic-emoji-category-tabs::-webkit-scrollbar {
  display: none;
}
.topic-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.4rem;
}
.topic-emoji-option {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--diloya-surface-2);
  font-size: 1.45rem;
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s,
    background 0.12s;
}
.topic-emoji-option:hover,
.topic-emoji-option:focus-visible {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  transform: scale(1.08);
  outline: none;
}
@media (max-width: 480px) {
  .topic-manage-header {
    flex-wrap: wrap;
  }
  .topic-manage-info {
    flex-basis: calc(100% - 50px);
  }
  .topic-edit-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .topic-emoji-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.topic-tags-panel {
  padding: 0.65rem;
  margin-top: 0.5rem;
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.pending-tag-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.pending-tag-info small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}

/* Member search autocomplete */
.member-search-wrapper {
  position: relative;
}
.member-search-dropdown {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.member-search-result-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  transition: background 0.1s;
}
.member-search-result-item:hover,
.member-search-result-item.is-selected {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 8%,
    var(--diloya-card-bg)
  );
}
.member-search-result-item img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  object-fit: cover;
}
.member-search-result-item > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.member-search-result-item small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.member-search-result-item.is-selected {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  cursor: default;
}

/* Thread / replies system */
.group-post-thread-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--diloya-border);
}
.group-post-reply-btn,
.group-post-thread-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: transparent;
  color: var(--diloya-grey);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.group-post-reply-btn:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 7%, transparent);
}
.group-post-thread-toggle {
  color: var(--diloya-primary);
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 30%,
    var(--diloya-border)
  );
}
.group-post-thread-toggle:hover {
  background: color-mix(in srgb, var(--diloya-primary) 9%, transparent);
}
.group-post-thread {
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid
    color-mix(in srgb, var(--diloya-primary) 35%, var(--diloya-border));
  border-radius: 0 14px 14px 0;
  background: var(--diloya-surface-2);
}
.thread-replies {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.group-post-reply {
  padding: 0.55rem 0.65rem;
  border-radius: 13px;
  background: var(--diloya-card-bg);
}
.group-post-reply .media {
  margin: 0;
}
.group-post-reply .group-post-content {
  font-size: 0.84rem;
}
.group-post-reply .group-post-meta {
  font-size: 0.74rem;
  margin-bottom: 0.15rem;
}
.thread-reply-form .textarea {
  font-size: 0.84rem;
  resize: none;
  min-height: 3.5rem;
}

/* Community channel layout */
.community-sidebar {
  min-width: 0;
}
.community-channel-list {
  padding: 0.6rem;
}
.community-channel-list-title {
  color: var(--diloya-grey);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem 0.5rem;
}
.community-channel-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--diloya-grey);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.12s,
    color 0.12s;
}
.community-channel-item:hover {
  background: color-mix(in srgb, var(--diloya-primary) 8%, transparent);
  color: var(--diloya-text);
}
.community-channel-item.is-active {
  background: color-mix(in srgb, var(--diloya-primary) 14%, transparent);
  color: var(--diloya-primary);
  font-weight: 750;
}
.community-channel-hash {
  font-size: 1rem;
  font-weight: 800;
  flex: 0 0 auto;
  opacity: 0.6;
}
.community-channel-emoji {
  font-size: 1rem;
  flex: 0 0 auto;
}
.community-channel-wall {
  min-width: 0;
}
.community-channel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.community-channel-header-icon {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--diloya-primary);
  flex: 0 0 auto;
}
.community-channel-header strong {
  font-size: 1rem;
  font-weight: 800;
}
.community-channel-header-desc {
  color: var(--diloya-grey);
  font-size: 0.74rem;
  margin: 0;
}
.community-channel-compose-icon {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--diloya-primary);
}
/* Edit/delete post actions */
.group-post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.group-post-meta time {
  color: var(--diloya-grey);
  font-size: 0.72rem;
  flex: 1;
}
.group-post-actions {
  display: flex;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.group-post-card:hover .group-post-actions,
.group-post-reply:hover .group-post-actions {
  opacity: 1;
}
.group-post-action-btn {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
  font-size: 0.72rem;
  transition:
    background 0.1s,
    color 0.1s;
}
.group-post-action-btn:hover {
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
}
.group-post-action-btn.delete-post-btn:hover {
  background: color-mix(in srgb, #e05c5c 12%, transparent);
  color: #e05c5c;
}
.group-post-edit-form .textarea {
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .community-sidebar {
    display: none;
  }
  .community-channel-wall {
    padding: 0;
  }
  .group-post-actions {
    opacity: 1;
  }
}

/* Channel badge + name */
.community-channel-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-channel-badge {
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diloya-primary) 18%, transparent);
  color: var(--diloya-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* Member row with DM button */
.group-member-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.3rem;
  border-radius: 10px;
  transition: background 0.1s;
}
.group-member-row:hover {
  background: var(--diloya-surface-2);
}
.group-public-reader-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 24%,
    var(--diloya-border)
  );
  background: color-mix(
    in srgb,
    var(--diloya-primary) 6%,
    var(--diloya-card-bg)
  );
}
.group-public-reader-state > i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.group-public-reader-state > div {
  min-width: 0;
  flex: 1;
}
.group-public-reader-state strong {
  display: block;
  font-size: 0.78rem;
}
.group-public-reader-state p {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.68rem;
  line-height: 1.4;
}
.group-post-public-actions {
  justify-content: flex-end;
}
.group-post-share-btn {
  gap: 0.4rem;
}
@media (max-width: 560px) {
  .group-public-reader-state {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .group-public-reader-state .button {
    width: 100%;
  }
}
.group-member-row-info {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  padding-right: 32px;
}
.group-member-row-info img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 32px;
}
.group-member-row-info > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.group-member-row-info strong {
  font-size: 0.84rem;
  overflow-wrap: anywhere;
  line-height: 1.28;
  white-space: normal;
}
.group-member-row-info small {
  display: block;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}
.group-member-email {
  display: flex !important;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.12rem;
  color: var(--diloya-grey);
  font-size: 0.64rem !important;
  line-height: 1.25 !important;
}
.group-member-email i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}
.group-member-row-actions {
  position: absolute;
  top: 0.45rem;
  right: 0.25rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.group-dm-btn {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: var(--diloya-card-bg);
  color: var(--diloya-grey);
  cursor: pointer;
  font-size: 0.74rem;
  transition:
    background 0.1s,
    color 0.1s;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.group-member-row:hover .group-dm-btn {
  opacity: 1;
}
.group-dm-btn:hover {
  background: color-mix(in srgb, var(--diloya-primary) 12%, transparent);
  color: var(--diloya-primary);
}
@media (max-width: 1023px) {
  .group-member-row {
    align-items: flex-start;
  }
  .group-member-row-info {
    align-items: flex-start;
  }
  .group-dm-btn {
    opacity: 1;
  }
}
@media (min-width: 769px) and (max-width: 1215px) {
  #group-wall {
    display: grid;
    grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
  }
  #group-wall > .community-sidebar,
  #group-wall > .community-channel-wall {
    width: auto;
    padding-inline: 0.55rem;
  }
}

/* DM modal */
.group-dm-card {
  max-width: 560px;
  width: 96vw;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.group-dm-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}
.group-dm-peer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
}
.group-dm-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  flex: 1;
  min-height: 0;
  max-height: min(55vh, 420px);
  overflow-y: auto;
}
.group-dm-foot {
  display: block;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--diloya-border, #e8e8ee);
  background: var(--diloya-card-bg);
}
.group-dm-compose {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.7rem;
  flex-direction: column;
}
.group-dm-compose .textarea {
  display: block;
  width: 100%;
  resize: none;
  font-size: 0.96rem;
  min-height: 92px;
  max-height: 220px;
  line-height: 1.5;
  border-radius: 14px;
  padding: 0.8rem 0.95rem;
  overflow-y: auto;
}
.group-dm-compose .textarea:focus {
  border-color: var(--diloya-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
.group-dm-compose-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.group-dm-help {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.group-dm-compose-actions .button {
  min-width: 112px;
  gap: 0.5rem;
  margin-left: auto;
  border-radius: 11px;
  font-weight: 750;
}
@media (max-width: 600px) {
  .group-dm-card {
    max-width: 100vw;
    width: 100vw;
    border-radius: 16px 16px 0 0;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .group-dm-body {
    max-height: min(45vh, 320px);
  }
  .group-dm-compose .textarea {
    min-height: 84px;
    max-height: 180px;
  }
  .group-dm-help {
    font-size: 0.64rem;
  }
}
.group-dm-bubble {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  align-self: flex-start;
}
.group-dm-bubble.is-mine {
  align-self: flex-end;
  align-items: flex-end;
}
.group-dm-bubble-content {
  padding: 0.5rem 0.8rem;
  border-radius: 16px;
  font-size: 0.86rem;
  background: var(--diloya-surface-2);
  word-break: break-word;
}
.group-dm-bubble.is-mine .group-dm-bubble-content {
  background: var(--diloya-primary);
  color: #fff;
}
.group-dm-bubble-time {
  font-size: 0.62rem;
  color: var(--diloya-grey);
  margin-top: 0.15rem;
  padding: 0 0.3rem;
}

/* Topic member management (private topics) */
.topic-members-panel {
  padding: 0.65rem;
  margin-top: 0.5rem;
  border-radius: 12px;
  background: color-mix(in srgb, #e05c5c 6%, var(--diloya-surface-2));
}
.topic-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.topic-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  background: var(--diloya-card-bg);
}
.topic-member-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.topic-member-row span {
  flex: 1;
  font-size: 0.82rem;
}

/* Mobile channel bar */
.community-mobile-channel-bar {
  display: none;
}
.community-mobile-channels {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.3rem 0;
  scrollbar-width: none;
}
.community-mobile-channels::-webkit-scrollbar {
  display: none;
}
.community-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border: 1.5px solid var(--diloya-border);
  border-radius: 999px;
  background: transparent;
  color: var(--diloya-grey);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
  flex: 0 0 auto;
}
.community-channel-pill:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.community-channel-pill.is-active {
  border-color: var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
  color: var(--diloya-primary);
}
@media (max-width: 768px) {
  .community-mobile-channel-bar {
    display: block;
  }
}

/* Locked channel state */
.group-channel-locked {
  text-align: center;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.group-channel-locked i.fa-lock {
  font-size: 2rem;
  color: var(--diloya-grey);
  opacity: 0.5;
}
.group-channel-locked h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--diloya-text);
}
.group-channel-locked p {
  color: var(--diloya-grey);
  font-size: 0.86rem;
}

/* Locked channel item in sidebar */
.community-channel-item.is-locked {
  opacity: 0.6;
}
.community-channel-item.is-locked:hover {
  opacity: 0.8;
}
.community-channel-pending-badge {
  font-size: 0.6rem;
  color: var(--diloya-grey);
  flex: 0 0 auto;
}

/* Events */
.events-page,
.event-detail-page {
  color: var(--diloya-text);
}
.events-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 12%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
}
.events-hero p,
.explore-events-heading p {
  color: var(--diloya-grey);
}
.events-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  color: var(--diloya-primary);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1rem;
}
.events-grid.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 7%, transparent);
}
.event-card-image {
  min-height: 145px;
  background-position: center;
  background-size: cover;
}
.event-card-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
}
.event-date-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}
.event-card h3 {
  margin: 0.55rem 0 0.35rem;
  color: var(--diloya-text);
  font-size: 1.08rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.event-card h3 a {
  color: inherit;
}
.event-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0.7rem;
  color: var(--diloya-grey);
  font-size: 0.82rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.event-card-meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-wrap: anywhere;
}
.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--diloya-border);
}
.event-card-footer > span {
  min-width: 0;
  color: var(--diloya-grey);
  font-size: 0.66rem;
}
.event-card-footer > span i {
  margin-right: 0.3rem;
  color: #e4a42d;
}
.events-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 260px;
  color: var(--diloya-grey);
  text-align: center;
}
.events-empty > i {
  margin-bottom: 0.75rem;
  color: var(--diloya-primary);
  font-size: 2.5rem;
}
.events-empty h2 {
  color: var(--diloya-text);
  font-weight: 800;
}
.explore-events {
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-surface-2);
}
.explore-events-heading,
.explore-events-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.explore-events-heading {
  margin-bottom: 0.85rem;
}
.explore-events-heading > div > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--diloya-card-bg);
  color: var(--diloya-primary);
}
.explore-events-heading h2 {
  font-size: 0.92rem;
  font-weight: 850;
}
.explore-events-heading p,
.explore-events-heading > a {
  font-size: 0.7rem;
}
.event-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--diloya-grey);
  font-size: 0.8rem;
  font-weight: 700;
}
.event-detail-card {
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
}
.event-detail-cover {
  min-height: 280px;
  background-position: center;
  background-size: cover;
}
.event-detail-content {
  padding: 1.5rem;
}
.event-creator {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.3rem;
  color: var(--diloya-text);
}
.event-creator img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.event-creator span {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
}
.event-creator small {
  color: var(--diloya-grey);
}
.event-description {
  margin: 0 0 1.3rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.event-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.event-detail-meta > div {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: var(--diloya-surface-2);
  overflow-wrap: anywhere;
}
.event-detail-meta > div > i {
  margin-top: 0.2rem;
  color: var(--diloya-primary);
}
.event-detail-meta span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  font-size: 0.8rem;
}
.event-detail-meta small {
  color: var(--diloya-grey);
  font-size: 0.62rem;
  text-transform: uppercase;
}
.event-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}
.event-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--diloya-grey);
  font-size: 0.73rem;
}
.event-counts strong {
  color: var(--diloya-text);
}
.event-comments {
  border-radius: 20px;
}
.event-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.event-comment {
  display: flex;
  min-width: 0;
  gap: 0.65rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--diloya-border);
}
.event-comment > img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  object-fit: cover;
}
.event-comment > div {
  min-width: 0;
  flex: 1;
}
.event-comment p {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.event-comment small,
.event-comment time,
.event-comments-empty {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.event-comment > div > div {
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.event-create-modal {
  display: flex;
  width: min(640px, calc(100vw - 1.5rem));
  max-height: min(90dvh, 860px);
  flex-direction: column;
  margin: auto;
  overflow: hidden;
}
.event-create-modal > .modal-card-head {
  flex: 0 0 auto;
}
.event-create-modal > form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.event-create-modal > form > .modal-card-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.event-create-modal > form > .modal-card-foot {
  flex: 0 0 auto;
}
#createEventModal.is-active {
  display: flex;
  overflow-y: auto;
  align-items: center;
  padding: 1rem 0;
}
#createEventModal,
#editEventModal {
  z-index: 1200;
}
@media (max-width: 768px) {
  #createEventModal.is-active {
    align-items: flex-end;
    padding: 0;
  }
  .event-create-modal {
    width: 100vw;
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .event-create-modal > form > .modal-card-body {
    padding: 1rem;
  }
  .event-create-modal > form > .modal-card-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
  }
  .event-create-modal > form > .modal-card-foot .button {
    width: 100%;
    margin: 0;
  }
  .events-page,
  .event-detail-page {
    padding: 1rem 0.75rem 5.75rem;
  }
  .events-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 1.15rem;
    border-radius: 18px;
  }
  .events-hero .button {
    width: 100%;
  }
  .events-grid.is-compact {
    grid-template-columns: 1fr;
  }
  .event-detail-cover {
    min-height: 190px;
  }
  .event-detail-content {
    padding: 1rem;
  }
  .event-detail-content .title {
    font-size: 1.55rem;
  }
  .event-actions .button {
    flex: 1 1 auto;
  }
  .event-comment p {
    flex-direction: column;
    gap: 0;
  }
}
.post-event-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid #d9e4ff;
  border-radius: 12px;
  background: #f6f8ff;
  color: #27324a;
}
.post-event-preview:hover {
  border-color: #8ca8f6;
  color: #17213a;
}
.post-event-preview > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.post-event-preview small {
  color: #657086;
}
.post-event-preview-icon {
  color: #4263eb;
  font-size: 1.2rem;
}

/* Community analytics dashboard */
.community-analytics {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--diloya-primary) 5%, var(--diloya-card-bg)),
    var(--diloya-card-bg) 38%
  );
  box-shadow: 0 18px 55px color-mix(in srgb, #111 8%, transparent);
}
.community-analytics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.6rem 1.1rem;
}
.community-analytics-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  color: var(--diloya-primary);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.community-analytics-head h2 {
  color: var(--diloya-text);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.community-analytics-head p {
  color: var(--diloya-grey);
  font-size: 0.8rem;
}
.community-analytics-period {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-card-bg);
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}
.community-stat-grid {
  display: grid;
  padding: 0 1.5rem 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.community-stat-card {
  --stat-color: var(--diloya-primary);
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--stat-color) 18%, var(--diloya-border));
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--stat-color) 9%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.community-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--stat-color) 13%, transparent);
}
.community-stat-card.is-blue {
  --stat-color: #4285e8;
}
.community-stat-card.is-green {
  --stat-color: #20a474;
}
.community-stat-card.is-orange {
  --stat-color: #e68a2e;
}
.community-stat-card.is-pink {
  --stat-color: #d75d92;
}
.community-stat-card.is-cyan {
  --stat-color: #159aae;
}
.community-stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--stat-color) 13%, var(--diloya-card-bg));
  color: var(--stat-color);
  font-size: 1rem;
}
.community-stat-card header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.community-stat-card header > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.community-stat-card header b {
  color: var(--diloya-text);
  font-size: 0.75rem;
  line-height: 1.2;
}
.community-stat-pair {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid
    color-mix(in srgb, var(--stat-color) 15%, var(--diloya-border));
  padding-top: 0.75rem;
}
.community-stat-pair > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.community-stat-pair > div + div {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid
    color-mix(in srgb, var(--stat-color) 15%, var(--diloya-border));
}
.community-stat-card small {
  color: var(--diloya-grey);
  font-size: 0.61rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
.community-stat-card strong {
  margin: 0.08rem 0;
  color: var(--diloya-text);
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.community-stat-card p {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-stat-card p b {
  color: var(--stat-color);
}
.community-analytics-main,
.community-insight-grid {
  display: grid;
  padding: 0 1.5rem 1rem;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.75fr);
  gap: 1rem;
}
.community-insight-grid {
  padding-bottom: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.community-analytics-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 19px;
  background: var(--diloya-card-bg);
  box-shadow: 0 7px 22px color-mix(in srgb, #111 4%, transparent);
}
.community-panel-head,
.community-panel-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.community-panel-head {
  margin-bottom: 1rem;
}
.community-panel-head > div {
  justify-content: flex-start;
}
.community-panel-head h3 {
  color: var(--diloya-text);
  font-size: 0.86rem;
  font-weight: 900;
}
.community-panel-head p {
  color: var(--diloya-grey);
  font-size: 0.63rem;
}
.community-panel-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.community-panel-icon.is-participants {
  color: #d58a17;
  background: color-mix(in srgb, #d58a17 11%, transparent);
}
.community-panel-icon.is-potential {
  color: #20a474;
  background: color-mix(in srgb, #20a474 11%, transparent);
}
.community-panel-icon.is-devices {
  color: #4285e8;
  background: color-mix(in srgb, #4285e8 11%, transparent);
}
.community-chart-legend {
  display: flex;
  gap: 0.7rem;
  color: var(--diloya-grey);
  font-size: 0.6rem;
}
.community-chart-legend span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.community-chart-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--diloya-primary);
}
.community-chart-legend i.is-conversions {
  background: #20a474;
}
.community-trend-chart {
  display: flex;
  height: 190px;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.75rem 0.25rem 0;
  border-bottom: 1px solid var(--diloya-border);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 46px,
    color-mix(in srgb, var(--diloya-border) 55%, transparent) 47px
  );
}
.community-trend-day {
  display: flex;
  min-width: 0;
  height: 100%;
  flex: 1;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 0.2rem;
}
.community-trend-bars {
  display: flex;
  width: 100%;
  min-height: 4px;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.community-trend-bar {
  width: min(8px, 42%);
  min-height: 3px;
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(
    to top,
    var(--diloya-primary),
    color-mix(in srgb, var(--diloya-primary) 55%, #fff)
  );
  transition: height 0.35s ease;
}
.community-trend-bar.is-conversion {
  background: linear-gradient(to top, #14865d, #44cf9a);
}
.community-trend-day small {
  width: 100%;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.52rem;
  text-align: center;
  white-space: nowrap;
}
.community-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.community-funnel > div {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 42px;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-radius: 11px;
  background: var(--diloya-surface-2);
  grid-template-columns: 1fr auto;
}
.community-funnel span,
.community-funnel strong {
  position: relative;
  z-index: 1;
}
.community-funnel span {
  color: var(--diloya-grey);
  font-size: 0.66rem;
  font-weight: 700;
}
.community-funnel strong {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.community-funnel i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--funnel-width, 0%);
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
  transition: width 0.45s ease;
}
.community-ranking {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.community-rank-item {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem;
  border-radius: 11px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
}
.community-rank-item:hover {
  background: var(--diloya-surface-2);
}
.community-rank-position {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.62rem;
  font-weight: 900;
}
.community-rank-item:first-child .community-rank-position {
  background: #fff4cf;
  color: #a76d08;
}
.community-rank-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.community-rank-copy strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-rank-copy small {
  color: var(--diloya-grey);
  font-size: 0.59rem;
}
.community-rank-value {
  color: var(--diloya-primary);
  font-size: 0.66rem;
  font-weight: 850;
  white-space: nowrap;
}
.community-growth {
  color: #15966b;
}
.community-device-chart {
  display: flex;
  min-height: 155px;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
}
.community-device-item {
  display: flex;
  height: 145px;
  min-width: 52px;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 0.35rem;
}
.community-device-bar {
  width: 34px;
  min-height: 4px;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(to top, #326bc4, #69a5ff);
}
.community-device-item i {
  color: #4285e8;
  font-size: 1rem;
}
.community-device-item strong {
  font-size: 0.7rem;
}
.community-device-item small {
  color: var(--diloya-grey);
  font-size: 0.55rem;
}
.community-analytics-loading,
.community-analytics-empty {
  display: grid;
  width: 100%;
  min-height: 110px;
  place-items: center;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.community-analytics-loading i {
  color: var(--diloya-primary);
}
@media (max-width: 900px) {
  .community-stat-grid {
    grid-template-columns: 1fr;
  }
  .community-analytics-main {
    grid-template-columns: 1fr;
  }
  .community-insight-grid {
    grid-template-columns: 1fr 1fr;
  }
  .community-insight-grid > :last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .community-analytics {
    border-radius: 20px;
  }
  .community-analytics-head {
    align-items: flex-start;
    padding: 1.1rem;
  }
  .community-analytics-head h2 {
    font-size: 1.15rem;
  }
  .community-analytics-head p {
    max-width: 220px;
  }
  .community-analytics-period {
    padding: 0.45rem 0.6rem;
    font-size: 0.62rem;
  }
  .community-stat-grid {
    padding: 0 0.8rem 1rem;
    gap: 0.55rem;
  }
  .community-stat-card {
    padding: 0.75rem;
    gap: 0.6rem;
  }
  .community-stat-icon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
    border-radius: 10px;
  }
  .community-stat-card strong {
    font-size: 1.3rem;
  }
  .community-stat-card p {
    font-size: 0.57rem;
  }
  .community-analytics-main,
  .community-insight-grid {
    padding: 0 0.8rem 0.8rem;
    grid-template-columns: 1fr;
  }
  .community-insight-grid > :last-child {
    grid-column: auto;
  }
  .community-trend-chart {
    height: 165px;
    gap: 0.2rem;
  }
  .community-chart-legend {
    display: none;
  }
}
.statuses-page {
  padding-bottom: 6rem;
}
.statuses-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.4rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
}
.statuses-header p {
  color: var(--diloya-grey);
}
.statuses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 1rem;
}
.status-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 7%, transparent);
}
.status-card > header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
}
.status-card > header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.status-card > header span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.status-card > header small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.status-text {
  padding: 0 0.9rem 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.status-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.status-images img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.status-images img:only-child {
  grid-column: 1/-1;
  height: 420px;
}
.status-image-previews {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  overflow: visible;
  flex-wrap: wrap;
}
.status-preview-item {
  position: relative;
  display: flex;
  width: 150px;
  flex-direction: column;
  gap: 0.35rem;
}
.status-preview-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 9/16;
  border-radius: 9px;
  background: #08090d;
  cursor: grab;
  touch-action: none;
}
.status-preview-stage::after {
  position: absolute;
  z-index: 2;
  inset: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}
.status-preview-stage:active {
  cursor: grabbing;
}
.status-preview-stage img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.status-crop-hint {
  color: var(--diloya-grey);
  font-size: 0.63rem;
  line-height: 1.25;
}
.status-format-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.45rem 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--diloya-primary) 8%, transparent);
  color: var(--diloya-grey);
  font-size: 0.72rem;
  line-height: 1.35;
}
.status-format-note > i {
  margin-top: 0.08rem;
  color: var(--diloya-primary);
}
.status-format-note strong {
  color: var(--diloya-text);
}
.status-card .post-video-wrap {
  margin: 0;
}
.status-create-modal form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.status-expiry-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--diloya-primary) 9%, transparent);
  color: var(--diloya-grey);
  font-size: 0.76rem;
}
.status-visibility-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
}
.status-visibility-field > div {
  display: flex;
  flex-direction: column;
}
.status-visibility-field small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.status-switch {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  flex: 0 0 46px;
}
.status-switch input {
  position: absolute;
  opacity: 0;
}
.status-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #aab1bd;
  cursor: pointer;
  transition: 0.18s;
}
.status-switch span:after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: 0.18s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.status-switch input:checked + span {
  background: var(--diloya-primary);
}
.status-switch input:checked + span:after {
  transform: translateX(20px);
}
.status-links {
  display: grid;
  gap: 0.4rem;
  padding: 0 0.9rem 0.9rem;
}
.status-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 11px;
  background: var(--diloya-surface-2);
}
.status-links a span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.status-media-item {
  position: relative;
  min-height: 0;
  aspect-ratio: 9/16;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #111;
  color: #fff;
  cursor: pointer;
}
.status-media-item:only-child {
  grid-column: 1 / -1;
  width: min(100%, 360px);
  justify-self: center;
}
.status-media-item img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.status-video-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #30265e, #111827);
}
.status-video-cover i {
  font-size: 2.5rem;
}
.status-media-comment-hint {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  padding: 0.4rem;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.7rem;
}
.status-media-modal .modal-card {
  width: min(1000px, calc(100vw - 1rem));
}
.status-media-modal-body {
  display: grid;
  min-height: 500px;
  padding: 0;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
}
.status-media-stage {
  position: relative;
  display: grid;
  min-height: 500px;
  place-items: center;
  background: #07090d;
  overflow: hidden;
}
.status-media-stage img,
.status-media-stage video,
.status-media-stage iframe {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
  border: 0;
}
.image-framing-controls {
  position: absolute;
  z-index: 8;
  right: 0.6rem;
  bottom: 0.6rem;
  left: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: auto;
}
.image-framing-controls button {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 9, 13, 0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 750;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.image-framing-controls button:hover,
.image-framing-controls button:focus-visible {
  background: var(--diloya-primary);
  color: #fff;
}
.status-preview-item > .image-framing-controls,
.reel-editor-workspace > .image-framing-controls {
  position: static;
  width: 100%;
}
.status-preview-item > .image-framing-controls button {
  min-width: 30px;
  height: 30px;
  padding: 0 0.45rem;
}
.status-preview-item > .image-framing-controls [data-framing-fit] span {
  display: none;
}
.status-media-comments {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 1rem;
}
.status-media-comments h3 {
  margin-bottom: 0.75rem;
  font-weight: 800;
}
.status-media-comment-list {
  display: flex;
  overflow: auto;
  flex: 1;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 180px;
}
.status-media-comment {
  padding: 0.65rem;
  border-radius: 10px;
  background: var(--diloya-surface-2);
}
.status-media-comment small {
  display: block;
  color: var(--diloya-grey);
}
.status-media-comment p {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
@media (max-width: 768px) {
  #statusMediaModal {
    z-index: 350;
  }
  #statusMediaModal.is-active {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  #statusMediaModal .modal-card {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: calc(100vh - 0.8rem);
    height: calc(100dvh - 0.8rem - env(safe-area-inset-bottom));
    max-height: none;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    border-radius: 18px;
  }
  #statusMediaModal .modal-card-head {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    padding: 0.8rem 1rem;
  }
  #statusMediaModal .status-media-modal-body {
    display: flex;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
  }
  #statusMediaModal .status-media-stage {
    min-height: 0;
    height: min(38dvh, 340px);
    flex: 0 0 min(38dvh, 340px);
  }
  #statusMediaModal .status-media-stage img,
  #statusMediaModal .status-media-stage video,
  #statusMediaModal .status-media-stage iframe {
    width: 100%;
    height: 100%;
    max-height: none;
  }
  #statusMediaModal .status-media-comments {
    position: relative;
    z-index: 2;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
    padding: 0.75rem;
    padding-bottom: 0;
    border-top: 1px solid var(--diloya-border);
    background: var(--diloya-card-bg);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.12);
  }
  #statusMediaModal .status-media-comments h3 {
    flex: 0 0 auto;
    margin-bottom: 0.45rem;
  }
  #statusMediaModal .status-media-comment-list {
    min-height: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    padding-bottom: 0.5rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #statusMediaModal #statusMediaCommentForm {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin: 0 -0.75rem;
    padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--diloya-border);
    background: var(--diloya-card-bg);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.1);
  }
  #statusMediaModal #statusMediaCommentForm textarea {
    min-height: 58px;
    max-height: 92px;
    resize: none;
  }
  #statusMediaModal #statusMediaCommentForm .button {
    min-height: 44px;
  }
  .status-media-item {
    min-height: 190px;
  }
  .status-media-item:only-child {
    min-height: 55vh;
  }
}
@media (max-width: 768px) {
  .statuses-page {
    padding: 1rem 0.75rem 6rem;
  }
  .statuses-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem;
  }
  .statuses-header .button {
    width: 100%;
  }
  .status-images img {
    height: 210px;
  }
  .status-images img:only-child {
    height: min(62vh, 520px);
  }
  .status-create-modal {
    position: fixed;
    right: 0.5rem;
    bottom: calc(0.5rem + env(safe-area-inset-bottom));
    left: 0.5rem;
    width: auto;
    max-height: calc(100dvh - 1rem);
    margin: 0;
    border-radius: 18px;
  }
  .status-create-modal .modal-card-head {
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
  }
  .status-create-modal .modal-card-body {
    min-height: 0;
    overflow-y: auto;
    padding: 0.85rem;
  }
  .status-create-modal .modal-card-foot {
    flex: 0 0 auto;
    padding: 0.75rem;
  }
  .status-create-modal .modal-card-foot .button {
    flex: 1;
  }
  .status-expiry-note {
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.68rem;
  }
  .status-preview-item:hover img {
    transform: scale(1.7);
  }
}
@media (max-width: 768px) {
  #createStatusModal {
    z-index: 300;
  }
  #createStatusModal.is-active {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  #createStatusModal .status-create-modal {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem - env(safe-area-inset-bottom));
    max-height: none;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    border-radius: 18px;
  }
  #createStatusModal .status-create-modal > form {
    display: grid;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  #createStatusModal .modal-card-head {
    flex: 0 0 auto;
  }
  #createStatusModal .modal-card-body {
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #createStatusModal .modal-card-foot {
    position: relative;
    z-index: 3;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.65rem;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
    background: var(--diloya-card-bg);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.1);
  }
  #createStatusModal .modal-card-foot .button {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 0;
  }
}
.bug-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.bug-evidence img {
  width: 120px;
  height: 90px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--diloya-border);
}
.bug-admin-card pre {
  max-height: 240px;
  overflow: auto;
  padding: 0.75rem;
  border-radius: 10px;
  background: var(--diloya-surface-2);
  white-space: pre-wrap;
}
.earned-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.25rem;
  padding: 0.14rem 0.35rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  font-size: 0.55rem;
  vertical-align: middle;
  white-space: nowrap;
}
.earned-badge b {
  font-weight: 800;
}
.earned-badge.is-profile {
  margin: 0;
  padding: 0.35rem 0.58rem;
  font-size: 0.68rem;
  background: var(--diloya-card-bg);
}
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Stories: experiencia inmersiva con final natural y controles accesibles. */
.stories-rail {
  display: flex;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  scrollbar-width: thin;
}
.story-rail-item,
.story-rail-create {
  display: flex;
  width: 70px;
  flex: 0 0 70px;
  align-items: center;
  gap: 0.35rem;
  flex-direction: column;
  border: 0;
  background: transparent;
  color: var(--diloya-text);
  cursor: pointer;
}
.story-rail-item small,
.story-rail-create small {
  width: 100%;
  overflow: hidden;
  font-size: 0.68rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-avatar-ring,
.story-rail-create > span {
  display: grid;
  width: 62px;
  height: 62px;
  padding: 3px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7557e8, #f04f98, #ffb547);
}
.story-avatar-ring img {
  width: 100%;
  height: 100%;
  border: 3px solid var(--diloya-card-bg);
  border-radius: 50%;
  object-fit: cover;
}
.story-rail-create > span {
  border: 2px dashed
    color-mix(in srgb, var(--diloya-primary) 60%, var(--diloya-border));
  background: var(--diloya-surface-2);
  font-size: 1.2rem;
}
.story-viewer {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #07070b;
  color: #fff;
  touch-action: none;
}
.story-viewer.is-active {
  display: block;
}
.story-viewer > header {
  position: absolute;
  z-index: 5;
  top: 1.25rem;
  right: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.story-viewer > header img {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}
.story-viewer > header div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.story-viewer > header small {
  color: #d7d7df;
  font-size: 0.7rem;
}
.story-viewer > header button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
}
.story-progress {
  position: absolute;
  z-index: 6;
  top: 0.55rem;
  right: 1rem;
  left: 1rem;
  display: flex;
  gap: 4px;
}
.story-progress span {
  height: 3px;
  overflow: hidden;
  flex: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
}
.story-progress span.is-complete {
  background: #fff;
}
.story-progress span.is-active::after {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  content: "";
  transform-origin: left;
  animation: story-progress 7s linear;
}
.story-viewer.is-paused .story-progress span.is-active::after {
  animation-play-state: paused;
}
@keyframes story-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.story-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #24213a, #07070b 60%);
}
.story-stage > img,
.story-stage > video,
.story-stage > iframe {
  width: 100%;
  height: 100%;
  max-width: 720px;
  object-fit: contain;
  border: 0;
}
.story-text-only {
  max-width: 720px;
  padding: 2rem;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: pre-wrap;
}
.story-caption {
  position: absolute;
  right: 1rem;
  bottom: 3.5rem;
  left: 1rem;
  max-width: 680px;
  margin: auto;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.58);
  font-size: 0.95rem;
  text-align: center;
  white-space: pre-wrap;
}
.story-nav {
  position: absolute;
  z-index: 3;
  top: 80px;
  bottom: 55px;
  width: 35%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.story-nav-prev {
  left: 0;
}
.story-nav-next {
  right: 0;
}
.story-pause-hint {
  position: absolute;
  z-index: 4;
  bottom: 0.8rem;
  left: 50%;
  margin: 0;
  color: #bbb;
  font-size: 0.65rem;
  transform: translateX(-50%);
}
.story-viewers-trigger {
  position: absolute;
  z-index: 5;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(7, 7, 11, 0.7);
  color: #fff;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.story-viewers-trigger.is-hidden {
  display: none;
}
.story-viewers-trigger small {
  color: #ddd;
}
.status-viewers-btn {
  gap: 0.3rem;
  color: var(--diloya-primary) !important;
}
.status-viewers-modal {
  z-index: 560;
}
.status-viewers-modal .modal-card {
  width: min(440px, calc(100vw - 2rem));
  max-height: min(680px, calc(100vh - 2rem));
  border-radius: 20px;
}
.status-viewers-subtitle {
  margin-top: 0.15rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.status-viewers-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.status-viewer-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem;
  border-radius: 14px;
  color: var(--diloya-text);
}
.status-viewer-row:hover {
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
}
.status-viewer-row > img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  object-fit: cover;
}
.status-viewer-row > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.status-viewer-row strong,
.status-viewer-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewer-row strong i {
  color: var(--diloya-primary);
  font-size: 0.7rem;
}
.status-viewer-row small,
.status-viewer-row time {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.status-viewer-row time {
  flex: 0 0 auto;
}
.status-viewers-loading,
.status-viewers-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  color: var(--diloya-grey);
  text-align: center;
}
.status-viewers-loading i,
.status-viewers-empty > i {
  color: var(--diloya-primary);
  font-size: 1.6rem;
}
.status-viewers-empty p {
  max-width: 270px;
  font-size: 0.72rem;
}
@media (min-width: 769px) {
  .story-viewer {
    right: calc((100vw - min(720px, 100vw)) / 2);
    left: calc((100vw - min(720px, 100vw)) / 2);
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.86);
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-progress span.is-active::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* Reels */
.story-avatar-ring {
  position: relative;
}
.story-avatar-ring > b {
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 999px;
  background: var(--diloya-primary);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
}
.story-rail-item.is-own-story small {
  color: var(--diloya-primary);
  font-weight: 850;
}
#reelEditorModal {
  z-index: 500;
}
#reelPreviewModal {
  z-index: 520;
}
.reels-page {
  padding-bottom: 6rem;
}
.reels-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.4rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
}
.reels-header p {
  color: var(--diloya-grey);
}
.content-create-fab {
  position: fixed;
  z-index: 60;
  right: max(1.5rem, calc((100vw - 1180px) / 2));
  bottom: 2rem;
  min-height: 50px;
  padding-inline: 1.15rem;
  border-radius: 999px;
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--diloya-primary) 32%, transparent),
    0 3px 10px color-mix(in srgb, #000 16%, transparent);
  font-weight: 800;
}
.content-create-fab i {
  margin-right: 0.45rem;
}
.content-create-fab:hover {
  transform: translateY(-2px);
}
.reels-feed {
  display: grid;
  max-width: 560px;
  margin: auto;
  gap: 1.25rem;
}
.reel-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
}
.reel-playback {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9/16;
  background: #08090d;
}
.reel-playback > img,
.reel-playback > video,
.reel-playback > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.reel-meta {
  padding: 1rem;
}
.reel-author {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.65rem;
  color: var(--diloya-text);
}
.reel-author:hover,
.reel-author:focus-visible {
  color: var(--diloya-primary);
}
.reel-author > img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 2px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 50%;
  object-fit: cover;
}
.reel-author-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}
.reel-author-name {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
}
.reel-author-name > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-author-name .earned-badge,
.reel-author-name .official-ai-badge {
  margin-left: 0.1rem;
}
.reel-author-identity > small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.reel-meta p {
  margin-top: 0.35rem;
  white-space: pre-wrap;
}
.reels-empty {
  padding: 3rem 1rem;
  border: 1px dashed var(--diloya-border);
  border-radius: 18px;
  color: var(--diloya-grey);
  text-align: center;
}
.reel-editor-card {
  width: min(1120px, calc(100vw - 1rem));
}
#reelEditorModal .modal-card-head {
  align-items: flex-start;
  gap: 0.75rem;
}
#reelEditorModal .modal-card-head > div {
  min-width: 0;
  flex: 1;
}
#reelEditorModal .modal-card-head > [data-close-reel-editor] {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  margin-left: auto;
}
.reel-mobile-steps,
.reel-step-back,
.reel-step-next {
  display: none;
}
.reel-editor-body {
  display: grid;
  min-height: 620px;
  padding: 0;
  grid-template-columns: 280px 1fr;
}
.reel-editor-tools {
  padding: 1rem;
  overflow: auto;
  border-right: 1px solid var(--diloya-border);
}
.reel-editor-tools .button {
  justify-content: flex-start;
}
.reel-editor-workspace {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
  padding: 1rem;
  background: var(--diloya-surface-2);
}
.reel-canvas {
  position: relative;
  display: grid;
  width: min(100%, 360px);
  overflow: hidden;
  aspect-ratio: 9/16;
  place-items: center;
  border-radius: 18px;
  background: #08090d;
  color: #bbb;
  touch-action: none;
  cursor: grab;
}
.reel-canvas:active {
  cursor: grabbing;
}
.reel-canvas > img,
.reel-canvas > video,
.reel-canvas > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  border: 0;
}
.reel-canvas > .reel-framed-image {
  pointer-events: auto;
  user-select: none;
}
.reel-framing-controls {
  max-width: 360px;
}
.reel-video-placeholder {
  display: grid;
  gap: 0.5rem;
  place-items: center;
  font-size: 1rem;
}
.reel-video-placeholder i {
  font-size: 3rem;
}
.reel-overlay {
  position: absolute;
  z-index: 2;
  max-width: 90%;
  padding: 0.2rem 0.35rem;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-weight: 800;
  text-align: center;
  white-space: pre-wrap;
  cursor: move;
  user-select: none;
}
.reel-overlay-readonly {
  border: 0;
  background: transparent;
  pointer-events: none;
}
.reel-scene-strip {
  display: flex;
  width: 100%;
  gap: 0.5rem;
  overflow-x: auto;
}
.reel-scene-thumb {
  display: grid;
  width: 58px;
  height: 82px;
  overflow: hidden;
  flex: 0 0 58px;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #222;
  color: #fff;
}
.reel-scene-thumb.is-active {
  border-color: var(--diloya-primary);
}
.reel-scene-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-icon-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.reel-icon-palette button {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--diloya-border);
  border-radius: 9px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  cursor: pointer;
}
@media (max-width: 768px) {
  .reels-page {
    padding: 1rem 0.75rem 6rem;
  }
  .reels-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem;
  }
  .content-create-fab {
    right: 1rem;
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px) + 0.75rem);
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.15rem;
  }
  .content-create-fab i {
    margin: 0;
  }
  .content-create-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #reelEditorModal.is-active,
  #reelPreviewModal.is-active {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }
  #reelEditorModal .reel-editor-card,
  #reelPreviewModal .reel-preview-card {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    border-radius: 0;
  }
  #reelEditorModal .modal-card-head,
  #reelEditorModal .modal-card-foot,
  #reelPreviewModal .modal-card-head,
  #reelPreviewModal .modal-card-foot {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
  }
  #reelEditorModal .reel-editor-body {
    display: flex;
    min-height: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    flex-direction: column;
    overscroll-behavior: contain;
  }
  .reel-editor-tools {
    order: 2;
    overflow: visible;
    border-top: 1px solid var(--diloya-border);
    border-right: 0;
  }
  .reel-editor-workspace {
    order: 1;
  }
  .reel-canvas {
    width: min(82vw, 320px);
  }
  #reelPreviewModal .reel-preview-body {
    min-height: 0;
    flex: 1 1 auto;
  }
  #reelPreviewModal .reel-preview-stage {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 9/16;
  }
}
.reel-preview-card {
  width: min(440px, calc(100vw - 1rem));
}
.reel-preview-body {
  position: relative;
  display: grid;
  padding: 0;
  place-items: center;
  background: #08090d;
}
.reel-preview-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 9/16;
  background: #08090d;
}
.reel-preview-stage > img,
.reel-preview-stage > video,
.reel-preview-stage > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.reel-preview-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}
.reel-preview-nav.is-prev {
  left: 0.65rem;
}
.reel-preview-nav.is-next {
  right: 0.65rem;
}
.reel-preview-nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.reel-overlay.is-selected {
  border: 2px solid #a78bfa;
  background: rgba(91, 33, 182, 0.28);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
}
.reel-layer-composer {
  position: relative;
  overflow: hidden;
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 32%,
    var(--diloya-border)
  ) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--diloya-primary) 7%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  ) !important;
  box-shadow: 0 16px 38px rgba(50, 35, 105, 0.13) !important;
}
.reel-layer-composer:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(#8b5cf6, #ec4899);
  content: "";
}
.reel-layer-composer-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: -0.1rem 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--diloya-border);
}
.reel-layer-composer-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 7px 18px rgba(124, 58, 237, 0.28);
}
.reel-layer-composer-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.reel-layer-composer-header strong {
  color: var(--diloya-text);
  font-size: 0.9rem;
}
.reel-layer-composer-header small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.reel-text-layer-preview {
  display: grid;
  min-height: 92px;
  margin: 0.85rem 0;
  padding: 1rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: radial-gradient(circle at top, #39305f, #11131b 70%);
}
.reel-text-layer-preview span {
  max-width: 100%;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
.reel-text-quick-colors {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.reel-text-quick-colors button {
  width: 23px;
  height: 23px;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--diloya-border);
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.reel-text-quick-colors button:hover,
.reel-text-quick-colors button.is-active {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px #8b5cf6;
}
.reel-layer-composer #confirmReelText,
.reel-layer-composer #cancelReelText {
  min-height: 42px;
}
.mobile-more-menu {
  display: none;
}
@media (max-width: 768px) {
  .mobile-more-menu.is-active {
    position: fixed;
    z-index: 420;
    inset: 0;
    display: block;
  }
  .mobile-more-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(5, 7, 12, 0.58);
    backdrop-filter: blur(3px);
  }
  .mobile-more-sheet {
    position: absolute;
    right: 0.6rem;
    bottom: calc(5.35rem + env(safe-area-inset-bottom));
    left: 0.6rem;
    max-height: calc(100dvh - 6.7rem - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--diloya-border);
    border-radius: 22px;
    background: var(--diloya-card-bg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  }
  .mobile-more-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.35rem 0.75rem;
  }
  .mobile-more-sheet header div {
    display: flex;
    flex-direction: column;
  }
  .mobile-more-sheet header small {
    color: var(--diloya-grey);
    font-size: 0.68rem;
  }
  .mobile-more-sheet header button {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--diloya-surface-2);
    color: var(--diloya-text);
  }
  .mobile-tour-button {
    align-items: center;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--diloya-primary) 92%, white),
      color-mix(in srgb, var(--diloya-primary) 78%, black)
    ) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px
      color-mix(in srgb, var(--diloya-primary) 24%, transparent);
  }
  .mobile-tour-button:hover,
  .mobile-tour-button:focus-visible {
    color: #fff !important;
    transform: translateY(-1px);
  }
  .mobile-tour-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
  .mobile-tour-icon i {
    font-size: 0.95rem;
  }
  .mobile-tour-button > span:last-child {
    display: block;
    width: auto;
    height: auto;
    place-items: initial;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
  }
  .mobile-more-label {
    margin: 0.75rem 0 0.25rem;
    color: var(--diloya-grey);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .mobile-more-group {
    margin-top: 0.45rem;
    overflow: hidden;
    border: 1px solid var(--diloya-border);
    border-radius: 17px;
    background: color-mix(
      in srgb,
      var(--diloya-card-bg) 96%,
      var(--diloya-surface-2)
    );
  }
  .mobile-more-group summary {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    color: var(--diloya-text);
    cursor: pointer;
    list-style: none;
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }
  .mobile-more-group summary::-webkit-details-marker {
    display: none;
  }
  .mobile-more-group summary > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(
      in srgb,
      var(--diloya-primary) 12%,
      var(--diloya-card-bg)
    );
    color: var(--diloya-primary);
  }
  .mobile-more-group summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }
  .mobile-more-group summary small {
    color: var(--diloya-grey);
    font-size: 0.68rem;
  }
  .mobile-more-group summary > i {
    color: var(--diloya-grey);
    font-size: 0.75rem;
    transition: transform 0.18s ease;
  }
  .mobile-more-group[open] summary > i {
    transform: rotate(180deg);
  }
  .mobile-more-group-links {
    display: grid;
    gap: 0.35rem;
    padding: 0 0.55rem 0.55rem 1.25rem;
  }
  .mobile-more-group-links > a {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    padding: 0.68rem;
    border-top: 1px solid var(--diloya-border);
    color: var(--diloya-text);
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
  .mobile-more-group-links > a > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--diloya-surface-2);
    color: var(--diloya-primary);
  }
  .mobile-more-group-links > a > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }
  .mobile-more-group-links > a small {
    color: var(--diloya-grey);
    font-size: 0.65rem;
  }
  .mobile-more-group-links > a > i {
    color: var(--diloya-grey);
    font-size: 0.7rem;
  }
  .mobile-more-sheet > a,
  .mobile-more-sheet > button {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.4rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid var(--diloya-border);
    border-radius: 16px;
    background: color-mix(
      in srgb,
      var(--diloya-card-bg) 96%,
      var(--diloya-surface-2)
    );
    color: var(--diloya-text);
    text-align: left;
    transition:
      transform 0.15s ease,
      border-color 0.15s ease,
      background-color 0.15s ease,
      box-shadow 0.15s ease;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
  }
  .mobile-more-sheet > a:hover,
  .mobile-more-sheet > a:focus-visible,
  .mobile-more-sheet > button:hover,
  .mobile-more-sheet > button:focus-visible {
    border-color: color-mix(
      in srgb,
      var(--diloya-primary) 30%,
      var(--diloya-border)
    );
    background: color-mix(
      in srgb,
      var(--diloya-primary) 7%,
      var(--diloya-card-bg)
    );
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
  }
  .mobile-more-sheet > button {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }
  .mobile-more-sheet > a > span,
  .mobile-more-sheet > button > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(
      in srgb,
      var(--diloya-primary) 12%,
      var(--diloya-card-bg)
    );
    color: var(--diloya-primary);
  }
  .mobile-more-sheet > a > span i,
  .mobile-more-sheet > button > span i {
    font-size: 0.92rem;
  }
  .mobile-more-sheet > a > div,
  .mobile-more-sheet > a > .mobile-more-text,
  .mobile-more-sheet > button > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }
  .mobile-more-sheet > a small,
  .mobile-more-sheet > button small {
    color: var(--diloya-grey);
    font-size: 0.68rem;
  }
  .mobile-more-sheet > a > .notification-count-badge,
  .mobile-more-sheet > button > .notification-count-badge {
    position: static;
  }
  .mobile-more-sheet > a > i,
  .mobile-more-sheet > button > i {
    color: var(--diloya-grey);
    font-size: 0.75rem;
  }
}
.status-preview-remove {
  position: absolute;
  z-index: 3;
  top: -7px;
  right: -7px;
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 50%;
  background: #df3f57;
  color: #fff;
  font-size: 0.7rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.status-preview-remove:hover,
.status-preview-remove:focus-visible {
  background: #bd243c;
  transform: scale(1.08);
}
@media (max-width: 768px) {
  #reelEditorModal .reel-editor-body {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
    touch-action: pan-y;
  }
  #reelEditorModal .reel-editor-workspace {
    order: 1;
    width: 100%;
    height: min(42dvh, 370px);
    min-height: 180px;
    overflow: hidden;
    flex: 0 0 min(42dvh, 370px);
    gap: 0.45rem;
    padding: 0.55rem;
  }
  #reelEditorModal .reel-canvas {
    width: auto;
    height: min(34dvh, 300px);
    min-height: 145px;
    max-width: 90vw;
    flex: 1 1 auto;
    aspect-ratio: 9/16;
  }
  #reelEditorModal .reel-scene-strip {
    min-height: 58px;
    flex: 0 0 58px;
    padding: 0 0.2rem;
    overscroll-behavior-x: contain;
  }
  #reelEditorModal .reel-scene-thumb {
    width: 42px;
    height: 56px;
    flex-basis: 42px;
  }
  #reelEditorModal .reel-editor-tools {
    order: 2;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 1rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--diloya-border);
    border-right: 0;
    background: var(--diloya-card-bg);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #reelEditorModal .modal-card-head {
    padding: 0.7rem 0.85rem;
  }
  #reelEditorModal .modal-card-head small {
    font-size: 0.62rem;
  }
  #reelEditorModal .modal-card-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--diloya-card-bg);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.13);
  }
  #reelEditorModal .modal-card-foot .button {
    width: 100%;
    min-height: 44px;
    margin: 0;
  }
  #reelEditorModal .modal-card-head small {
    display: none;
  }
  #reelEditorModal .reel-mobile-steps {
    position: relative;
    z-index: 5;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.55rem 0.7rem 0.65rem;
    border-bottom: 1px solid var(--diloya-border);
    background: var(--diloya-card-bg);
  }
  #reelEditorModal .reel-mobile-steps:before {
    position: absolute;
    top: 1.15rem;
    right: 13%;
    left: 13%;
    height: 2px;
    background: var(--diloya-border);
    content: "";
  }
  #reelEditorModal .reel-mobile-steps button {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.18rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--diloya-grey);
    cursor: pointer;
  }
  #reelEditorModal .reel-mobile-steps span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid var(--diloya-border);
    border-radius: 50%;
    background: var(--diloya-card-bg);
    font-size: 0.68rem;
    font-weight: 850;
  }
  #reelEditorModal .reel-mobile-steps small {
    display: block;
    font-size: 0.58rem;
    font-weight: 750;
  }
  #reelEditorModal .reel-mobile-steps button[aria-current],
  #reelEditorModal .reel-mobile-steps button.is-complete {
    color: var(--diloya-primary);
  }
  #reelEditorModal .reel-mobile-steps button[aria-current] span,
  #reelEditorModal .reel-mobile-steps button.is-complete span {
    border-color: var(--diloya-primary);
    background: var(--diloya-primary);
    color: #fff;
  }
  #reelEditorModal
    .reel-editor-tools
    > [data-reel-step]:not([data-reel-step="1"]) {
    display: none;
  }
  #reelEditorModal[data-current-step="2"] .reel-editor-tools > [data-reel-step],
  #reelEditorModal[data-current-step="3"] .reel-editor-tools > [data-reel-step],
  #reelEditorModal[data-current-step="4"]
    .reel-editor-tools
    > [data-reel-step] {
    display: none;
  }
  #reelEditorModal[data-current-step="2"]
    .reel-editor-tools
    > [data-reel-step="2"],
  #reelEditorModal[data-current-step="3"]
    .reel-editor-tools
    > [data-reel-step="3"],
  #reelEditorModal[data-current-step="4"]
    .reel-editor-tools
    > [data-reel-step="4"] {
    display: flex;
  }
  #reelEditorModal[data-current-step="3"] .reel-editor-workspace {
    display: none;
  }
  #reelEditorModal[data-current-step="3"] .reel-editor-tools {
    order: 1;
    padding-top: 1rem;
  }
  #reelEditorModal[data-current-step="4"] .reel-editor-workspace {
    height: min(30dvh, 250px);
    min-height: 150px;
    flex-basis: min(30dvh, 250px);
  }
  #reelEditorModal[data-current-step="4"]
    .reel-editor-workspace
    > :not(.reel-canvas) {
    display: none !important;
  }
  #reelEditorModal[data-current-step="4"] .reel-canvas {
    height: min(27dvh, 225px);
  }
  #reelEditorModal .reel-step-back,
  #reelEditorModal .reel-step-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #reelEditorModal #publishReel {
    display: none;
  }
  #reelEditorModal .reel-editor-cancel {
    display: none;
  }
  #reelEditorModal[data-current-step="1"] .reel-step-back {
    visibility: hidden;
  }
  #reelEditorModal[data-current-step="4"] .reel-step-next {
    display: none;
  }
  #reelEditorModal[data-current-step="4"] #publishReel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #reelEditorModal .reel-review-group {
    margin: 0 !important;
  }
  #reelEditorModal .reel-review-details {
    display: grid;
    gap: 0.55rem;
  }
  #reelEditorModal .reel-review-details p {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.65rem;
    border-radius: 12px;
    background: var(--diloya-card-bg);
    color: var(--diloya-text);
    font-size: 0.76rem;
    font-weight: 750;
  }
  #reelEditorModal .reel-review-details i {
    width: 20px;
    color: var(--diloya-primary);
    text-align: center;
  }
}
@media (max-width: 768px) and (orientation: landscape) {
  #reelEditorModal .reel-editor-body {
    display: grid;
    grid-template-columns: minmax(190px, 42vw) 1fr;
  }
  #reelEditorModal .reel-editor-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: none;
  }
  #reelEditorModal .reel-canvas {
    width: auto;
    height: min(58dvh, 260px);
    min-height: 120px;
  }
  #reelEditorModal .reel-editor-tools {
    height: 100%;
    border-top: 0;
    border-left: 1px solid var(--diloya-border);
  }
}
.reel-tool-group {
  display: flex;
  gap: 0.65rem;
  flex-direction: column;
  margin: 0 0 0.85rem !important;
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: color-mix(
    in srgb,
    var(--diloya-surface-2) 70%,
    var(--diloya-card-bg)
  );
}
.reel-tool-group-title,
.reel-tool-group > .label {
  margin: 0 !important;
  color: var(--diloya-text);
  font-size: 0.78rem;
  font-weight: 850;
}
.reel-tool-group > small {
  margin-top: -0.45rem;
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.reel-tool-group .reel-icon-palette {
  margin-top: 0 !important;
}
.reel-tool-group .reel-layer-composer {
  margin-top: 0 !important;
}
.reel-overlay-size-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.reel-overlay-size-actions button {
  min-height: 40px;
  padding: 0.45rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  font-size: 0.68rem;
  font-weight: 750;
  cursor: pointer;
}
.reel-overlay-size-actions button:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.reel-editor-tools textarea,
.reel-editor-tools
  input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.reel-editor-tools select,
#reelOverlayInspector input:not([type="range"]):not([type="color"]),
#reelOverlayInspector select {
  border: 1px solid var(--diloya-border) !important;
  border-radius: 14px !important;
  background: var(--diloya-card-bg) !important;
  color: var(--diloya-text) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.reel-editor-tools textarea:focus,
.reel-editor-tools input:focus,
.reel-editor-tools select:focus,
#reelOverlayInspector input:focus,
#reelOverlayInspector select:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14) !important;
  outline: 0;
}
.reel-editor-tools textarea {
  min-height: 92px;
  padding: 0.8rem 1rem !important;
  resize: vertical;
  width: 100%;
}
.reel-layer-composer {
  padding: 1rem !important;
  border-radius: 20px !important;
}
.reel-layer-composer label,
#reelOverlayInspector label {
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 750;
}
.reel-layer-composer select {
  height: 44px;
}
.reel-icon-palette button {
  border-radius: 13px;
  transition:
    transform 0.16s,
    border-color 0.16s,
    background 0.16s,
    box-shadow 0.16s;
}
.reel-icon-palette button:hover,
.reel-icon-palette button:focus-visible {
  border-color: #8b5cf6;
  background: color-mix(in srgb, #8b5cf6 12%, var(--diloya-card-bg));
  box-shadow: 0 7px 16px rgba(124, 58, 237, 0.15);
  transform: translateY(-2px);
}
#reelOverlayInspector {
  position: relative;
  padding: 1rem !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #8b5cf6 34%, var(--diloya-border)) !important;
  border-radius: 20px !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #8b5cf6 9%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  ) !important;
  box-shadow: 0 14px 32px rgba(76, 29, 149, 0.12) !important;
}
#reelOverlayInspector:before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #f59e0b);
  content: "";
}
#reelOverlayInspector > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
#reelOverlayInspector > div:first-child strong {
  color: var(--diloya-text);
  font-size: 0.88rem;
}
#reelOverlayInspector > div:first-child span {
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, #8b5cf6 13%, var(--diloya-card-bg));
  color: #7c3aed;
  font-size: 0.62rem;
  font-weight: 800;
}
#reelOverlayInspector [data-overlay-text-field] {
  display: block;
  margin-bottom: 0.8rem;
}
#reelOverlayInspector [data-overlay-text-field].is-hidden {
  display: none !important;
}
#reelOverlayInspector #selectedOverlayText {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
}
#reelOverlayInspector > div:nth-of-type(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
#reelOverlayInspector input[type="color"] {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 0.35rem;
  padding: 0.2rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
}
#reelOverlayInspector input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  accent-color: #7c3aed;
}
#reelOverlayInspector > label:not([data-overlay-text-field]) {
  display: block;
  margin-top: 0.8rem;
}
#reelOverlayInspector #deleteSelectedOverlay {
  width: 100%;
  min-height: 42px;
  margin-top: 1rem;
  border: 1px solid color-mix(in srgb, #ef4444 32%, var(--diloya-border));
  border-radius: 13px;
  background: color-mix(in srgb, #ef4444 7%, var(--diloya-card-bg));
  color: #dc2626;
  font-weight: 800;
  cursor: pointer;
}
.reel-overlay {
  border-radius: 10px;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.reel-overlay:has(i) {
  display: grid;
  min-width: 48px;
  min-height: 48px;
  padding: 0.55rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(5px);
}
.reel-overlay.is-selected {
  border-color: #c4b5fd;
  background: rgba(76, 29, 149, 0.38);
  box-shadow:
    0 0 0 4px rgba(196, 181, 253, 0.26),
    0 8px 24px rgba(0, 0, 0, 0.28);
}
#editProfileModal {
  z-index: 500;
}
#avatarCropModal {
  z-index: 540;
}
.ecommerce-page {
  color: var(--diloya-text);
}
.commerce-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 12%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  box-shadow: 0 18px 45px rgba(48, 38, 99, 0.09);
}
.commerce-hero p,
.commerce-heading p {
  color: var(--diloya-grey);
}
.commerce-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  color: var(--diloya-primary);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store-directory-grid,
.product-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.store-directory-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  box-shadow: 0 12px 30px rgba(20, 22, 35, 0.07);
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.store-directory-card:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-text);
  transform: translateY(-4px);
}
.store-directory-cover {
  height: 135px;
  background: linear-gradient(135deg, #6045cc, #b68df5);
  background-position: center;
  background-size: cover;
}
.store-directory-body {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem;
}
.store-directory-body img,
.store-logo-fallback {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  margin-top: -35px;
  place-items: center;
  border: 4px solid var(--diloya-card-bg);
  border-radius: 18px;
  background: var(--diloya-primary);
  color: #fff;
  object-fit: cover;
}
.store-directory-body h2 {
  font-size: 1rem;
  font-weight: 850;
}
.store-directory-body p {
  display: -webkit-box;
  margin: 0.2rem 0 0.55rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.75rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.store-directory-body small {
  color: var(--diloya-primary);
  font-weight: 800;
}
.storefront-hero {
  padding: 3.5rem 1.5rem;
  background: linear-gradient(135deg, #21194a, #7359d7);
  background-position: center;
  background-size: cover;
  color: #fff;
}
.storefront-title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.storefront-title > img {
  width: 95px;
  height: 95px;
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  object-fit: cover;
}
.storefront-title a {
  color: #ddd6fe;
  font-size: 0.75rem;
}
.storefront-title h1 {
  margin: 0.3rem 0;
  font-size: 2.4rem;
  font-weight: 900;
}
.storefront-title p {
  max-width: 720px;
  color: #ede9fe;
}
.storefront-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.offers-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 28px;
  background: linear-gradient(135deg, #321b71, #7c3aed 58%, #db2777);
  color: #fff;
  box-shadow: 0 24px 55px rgba(74, 35, 150, 0.24);
}
.offers-hero span {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.offers-hero h1 {
  margin: 0.35rem 0;
  color: #fff;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 950;
}
.offers-hero p {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.82);
}
.offers-hero > i {
  font-size: clamp(3rem, 10vw, 7rem);
  opacity: 0.18;
  transform: rotate(-10deg);
}
.offers-filter {
  display: grid;
  align-items: end;
  gap: 0.75rem;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.5fr) auto auto;
}
.offers-filter label > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
}
.offers-filter .select {
  width: 100%;
}
.offers-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.offer-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: 0 12px 32px rgba(25, 20, 55, 0.08);
}
.offer-card-media {
  position: relative;
  display: grid;
  height: 210px;
  place-items: center;
  overflow: hidden;
  background: var(--diloya-surface-2);
}
.offer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.offer-card:hover .offer-card-media img {
  transform: scale(1.035);
}
.offer-card-media > span {
  color: var(--diloya-primary);
  font-size: 3rem;
}
.offer-card-media > b {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #e11d48, #f97316);
  color: #fff;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.28);
}
.offer-card-body {
  padding: 1rem;
}
.offer-store {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
}
.offer-store img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: contain;
  background: var(--diloya-surface-2);
}
.offer-store span {
  display: flex;
  flex-direction: column;
}
.offer-store small {
  color: var(--diloya-grey);
  font-size: 0.62rem;
}
.offer-card h2 {
  margin-top: 0.8rem;
  font-size: 1.08rem;
  font-weight: 900;
}
.offer-card-body > p {
  min-height: 2.8em;
  margin-top: 0.35rem;
  color: var(--diloya-grey);
  font-size: 0.8rem;
}
.offer-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 1rem;
}
.offer-card-foot > span {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.store-promotion-admin-list {
  display: grid;
  gap: 0.65rem;
}
.store-promotion-admin-card {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 15px;
  grid-template-columns: 64px 1fr auto;
}
.store-promotion-admin-card > div {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
}
.store-promotion-admin-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.store-promotion-admin-card section {
  min-width: 0;
}
.store-promotion-admin-card section > * {
  display: block;
}
.store-promotion-admin-card small,
.store-promotion-admin-card p {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .offers-filter {
    grid-template-columns: 1fr;
  }
  .offers-filter .button {
    width: 100%;
  }
  .offers-hero > i {
    display: none;
  }
  .offer-card-foot {
    align-items: stretch;
    flex-direction: column;
  }
}
.storefront-layout {
  display: grid;
  align-items: start;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) 330px;
}
.product-card {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: 0 10px 28px rgba(20, 22, 35, 0.07);
}
.product-media {
  position: relative;
  display: flex;
  height: 245px;
  overflow-x: auto;
  background: var(--diloya-surface-2);
  scroll-snap-type: x mandatory;
}
.product-media > [data-product-main-image] {
  width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: start;
}
.product-thumb {
  position: relative;
  width: 54px;
  min-width: 54px;
  height: 54px;
  margin: 183px 5px 0 -64px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}
.product-card-body {
  padding: 1rem;
}
.product-card-body h3 {
  font-size: 1.05rem;
  font-weight: 850;
}
.product-card-body > p {
  display: -webkit-box;
  min-height: 42px;
  margin: 0.25rem 0 0.7rem;
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.78rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-price {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--diloya-primary);
  font-size: 1.25rem;
}
.product-card select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
.product-videos {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.product-videos a {
  color: var(--diloya-primary);
  font-size: 0.7rem;
}
.product-buy-row {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
  grid-template-columns: 75px 1fr;
}
.cart-panel {
  position: sticky;
  top: 85px;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  background: var(--diloya-card-bg);
  box-shadow: 0 14px 38px rgba(20, 22, 35, 0.1);
}
.cart-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--diloya-border);
}
.cart-panel > header small {
  color: var(--diloya-primary);
  font-weight: 800;
  text-transform: uppercase;
}
.cart-panel > header h2 {
  font-size: 1.15rem;
  font-weight: 900;
}
.cart-panel > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--diloya-primary);
  color: #fff;
  font-weight: 850;
}
.cart-items {
  max-height: 430px;
  padding: 0.8rem;
  overflow-y: auto;
}
.cart-item {
  display: grid;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--diloya-border);
  grid-template-columns: 48px 1fr 30px;
}
.cart-item img {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
}
.cart-item div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.cart-item strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item small {
  color: var(--diloya-grey);
}
.cart-item button {
  border: 0;
  background: transparent;
  color: #dc445c;
  cursor: pointer;
}
.cart-panel > footer {
  padding: 1rem;
  border-top: 1px solid var(--diloya-border);
}
.cart-panel > footer > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.cart-login,
.cart-empty,
.commerce-empty {
  padding: 2rem;
  color: var(--diloya-grey);
  text-align: center;
}
.cart-login > i,
.cart-empty > i,
.commerce-empty > i {
  margin-bottom: 0.7rem;
  color: var(--diloya-primary);
  font-size: 2rem;
}
.cart-login p {
  margin-bottom: 1rem;
}
.commerce-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.commerce-heading small {
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}
.commerce-heading h2 {
  font-size: 1.15rem;
  font-weight: 900;
}
.commerce-step {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  border-radius: 15px;
  background: var(--diloya-primary);
  color: #fff;
  font-weight: 900;
}
.commerce-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.commerce-form-grid label {
  color: var(--diloya-text);
  font-size: 0.75rem;
  font-weight: 750;
}
.commerce-form-grid label small {
  color: var(--diloya-grey);
  font-weight: 500;
}
.commerce-form-grid .input,
.commerce-form-grid .textarea,
.commerce-form-grid .select,
.member-inline-form .input,
.member-inline-form .select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  border-color: var(--diloya-border);
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
}
.commerce-phone-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 0.35rem;
}
.commerce-phone-field [data-phone-prefix] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--diloya-border);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.commerce-form-grid .commerce-phone-field .input {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  border-radius: 0 4px 4px 0;
}
.commerce-phone-field:focus-within [data-phone-prefix] {
  border-color: var(--diloya-primary);
}
.commerce-form-wide {
  grid-column: 1/-1;
}
.company-settings-box .commerce-heading {
  align-items: center;
}
.company-settings-box #toggleCompanySettings {
  flex-shrink: 0;
}
.store-media-field > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.store-media-preview {
  display: grid;
  align-items: center;
  gap: 1rem;
  margin-top: 0.35rem;
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
  grid-template-columns: 150px 1fr;
}
.store-media-preview > div {
  display: grid;
  min-height: 100px;
  overflow: hidden;
  place-items: center;
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: var(--diloya-grey);
}
.store-media-preview.is-logo > div {
  width: 110px;
  min-height: 110px;
  justify-self: center;
  aspect-ratio: 1;
}
.store-media-preview.is-cover > div {
  aspect-ratio: 8 / 3;
}
.store-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.store-media-preview.is-logo img {
  aspect-ratio: 1;
}
.store-media-preview > div i {
  font-size: 1.6rem;
}
.store-media-preview > div span {
  font-size: 0.68rem;
}
.store-media-preview > section {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  flex-direction: column;
}
.store-media-preview > section strong {
  font-size: 0.9rem;
}
.store-media-preview > section small {
  color: var(--diloya-grey);
  font-size: 0.72rem;
  font-weight: 500;
}

/* Store identity editor: keep the square logo and panoramic cover aligned. */
#storeSettingsForm .store-media-field {
  min-width: 0;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 16%, var(--diloya-border));
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    var(--diloya-card-bg),
    var(--diloya-surface-2)
  );
  box-shadow: 0 10px 28px rgba(31, 24, 64, 0.06);
  grid-column: auto;
}
#storeSettingsForm .store-media-field:has([data-store-media-preview="logo"]) {
  grid-column: span 1;
}
#storeSettingsForm .store-media-field:has([data-store-media-preview="cover"]) {
  grid-column: span 1;
}
#storeSettingsForm .store-media-preview {
  height: 100%;
  margin-top: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
#storeSettingsForm .store-media-preview > div {
  width: 100%;
  border: 1px dashed
    color-mix(in srgb, var(--diloya-primary) 34%, var(--diloya-border));
  background: color-mix(
    in srgb,
    var(--diloya-primary) 4%,
    var(--diloya-card-bg)
  );
}
#storeSettingsForm .store-media-preview.is-logo > div {
  width: min(100%, 120px);
  min-height: 0;
  justify-self: start;
  border-radius: 24px;
}
#storeSettingsForm .store-media-preview.is-cover > div {
  min-height: 0;
  aspect-ratio: 8 / 3;
  border-radius: 16px;
}
#storeSettingsForm .store-media-preview > section {
  justify-content: space-between;
  min-width: 0;
}
#storeSettingsForm .store-media-preview > section strong {
  color: var(--diloya-text);
  font-size: 1rem;
}
#storeSettingsForm .store-media-preview > section small {
  max-width: 58ch;
  line-height: 1.45;
}
#storeSettingsForm .store-media-preview > section .button {
  min-height: 2.35rem;
  border-radius: 10px;
}
#storeSettingsForm > button[type="submit"] {
  width: fit-content;
  min-width: 190px;
  justify-self: end;
  border-radius: 11px;
}
@media (max-width: 820px) {
  #storeSettingsForm .store-media-field:has([data-store-media-preview]) {
    grid-column: 1 / -1;
  }
  #storeSettingsForm .store-media-preview.is-logo > div {
    width: 110px;
  }
}
@media (max-width: 560px) {
  #storeSettingsForm .store-media-field {
    padding: 0.8rem;
    border-radius: 14px;
  }
  #storeSettingsForm .store-media-preview.is-logo > div {
    width: 96px;
  }
  #storeSettingsForm > button[type="submit"] {
    width: 100%;
    justify-self: stretch;
  }
}

/* The store image cropper is appended dynamically after the page content. */
body:has(#storeSettingsForm)
  > .modal.is-active
  .modal-card:has(canvas)
  .modal-card-foot {
  justify-content: flex-start;
}
body
  > .modal.is-active
  .modal-card:has(.modal-card-body canvas)
  .modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
body
  > .modal.is-active
  .modal-card:has(.modal-card-body canvas)
  .modal-card-head
  > div {
  min-width: 0;
  flex: 1;
}
body
  > .modal.is-active
  .modal-card:has(.modal-card-body canvas)
  .modal-card-head
  .delete {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
}
body:has(#storeSettingsForm)
  > .modal.is-active
  .modal-card:has(canvas[width="600"][height="600"]) {
  width: min(460px, calc(100vw - 2rem));
  max-width: 460px !important;
}
body:has(#storeSettingsForm)
  > .modal.is-active
  canvas[width="600"][height="600"] {
  width: min(100%, 340px) !important;
  margin-inline: auto;
}
body:has(#storeSettingsForm)
  > .modal.is-active
  .modal-card:has(canvas[width="600"][height="600"])
  .modal-card-body {
  padding-block: 1rem;
}
@media (max-width: 560px) {
  .store-media-preview {
    grid-template-columns: 1fr;
  }
  .store-media-preview.is-cover > div {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .company-settings-box .commerce-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .company-settings-box #toggleCompanySettings {
    width: 100%;
  }
}
.workspace-picker {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.workspace-picker label {
  font-size: 0.72rem;
  font-weight: 800;
}
.workspace-picker select {
  display: block;
  min-width: 280px;
  margin-top: 0.3rem;
}
.commerce-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.35rem;
  overflow-x: auto;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.commerce-tabs button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--diloya-grey);
  font-weight: 800;
  cursor: pointer;
}
.commerce-tabs button.is-active {
  background: var(--diloya-primary);
  color: #fff;
}
.commerce-stats {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.commerce-stats article {
  display: grid;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  grid-template-columns: 42px 1fr;
}
.commerce-stats i {
  color: var(--diloya-primary);
  font-size: 1.25rem;
  grid-row: span 2;
}
.commerce-stats strong {
  font-size: 1.4rem;
}
.commerce-stats span {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.management-card-list {
  display: grid;
  gap: 0.7rem;
}
.management-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
}
.management-card > img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 13px;
  object-fit: cover;
}
.management-card > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.management-card small {
  color: var(--diloya-grey);
}
.management-card p {
  overflow: hidden;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-inline-form {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr 220px auto;
}
.sales-workspace {
  display: grid;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: var(--diloya-card-bg);
  grid-template-columns: 260px minmax(320px, 1fr) 260px;
}

.store-quotes-box {
  margin-top: 1.25rem;
}
.store-quote-list {
  display: grid;
  gap: 0.75rem;
}
.store-quote-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--diloya-border, #e7e2ef);
  border-radius: 14px;
}
.store-quote-card small {
  display: block;
  color: #756d82;
}
.store-quote-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.store-quote-editor {
  padding: 1rem;
  overflow: hidden;
}
.store-quote-editor .modal-card {
  width: min(960px, calc(100vw - 2rem));
  height: min(900px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.store-quote-editor .modal-card > form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.store-quote-editor .modal-card-body {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.store-quote-editor .modal-card-head,
.store-quote-editor .modal-card-foot {
  flex: 0 0 auto;
}
.store-quote-editor .modal-card-head {
  position: relative;
  padding-right: 4.25rem;
}
.store-quote-editor .modal-card-head > div {
  min-width: 0;
  padding-right: 0.5rem;
}
.store-quote-editor .modal-card-head .delete {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 1.25rem;
  flex: none;
  margin: 0;
  transform: translateY(-50%);
}
.store-quote-editor .quote-customer-help {
  display: block;
  margin-top: 0.4rem;
  color: var(--diloya-grey, #756d82);
  font-size: 0.76rem;
  line-height: 1.35;
}
.quote-customer-mode {
  padding: 0.9rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.quote-customer-mode strong {
  display: block;
  margin-bottom: 0.55rem;
}
.quote-totals-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.store-quote-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.store-quote-editor-grid .is-wide {
  grid-column: 1 / -1;
}
.store-quote-item-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(190px, 1fr) 90px 140px auto;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  align-items: start;
}
.quote-catalog-search {
  position: relative;
  min-width: 0;
}
.quote-catalog-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.3rem);
  left: 0;
  width: min(430px, 85vw);
  max-height: 270px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--diloya-border, #e7e2ef);
  border-radius: 12px;
  background: var(--diloya-card-bg, #fff);
  box-shadow: 0 16px 35px rgba(36, 24, 58, 0.18);
}
.quote-catalog-results button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--diloya-text, #272231);
  text-align: left;
  cursor: pointer;
}
.quote-catalog-results button:hover,
.quote-catalog-results button:focus {
  background: color-mix(
    in srgb,
    var(--diloya-primary, #6042bd) 10%,
    transparent
  );
  outline: none;
}
.quote-catalog-results button span {
  min-width: 0;
}
.quote-catalog-results button strong,
.quote-catalog-results button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-catalog-results button small {
  margin-top: 0.15rem;
  color: var(--diloya-grey, #756d82);
  font-size: 0.72rem;
}
.quote-catalog-results button b {
  flex: none;
  color: var(--diloya-primary, #6042bd);
  font-size: 0.8rem;
}
.conversation-quotes-panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--diloya-border);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 6%,
    var(--diloya-card-bg)
  );
}
.conversation-quotes-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.conversation-quotes-panel small {
  display: block;
  color: var(--diloya-grey);
}
.conversation-quote-chips {
  display: grid;
  gap: 0.5rem;
}
.conversation-quote-chips article {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
}
@media (max-width: 768px) {
  .store-quote-card {
    grid-template-columns: 1fr;
  }
  .store-quote-actions {
    justify-content: flex-start;
  }
  .store-quote-editor-grid,
  .store-quote-item-row {
    grid-template-columns: 1fr;
  }
  .store-quote-editor-grid .is-wide {
    grid-column: auto;
  }
  .store-quote-editor {
    padding: 0.5rem;
  }
  .store-quote-editor .modal-card {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0;
  }
  .store-quote-editor .modal-card-head {
    padding: 1rem 3.5rem 1rem 1rem;
  }
  .store-quote-editor .modal-card-head .delete {
    right: 1rem;
  }
  .store-quote-editor .modal-card-body {
    padding: 1rem;
  }
  .store-quote-editor .modal-card-foot {
    padding: 0.85rem 1rem;
  }
  .quote-totals-row {
    grid-template-columns: 1fr;
  }
}
.sales-workspace > aside,
.sales-workspace > section {
  padding: 1rem;
  overflow: auto;
  border-right: 1px solid var(--diloya-border);
}
.sales-workspace > aside:last-child {
  border: 0;
}
.conversation-row,
.customer-chat-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem;
  border: 0;
  border-bottom: 1px solid var(--diloya-border);
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
}
.conversation-row > *,
.customer-chat-row > div {
  display: flex;
  flex-direction: column;
}
.conversation-row small,
.customer-chat-row small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
}
.conversation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--diloya-border);
}
.conversation-head > div {
  display: flex;
  flex-direction: column;
}
.message-thread {
  display: flex;
  min-height: 330px;
  max-height: 500px;
  padding: 1rem 0;
  overflow-y: auto;
  flex-direction: column;
  gap: 0.6rem;
}
.message-bubble {
  max-width: 82%;
  align-self: flex-start;
  padding: 0.65rem 0.8rem;
  border-radius: 4px 15px 15px;
  background: var(--diloya-surface-2);
}
.message-bubble.is-own {
  align-self: flex-end;
  border-radius: 15px 4px 15px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 17%,
    var(--diloya-card-bg)
  );
}
.message-bubble.is-system {
  max-width: 100%;
  align-self: center;
  background: transparent;
  color: var(--diloya-grey);
  text-align: center;
}
.message-bubble strong {
  display: block;
  font-size: 0.65rem;
}
.message-bubble p {
  font-size: 0.8rem;
  white-space: pre-wrap;
}
.message-bubble time {
  display: block;
  margin-top: 0.25rem;
  color: var(--diloya-grey);
  font-size: 0.62rem;
  text-align: right;
}
.message-day-separator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.45rem 0;
  color: var(--diloya-grey);
  font-size: 0.68rem;
  font-weight: 700;
}
.message-day-separator::before,
.message-day-separator::after {
  height: 1px;
  background: var(--diloya-border);
  content: "";
  flex: 1;
}
.conversation-closed-notice {
  padding: 0.8rem;
  border-radius: 10px;
  background: var(--diloya-surface-2);
  color: var(--diloya-grey);
  font-size: 0.78rem;
  text-align: center;
}
.conversation-typing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: max-content;
  margin-top: 0.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 15%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.62rem;
  font-weight: 800;
}
.conversation-typing-badge i {
  animation: typing-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes typing-pulse {
  to {
    opacity: 0.35;
  }
}
.sales-global-alert-link {
  position: relative;
}
.sales-global-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border: 2px solid var(--diloya-card-bg);
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
}
.sales-global-alert-badge.is-typing {
  min-width: auto;
  background: #7c3aed;
}
.order-message {
  display: flex;
  margin-top: 0.5rem;
  padding: 0.6rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 30%, var(--diloya-border));
  border-radius: 10px;
  flex-direction: column;
}
.order-message span {
  font-size: 0.72rem;
}
.order-message > div {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.message-compose {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto;
}
.message-compose textarea {
  min-height: 64px;
  resize: none;
}
.order-mini {
  display: flex;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--diloya-border);
  flex-direction: column;
}
.order-mini span {
  color: var(--diloya-primary);
  font-weight: 800;
}
.order-mini small {
  color: var(--diloya-grey);
}
.customer-conversations {
  margin-top: 2rem;
}
.customer-chat-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 280px 1fr;
}
.customer-chat-row img {
  width: 42px;
  height: 42px;
  margin-right: 0.7rem;
  border-radius: 12px;
  object-fit: cover;
}
.customer-chat-row > div {
  margin-right: auto;
}
.customer-chat-row > i {
  color: var(--diloya-grey);
}
@media (max-width: 900px) {
  .storefront-layout {
    grid-template-columns: 1fr;
  }
  .cart-panel {
    position: static;
  }
  .commerce-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sales-workspace {
    grid-template-columns: 220px 1fr;
  }
  .sales-workspace > aside:last-child {
    display: none;
  }
  .customer-chat-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .commerce-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 1.25rem;
  }
  .storefront-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .storefront-title h1 {
    font-size: 1.8rem;
  }
  .commerce-form-grid,
  .commerce-stats,
  .member-inline-form {
    grid-template-columns: 1fr;
  }
  .commerce-form-wide {
    grid-column: auto;
  }
  .workspace-picker {
    align-items: stretch;
    flex-direction: column;
  }
  .workspace-picker select {
    width: 100%;
    min-width: 0;
  }
  .sales-workspace {
    display: flex;
    flex-direction: column;
  }
  .sales-workspace > aside {
    max-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--diloya-border);
  }
  .message-compose {
    grid-template-columns: 1fr;
  }
  .commerce-tabs button {
    white-space: nowrap;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
}
.reel-feed-nav {
  position: absolute;
  z-index: 6;
  top: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(8, 9, 13, 0.58);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(7px);
  cursor: pointer;
}
.reel-feed-nav.is-prev {
  left: 0.65rem;
}
.reel-feed-nav.is-next {
  right: 0.65rem;
}
.reel-card:has(.reel-actions-vertical) .reel-feed-nav.is-next {
  right: 4.45rem;
}
.reel-feed-nav:disabled {
  opacity: 0.28;
  cursor: default;
}
.reel-scene-counter {
  position: absolute;
  z-index: 6;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(8, 9, 13, 0.62);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 850;
  backdrop-filter: blur(7px);
}
.reel-meta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.reel-remove-scene {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -0.35rem;
}
.reel-remove-scene.is-hidden {
  display: none !important;
}
.reel-music-group {
  position: relative;
  overflow: hidden;
}
.reel-music-group:after {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, #ec4899 11%, transparent);
  content: "";
  pointer-events: none;
}
.reel-music-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}
.reel-music-row select {
  width: 100%;
  min-width: 0;
  padding: 0 0.75rem;
}
.reel-music-row .button {
  justify-content: center !important;
  border-radius: 14px;
}
.reel-music-group input[type="range"] {
  width: 100%;
  accent-color: #8b5cf6;
}
.reel-music-control {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: var(--diloya-surface-2);
  color: var(--diloya-text);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}
.reel-music-control i {
  color: #8b5cf6;
}
.reel-music-control.is-playing {
  border-color: color-mix(in srgb, #8b5cf6 42%, var(--diloya-border));
  background: color-mix(in srgb, #8b5cf6 10%, var(--diloya-card-bg));
}
.reel-actions {
  display: grid;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--diloya-border);
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}
.reel-actions-vertical {
  position: absolute;
  z-index: 12;
  top: 50%;
  right: 0.7rem;
  display: flex;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  flex-direction: column;
  gap: 0.32rem;
  transform: translateY(-50%);
  pointer-events: auto;
}
.reel-actions-vertical .reel-action {
  display: flex;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 0.38rem 0.2rem;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.08rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    rgba(35, 30, 52, 0.84),
    rgba(8, 9, 13, 0.76)
  );
  color: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px) saturate(1.25);
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.reel-actions-vertical .reel-action .icon {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  font-size: 1.05rem;
}
.reel-actions-vertical .reel-action:hover,
.reel-actions-vertical .reel-action:focus-visible {
  background: rgba(25, 20, 42, 0.88);
  color: #fff;
  transform: scale(1.06);
}
.reel-actions-vertical .reel-action[data-tooltip]::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.65rem);
  padding: 0.38rem 0.55rem;
  border-radius: 8px;
  background: rgba(11, 10, 18, 0.92);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  white-space: nowrap;
}
.reel-actions-vertical .reel-action[data-tooltip]:hover::after,
.reel-actions-vertical .reel-action[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.reel-actions-vertical .reel-action.is-active {
  border-color: color-mix(in srgb, currentColor 65%, #fff);
  background: rgba(8, 9, 13, 0.84);
}
.reel-actions-vertical .reel-sound-action {
  margin-top: 0.12rem;
  border-color: rgba(196, 181, 253, 0.5);
}
.reel-actions-vertical .reel-sound-action.is-active {
  color: #ddd6fe;
  background: linear-gradient(
    145deg,
    rgba(124, 58, 237, 0.92),
    rgba(76, 29, 149, 0.9)
  );
  box-shadow: 0 7px 20px rgba(91, 33, 182, 0.38);
}
.reel-actions-vertical .reel-action > span:last-child {
  max-width: 42px;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
}
.reel-actions-vertical .reel-view-count {
  cursor: default;
}
.reel-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--diloya-grey);
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    color 0.16s,
    background 0.16s,
    transform 0.16s;
}
.reel-action:hover,
.reel-action:focus-visible {
  background: var(--diloya-surface-2);
  color: var(--diloya-primary);
  transform: translateY(-1px);
}
.reel-action.is-active {
  color: #e54873;
}
.reel-action[aria-label="Republicar"].is-active {
  color: #20a464;
}
.reel-action[aria-label="Guardar"].is-active {
  color: #3188db;
}
.reel-action:disabled {
  opacity: 0.5;
}
.reel-comments-modal {
  z-index: 12500;
}
.reel-comments-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: min(620px, 100%);
  max-height: min(78dvh, 720px);
  margin: auto;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--diloya-border);
  border-radius: 24px 24px 0 0;
  background: var(--diloya-card-bg);
  box-shadow: 0 -20px 55px rgba(0, 0, 0, 0.24);
}
.reel-comments-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--diloya-border);
}
.reel-comments-sheet > header small {
  color: var(--diloya-primary);
  font-size: 0.65rem;
  font-weight: 850;
  text-transform: uppercase;
}
.reel-comments-sheet > header h2 {
  color: var(--diloya-text);
  font-size: 1.05rem;
  font-weight: 850;
}
.reel-comments-list {
  min-height: 190px;
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.reel-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.reel-comment-item:last-child {
  border-bottom: 0;
}
.reel-comment-item img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  object-fit: cover;
}
.reel-comment-item > div {
  min-width: 0;
  flex: 1;
}
.reel-comment-item strong {
  display: block;
  color: var(--diloya-text);
  font-size: 0.78rem;
}
.reel-comment-item p {
  margin: 0.15rem 0;
  color: var(--diloya-text);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.reel-comment-item small {
  color: var(--diloya-grey);
  font-size: 0.62rem;
}
.reel-comments-empty {
  padding: 2.5rem 1rem;
  color: var(--diloya-grey);
  text-align: center;
}
.reel-comment-form {
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--diloya-border);
  background: var(--diloya-card-bg);
}
.reel-comment-form textarea {
  border-radius: 15px;
  resize: none;
}
.reel-comment-form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.45rem;
}
.reel-comment-form .button {
  border-radius: 12px;
}
@media (max-width: 768px) {
  .reel-comments-sheet {
    width: 100%;
    height: min(88dvh, 760px);
    max-height: none;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
  .reel-comment-form {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
  }
  .reel-comment-form textarea {
    min-height: 76px;
    font-size: 16px;
    touch-action: manipulation;
  }
  .reel-actions-vertical {
    top: 50%;
    right: max(0.55rem, env(safe-area-inset-right));
    gap: 0.28rem;
  }
  .reel-actions-vertical .reel-action {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .reel-actions-vertical .reel-action[data-tooltip]::after {
    display: none;
  }
}
.reel-actions.post-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  grid-template-columns: none;
  overflow-x: auto;
}
.reel-actions.post-actions .reel-action {
  flex: 0 0 auto;
}
.reel-actions.post-actions .reel-share-action {
  margin-left: auto;
}
.reel-actions .reel-action[aria-label="Editar"] {
  width: 38px;
  min-width: 38px;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: var(--diloya-primary);
}
.reel-actions .reel-action[aria-label="Editar"] .icon {
  margin: 0;
}
.reel-action[aria-label="Redilo"].is-active {
  color: #20a464;
}
.saved-page {
  padding-top: 1.5rem;
  padding-bottom: 6rem;
}
.saved-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.35rem 1.45rem;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--diloya-primary) 18%, transparent),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--diloya-card-bg),
      color-mix(in srgb, var(--diloya-primary) 7%, var(--diloya-card-bg))
    );
  box-shadow: 0 14px 36px
    color-mix(in srgb, var(--diloya-primary) 8%, transparent);
}
.saved-hero-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}
.saved-hero-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--diloya-primary), #7c3aed);
  color: #fff;
  box-shadow: 0 9px 22px
    color-mix(in srgb, var(--diloya-primary) 28%, transparent);
  font-size: 1.2rem;
}
.saved-hero small,
.saved-section-heading small {
  color: var(--diloya-primary);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.saved-hero h1 {
  margin: 0.12rem 0 0.18rem;
  color: var(--diloya-text);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}
.saved-hero p {
  color: var(--diloya-grey);
  line-height: 1.4;
}
.saved-private-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-grey);
  font-size: 0.68rem;
  font-weight: 750;
}
.saved-layout {
  display: grid;
  gap: 1rem;
}
.saved-section {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 20px;
  background: color-mix(
    in srgb,
    var(--diloya-card-bg) 96%,
    var(--diloya-surface-2)
  );
}
.saved-section-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.saved-section-heading > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--diloya-primary) 11%, transparent);
  color: var(--diloya-primary);
}
.saved-section-heading h2 {
  color: var(--diloya-text);
  font-size: 1rem;
  font-weight: 900;
}
.saved-reels-list,
.saved-posts-list {
  display: grid;
  gap: 0.65rem;
}
.saved-reel-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  transition:
    border-color 0.16s,
    transform 0.16s;
}
.saved-reel-card:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-text);
  transform: translateY(-1px);
}
.saved-reel-card > img,
.saved-reel-video {
  width: 54px;
  height: 72px;
  flex: 0 0 54px;
  border-radius: 10px;
  object-fit: cover;
}
.saved-reel-video {
  display: grid;
  place-items: center;
  background: #101218;
  color: #fff;
}
.saved-reel-card > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.saved-reel-card strong,
.saved-reel-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-reel-card small {
  color: var(--diloya-grey);
}
.saved-reels-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px dashed var(--diloya-border);
  border-radius: 14px;
  color: var(--diloya-grey);
}
.saved-empty-state {
  display: grid;
  justify-items: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--diloya-border);
  border-radius: 16px;
  color: var(--diloya-grey);
  text-align: center;
}
.saved-empty-state > span {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 0.8rem;
  place-items: center;
  border-radius: 17px;
  background: color-mix(in srgb, var(--diloya-primary) 10%, transparent);
  color: var(--diloya-primary);
  font-size: 1.2rem;
}
.saved-empty-state strong {
  color: var(--diloya-text);
}
.saved-empty-state p {
  max-width: 360px;
  margin: 0.25rem 0 1rem;
  font-size: 0.78rem;
}
.support-page {
  padding-top: 1.5rem;
  padding-bottom: 6rem;
}
.donate-content {
  width: min(100%, 760px);
  margin: auto;
}
.support-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.45rem;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--support-color) 25%, var(--diloya-border));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--support-color) 17%, transparent),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--diloya-card-bg),
      color-mix(in srgb, var(--support-color) 6%, var(--diloya-card-bg))
    );
  box-shadow: 0 14px 36px
    color-mix(in srgb, var(--support-color) 8%, transparent);
}
.support-hero.is-bug {
  --support-color: #f97316;
}
.support-hero.is-donation {
  --support-color: #e54873;
}
.support-hero-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(
    145deg,
    var(--support-color),
    color-mix(in srgb, var(--support-color) 65%, #5b21b6)
  );
  color: #fff;
  box-shadow: 0 9px 22px
    color-mix(in srgb, var(--support-color) 28%, transparent);
  font-size: 1.2rem;
}
.support-hero small {
  color: var(--support-color);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.support-hero h1 {
  margin: 0.12rem 0 0.22rem;
  color: var(--diloya-text);
  font-size: clamp(1.65rem, 4vw, 2rem);
  font-weight: 900;
  line-height: 1.12;
}
.support-hero p {
  color: var(--diloya-grey);
  line-height: 1.45;
}
.support-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.46rem 0.68rem;
  border: 1px solid var(--diloya-border);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--support-color) 7%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-grey);
  font-size: 0.66rem;
  font-weight: 750;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .saved-page {
    padding: 1rem 0.75rem 5rem;
  }
  .saved-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 18px;
  }
  .saved-hero-copy {
    align-items: flex-start;
    gap: 0.75rem;
  }
  .saved-hero-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    font-size: 1rem;
  }
  .saved-hero h1 {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }
  .saved-hero p {
    font-size: 0.8rem;
  }
  .saved-private-badge {
    align-self: flex-start;
  }
  .saved-section {
    padding: 0.75rem;
    border-radius: 17px;
  }
  .saved-reel-card {
    gap: 0.65rem;
    padding: 0.55rem;
  }
  .saved-reel-card > img,
  .saved-reel-video {
    width: 48px;
    height: 64px;
    flex-basis: 48px;
  }
  .saved-posts-list .post-card {
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
  }
  .support-page {
    padding: 1rem 0.75rem 5rem;
  }
  .support-hero {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 18px;
  }
  .support-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1rem;
  }
  .support-hero h1 {
    overflow-wrap: anywhere;
    font-size: clamp(1.35rem, 6.8vw, 1.75rem);
  }
  .support-hero p {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .support-hero-note {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .report-bug-page form.box,
  .donate-page .box,
  .donation-report-box {
    padding: 1rem;
    border-radius: 17px;
  }
}
@media (max-width: 768px) {
  #editProfileModal.is-active {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }
  #editProfileModal > .modal-card {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    border-radius: 0;
  }
  #editProfileModal .modal-card-head,
  #editProfileModal .modal-card-foot {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    background: var(--diloya-card-bg);
  }
  #editProfileModal .modal-card-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 1rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #editProfileModal .modal-card-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.65rem;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.12);
  }
  #editProfileModal .modal-card-foot .button {
    width: 100%;
    min-height: 44px;
    margin: 0;
  }
}
.admin-music-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.admin-music-table td {
  vertical-align: middle;
}
.admin-music-table small {
  max-width: 260px;
  overflow-wrap: anywhere;
}
#reelMusicModal {
  z-index: 13000;
}
@media (max-width: 768px) {
  .admin-music-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-music-heading .button {
    width: 100%;
  }
  #reelMusicModal .modal-card {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  #reelMusicModal .modal-card-body {
    overflow-y: auto;
  }
}
.repost-attribution {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.repost-attribution > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--diloya-text);
}
.repost-attribution img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.repost-attribution small {
  color: var(--diloya-grey);
}
.repost-original-card {
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: color-mix(
    in srgb,
    var(--diloya-card-bg) 92%,
    var(--diloya-surface-2)
  );
  box-shadow: 0 5px 18px color-mix(in srgb, #000 5%, transparent);
}
.has-reels-snap {
  scroll-padding-top: 72px;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
.reels-feed .reel-card {
  scroll-margin-top: 72px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.reels-feed .reel-card.is-current-reel {
  border-color: color-mix(
    in srgb,
    var(--diloya-primary) 52%,
    var(--diloya-border)
  );
  box-shadow: 0 16px 42px
    color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
@media (max-width: 768px) {
  .has-reels-snap {
    scroll-padding-top: 58px;
  }
  .reels-feed .reel-card {
    scroll-margin-top: 58px;
  }
  .reels-feed .reel-playback {
    height: min(calc((100vw - 1.5rem) * 1.7778), calc(100dvh - 245px));
    min-height: 360px;
    aspect-ratio: auto;
  }
  .reels-feed .reel-card.is-current-reel {
    transform: scale(1.005);
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-reels-snap {
    scroll-behavior: auto;
  }
  .reels-feed .reel-card {
    transition: none;
  }
}
.commerce-billing-box {
  padding: 1.15rem;
}
.commerce-billing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.commerce-billing-head small {
  color: var(--diloya-primary);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}
.commerce-billing-head h2 {
  margin: 0.15rem 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 900;
}
.commerce-billing-head p {
  color: var(--diloya-grey);
  font-size: 0.78rem;
  line-height: 1.45;
}
.commerce-billing-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.commerce-billing-list {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.commerce-billing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.commerce-billing-item:last-child {
  border-bottom: 0;
}
.commerce-billing-item strong {
  display: block;
  font-size: 0.82rem;
}
.commerce-billing-item small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.store-breadcrumbs {
  margin-bottom: 1rem;
  --breadcrumb-item-color: #e9ddff;
  --breadcrumb-item-hover-color: #fff;
  --breadcrumb-item-separator-color: rgba(255, 255, 255, 0.55);
}
.store-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
}
.storefront-hero .store-breadcrumbs {
  margin-bottom: 1rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}
.storefront-hero .store-breadcrumbs .is-active a {
  color: #fff;
  font-weight: 850;
}
.ecommerce-page > .container > .store-breadcrumbs {
  padding: 0.25rem 0;
}
.ecommerce-page > .container > .store-breadcrumbs .is-active a {
  color: var(--diloya-primary);
  font-weight: 850;
}
.commerce-analytics-box,
.commerce-shipping-box,
.commerce-banner-box,
.commerce-payment-box {
  padding: 1.15rem;
}
.commerce-analytics-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.commerce-analytics-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}
.commerce-analytics-grid article {
  padding: 0.9rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-surface-2);
}
.commerce-analytics-grid h3 {
  margin-bottom: 0.65rem;
  font-size: 0.82rem;
  font-weight: 850;
}
.commerce-analytics-row,
.commerce-analytics-item,
.commerce-shipping-item,
.commerce-banner-item,
.commerce-payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.commerce-analytics-row:last-child,
.commerce-analytics-item:last-child,
.commerce-shipping-item:last-child,
.commerce-banner-item:last-child,
.commerce-payment-item:last-child {
  border-bottom: 0;
}
.commerce-analytics-row span,
.commerce-shipping-item small,
.commerce-analytics-item small,
.commerce-banner-item small,
.commerce-payment-item small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.commerce-analytics-row strong {
  font-size: 0.85rem;
}
.commerce-analytics-item img,
.commerce-banner-item img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  object-fit: cover;
}
.commerce-analytics-item div,
.commerce-banner-item div,
.commerce-payment-item div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.commerce-analytics-item strong,
.commerce-banner-item strong,
.commerce-payment-item strong {
  font-size: 0.78rem;
}
.commerce-analytics-item span {
  color: var(--diloya-primary);
  font-weight: 850;
}
.commerce-shipping-list,
.commerce-banner-list,
.commerce-payment-list {
  display: flex;
  gap: 0.65rem;
  flex-direction: column;
}
.commerce-shipping-item div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.commerce-shipping-item strong {
  font-size: 0.82rem;
}
.commerce-banner-item img {
  width: 110px;
  height: 64px;
  border-radius: 14px;
}
.commerce-banner-item .button,
.commerce-payment-item .button {
  margin-left: auto;
}
.commerce-order-detail .order-shipping-form .input {
  margin-bottom: 0.45rem;
}
.admin-shipping-list {
  display: flex;
  gap: 0.65rem;
  flex-direction: column;
}
.admin-shipping-item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-surface-2);
}
.admin-shipping-item strong {
  display: block;
  font-size: 0.85rem;
}
.admin-shipping-item small,
.admin-shipping-item p {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.admin-shipping-item p {
  margin-top: 0.15rem;
}
.product-discount-slider {
  padding: 0.85rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 16%, var(--diloya-border));
  border-radius: 16px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.product-condition-toggle {
  min-width: 0;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 18%, var(--diloya-border));
  border-radius: 16px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 4%,
    var(--diloya-card-bg)
  );
}
.product-condition-toggle legend {
  padding-inline: 0.25rem;
  color: var(--diloya-text);
  font-size: 0.82rem;
  font-weight: 900;
}
.product-condition-toggle > p {
  margin-bottom: 0.7rem;
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.product-condition-toggle > div {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-condition-toggle label {
  cursor: pointer;
}
.product-condition-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.product-condition-toggle label > span {
  display: grid;
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 13px;
  background: var(--diloya-card-bg);
  grid-template-columns: 34px 1fr;
  transition: 0.16s ease;
}
.product-condition-toggle label > span > i {
  display: grid;
  width: 34px;
  height: 34px;
  color: var(--diloya-primary);
  place-items: center;
  grid-row: span 2;
}
.product-condition-toggle label > span strong,
.product-condition-toggle label > span small {
  min-width: 0;
}
.product-condition-toggle input:checked + span {
  border-color: var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--diloya-primary) 15%, transparent);
}
.product-condition-badge {
  width: fit-content;
  font-weight: 850;
}
.offering-type-selector {
  display: grid;
  align-items: end;
  gap: 0.35rem 1rem;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 24%, var(--diloya-border));
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--diloya-primary) 8%, var(--diloya-card-bg)),
    var(--diloya-card-bg)
  );
  grid-template-columns: minmax(240px, 0.7fr) 1fr;
}
.offering-type-selector label {
  font-size: 0.86rem;
  font-weight: 900;
}
.offering-type-selector p {
  align-self: center;
  color: var(--diloya-grey);
  font-size: 0.72rem;
}
.adaptive-offering-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adaptive-offering-grid label {
  font-size: 0.72rem;
  font-weight: 750;
}
.adaptive-offering-grid .input {
  margin-top: 0.3rem;
}
.product-classification-badges {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.product-core-fields {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 17px;
  background: var(--diloya-card-bg);
}
.product-core-fields > label {
  display: block;
}
.product-core-secondary {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-core-secondary label {
  min-width: 0;
}
.product-core-fields .input {
  width: 100%;
}
.product-adaptive-details {
  margin-bottom: 1.25rem;
}
.product-adaptive-details > div {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.product-adaptive-details article {
  padding: 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.product-adaptive-details small,
.product-adaptive-details strong {
  display: block;
}
.product-adaptive-details small {
  color: var(--diloya-grey);
  font-size: 0.65rem;
  text-transform: capitalize;
}
.product-adaptive-details strong {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .offering-type-selector,
  .adaptive-offering-grid,
  .product-core-secondary {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .product-condition-toggle > div {
    grid-template-columns: 1fr;
  }
}
.product-discount-slider .slider {
  margin-top: 0.55rem;
}
.product-price-block {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.product-price.is-discounted {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.product-price-original,
.commerce-price-original {
  text-decoration: line-through;
  color: var(--diloya-grey);
}
.product-price-final {
  font-size: 1rem;
  font-weight: 900;
  color: var(--diloya-text);
}
.product-offer-badge {
  border: 0;
  background: linear-gradient(135deg, #e11d48, #f97316) !important;
  color: #fff !important;
  font-weight: 900;
  letter-spacing: 0.035em;
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.22);
}
.has-product-gallery-controls {
  position: relative;
}
.has-product-gallery-controls > [data-product-main-image],
.has-product-gallery-controls > img.is-main,
.store-product-figure.has-product-gallery-controls > img {
  transform-origin: center center;
  transition: transform 0.2s ease;
}
.has-product-gallery-controls img.is-zoomed {
  cursor: zoom-out;
}
.has-product-gallery-controls img.is-draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.has-product-gallery-controls img.is-dragging {
  cursor: grabbing;
  transition: none;
}
.has-product-gallery-controls.is-gallery-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12050 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: clamp(0.75rem, 3vw, 2rem) !important;
  overflow: hidden !important;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(9, 7, 20, 0.94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}
.has-product-gallery-controls.is-gallery-expanded > [data-product-main-image],
.has-product-gallery-controls.is-gallery-expanded > img.is-main,
.store-product-figure.has-product-gallery-controls.is-gallery-expanded > img {
  position: relative;
  z-index: 2;
  width: min(88vw, 1100px) !important;
  height: min(76dvh, 820px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 16px;
}
.has-product-gallery-controls.is-gallery-expanded
  > :not([data-product-main-image]):not(.is-main):not(
    .product-gallery-controls
  ) {
  display: none !important;
}
.has-product-gallery-controls.is-gallery-expanded .product-gallery-controls {
  position: fixed;
  right: max(0.8rem, env(safe-area-inset-right));
  bottom: max(0.8rem, env(safe-area-inset-bottom));
  left: max(0.8rem, env(safe-area-inset-left));
  z-index: 12051;
  margin-inline: auto;
  max-width: 720px;
}
@media (max-width: 560px) {
  .has-product-gallery-controls.is-gallery-expanded {
    padding: 0.5rem !important;
  }
  .has-product-gallery-controls.is-gallery-expanded > [data-product-main-image],
  .has-product-gallery-controls.is-gallery-expanded > img.is-main,
  .store-product-figure.has-product-gallery-controls.is-gallery-expanded > img {
    width: 94vw !important;
    height: 72dvh !important;
    border-radius: 10px;
  }
}
.product-gallery-controls {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  left: 0.65rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}
.product-gallery-controls button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  place-items: center;
  background: rgba(20, 16, 43, 0.84);
  color: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.product-gallery-controls button:hover {
  background: var(--diloya-primary);
  transform: translateY(-1px);
}
.product-gallery-controls [data-gallery-close] {
  display: none;
}
.has-product-gallery-controls.is-gallery-expanded
  .product-gallery-controls
  [data-gallery-close] {
  display: inline-grid;
  position: fixed;
  top: max(0.8rem, env(safe-area-inset-top));
  right: max(0.8rem, env(safe-area-inset-right));
  z-index: 12052;
  width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(20, 16, 43, 0.92);
  font-size: 1.05rem;
}
.product-gallery-zoom-controls {
  display: none;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.product-gallery-controls.is-zoom-controls-visible
  .product-gallery-zoom-controls {
  display: flex;
}
.product-gallery-zoom-controls button {
  width: 32px;
  height: 32px;
}
.product-thumb.is-active,
.store-product-thumb.is-active {
  border-color: var(--diloya-primary);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--diloya-primary) 22%, transparent);
}
.product-preview-info > strong.product-preview-offer {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.45rem;
  flex-direction: column;
}
.product-preview-info > strong.product-preview-offer small,
.product-preview-info > strong.product-preview-offer del,
.product-preview-info > strong.product-preview-offer > span {
  display: block;
  width: 100%;
}
.product-preview-info > strong.product-preview-offer small {
  width: fit-content;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #e11d48, #f97316);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.product-preview-info > strong.product-preview-offer del {
  color: var(--diloya-grey);
  font-size: 0.92rem;
  line-height: 1.25;
}
.product-preview-info > strong.product-preview-offer > span {
  color: #e11d48;
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1.1;
}
.store-search-panel {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
}
.store-search-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.store-search-row .input {
  flex: 1;
}
.store-payment-panel {
  padding: 1rem;
}
.store-payment-list {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 0.8rem;
}
.store-payment-item {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-surface-2);
}
.store-payment-item > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.store-payment-item strong {
  display: block;
  font-size: 0.85rem;
}
.store-payment-item small {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.store-banner-carousel {
  position: relative;
  margin: 1rem 0 1.15rem;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 48px rgba(12, 16, 28, 0.2);
  background: rgba(255, 255, 255, 0.04);
}
.store-banner-track {
  display: grid;
}
.store-banner-slide {
  display: none;
  position: relative;
  min-height: 210px;
  color: #fff;
}
.store-banner-slide.is-active {
  display: block;
}
.store-banner-slide img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}
.store-banner-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.1rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(8, 11, 19, 0.88));
}
.store-banner-copy small {
  display: inline-flex;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.store-banner-copy h2 {
  margin-top: 0.4rem;
  font-size: 1.1rem;
  font-weight: 900;
}
.store-banner-copy p {
  margin-top: 0.2rem;
  max-width: 56ch;
  font-size: 0.83rem;
  line-height: 1.45;
  opacity: 0.95;
}
.store-banner-controls {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  gap: 0.4rem;
}
.store-banner-controls button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 11, 19, 0.65);
  color: #fff;
  cursor: pointer;
}
.store-banner-controls button:hover {
  background: rgba(8, 11, 19, 0.86);
}
.store-social-store {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.store-social-logo,
.store-social-logo-placeholder {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 16px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.store-social-logo {
  object-fit: cover;
}
.store-social-logo-placeholder {
  font-size: 1rem;
}
.store-social-store > div {
  padding-bottom: 0.15rem;
}
.product-row-category,
.product-row-subcategory,
.product-row-status {
  min-width: 0;
}
.product-row-status {
  grid-column: 1/-1;
}
.product-row-status .commerce-choice,
.product-row-category .commerce-choice,
.product-row-subcategory .commerce-choice {
  width: 100%;
}
.product-row-status .commerce-choice-control {
  min-height: 50px;
}
.product-taxonomy-select {
  align-items: end;
}
.product-taxonomy-select .commerce-choice {
  min-width: 0;
}
.product-taxonomy-select .commerce-choice-control {
  width: 100%;
}
.product-taxonomy-select .select {
  min-width: 0;
}
.product-row-category,
.product-row-subcategory {
  grid-column: auto;
}
.product-card.is-linkable {
  cursor: pointer;
  transition:
    transform 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.product-card.is-linkable:hover {
  border-color: var(--diloya-primary);
  box-shadow: 0 18px 38px rgba(52, 42, 111, 0.12);
  transform: translateY(-3px);
}
.product-card.has-expanded-gallery,
.product-card.has-expanded-gallery:hover {
  overflow: visible;
  transform: none;
}
.store-product-layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 330px;
}
.store-product-main {
  padding: 1.25rem;
}
.store-product-gallery {
  display: grid;
  gap: 1rem;
}
.store-product-figure {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 24px;
  background: var(--diloya-surface-2);
}
.store-product-figure img {
  display: block;
  width: 100%;
  height: min(62vw, 520px);
  object-fit: contain;
}
.store-product-thumbs {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.store-product-thumb {
  width: 68px;
  height: 68px;
  padding: 3px;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-card-bg);
  cursor: pointer;
}
.store-product-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
}
.store-product-body {
  margin-top: 1.2rem;
}
.store-product-meta {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.store-product-price {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 1rem;
}
.store-product-price strong {
  color: var(--diloya-primary);
  font-size: 1.8rem;
  font-weight: 900;
}
.store-product-price del {
  color: var(--diloya-grey);
}
.store-product-actions {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--diloya-border);
}
.store-product-sidebar {
  position: sticky;
  top: 85px;
  display: grid;
  gap: 1rem;
}
.store-product-sidebar .box {
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(20, 22, 35, 0.07);
}
@media (max-width: 1024px) {
  .store-product-layout {
    grid-template-columns: 1fr;
  }
  .store-product-sidebar {
    position: static;
  }
  .store-product-figure img {
    height: min(74vw, 460px);
  }
}
@media (max-width: 768px) {
  .store-product-main {
    padding: 1rem;
  }
  .store-product-price strong {
    font-size: 1.55rem;
  }
}
.commerce-user-store-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.commerce-user-store-card--compact {
  padding: 0.8rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: var(--diloya-card-bg);
  box-shadow: 0 8px 22px rgba(20, 22, 35, 0.06);
  transition:
    transform 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
.commerce-user-store-card--compact:hover {
  border-color: var(--diloya-primary);
  box-shadow: 0 14px 28px rgba(52, 42, 111, 0.12);
  transform: translateY(-2px);
}
.commerce-user-store-body--compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.commerce-user-store-body--compact img,
.commerce-user-store-body--compact > span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  border-radius: 14px;
  object-fit: cover;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  display: grid;
  place-items: center;
}
.commerce-user-store-body--compact div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.commerce-user-store-body--compact strong {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-user-store-body--compact small {
  color: var(--diloya-grey);
  font-size: 0.66rem;
}
.commerce-user-store-enter {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 10%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
  font-size: 0.62rem;
  font-weight: 850;
  white-space: nowrap;
}
.product-richtext {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 18px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 4%,
    var(--diloya-card-bg)
  );
}
.product-richtext-toolbar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.product-richtext-toolbar button {
  display: grid;
  min-width: 42px;
  height: 42px;
  padding: 0 0.8rem;
  place-items: center;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-card-bg);
  color: var(--diloya-text);
  cursor: pointer;
}
.product-richtext-toolbar button:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.product-richtext-toolbar-separator {
  width: 1px;
  height: 32px;
  align-self: center;
  margin: 0 0.1rem;
  background: var(--diloya-border);
}
.product-richtext-editor {
  min-height: 180px;
  padding: 0.85rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  line-height: 1.6;
  outline: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.product-richtext-editor:empty:before {
  color: var(--diloya-grey);
  content: attr(data-placeholder);
}
.product-richtext-editor:focus {
  border-color: var(--diloya-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
.product-richtext-editor p {
  margin: 0 0 0.7rem;
}
.product-richtext-editor h2 {
  margin: 1rem 0 0.55rem;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
}
.product-richtext-editor h3 {
  margin: 0.85rem 0 0.45rem;
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.3;
}
.product-richtext-editor ul,
.product-richtext-editor ol {
  padding-left: 1.2rem;
}
.product-richtext-editor blockquote {
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-left: 4px solid var(--diloya-primary);
  background: color-mix(
    in srgb,
    var(--diloya-primary) 7%,
    var(--diloya-card-bg)
  );
  border-radius: 0 12px 12px 0;
}
.product-richtext-editor a {
  color: var(--diloya-primary);
  text-decoration: underline;
}
.product-richtext-editor pre {
  margin: 0.75rem 0;
  padding: 0.8rem;
  overflow-x: auto;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
}
.product-richtext-editor code {
  padding: 0.12rem 0.3rem;
  border-radius: 6px;
  background: var(--diloya-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86em;
}
.product-richtext-editor hr {
  height: 1px;
  margin: 1rem 0;
  border: 0;
  background: var(--diloya-border);
}
.product-social-panel {
  padding: 1.15rem;
  border: 1px solid var(--diloya-border);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(20, 22, 35, 0.07);
}
.product-social-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-social-tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.product-social-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-social-actions .button.is-active {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.store-comment-list {
  display: flex;
  gap: 0.65rem;
  flex-direction: column;
}
.store-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.store-comment-item:last-child {
  border-bottom: 0;
}
.store-comment-item img,
.store-comment-item .diloya-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
}
.store-comment-item div {
  min-width: 0;
  flex: 1;
}
.store-comment-item strong {
  display: block;
  font-size: 0.82rem;
}
.store-comment-item time {
  display: block;
  color: var(--diloya-grey);
  font-size: 0.66rem;
}
.store-comment-item p {
  margin: 0.2rem 0 0;
  color: var(--diloya-text);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.store-comment-form textarea {
  min-height: 92px;
  resize: none;
}
.store-comment-form .button {
  border-radius: 12px;
}
.order-detail-modal {
  z-index: 15000;
}
.order-detail-modal .modal-card {
  width: min(980px, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
}
.order-detail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--diloya-border);
}
.order-detail-item:last-child {
  border-bottom: 0;
}
.order-detail-item strong {
  display: block;
  font-size: 0.85rem;
}
.order-detail-item small {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
.order-detail-item span {
  color: var(--diloya-text);
  font-size: 0.78rem;
}
.order-detail-item b {
  font-size: 0.82rem;
}
@media (max-width: 768px) {
  .commerce-billing-box,
  .commerce-analytics-box,
  .commerce-shipping-box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--diloya-border);
    border-radius: 20px;
    box-shadow: 0 10px 28px color-mix(in srgb, #111 6%, transparent);
  }
  .commerce-analytics-box .commerce-heading,
  .commerce-shipping-box .commerce-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
  }
  .commerce-analytics-box .commerce-heading > div,
  .commerce-shipping-box .commerce-heading > div {
    min-width: 0;
  }
  .commerce-analytics-box .commerce-heading h2,
  .commerce-shipping-box .commerce-heading h2 {
    font-size: 1.05rem;
    line-height: 1.25;
  }
  .commerce-analytics-box .commerce-heading p,
  .commerce-shipping-box .commerce-heading p {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .commerce-analytics-box #refreshStoreAnalytics {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 13px;
  }
  .commerce-analytics-stats {
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .commerce-analytics-stats article {
    min-width: 0;
    min-height: 94px;
    padding: 0.8rem;
    border-radius: 15px;
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .commerce-analytics-stats i {
    font-size: 1.05rem;
  }
  .commerce-analytics-stats strong {
    overflow: hidden;
    font-size: 1.25rem;
    text-overflow: ellipsis;
  }
  .commerce-analytics-stats span {
    font-size: 0.64rem;
    line-height: 1.25;
  }
  .commerce-analytics-grid {
    gap: 0.75rem;
    margin-top: 1.1rem;
    grid-template-columns: 1fr;
  }
  .commerce-analytics-grid article {
    padding: 0.85rem;
    border-radius: 15px;
  }
  .commerce-analytics-grid h3 {
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
  }
  .commerce-analytics-row,
  .commerce-analytics-item {
    min-width: 0;
    padding: 0.65rem 0;
  }
  .commerce-analytics-row span,
  .commerce-analytics-item div {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .commerce-analytics-item strong,
  .commerce-analytics-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .commerce-billing-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  .commerce-billing-head > div {
    min-width: 0;
  }
  .commerce-billing-head p {
    font-size: 0.74rem;
    line-height: 1.55;
  }
  .commerce-billing-head > .tag {
    align-self: flex-start;
  }
  .commerce-billing-stats {
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .commerce-billing-stats article {
    min-width: 0;
    min-height: 92px;
    padding: 0.8rem;
    border-radius: 15px;
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .commerce-billing-stats article:last-child {
    grid-column: 1/-1;
  }
  .commerce-billing-stats i {
    font-size: 1rem;
  }
  .commerce-billing-stats strong {
    overflow: hidden;
    font-size: 1.08rem;
    text-overflow: ellipsis;
  }
  .commerce-billing-item {
    align-items: flex-start;
    padding: 0.8rem;
    border: 1px solid var(--diloya-border);
    border-radius: 14px;
    background: var(--diloya-surface-2);
    flex-direction: column;
    gap: 0.45rem;
  }
  .commerce-billing-item:last-child {
    border-bottom: 1px solid var(--diloya-border);
  }
  .commerce-billing-item div {
    min-width: 0;
    width: 100%;
  }
  .commerce-billing-item small {
    display: block;
    margin-top: 0.15rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .commerce-billing-item > span {
    color: var(--diloya-primary);
    font-size: 0.9rem;
    font-weight: 850;
  }
  .commerce-shipping-box .commerce-form-grid {
    gap: 0.85rem;
    grid-template-columns: 1fr;
  }
  .commerce-shipping-box .commerce-form-wide {
    grid-column: auto;
  }
  .commerce-shipping-box .input,
  .commerce-shipping-box .textarea,
  .commerce-shipping-box .select,
  .commerce-shipping-box .commerce-choice-control {
    min-height: 46px;
    border-radius: 13px;
  }
  .commerce-shipping-box .button[type="submit"] {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
  }
  .commerce-shipping-list {
    gap: 0.7rem;
    margin-top: 1rem;
  }
  .commerce-shipping-item {
    align-items: flex-start;
    padding: 0.85rem;
    border: 1px solid var(--diloya-border);
    border-radius: 15px;
    background: var(--diloya-surface-2);
    flex-direction: column;
  }
  .commerce-shipping-item:last-child {
    border-bottom: 1px solid var(--diloya-border);
  }
  .commerce-shipping-item div {
    width: 100%;
  }
  .commerce-shipping-item strong {
    font-size: 0.85rem;
  }
  .commerce-shipping-item small {
    margin-top: 0.2rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .commerce-shipping-item > .tag {
    align-self: flex-start;
  }
}
@media (max-width: 380px) {
  .commerce-billing-box,
  .commerce-analytics-box,
  .commerce-shipping-box {
    padding: 0.85rem;
  }
  .commerce-analytics-stats,
  .commerce-billing-stats {
    grid-template-columns: 1fr;
  }
  .commerce-billing-stats article:last-child {
    grid-column: auto;
  }
}
@media (max-width: 1023px) {
  .diloya-navbar .navbar-burger,
  .landing-nav .landing-nav-burger {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--diloya-text);
    cursor: pointer;
  }
  .diloya-navbar .navbar-burger span,
  .landing-nav .landing-nav-burger span {
    position: absolute;
    right: 0.82rem;
    left: 0.82rem;
    display: block;
    width: auto;
    height: 2px;
    margin: 0 !important;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: 1;
    transform: none;
    transform-origin: center;
    transition:
      top 0.18s ease,
      transform 0.18s ease,
      opacity 0.18s ease;
  }
  .diloya-navbar .navbar-burger span:nth-child(1),
  .landing-nav .landing-nav-burger span:nth-child(1) {
    top: 1.05rem;
  }
  .diloya-navbar .navbar-burger span:nth-child(2),
  .landing-nav .landing-nav-burger span:nth-child(2) {
    top: 1.58rem;
  }
  .diloya-navbar .navbar-burger span:nth-child(3),
  .landing-nav .landing-nav-burger span:nth-child(3) {
    top: 2.11rem;
  }
  .diloya-navbar .navbar-burger.is-active span:nth-child(1),
  .landing-nav .landing-nav-burger.is-active span:nth-child(1) {
    top: 1.58rem;
    transform: rotate(45deg);
  }
  .diloya-navbar .navbar-burger.is-active span:nth-child(2),
  .landing-nav .landing-nav-burger.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .diloya-navbar .navbar-burger.is-active span:nth-child(3),
  .landing-nav .landing-nav-burger.is-active span:nth-child(3) {
    top: 1.58rem;
    transform: rotate(-45deg);
  }
}
.profile-company-legal {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 22%, var(--diloya-border));
  border-radius: 18px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.profile-company-legal-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.profile-company-legal-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.profile-company-legal-head > div {
  min-width: 0;
}
.profile-company-legal-head small {
  color: var(--diloya-primary);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profile-company-legal-head h3 {
  font-size: 0.95rem;
  font-weight: 850;
}
.profile-company-legal-head p {
  color: var(--diloya-grey);
  font-size: 0.7rem;
  line-height: 1.45;
}
.profile-company-legal-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-company-legal-grid .field {
  min-width: 0;
  margin: 0;
}
.profile-company-legal-grid .field:nth-child(6) {
  grid-column: 1/-1;
}
@media (max-width: 600px) {
  .profile-company-legal {
    padding: 0.85rem;
  }
  .profile-company-legal-grid {
    grid-template-columns: 1fr;
  }
  .profile-company-legal-grid .field:nth-child(6) {
    grid-column: auto;
  }
}
.commerce-workspace section:has(#companySettingsForm) {
  display: none;
}
.commerce-information-panel {
  display: grid;
  gap: 1rem;
}
.commerce-information-panel.is-hidden {
  display: none;
}
.commerce-information-panel > section {
  margin: 0;
}
.commerce-information-panel > section:first-child {
  order: 1;
}
.commerce-information-panel > .commerce-shipping-box {
  order: 2;
}
.commerce-information-panel > .commerce-banner-box {
  order: 3;
}
.commerce-information-panel > .commerce-payment-box {
  order: 4;
}

.product-free-shipping-toggle {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, #22c55e 24%, var(--diloya-border));
  border-radius: 16px;
  background: color-mix(in srgb, #22c55e 6%, var(--diloya-card-bg));
  cursor: pointer;
}
.product-free-shipping-toggle > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.product-free-shipping-toggle > span:first-child > i {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, #22c55e 15%, var(--diloya-card-bg));
  color: #16a34a;
  font-size: 1rem;
}
.product-free-shipping-toggle > span:first-child > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.product-free-shipping-toggle strong {
  font-size: 0.8rem;
}
.product-free-shipping-toggle small {
  color: var(--diloya-grey);
  font-size: 0.67rem !important;
  font-weight: 500;
  line-height: 1.4;
}
.product-free-shipping-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.product-toggle-track {
  position: relative;
  width: 48px;
  height: 27px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: var(--diloya-border);
  transition: background 0.18s;
}
.product-toggle-track:after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
  content: "";
  transition: transform 0.18s;
}
.product-free-shipping-toggle input:checked + .product-toggle-track {
  background: #22c55e;
}
.product-free-shipping-toggle input:checked + .product-toggle-track:after {
  transform: translateX(21px);
}
.product-free-shipping-toggle input:focus-visible + .product-toggle-track {
  outline: 3px solid color-mix(in srgb, #22c55e 28%, transparent);
  outline-offset: 2px;
}
.product-free-shipping-toggle:has(input:checked) {
  border-color: color-mix(in srgb, #22c55e 55%, var(--diloya-border));
}
@media (max-width: 600px) {
  .product-free-shipping-toggle {
    align-items: flex-start;
    padding: 0.8rem;
  }
  .product-free-shipping-toggle > span:first-child > i {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .product-toggle-track {
    margin-top: 0.3rem;
  }
}
.admin-commerce-method-grid {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
.admin-method-list {
  display: flex;
  gap: 0.6rem;
  flex-direction: column;
}
.admin-method-list article {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
}
.admin-method-list article > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 12%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.admin-method-list article > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.admin-method-list article small {
  color: var(--diloya-grey);
  font-size: 0.67rem;
}
@media (max-width: 900px) {
  .admin-commerce-method-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .admin-commerce-method-grid .commerce-form-grid {
    grid-template-columns: 1fr;
  }
  .admin-commerce-method-grid .commerce-form-wide {
    grid-column: auto;
  }
}
.iso-multi-select {
  position: relative;
  margin-top: 0.35rem;
}
.iso-multi-control {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-bottom: 2px solid var(--diloya-border);
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
}
.iso-multi-select.is-open .iso-multi-control {
  border-bottom-color: var(--diloya-primary);
}
.iso-multi-control > i {
  margin-left: auto;
  color: var(--diloya-grey);
  transition: transform 0.18s;
}
.iso-multi-select.is-open .iso-multi-control > i {
  transform: rotate(180deg);
}
.iso-multi-placeholder {
  color: var(--diloya-grey);
  font-size: 0.78rem;
}
.iso-multi-tags {
  display: flex;
  min-width: 0;
  gap: 0.35rem;
  flex: 1;
  flex-wrap: wrap;
}
.iso-multi-tags > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.35rem 0.3rem 0.55rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 25%, var(--diloya-border));
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
  font-size: 0.68rem;
  font-weight: 750;
}
.iso-multi-tags b {
  color: var(--diloya-primary);
  font-size: 0.58rem;
}
.iso-multi-tags button {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--diloya-primary) 15%, transparent);
  color: var(--diloya-primary);
  cursor: pointer;
}
.iso-multi-dropdown {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: 0 18px 45px rgba(20, 22, 35, 0.18);
}
.iso-multi-dropdown > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--diloya-border);
}
.iso-multi-dropdown > label > i {
  color: var(--diloya-grey);
}
.iso-multi-dropdown input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--diloya-text);
  outline: 0;
}
.iso-multi-options {
  max-height: 260px;
  overflow: auto;
  padding: 0.4rem;
}
.iso-multi-options button {
  display: grid;
  width: 100%;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--diloya-text);
  text-align: left;
  cursor: pointer;
  grid-template-columns: 1fr auto 18px;
}
.iso-multi-options button:hover,
.iso-multi-options button.is-selected {
  background: color-mix(
    in srgb,
    var(--diloya-primary) 9%,
    var(--diloya-card-bg)
  );
}
.iso-multi-options button span {
  font-size: 0.72rem;
}
.iso-multi-options button b,
.iso-multi-options button i {
  color: var(--diloya-primary);
  font-size: 0.65rem;
}
.order-history-list {
  position: relative;
  display: flex;
  gap: 0;
  flex-direction: column;
  padding: 0.25rem 0;
}
.order-history-list:before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 14px;
  width: 2px;
  background: linear-gradient(var(--diloya-primary), var(--diloya-border));
  content: "";
}
.order-history-list article {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0.55rem 0 0.75rem 38px;
  border: 0 !important;
  flex-direction: column;
}
.order-history-list article:before {
  position: absolute;
  z-index: 1;
  top: 0.62rem;
  left: 7px;
  display: grid;
  width: 16px;
  height: 16px;
  border: 3px solid var(--diloya-card-bg);
  border-radius: 50%;
  background: var(--diloya-primary);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--diloya-primary) 25%, var(--diloya-border));
  content: "";
}
.order-history-list article strong {
  color: var(--diloya-text);
  font-size: 0.76rem;
  line-height: 1.3;
}
.order-history-list article small {
  margin-top: 0.18rem;
  color: var(--diloya-grey);
  font-size: 0.64rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.order-history-list article:has(strong:first-child) {
  min-height: 50px;
}
.order-history-list article strong {
  white-space: normal;
}
@media print {
  body.is-printing-order > *:not(#orderDetailModal) {
    display: none !important;
  }
  #orderDetailModal {
    position: static !important;
    display: block !important;
    background: #fff !important;
  }
  #orderDetailModal .modal-background,
  #orderDetailModal .delete,
  #orderDetailModal .modal-card-foot,
  #orderDetailModal .order-shipping-form button {
    display: none !important;
  }
  #orderDetailModal .modal-card {
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  #orderDetailModal .modal-card-head,
  #orderDetailModal .modal-card-body {
    overflow: visible !important;
    background: #fff !important;
    color: #111 !important;
  }
  #orderDetailModal .order-detail-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.5fr) !important;
  }
  #orderDetailModal .box,
  #orderDetailModal .notification {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  #orderDetailModal input {
    border: 0 !important;
    background: transparent !important;
    color: #111 !important;
  }
  html.is-clipped {
    overflow: visible !important;
  }
}
.store-directory-category {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0.55rem 0.45rem 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--store-category-color, var(--diloya-primary)) 10%,
    var(--diloya-card-bg)
  );
  color: var(--store-category-color, var(--diloya-primary));
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.3;
}
.store-directory-category i {
  font-size: 0.65rem;
}
.community-rich-editor {
  overflow: hidden;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.community-rich-editor:focus-within {
  border-color: var(--diloya-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--diloya-primary) 12%, transparent);
}
.community-rich-toolbar {
  display: flex;
  gap: 0.2rem;
  padding: 0.45rem;
  border-bottom: 1px solid var(--diloya-border);
  background: var(--diloya-surface-2);
  flex-wrap: wrap;
}
.community-rich-toolbar button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--diloya-grey);
  cursor: pointer;
}
.community-rich-toolbar button:hover,
.community-rich-toolbar button.is-active {
  background: var(--diloya-card-bg);
  color: var(--diloya-primary);
}
.community-rich-editor-area {
  min-height: 110px;
  max-height: 320px;
  padding: 0.85rem;
  overflow: auto;
  color: var(--diloya-text);
  font-size: 0.9rem;
  line-height: 1.6;
  outline: 0;
}
.community-inline-editor {
  margin-top: 0.65rem;
  border-radius: 12px;
}
.community-inline-editor .community-rich-editor-area {
  min-height: 76px;
  max-height: 220px;
}
.community-rich-toolbar-compact button {
  width: 30px;
  height: 30px;
}
.community-rich-editor-area:empty:before {
  color: var(--diloya-grey);
  content: attr(data-placeholder);
  pointer-events: none;
}
.event-rich-editor-count {
  display: block;
  padding: 0.25rem 0.75rem 0.45rem;
  color: var(--diloya-grey);
  font-size: 0.65rem;
  text-align: right;
}
.event-description-rich {
  line-height: 1.65;
}
.event-description-rich p {
  margin-bottom: 0.55rem;
}
.event-description-rich ul,
.event-description-rich ol {
  padding-left: 1.3rem;
}
.event-description-rich blockquote {
  margin: 0.55rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--diloya-primary);
  background: color-mix(in srgb, var(--diloya-primary) 6%, transparent);
  border-radius: 0 10px 10px 0;
}
.event-description-rich a {
  color: var(--diloya-primary);
  text-decoration: underline;
}
.community-rich-editor-area blockquote {
  margin: 0.4rem 0;
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--diloya-primary);
  background: var(--diloya-surface-2);
}
.community-rich-editor-area ul,
.community-rich-editor-area ol,
.group-post-rich-content ul,
.group-post-rich-content ol {
  padding-left: 1.3rem;
}
.community-compose-tools {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.community-post-expiry {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem !important;
  border: 1px solid var(--diloya-border);
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.community-post-expiry > label:first-child,
.community-post-expiry > label:first-child > span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.community-post-expiry > label:first-child > span > i {
  color: var(--diloya-primary);
}
.community-post-expiry strong,
.community-post-expiry small {
  display: block;
}
.community-post-expiry small {
  color: var(--diloya-grey);
  font-size: 0.62rem;
}
.community-post-expiry .input {
  width: min(230px, 100%);
}
.community-post-expiry-delete {
  font-size: 0.7rem;
  font-weight: 700;
}
.community-post-expiry-delete input:disabled + * {
  opacity: 0.55;
}
.community-post-expiry-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #b26a00;
  font-size: 0.6rem;
  font-weight: 750;
}
.community-post-expiry-badge.is-expired {
  background: color-mix(in srgb, #64748b 14%, transparent);
  color: var(--diloya-grey);
}
.community-edit-expiry {
  display: grid;
  align-items: end;
  gap: 0.75rem;
  grid-template-columns: minmax(190px, 240px) 1fr;
  padding: 0.65rem;
  border-radius: 12px;
  background: var(--diloya-surface-2);
}
.community-edit-expiry label > span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.65rem;
  font-weight: 750;
}
@media (max-width: 640px) {
  .community-post-expiry {
    align-items: stretch;
    flex-direction: column;
  }
  .community-post-expiry .input {
    width: 100%;
  }
}
.community-compose-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-card-bg);
  color: var(--diloya-grey);
  font-size: 0.7rem;
  font-weight: 750;
  cursor: pointer;
}
.community-compose-tool:hover {
  border-color: var(--diloya-primary);
  color: var(--diloya-primary);
}
.community-link-composer {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding: 0.85rem;
  border: 1px solid
    color-mix(in srgb, var(--diloya-primary) 25%, var(--diloya-border));
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 5%,
    var(--diloya-card-bg)
  );
}
.community-link-composer-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.community-link-composer-head > span {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--diloya-primary) 14%,
    var(--diloya-card-bg)
  );
  color: var(--diloya-primary);
}
.community-link-composer-head strong,
.community-link-composer-head small {
  display: block;
}
.community-link-composer-head small,
.community-link-composer-fields label {
  color: var(--diloya-grey);
  font-size: 0.68rem;
}
.community-link-composer-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.65rem;
}
.community-link-composer-fields label {
  font-weight: 750;
}
.community-link-composer-fields .input {
  margin-top: 0.25rem;
}
.community-link-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
@media (max-width: 520px) {
  .community-link-composer-fields {
    grid-template-columns: 1fr;
  }
}
.community-compose-extras,
.community-upload-preview {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.community-compose-extra,
.community-upload-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--diloya-border);
  border-radius: 10px;
  background: var(--diloya-surface-2);
  font-size: 0.7rem;
}
.community-upload-item img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}
.community-compose-extra button,
.community-upload-item button {
  border: 0;
  background: transparent;
  color: #dc445c;
  cursor: pointer;
}
.group-post-rich-content {
  font-size: 0.88rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.group-post-rich-content > * + * {
  margin-top: 0.55rem;
}
.group-post-rich-content h2,
.group-post-rich-content h3,
.community-rich-editor-area h2,
.community-rich-editor-area h3 {
  color: var(--diloya-text);
  font-weight: 800;
  line-height: 1.25;
}
.group-post-rich-content h2,
.community-rich-editor-area h2 {
  font-size: 1.22rem;
}
.group-post-rich-content h3,
.community-rich-editor-area h3 {
  font-size: 1.05rem;
}
.group-post-rich-content blockquote {
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--diloya-primary);
  border-radius: 0 10px 10px 0;
  background: var(--diloya-surface-2);
}
.group-post-rich-content a {
  color: var(--diloya-primary);
  font-weight: 650;
  text-decoration: underline;
}
.group-post-rich-content code,
.community-rich-editor-area code {
  padding: 0.12rem 0.3rem;
  border-radius: 5px;
  background: var(--diloya-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.group-post-rich-content pre,
.community-rich-editor-area pre {
  padding: 0.7rem;
  overflow-x: auto;
  border-radius: 10px;
  background: #172033;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}
.group-post-rich-content hr,
.community-rich-editor-area hr {
  height: 1px;
  margin: 0.8rem 0;
  border: 0;
  background: var(--diloya-border);
}
.group-post-media {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.group-post-media img {
  width: 100%;
  max-height: 360px;
  border-radius: 14px;
  object-fit: cover;
}
.group-post-attachments {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.7rem;
  flex-direction: column;
}
.group-post-attachments a,
.group-post-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--diloya-border);
  border-radius: 11px;
  color: var(--diloya-primary);
  font-size: 0.75rem;
}
.group-post-interactive {
  margin-top: 0.7rem;
  padding: 0.75rem;
  border: 1px solid var(--diloya-border);
  border-radius: 14px;
  background: var(--diloya-surface-2);
}
.group-post-interactive strong {
  display: block;
  margin-bottom: 0.45rem;
}
.group-post-interactive span {
  display: block;
  margin-top: 0.3rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--diloya-border);
  border-radius: 9px;
  font-size: 0.75rem;
}
@media (max-width: 600px) {
  .community-compose-tool span {
    display: none;
  }
  .community-compose-tool {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }
  .group-post-media {
    grid-template-columns: 1fr;
  }
}
.catalog-importer {
  border-top: 4px solid #18a56f !important;
}
.catalog-import-sources {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.catalog-import-source {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--diloya-border);
  border-radius: 16px;
  background: var(--diloya-card-bg);
  color: inherit;
  text-align: left;
}
.catalog-import-source i {
  margin-bottom: 0.25rem;
  color: var(--diloya-primary);
  font-size: 1.4rem;
}
.catalog-import-source strong {
  font-size: 0.78rem;
}
.catalog-import-source small,
.catalog-import-workspace p,
.catalog-csv-drop small {
  color: var(--diloya-grey);
  font-size: 0.64rem;
}
.catalog-import-source.is-active {
  border-color: #18a56f;
  box-shadow: 0 0 0 2px color-mix(in srgb, #18a56f 12%, transparent);
}
.catalog-import-source:disabled {
  opacity: 0.58;
}
.catalog-import-workspace {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: var(--diloya-surface-2);
  grid-template-columns: 1fr 1fr;
}
.catalog-import-workspace h3 {
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
}
.catalog-csv-drop {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  min-height: 70px;
  padding: 0.75rem 1rem !important;
  border: 2px dashed
    color-mix(in srgb, var(--diloya-primary) 35%, var(--diloya-border));
  border-radius: 14px;
  background: var(--diloya-card-bg);
  cursor: pointer;
}
.catalog-csv-drop i {
  color: var(--diloya-primary);
  font-size: 1.5rem;
}
.catalog-csv-drop span {
  display: flex;
  flex-direction: column;
}
.catalog-csv-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.catalog-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, #18a56f 10%, var(--diloya-card-bg));
}
.catalog-import-summary span {
  color: var(--diloya-grey);
  font-size: 0.7rem;
}
@media (max-width: 768px) {
  .catalog-import-sources {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-import-workspace {
    grid-template-columns: 1fr;
  }
  .catalog-import-summary {
    align-items: flex-start;
    gap: 0.25rem;
    flex-direction: column;
  }
}