/* Inbox Gate 在 Tabler 之上的皮肤层：只改字体、品牌色块、验证码与凭据这几处，
   其余组件一律用 Tabler 原样，避免半套主题互相打架。 */

:root {
  --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --tblr-font-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --ig-signal: #c3f53c;
  --ig-signal-soft: rgba(195, 245, 60, 0.12);
}

body {
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ig-signal-soft);
}

/* 品牌 */

.ig-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.ig-brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 0.5rem;
  color: #14210a;
  background: var(--ig-signal);
}

.ig-brand-mark .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2;
}

.ig-brand-text {
  display: grid;
  line-height: 1.1;
}

.ig-brand-text b {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ig-brand-text span {
  color: var(--tblr-secondary);
  font-family: var(--tblr-font-monospace);
  font-size: 0.6875rem;
}

/* 验证码：整套 UI 里唯一用信号绿的地方，一眼就能找到 */

.ig-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border: 1px solid rgba(195, 245, 60, 0.28);
  border-radius: var(--tblr-border-radius-lg);
  padding: 1rem 1.25rem;
  background: var(--ig-signal-soft);
}

.ig-code-value {
  color: var(--ig-signal);
  font-family: var(--tblr-font-monospace);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ig-code-label {
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 可点即复制的凭据格：值本身要能看全一部分，超长 token 截断，复制取全量 */

.ig-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid transparent;
  border-radius: var(--tblr-border-radius);
  padding: 0.25rem 0.5rem;
  color: inherit;
  background: var(--tblr-bg-surface-secondary);
  font-family: var(--tblr-font-monospace);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.ig-copy > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-copy .ig-copy-flag {
  flex: none;
  color: var(--tblr-secondary);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.ig-copy:hover {
  border-color: var(--tblr-border-color-active);
}

.ig-copy:hover .ig-copy-flag {
  color: var(--tblr-primary);
}

.ig-copy.is-copied {
  border-color: var(--tblr-success);
}

.ig-copy.is-copied .ig-copy-flag {
  color: var(--tblr-success);
}

.ig-copy-inline {
  border: 0;
  padding: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}

.ig-copy-inline:hover {
  color: var(--tblr-primary);
}

.ig-empty-cell {
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
}

/* 筛选条：页面滚动时留在顶部，长列表下不用回头找 */

.ig-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}

.ig-toolbar .form-control,
.ig-toolbar .btn {
  --tblr-btn-padding-y: 0.3125rem;
}

/* 邮件列表 */

.ig-mail-pane {
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 46rem);
  border-right: 1px solid var(--tblr-border-color);
}

.ig-mail-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ig-mail-row {
  display: block;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
  color: inherit;
  text-decoration: none;
}

.ig-mail-row:hover {
  background: var(--tblr-bg-surface-secondary);
}

.ig-mail-row.is-active {
  background: var(--tblr-bg-surface-active);
  box-shadow: inset 2px 0 0 var(--tblr-primary);
}

.ig-mail-subject {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-mail-sender {
  overflow: hidden;
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-mail-body {
  color: var(--tblr-body-color);
  font-size: 0.9375rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ig-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-mono {
  font-family: var(--tblr-font-monospace);
  font-size: 0.8125rem;
}

.ig-account-table {
  width: 100%;
  table-layout: fixed;
}

.ig-account-table th:nth-child(1) { width: 18%; }
.ig-account-table th:nth-child(2) { width: 8%; }
.ig-account-table th:nth-child(3) { width: 20%; }
.ig-account-table th:nth-child(4) { width: 18%; }
.ig-account-table th:nth-child(5) { width: 31%; }
.ig-account-table th:nth-child(6) { width: 5%; }

@media (max-width: 767.98px) {
  .ig-mail-pane {
    max-height: 22rem;
    border-right: 0;
    border-bottom: 1px solid var(--tblr-border-color);
  }

  /* 宽表在手机上改成逐条资料卡，不让用户横向猜还有几列。 */
  .table-responsive:has(.ig-responsive-table) {
    overflow: visible;
  }

  .ig-responsive-table,
  .ig-responsive-table tbody,
  .ig-responsive-table tr,
  .ig-responsive-table td {
    display: block;
    width: 100%;
  }

  .ig-responsive-table thead {
    display: none;
  }

  .ig-responsive-table tbody tr {
    padding: 0.5rem 0;
    border-bottom: 0.5rem solid var(--tblr-body-bg);
  }

  .ig-responsive-table tbody tr:last-child {
    border-bottom: 0;
  }

  .ig-responsive-table tbody td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    border: 0;
    padding: 0.4375rem 1rem !important;
    text-align: left !important;
  }

  .ig-responsive-table tbody td::before {
    content: attr(data-label);
    color: var(--tblr-secondary);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .ig-responsive-table tbody td > * {
    min-width: 0;
  }

  .ig-responsive-table tbody td[data-label="操作"] .dropdown {
    justify-self: start;
  }
}

/* 免登录快查页 */

.ig-quick {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem 1rem;
}

.ig-quick-card {
  width: min(34rem, 100%);
}