/* ==========================================================================
   经验共享 · 样式表
   设计基调：政务/企业级工具感 —— 深海军蓝 + 亮蓝主色，浅灰底 + 白卡片
   ========================================================================== */

:root {
  --bg: #f2f5fa;
  --surface: #ffffff;
  --surface-2: #f8fafd;

  --ink-900: #0d1b2e;
  --ink-800: #17263c;
  --ink-700: #33445f;
  --ink-600: #4b5c78;
  --ink-500: #6b7a92;
  --ink-400: #93a0b4;
  --ink-300: #b9c3d3;

  --line: #e5eaf3;
  --line-strong: #d6dfef;

  --brand: #2b6cf6;
  --brand-600: #1c57dd;
  --brand-soft: #edf3ff;
  --brand-line: #d7e4ff;

  --shadow-xs: 0 1px 2px rgba(15, 32, 62, .05);
  --shadow-sm: 0 1px 2px rgba(15, 32, 62, .05), 0 4px 12px -6px rgba(15, 32, 62, .12);
  --shadow-md: 0 12px 28px -12px rgba(15, 32, 62, .22), 0 2px 6px rgba(15, 32, 62, .05);
  --shadow-lg: 0 24px 60px -20px rgba(15, 32, 62, .3);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --header-h: 60px;
  --page-w: 1200px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-800);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

::selection { background: #cfe0ff; }

/* ---------- 通用控件 ---------- */

.btn {
  --h: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h);
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease), transform .16s var(--ease), color .16s;
}

.btn:hover { border-color: #c2cfe6; background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(43, 108, 246, .22); outline-offset: 1px; }

.btn--primary {
  border-color: transparent;
  background: linear-gradient(180deg, #3a79ff, #2563eb);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--primary:hover { background: linear-gradient(180deg, #4a85ff, #1e57d6); border-color: transparent; }

.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-600); }
.btn--ghost:hover { background: #eef2f8; }

.btn--danger { color: #c02b2b; border-color: #f1d5d5; background: #fff; }
.btn--danger:hover { background: #fdf4f4; border-color: #e9bcbc; }

.btn--sm { --h: 30px; padding: 0 10px; font-size: 13px; }
.btn--lg { --h: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: .01em;
}

.field__label .req { color: #e0483d; font-weight: 700; }

.field__hint { font-size: 12px; color: var(--ink-400); font-weight: 400; }

.input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-800);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.input::placeholder, .textarea::placeholder { color: var(--ink-300); }

.input:hover, .textarea:hover { border-color: #c6d2e6; }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43, 108, 246, .14);
}

.textarea { resize: vertical; min-height: 220px; line-height: 1.75; }

.input.is-invalid, .textarea.is-invalid {
  border-color: #e0483d;
  box-shadow: 0 0 0 3px rgba(224, 72, 61, .1);
}

/* ---------- 顶部导航 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(214, 223, 239, .8);
}

.topbar__inner {
  max-width: var(--page-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand__mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #2f6df6, #16408f);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 8px -3px rgba(22, 64, 143, .6);
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 15.5px; letter-spacing: .02em; color: var(--ink-900); }
.brand__text small { font-size: 10.5px; color: var(--ink-400); letter-spacing: .14em; text-transform: uppercase; }

.topnav { display: flex; gap: 4px; margin-left: 6px; }

.topnav a {
  position: relative;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--ink-500);
  font-size: 14px;
  font-weight: 600;
  transition: color .15s, background .15s;
}

.topnav a:hover { color: var(--ink-800); background: #f1f5fb; }

.topnav a.is-active { color: var(--brand-600); background: var(--brand-soft); }

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.user { display: flex; align-items: center; gap: 8px; }

.avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #dfe9fb, #c6d8f6);
  color: #2a4a80;
  font-size: 12.5px;
  font-weight: 700;
}

.avatar--sm { width: 24px; height: 24px; font-size: 11px; }

.user__name { font-size: 13.5px; color: var(--ink-600); font-weight: 600; }

/* ---------- 页面容器 ---------- */

.page {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 24px 24px 72px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(760px 320px at 82% -10%, rgba(58, 121, 255, .42), transparent 62%),
    radial-gradient(520px 300px at 6% 110%, rgba(23, 195, 178, .22), transparent 60%),
    linear-gradient(135deg, #0c1f3a 0%, #122c4f 52%, #163b6b 100%);
  color: #fff;
  padding: 34px 36px 40px;
  box-shadow: 0 20px 50px -28px rgba(10, 30, 60, .55);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 120% at 70% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}

.hero__body { position: relative; z-index: 1; max-width: 720px; }

.hero__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  color: #8fb6ff;
  font-weight: 700;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -.01em;
  font-weight: 800;
}

.hero__sub { margin: 0 0 20px; color: #a8bcd8; font-size: 14px; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 5px 5px 5px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5);
  max-width: 560px;
}

.search svg { flex: none; color: var(--ink-400); }

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--ink-800);
}

.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-400); }

.hero__stats { display: flex; gap: 34px; margin-top: 24px; }

.stat__num { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.stat__num small { font-size: 12px; font-weight: 600; color: #9ab4dc; margin-left: 3px; }
.stat__label { font-size: 12px; color: #8ea6c6; margin-top: 2px; }

/* ---------- 筛选面板 ---------- */

.panel {
  position: relative;
  margin-top: -22px;
  margin-left: 16px;
  margin-right: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 6px 20px 8px;
  z-index: 2;
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

.filter-row:last-child { border-bottom: 0; }

.filter-row__label {
  flex: none;
  width: 52px;
  padding-top: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: .04em;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  --dot: var(--ink-300);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f4f7fc;
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
  user-select: none;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
  opacity: .55;
  transition: opacity .14s;
}

.chip:hover { background: #eaf0fa; color: var(--ink-800); }
.chip:hover::before { opacity: 1; }

.chip.is-active {
  background: #eaf1ff;
  border-color: #cbdcff;
  color: var(--brand-600);
  box-shadow: inset 0 0 0 1px rgba(43, 108, 246, .06);
}
.chip.is-active::before { opacity: 1; background: var(--brand); }

.chip--plain::before { display: none; }

.chip__count { font-size: 11px; color: var(--ink-400); font-weight: 600; }
.chip.is-active .chip__count { color: #6d97ef; }

/* 标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-500);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .14s;
}

.tag-pill:hover { border-color: var(--brand-line); color: var(--brand-600); background: var(--brand-soft); }
.tag-pill.is-active { border-color: #bfd4ff; background: var(--brand-soft); color: var(--brand-600); font-weight: 700; }

.tag-cloud__more {
  border: 0;
  background: none;
  color: var(--ink-400);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0 4px;
}
.tag-cloud__more:hover { color: var(--brand-600); }

/* ---------- 列表头 ---------- */

.feed-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 2px 14px;
}

.feed-head__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.feed-head__meta { font-size: 13px; color: var(--ink-400); }

.feed-head__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.seg {
  display: inline-flex;
  padding: 3px;
  background: #e9eef7;
  border-radius: 9px;
  gap: 2px;
}

.seg button {
  height: 27px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-500);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s;
}

.seg button.is-active { background: #fff; color: var(--ink-800); box-shadow: var(--shadow-xs); }

.link-btn {
  border: 0;
  background: none;
  color: var(--ink-500);
  font-size: 13px;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
}
.link-btn:hover { color: var(--brand-600); background: var(--brand-soft); }

/* ---------- 卡片网格 ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  --ind: #2b6cf6;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ind), color-mix(in srgb, var(--ind) 25%, #fff));
  opacity: .9;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.card:hover .card__title { color: var(--brand-600); }

.card__top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

.badge--ind {
  color: var(--ind);
  background: color-mix(in srgb, var(--ind) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--ind) 18%, #fff);
}

.badge--prod {
  color: var(--ink-500);
  background: #f4f7fc;
  border: 1px solid #e9eff8;
  font-weight: 600;
}

.card__title {
  margin: 2px 0 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.48;
  color: var(--ink-900);
  letter-spacing: -.005em;
  transition: color .16s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.72;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 2px; }

.tag {
  color: #5b7ba8;
  background: #f3f7fd;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11.5px;
  line-height: 18px;
}
.tag::before { content: "#"; opacity: .5; margin-right: 1px; }

.card__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #f0f3f9;
  font-size: 12px;
  color: var(--ink-400);
}

.card__author { color: var(--ink-600); font-weight: 600; }
.card__dot { color: var(--ink-300); }
.card__views { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

.card--flash { animation: flash 1.7s var(--ease); }

@keyframes flash {
  0% { box-shadow: 0 0 0 0 rgba(43, 108, 246, .45); }
  40% { box-shadow: 0 0 0 6px rgba(43, 108, 246, .13); }
  100% { box-shadow: var(--shadow-xs); }
}

/* ---------- 空状态 ---------- */

.empty {
  text-align: center;
  padding: 64px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fbfcff, #f5f8fd);
}

.empty__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef3fc;
  color: #93a8c9;
}

.empty h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--ink-700); }
.empty p { margin: 0 0 18px; font-size: 13px; color: var(--ink-400); }

/* ---------- 详情抽屉 ---------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 26, 46, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
  z-index: 60;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(680px, 100%);
  background: #fff;
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .28s var(--ease);
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: none; }

.drawer__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 22px 0;
}

.drawer__badges { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }

.drawer__close {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.drawer__close:hover { background: #f1f5fb; color: var(--ink-800); }

.drawer__body { flex: 1; overflow: auto; padding: 14px 22px 28px; }

.drawer__title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.drawer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-400);
}

.drawer__meta strong { color: var(--ink-600); font-weight: 600; }

.drawer__content {
  padding: 18px 0 6px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-700);
  white-space: pre-wrap;
  word-break: break-word;
}

.drawer__content p { margin: 0 0 12px; }
.drawer__content p:last-child { margin-bottom: 0; }

.drawer__block {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.drawer__block h4 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-400);
  font-weight: 700;
}

.drawer__block p { margin: 0; font-size: 13.5px; color: var(--ink-700); }

.drawer__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

.drawer__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}

.drawer__foot .spacer { flex: 1; }

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.like-btn:hover { border-color: #f0c9c5; color: #d9473c; background: #fffafa; }
.like-btn.is-on { border-color: #f4cfcb; background: #fff5f4; color: #d9473c; }

/* ---------- 登记页 ---------- */

.page--form { max-width: 1120px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-400);
  margin-bottom: 16px;
}
.crumbs a:hover { color: var(--brand-600); }
.crumbs .sep { color: var(--ink-300); }

.form-head { margin-bottom: 22px; }
.form-head h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.form-head p { margin: 0; color: var(--ink-500); font-size: 13.5px; }

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.card-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card-box__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-box__head h2 { margin: 0; font-size: 14.5px; font-weight: 700; }

.step-no {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-600);
  font-size: 11.5px;
  font-weight: 800;
}

.card-box__body { padding: 20px; display: flex; flex-direction: column; gap: 22px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 选择块（行业 / 产品线） */
.opt-group { display: flex; flex-wrap: wrap; gap: 8px; }

.opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-600);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
}

.opt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--ink-300));
  opacity: .5;
  transition: opacity .15s;
}

.opt:hover { border-color: #bccce6; background: #fafcff; }
.opt:hover::before { opacity: 1; }

.opt.is-on {
  border-color: transparent;
  background: color-mix(in srgb, var(--dot) 8%, #fff);
  color: var(--dot);
  box-shadow: inset 0 0 0 1.5px var(--dot);
}
.opt.is-on::before { opacity: 1; }

.opt--check::before {
  display: none;
}

.opt__tick {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: -2px;
}

.opt--check.is-on .opt__tick { display: block; }

/* 标签输入 */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}

.tag-input.is-focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 108, 246, .14); }

.tag-input input {
  flex: 1;
  min-width: 120px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  padding: 4px 2px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 6px 0 9px;
  border-radius: 7px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: #2a5fd0;
  font-size: 12.5px;
  font-weight: 600;
}

.tag-chip button {
  border: 0;
  background: none;
  color: #7ba2e8;
  cursor: pointer;
  padding: 2px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  line-height: 0;
}
.tag-chip button:hover { background: #dbe8ff; color: #2a5fd0; }

.suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suggest__label { font-size: 12px; color: var(--ink-400); margin-right: 2px; }

.suggest button {
  height: 25px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px dashed #d5dfef;
  background: #fff;
  color: var(--ink-500);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .14s;
}
.suggest button:hover { border-style: solid; border-color: var(--brand-line); color: var(--brand-600); background: var(--brand-soft); }

/* 编辑器工具条 */
.editor-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #fafcff;
}

.editor-bar button {
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-500);
  font-size: 12.5px;
  cursor: pointer;
}
.editor-bar button:hover { background: #eaeff8; color: var(--ink-800); }

.editor-bar .counter { margin-left: auto; font-size: 12px; color: var(--ink-400); font-variant-numeric: tabular-nums; }

.textarea--editor { border-radius: 0 0 10px 10px; }

/* 表单底部 */
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.form-actions .spacer { flex: 1; }

.form-actions .hint { font-size: 12px; color: var(--ink-400); }

/* 侧栏 */
.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }

.tips { padding: 18px 18px 16px; }

.tips h3 {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-800);
}

.tips ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }

.tips li {
  position: relative;
  padding-left: 24px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-500);
}

.tips li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c3d4ee;
}

.tips li b { color: var(--ink-700); font-weight: 700; }

.quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }

.quick-stats div { background: #fff; padding: 12px 14px; }
.quick-stats strong { display: block; font-size: 18px; font-weight: 800; color: var(--ink-900); line-height: 1.3; }
.quick-stats span { font-size: 11.5px; color: var(--ink-400); }

/* ---------- 提示条 ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 16px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #0e1f38;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all .22s var(--ease);
  z-index: 90;
  max-width: calc(100vw - 40px);
}

.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { flex: none; color: #7ee0b8; }
.toast--warn svg { color: #ffce7a; }

/* ---------- 昵称弹层 ---------- */

.nick-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 20, 37, .5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s var(--ease);
}

.nick-mask.is-on { opacity: 1; }

.is-nick-locked { overflow: hidden; }

.nick-card {
  width: 100%;
  max-width: 396px;
  padding: 30px 28px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px -20px rgba(9, 20, 37, .45), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  text-align: center;
  transform: translateY(12px) scale(.97);
  transition: transform .22s var(--ease);
}

.nick-mask.is-on .nick-card { transform: translateY(0) scale(1); }

.nick-card__mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #2f6df6, #16408f);
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 20px -8px rgba(22, 64, 143, .75);
}

.nick-card h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.nick-card__sub {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--ink-500);
}

.nick-form { display: flex; flex-direction: column; gap: 10px; }

.nick-input {
  height: 46px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

.nick-card__err {
  margin: -2px 0 0;
  font-size: 12px;
  color: #d03a2f;
  text-align: left;
}

.nick-submit { width: 100%; }

.nick-card__hint {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-400);
  text-align: left;
}

/* 右上角用户信息可点击 */
.user--btn {
  padding: 4px 8px 4px 4px;
  margin-right: -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.user--btn:hover { background: #f1f5fb; }
.user--btn:focus-visible { outline: 3px solid rgba(43, 108, 246, .22); outline-offset: 1px; }

/* 表单里的登记人 */
.who {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafd;
  font-size: 13.5px;
  color: var(--ink-700);
  font-weight: 600;
}
.who .avatar { flex: none; }
.who .link-btn { margin-left: auto; font-weight: 500; }

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

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}

@media (max-width: 760px) {
  .page { padding: 16px 14px 56px; }
  .topbar__inner { padding: 0 14px; gap: 12px; }
  .topnav { display: none; }
  .user__name { display: none; }
  .brand__text small { display: none; }
  .hero { padding: 24px 20px 34px; border-radius: var(--r-lg); }
  .hero h1 { font-size: 22px; }
  .hero__stats { gap: 22px; }
  .panel { margin-left: 8px; margin-right: 8px; padding: 4px 14px 6px; }
  .filter-row { flex-direction: column; gap: 6px; }
  .filter-row__label { width: auto; padding-top: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-actions { flex-wrap: wrap; }
  .form-actions .hint { display: none; }
  .nick-card { padding: 24px 20px 20px; }
  .drawer { width: 100%; }
  .feed-head { flex-wrap: wrap; }
  .feed-head__right { margin-left: 0; width: 100%; justify-content: space-between; }
}

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