/**
 * H5 管理后台样式。
 *
 * 令牌与排版规则来自官网仓库 gongmai_web 的 src/styles/global.css，
 * 数值原样保留（官网用 rem，这里同样用 rem）。三条硬规则：
 * 零圆角、无阴影、层次靠 1px 发丝线与 paper / white 的底色差。
 */

@font-face {
  font-family: "Gmai Latin";
  /* 自托管官网同一份字体文件。跨域引用官网域名需要 CORS，
     而且官网改动会直接影响后台，不如放在自己这儿。 */
  src: url("/assets/fonts/brand-ui-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

:root {
  color-scheme: light;
  --navy: #071d35;
  --navy-soft: #153451;
  --cobalt: #1769d2;
  --paper: #f4f6f4;
  --white: #ffffff;
  --line: #d9dfe2;
  --muted: #526170;
  --focus: #f2a51a;
  --danger: #a6342a;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-ui: "Gmai Latin", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--cobalt);
  color: var(--white);
}

/* 官网的无障碍规则：键盘焦点是橙色外环，和 cobalt 的悬停态区分得开 */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: .1875rem solid var(--focus);
  outline-offset: .25rem;
}

.app-shell {
  width: min(75rem, 100vw - 2rem);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

/* ---------- 排版 ---------- */

/* 与小程序一致：eyebrow 用 navy，cobalt 只做瞬时交互反馈 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .8125rem;
  margin: 0 0 1.25rem;
  color: var(--navy);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.75rem;
  height: .0625rem;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

/* ---------- 品牌区 ---------- */

.brand-hero {
  padding-bottom: 2.5rem;
  border-bottom: .0625rem solid var(--line);
}

.brand-logo {
  width: 11rem;
  max-width: 45vw;
  margin-bottom: 1.5rem;
  object-fit: contain;
}

.brand-name {
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 540;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.brand-tagline {
  max-width: 32.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 1.8;
}

/* ---------- 布局 ---------- */

.workspace {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.5rem;
}

.card {
  padding: 2rem;
  border: .0625rem solid var(--line);
  background: var(--white);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: .0625rem solid var(--line);
}

.card-head h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.stack {
  display: grid;
  gap: 1rem;
}

/* ---------- 表单分组 ---------- */

/* 分组之间一道发丝线。第一组不画线，避免和 card-head 的线叠成两条 */
.field-group {
  padding-top: 1.75rem;
  margin-top: 1.75rem;
  border-top: .0625rem solid var(--line);
}

/* 紧跟在 card-head 后面的那一组不再画线 —— card-head 自己已经有一条底边，
   两条叠在一起是明显的瑕疵。
   注意不能用 :first-of-type：card-head 也是 div，它才是第一个 div，
   .field-group:first-of-type 永远匹配不上。 */
.card-head + .field-group,
.card-head + form > .field-group:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.group-title {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.group-note {
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.field {
  display: grid;
  gap: .5rem;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: .75rem .875rem;
  border: .0625rem solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: .9375rem;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 180ms ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--cobalt);
}

.textarea {
  min-height: 7rem;
  line-height: 1.7;
  resize: vertical;
}

.select {
  /* 原生下拉箭头在方角边框里看着很别扭，换成自绘的小三角 */
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) center, calc(100% - .75rem) center;
  background-size: .375rem .375rem, .375rem .375rem;
  background-repeat: no-repeat;
}

/* 文件选择框的原生按钮同样要去圆角 */
.input[type="file"] {
  padding: .5rem .625rem;
  font-size: .8125rem;
}

.input[type="file"]::file-selector-button {
  margin-right: .75rem;
  padding: .375rem .75rem;
  border: .0625rem solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: .8125rem;
}

/* ---------- 按钮 ---------- */

.button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms var(--ease-out);
}

.button-primary {
  background: var(--navy);
  color: var(--white);
}

.button-primary:hover {
  background: var(--cobalt);
  transform: translateY(-.0625rem);
}

.button-ghost {
  border: .0625rem solid var(--line);
  background: var(--white);
  color: var(--navy);
}

.button-ghost:hover {
  border-color: var(--navy);
  background: var(--paper);
}

.button-danger {
  border: .0625rem solid var(--line);
  background: var(--white);
  color: var(--danger);
}

.button-danger:hover {
  border-color: var(--danger);
  background: var(--paper);
}

.button-small {
  min-height: 2.25rem;
  padding: 0 .875rem;
  font-size: .8125rem;
}

/* ---------- 登录 ---------- */

.login-card {
  max-width: 32.5rem;
  margin-top: 2.5rem;
  padding: 2.5rem;
}

.login-card h2 {
  margin: 0 0 .75rem;
  font-size: 2rem;
  font-weight: 540;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.login-hint {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.7;
}

/* ---------- 图片预览 ---------- */

.preview-logo,
.case-cover-preview {
  width: 100%;
  max-height: 15rem;
  border: .0625rem solid var(--line);
  background: var(--paper);
  object-fit: contain;
}

/* 二维码是方的，别被 preview-logo 的 contain 拉成一条 */
.preview-qr {
  width: 11rem;
  height: 11rem;
  border: .0625rem solid var(--line);
  background: var(--white);
  object-fit: contain;
}

.detail-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.detail-preview-grid:empty {
  display: none;
}

.detail-item {
  position: relative;
  overflow: hidden;
  border: .0625rem solid var(--line);
  background: var(--paper);
}

.detail-item img {
  display: block;
  width: 100%;
  height: 7.5rem;
  object-fit: cover;
}

.detail-remove {
  position: absolute;
  top: 0;
  right: 0;
  padding: .3125rem .5rem;
  border: 0;
  border-bottom: .0625rem solid var(--line);
  border-left: .0625rem solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--danger);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
}

.upload-hint {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- 案例列表 ---------- */

/* 不画 border-top：上面的 card-head 已经有一条底边了 */
.case-list {
  border-top: 0;
}

.case-list:empty::after {
  display: block;
  padding: 2.5rem 0;
  color: var(--muted);
  content: "暂无案例";
  font-size: .875rem;
  text-align: center;
}

.case-item {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: .0625rem solid var(--line);
}

.case-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

/* 文案吃掉中间的剩余宽度，否则 space-between 会把星标甩到很远的左边 */
.case-item-copy {
  flex: 1;
  min-width: 0;
}

.case-item-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .625rem;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-item-index {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .12em;
}

.case-item-title {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 540;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.case-item-summary {
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75;
}

.case-item-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .625rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.case-images {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
}

.case-thumb {
  width: 5.25rem;
  height: 5.25rem;
  border: .0625rem solid var(--line);
  background: var(--paper);
  object-fit: cover;
}

.status-text {
  color: var(--muted);
  font-size: .8125rem;
  letter-spacing: .02em;
}

/* ---------- 列表里的星标 ---------- */

/*
 * 点一下就进/出首页，不用进编辑表单。
 * 空心（描边色）= 不在首页，实心 navy = 在首页。
 */
.case-star {
  flex: 0 0 auto;
  /* 抵掉 .case-item-head 的 1.5rem gap，星标要贴着文案而不是被甩到左边 */
  margin-right: -1rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--line);
  cursor: pointer;
  font-size: 1.375rem;
  line-height: 1.2;
}

.case-star:hover {
  color: var(--muted);
}

.case-star-on,
.case-star-on:hover {
  color: var(--navy);
}

/* ---------- 首页精选排序 ---------- */

.featured-empty {
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75;
}

.featured-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 0;
  border-bottom: .0625rem solid var(--line);
}

.featured-row:last-child {
  border-bottom: none;
}

.featured-index {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .12em;
}

.featured-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .375rem;
}

/* 第一条的「上移」和最后一条的「下移」是禁用态，要看得出来点不动 */
.featured-actions .button[disabled] {
  cursor: not-allowed;
  opacity: .35;
}

/* ---------- 响应式 ---------- */

@media (max-width: 56.25rem) {
  .grid {
    grid-template-columns: 1fr;
  }

  .detail-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .app-shell {
    width: min(100vw - 1.5rem, 75rem);
    padding-top: 1.5rem;
  }

  .card,
  .login-card {
    padding: 1.25rem;
  }

  .field-pair,
  .detail-preview-grid {
    grid-template-columns: 1fr;
  }

  .case-item-head {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}