/* Original Easy Penpot visual identity for the local independent edition.
 * It deliberately replaces official marks and the login illustration with
 * local SVG assets. It does not alter Penpot feature controls or content. */

:root[data-easy-penpot-brand="active"] svg.icon-penpot-logo,
:root[data-easy-penpot-brand="active"] svg.icon-penpot-logo-icon,
:root[data-easy-penpot-brand="active"] img[src*="registration-illustration"] {
  opacity: 0 !important;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-brand-mark,
:root[data-easy-penpot-brand="active"] .easy-penpot-auth-lockup,
:root[data-easy-penpot-brand="active"] .easy-penpot-auth-illustration {
  display: block;
  opacity: 1 !important;
  object-fit: contain;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-brand-mark {
  inline-size: 22px;
  block-size: 22px;
}

:root[data-easy-penpot-brand="active"] [class*="my-teams-icon"] .easy-penpot-brand-mark,
:root[data-easy-penpot-brand="active"] [class*="org-penpot-icon"] .easy-penpot-brand-mark {
  inline-size: 26px;
  block-size: 26px;
}

:root[data-easy-penpot-brand="active"] [data-testid="penpot-logo-link"] .easy-penpot-brand-mark {
  inline-size: 30px;
  block-size: 30px;
}

:root[data-easy-penpot-brand="active"] a[data-easy-penpot-brand-logo="auth"] {
  align-items: center;
  display: inline-flex;
  min-block-size: 42px;
}

:root[data-easy-penpot-brand="active"] a[data-easy-penpot-home-link="active"] {
  cursor: pointer;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-auth-lockup {
  inline-size: 174px;
  block-size: 42px;
}

:root[data-easy-penpot-brand="active"] h1[class*="logo-container"] {
  align-items: flex-start;
  flex-direction: column;
  inline-size: min(262px, calc(100vw - 32px));
  gap: 7px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-auth-illustration {
  filter: saturate(1.06) contrast(1.03);
  max-block-size: min(62vh, 620px);
  max-inline-size: min(72vw, 820px);
}

:root[data-easy-penpot-brand="active"] [class*="team-text"][data-easy-penpot-brand-label="active"] {
  font-weight: 700;
  letter-spacing: -.01em;
}

:root[data-easy-penpot-brand="active"] [data-easy-penpot-dialog-tabs="active"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-tab-button {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .02em;
  min-block-size: 34px;
  padding: 0 10px;
  text-align: center;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-tab-button.is-active,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-tab-button[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(119, 244, 231, .22), rgba(168, 134, 255, .26)) !important;
  color: #7ff7ea !important;
  box-shadow: inset 0 0 0 1px rgba(126, 247, 234, .45), 0 0 22px rgba(95, 238, 226, .16);
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-panel {
  box-sizing: border-box;
  color: #d9e5e7;
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 100%;
  max-block-size: calc(100vh - 168px);
  overflow: auto;
  padding: 14px 12px 18px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-panel[hidden] {
  display: none !important;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-kicker {
  color: #74eee1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-head h2 {
  color: #f8fbff;
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-close {
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: #b7c5ca;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  justify-content: center;
  min-block-size: 30px;
  min-inline-size: 30px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-intro,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-context-card p,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-reasoning p {
  color: #99a8b0;
  font-size: 12px;
  line-height: 1.48;
  margin: 0;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-mode-row,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-actions,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-quick {
  display: flex;
  gap: 7px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-mode-row {
  align-items: center;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-mode-row button,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-context-card button,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-quick button,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-actions button {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #e8f3f4;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  min-block-size: 32px;
  padding: 0 10px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-mode-row button[data-selected="true"],
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-primary {
  background: linear-gradient(135deg, #76efe3, #a989ff) !important;
  border-color: transparent !important;
  color: #061719 !important;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-mode-row select {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #eef7f8;
  flex: 1 1 auto;
  font-size: 11px;
  min-block-size: 32px;
  min-inline-size: 0;
  padding: 0 8px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-context-card,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-reasoning {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 11px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-context-card span,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-form label,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-reasoning summary {
  color: #dbe5eb;
  font-size: 11px;
  font-weight: 850;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-context-card button {
  margin-block-start: 9px;
  inline-size: 100%;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  max-block-size: 188px;
  overflow: auto;
  padding: 0;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-message {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  padding: 10px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-message-user {
  background: rgba(121, 238, 226, .08);
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-message-assistant {
  background: rgba(174, 135, 255, .08);
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-message span {
  color: #7ff7ea;
  display: block;
  font-size: 10px;
  font-weight: 900;
  margin-block-end: 5px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-message p {
  color: #dce7ea;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-quick {
  flex-wrap: wrap;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-quick button {
  flex: 1 1 86px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-form textarea {
  background: rgba(7, 12, 16, .76);
  border: 1px solid rgba(127, 244, 231, .22);
  border-radius: 14px;
  box-sizing: border-box;
  color: #f5fbff;
  font-size: 12px;
  inline-size: 100%;
  line-height: 1.45;
  min-block-size: 86px;
  outline: none;
  padding: 11px;
  resize: vertical;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-form textarea:focus {
  border-color: rgba(127, 244, 231, .76);
  box-shadow: 0 0 0 3px rgba(127, 244, 231, .10);
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-journeys {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-journeys li {
  align-items: center;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  color: #acb9bf;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  padding: 7px 8px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-journeys li[data-state="passed"] {
  border-color: rgba(127, 244, 231, .32);
  color: #e7fffb;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-journeys b {
  color: #79f0e5;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-canvas-overlay {
  bottom: var(--dialog-bottom);
  color: #f6fbff;
  left: var(--dialog-left);
  pointer-events: none;
  position: fixed;
  right: var(--dialog-right);
  top: var(--dialog-top);
  z-index: 2147483000;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-target {
  border: 2px solid rgba(127, 244, 231, .82);
  border-radius: 22px;
  box-shadow: 0 0 0 9999px rgba(4, 6, 11, .15), 0 0 34px rgba(127, 244, 231, .24), inset 0 0 0 1px rgba(255, 255, 255, .22);
  height: min(34vh, 270px);
  left: 50%;
  position: absolute;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(43vw, 520px);
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-target::before,
:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-target::after {
  background: linear-gradient(90deg, #7ff4e7, #a989ff);
  border-radius: 999px;
  content: "";
  position: absolute;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-target::before {
  height: 10px;
  left: 9%;
  top: 24%;
  width: 38%;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-target::after {
  bottom: 22%;
  height: 54px;
  right: 9%;
  width: 116px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-result-card {
  background: rgba(13, 18, 24, .86);
  border: 1px solid rgba(127, 244, 231, .26);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35), 0 0 44px rgba(127, 244, 231, .10);
  inline-size: min(360px, calc(100% - 36px));
  padding: 14px;
  pointer-events: auto;
  position: absolute;
  right: 24px;
  top: 24px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-result-card strong {
  color: #7ff7ea;
  display: block;
  font-size: 13px;
  margin-block-end: 7px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-result-card p {
  color: #edf6f8;
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 9px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-result-card ul {
  color: #aebabf;
  display: grid;
  font-size: 11px;
  gap: 5px;
  margin: 0;
  padding-inline-start: 18px;
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-badges {
  bottom: 18%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 40px));
}

:root[data-easy-penpot-brand="active"] .easy-penpot-dialog-badges span {
  background: rgba(127, 244, 231, .13);
  border: 1px solid rgba(127, 244, 231, .35);
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(127, 244, 231, .13);
  color: #e9fffb;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 10px;
}

@media (max-width: 640px) {
  /* Penpot's upstream shell is desktop-first. Keep the local authentication
   * entry points readable once the local viewport metadata is active. */
  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-section {
    overflow-x: hidden;
    position: relative;
  }

  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-section::before {
    background:
      radial-gradient(circle at 50% 48%, rgba(116, 102, 255, .20), transparent 66%),
      url("../images/easy-penpot-neon-main-transparent.png") center / contain no-repeat;
    block-size: 138px;
    content: "";
    inline-size: min(70vw, 246px);
    inset-block-start: 92px;
    inset-inline: 0;
    margin-inline: auto;
    opacity: .94;
    pointer-events: none;
    position: absolute;
  }

  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-content {
    box-sizing: border-box;
    inline-size: min(360px, calc(100vw - 64px));
    max-inline-size: calc(100vw - 64px);
    min-inline-size: 0;
    overflow-x: hidden;
  }

  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-content > * {
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-content input,
  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-content button {
    box-sizing: border-box;
    max-inline-size: 100%;
  }

  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-content h1,
  :root[data-easy-penpot-brand="active"] .main_ui_auth__auth-content p,
  :root[data-easy-penpot-brand="active"] main[class*="auth"] p {
    max-inline-size: 100%;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    word-break: break-word;
  }

  :root[data-easy-penpot-brand="active"] .easy-penpot-auth-lockup {
    inline-size: 150px;
    block-size: 37px;
  }
}