/* 共享剪切板 · 免登录安全版
   风格：Natural Organic（自然有机风）· StyleKit
   布局：Streaming Layout（主界面流式单列）
   规则要点：大地色系 / 有机非对称圆角 / 纸张织物纹理 / 衬线标题
             缓慢动效（500–700ms ease-in-out）/ Soft Earth Press / Verdant Tint */

/* ================================================================
   1. Token · 自然有机色板
   ================================================================ */
:root {
  /* 背景与表面：取值直接来自 showcase 的 palette
     bg #faf6f1 / 卡片 #ffffff / 描边与浅面 #e9e0d4 / 弱描边 #c4b5a5 */
  --bg: #faf6f1;
  --bg-soft: #f4efe7;
  --sand: #e9e0d4;
  --card: #ffffff;
  --line: #e9e0d4;
  --line-2: #c4b5a5;

  /* 文字：温暖深棕，避免纯黑 */
  --text: #5c4033;
  --text-2: #7a6658;
  --text-3: #8d7a6a;

  /* 强调色：sage / tan / verdant（showcase 同名色值） */
  --accent: #8b9d77;
  --accent-hover: #7d9068;
  --accent-active: #5a6e48;
  --accent-soft: #8b9d7722;

  /* Verdant Tint：悬停时文字/图标趋向的深鼠尾草绿 */
  --verdant: #5a6e48;
  --verdant-soft: #8b9d7733;

  --tan: #d4a373;
  --tan-soft: #d4a37322;

  /* 主按钮：深土棕 → 悬停转向深苔棕 */
  --ink: #5c4033;
  --ink-hover: #4d3528;
  --ink-active: #3d2a1e;

  --red: #b07050;
  --red-hover: #9a5f42;
  --red-active: #8b5a3a;
  --red-soft: #b0705018;
  --yellow: #d4a373;
  --yellow-ink: #8a6030;
  --yellow-soft: #d4a37322;
  --green: #8b9d77;
  --green-soft: #8b9d7722;

  /* 分类语义色：全部落在暖色大地色域（无蓝/紫/冷青） */
  --cat-default: #a2957f;
  --cat-code: #5a6e48;
  --cat-link: #b07050;
  --cat-doc: #d4a373;
  --cat-account: #8a6030;
  --cat-other: #8b9d77;

  /* 形状：手捏陶器般的非对称有机圆角（禁止完美圆形/矩形）
     数值直接取自 showcase 的组件：卡片 50/40、按钮 30/24、小标签 20/24 */
  --r-xs: 12px 14px 11px 13px / 13px 11px 14px 12px;
  --r-sm: 20px 24px 18px 22px / 22px 18px 24px 20px;
  --r-md: 30px 24px 28px 22px / 24px 28px 22px 30px;
  --r-lg: 40px 50px 40px 50px / 50px 40px 50px 40px;
  --r-lg-alt: 50px 40px 50px 40px / 40px 50px 40px 50px;
  --r-xl: 50px 40px 50px 40px / 40px 50px 40px 50px;

  /* 阴影：暖棕投影，禁止纯黑（showcase 用 #5c403344 一档） */
  --sh-xs: 0 2px 8px rgba(92, 64, 51, 0.06);
  --sh-sm: 0 4px 16px rgba(92, 64, 51, 0.10);
  --sh-md: 0 6px 16px rgba(92, 64, 51, 0.18), 0 12px 28px rgba(92, 64, 51, 0.10);
  /* 按下态：投影收紧贴近，读作「压进泥土」 */
  --sh-press: 0 2px 6px rgba(92, 64, 51, 0.16);

  --max-w: 920px;
  --gutter: 26px;

  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Georgia", "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ease: ease-in-out;
}

/* 深色主题：showcase 只有浅色版，这里按同一套色相压暗，
   保持「暖棕文字 / 鼠尾草绿强调 / 暖棕投影」的关系不变。 */
html[data-theme="dark"] {
  --bg: #1f1b17;
  --bg-soft: #262119;
  --sand: #332c24;
  --card: #2f2923;
  --line: #453b30;
  --line-2: #55493c;
  --text: #ece5dc;
  --text-2: #bfb3a4;
  --text-3: #a2937f;

  --accent: #a3b494;
  --accent-hover: #b8c9a8;
  --accent-active: #c8d7bc;
  --accent-soft: rgba(163, 180, 148, 0.14);

  --verdant: #b7cca3;
  --verdant-soft: rgba(183, 204, 163, 0.16);

  --tan: #c49a6c;
  --tan-soft: rgba(196, 154, 108, 0.14);

  --ink: #cfc3b4;
  --ink-hover: #ded4c7;
  --ink-active: #eee6db;

  --red: #e0906f;
  --red-hover: #eaa286;
  --red-active: #f0b49c;
  --red-soft: rgba(224, 144, 111, 0.14);
  --yellow: #d4a373;
  --yellow-ink: #e8c19a;
  --yellow-soft: rgba(212, 163, 115, 0.14);
  --green: #a3b494;
  --green-soft: rgba(163, 180, 148, 0.14);

  --cat-default: #b3a696;
  --cat-code: #a3b494;
  --cat-link: #e0906f;
  --cat-doc: #d4a373;
  --cat-account: #e8c19a;
  --cat-other: #8b9d77;

  /* 深色下投影同样保持暖调，不用纯黑 */
  --sh-xs: 0 2px 8px rgba(12, 9, 7, 0.30);
  --sh-sm: 0 4px 16px rgba(12, 9, 7, 0.38);
  --sh-md: 0 6px 16px rgba(12, 9, 7, 0.46), 0 12px 28px rgba(12, 9, 7, 0.30);
  --sh-press: 0 2px 6px rgba(12, 9, 7, 0.46);
}

/* 深色主题下主按钮为浅色底，文字需转为深土棕 */
html[data-theme="dark"] .btn-primary {
  color: #2a231d;
}
html[data-theme="dark"] .btn-danger {
  color: #2a231d;
}

/* ================================================================
   2. 基础
   ================================================================ */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 1;
}

/* ================================================================
   背景：照抄 stylekit natural-organic showcase 首屏
   基色 Warm Cream #faf6f1 平铺，其上浮 3 个有机 blob —— 尺寸、位置、
   透明度、不规则圆角、动画时长与延迟全部与 showcase 一一对应：
     blob-a  420×420  #d4a373  opacity .30  drift    8s
     blob-b  340×340  #8b9d77  opacity .20  drift   11s  delay 3s
     blob-c  200×200  #e9e0d4  opacity .15  breathe  7s  delay 1s
   无径向晕染、无噪点；层次只靠 blob 的大小/透明度/形状撑起。
   ================================================================ */
.organic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.organic-bg .blob {
  position: absolute;
  display: block;
}

/* blob 1：暖棕，右上出画，缓慢漂移 */
.organic-bg .blob-a {
  top: 40px;
  right: -80px;
  width: 420px;
  height: 420px;
  opacity: 0.30;
  background-color: #d4a373;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: organic-drift 8s ease-in-out infinite;
}

/* blob 2：鼠尾草绿，左下出画，错开 3s 漂移 */
.organic-bg .blob-b {
  bottom: 0;
  left: -60px;
  width: 340px;
  height: 340px;
  opacity: 0.20;
  background-color: #8b9d77;
  border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
  animation: organic-drift 11s ease-in-out infinite 3s;
}

/* blob 3：亚麻色，中偏左，呼吸缩放 */
.organic-bg .blob-c {
  top: 192px;
  left: 33.333%;
  width: 200px;
  height: 200px;
  opacity: 0.15;
  background-color: #e9e0d4;
  border-radius: 70% 30% 50% 50% / 30% 70% 50% 60%;
  animation: organic-breathe 7s ease-in-out infinite 1s;
}

/* 纸张织物纹理：亚麻经纬细线，压在 blob 之下、内容之上，几乎不可察 */
.organic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(92, 64, 51, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(92, 64, 51, 0.028) 0 1px, transparent 1px 4px);
}

/* 深色主题：showcase 只有浅色，这里按同一套形状换成深底可用的低亮度色 */
html[data-theme="dark"] .organic-bg .blob-a {
  background-color: #6b4f34;
}
html[data-theme="dark"] .organic-bg .blob-b {
  background-color: #4a5741;
}
html[data-theme="dark"] .organic-bg .blob-c {
  background-color: #322c26;
}
html[data-theme="dark"] .organic-bg::after {
  opacity: 0.35;
  background-image:
    repeating-linear-gradient(0deg, rgba(236, 229, 220, 0.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(236, 229, 220, 0.022) 0 1px, transparent 1px 4px);
}

/* 与 showcase 同名的五个关键帧，时长/缓动一致 */
@keyframes organic-drift {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  33% {
    transform: translateX(8px) rotate(1.5deg);
  }
  66% {
    transform: translateX(-4px) rotate(-1deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}
@keyframes organic-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}
@keyframes organic-sway {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0px);
  }
  50% {
    transform: rotate(2deg) translateY(-6px);
  }
}
@keyframes organic-rise {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes petal-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mono {
  font-family: var(--mono);
}
.hidden {
  display: none !important;
}

/* ================================================================
   3. 图标
   ================================================================ */
.ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}
.ic-lg {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}

/* ================================================================
   4. 按钮
   Soft Earth Press：悬停下沉 2px + 色调加深；按下再深一档
   Verdant Tint：次要/幽灵按钮悬停时文字图标转向深鼠尾草绿
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
    border-color 500ms var(--ease), transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.btn:hover {
  background: var(--accent-soft);
  color: var(--verdant);
  transform: translateY(2px);
  box-shadow: var(--sh-press);
}
.btn:active {
  transform: translateY(3px);
  background: var(--verdant-soft);
  color: var(--accent-active);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}
.btn-block {
  width: 100%;
}
.btn-primary {
  background: var(--ink);
  color: var(--card);
  border-color: transparent;
}
/* 主按钮走「更深的大地色」而非绿字，保证对比度 */
.btn-primary:hover {
  background: var(--ink-hover);
  color: var(--card);
}
.btn-primary:active {
  background: var(--ink-active);
  color: var(--card);
}

.btn-secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--tan-soft);
  border-color: var(--tan);
  color: var(--verdant);
}
.btn-secondary:active {
  background: rgba(212, 163, 115, 0.24);
  color: var(--accent-active);
}

.btn-danger {
  background: var(--red);
  color: var(--card);
  border-color: transparent;
}
.btn-danger:hover {
  background: var(--red-hover);
  color: var(--card);
}
.btn-danger:active {
  background: var(--red-active);
  color: var(--card);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  padding: 8px;
  border-radius: var(--r-xs);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
    transform 500ms var(--ease);
}
.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--verdant);
  transform: translateY(2px);
}
.icon-btn:active {
  transform: translateY(3px);
  background: var(--verdant-soft);
  color: var(--accent-active);
}
.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

.link-btn {
  border: none;
  background: none;
  color: var(--verdant);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: var(--r-xs);
  transition: background-color 500ms var(--ease);
}
.link-btn:hover {
  background: var(--accent-soft);
}
.link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

/* ================================================================
   5. 输入框
   ================================================================ */
.field {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  outline: none;
  width: 100%;
  transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease),
    background-color 500ms var(--ease);
}
.field::placeholder {
  color: var(--text-3);
}
.field:hover {
  border-color: var(--tan);
}
.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 157, 119, 0.22);
}
.field-valid {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(139, 157, 119, 0.20) !important;
}
.field-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(176, 112, 80, 0.16) !important;
}
.field.slim {
  width: auto;
  padding: 7px 12px;
  font-size: 13px;
}
textarea.field {
  resize: vertical;
  line-height: 1.65;
  border-radius: var(--r-md);
}

/* 密码可见切换 */
.input-with-action {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-action .field {
  width: 100%;
  padding-right: 42px;
}
.input-action {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  padding: 7px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
.input-action:hover {
  background: var(--accent-soft);
  color: var(--verdant);
}
.input-action:active {
  background: var(--verdant-soft);
  color: var(--accent-active);
}
.input-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

/* ================================================================
   6. 入口卡 / 认证卡
   ================================================================ */
.gate,
.auth-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* 保持透明，让全局有机背景透出 */
  background: transparent;
}
.gate-card,
.auth-card {
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 36px 32px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 700ms var(--ease), border-color 700ms var(--ease);
}
.gate-card:hover,
.auth-card:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(139, 157, 119, 0.4);
}
html[data-theme="dark"] .gate-card,
html[data-theme="dark"] .auth-card {
  background: rgba(47, 41, 35, 0.88);
  border-color: rgba(255, 255, 255, 0.06);
}
/* 管理页含表格，需要更宽的卡片 */
.auth-card-wide {
  max-width: 720px;
}

.gate-logo,
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent);
  /* Logo 悬浮在有机 blob 底座上，缓慢起伏（organic-rise） */
  animation: organic-rise 6s ease-in-out infinite;
}
.gate-logo svg,
.auth-logo svg {
  padding: 13px;
  box-sizing: content-box;
  background: var(--accent-soft);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
}
/* 入口卡进场 */
.gate-card,
.auth-card {
  animation: card-in 600ms var(--ease) backwards;
}
.gate-title,
.auth-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.gate-sub,
.auth-sub {
  color: var(--text-2);
  font-size: 13.5px;
  margin: 0 0 22px;
  line-height: 1.65;
}

.gate-error,
.auth-error {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid rgba(176, 112, 80, 0.16);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}
.auth-dev {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  word-break: break-all;
}

/* 登录 / 注册 分段切换 */
.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.auth-tab {
  flex: 1;
  font: inherit;
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
    box-shadow 500ms var(--ease);
}
.auth-tab:hover {
  color: var(--verdant);
  background: var(--accent-soft);
}
.auth-tab.active {
  color: var(--accent-active);
  background: var(--card);
  box-shadow: var(--sh-xs);
}

.gate-divider,
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 12px;
  margin: 18px 0;
}
.gate-divider::before,
.gate-divider::after,
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.gate-join {
  display: flex;
  gap: 8px;
}
.gate-join .field {
  flex: 1;
  font-size: 13px;
}

.gate-saved {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.gate-foot {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

/* 入口页的「我的空间」列表：登录用户一点即进，无需手输钥匙 */
.gate-my {
  text-align: left;
}
.space-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.space-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  cursor: pointer;
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease),
    transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.space-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(2px);
  box-shadow: var(--sh-press);
}
.space-item:active {
  transform: translateY(3px);
  background: var(--verdant-soft);
}
.space-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}
/* 图标底座用手捏感不规则圆角 */
.space-item-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
  transition: color 500ms var(--ease), background-color 500ms var(--ease);
}
.space-item:hover .space-item-ic {
  color: var(--verdant);
  background: var(--card);
}
.space-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.space-item-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.space-item-meta {
  font-size: 11px;
  color: var(--text-3);
}
.space-item-go {
  flex: 0 0 auto;
  display: flex;
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), color 500ms var(--ease);
}
.space-item:hover .space-item-go {
  opacity: 1;
  transform: translateX(0);
  color: var(--verdant);
}

.key-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  word-break: break-all;
}
.key-box code {
  flex: 1;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.3px;
  line-height: 1.7;
  /* 单击即全选整把钥匙，复制零门槛 */
  user-select: all;
  -webkit-user-select: all;
}

/* ================================================================
   7. 流式主界面
   ================================================================ */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}
.stream-header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  background: rgba(250, 246, 241, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
html[data-theme="dark"] .stream-header {
  background: rgba(31, 27, 23, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* 页面滚动后顶栏补一层浅投影，与内容分层 */
.stream-header.scrolled,
.admin-head.scrolled {
  box-shadow: var(--sh-xs);
}

.stream-head {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter);
}
.stream-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.sb-id {
  min-width: 0;
}
.sb-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.search-wrap {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 10px;
}
.search-ic {
  position: absolute;
  left: calc(var(--gutter) + 13px);
  top: calc(50% - 5px);
  transform: translateY(-50%);
  color: var(--text-3);
  display: flex;
  pointer-events: none;
  transition: color 500ms var(--ease);
}
.search-wrap:focus-within .search-ic {
  color: var(--verdant);
}
.search-field {
  padding-left: 38px;
  padding-right: 62px;
  width: 100%;
}
.count-chip {
  position: absolute;
  right: calc(var(--gutter) + 12px);
  top: calc(50% - 5px);
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 3px 9px;
  pointer-events: none;
}

.stream-cats {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.stream-cats-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stream-cats .chip.active {
  background: var(--accent-soft);
  color: var(--accent-active);
  font-weight: 600;
  border-color: rgba(139, 157, 119, 0.45);
}

.stream-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  /* stretch：让输入卡与内容卡同宽对齐 */
  align-items: stretch;
}
.stream-foot {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px var(--gutter) 40px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ================================================================
   8. 卡片
   ================================================================ */
.card, .clip {
  background-image:
    repeating-linear-gradient(0deg, rgba(92, 64, 51, 0.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(92, 64, 51, 0.012) 0 1px, transparent 1px 5px);
}
.card {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: box-shadow 700ms var(--ease), border-color 700ms var(--ease),
    background-color 700ms var(--ease);
}
.card:hover {
  box-shadow: var(--sh-sm);
  border-color: rgba(139, 157, 119, 0.4);
}

/* 快速录入 */
.composer {
  margin: 16px 0 24px;
  overflow: visible;
}
/* 聚焦时整张录入卡亮起，而不是只有 textarea 自身 */
.composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--sh-sm);
}
.composer-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 20px 24px 10px;
  font: inherit;
  font-size: 17px;
  line-height: 1.75;
  resize: vertical;
  outline: none;
  min-height: 150px;
  color: var(--text);
  caret-color: var(--accent);
}
.composer-input::placeholder {
  color: var(--text-3);
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.01em;
}
.composer-input:focus {
  box-shadow: none;
}
.composer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 20px 0;
  padding: 12px 0 14px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.composer-bar #submitBtn {
  margin-left: auto;
}
/* 分类/有效期选择器：胶囊底色，弱化边框 */
.composer-bar .field.slim {
  background: var(--bg-soft);
  border-color: transparent;
}
.composer-bar .field.slim:hover {
  background: var(--sand);
}
.tag-row {
  padding: 0 20px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.tag-field {
  width: auto;
  flex: 1;
  min-width: 200px;
  border-style: dashed;
  background: transparent;
  font-size: 14px;
}
.tag-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chip / Badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 2px 9px;
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
    border-color 500ms var(--ease), transform 500ms var(--ease);
}
button.chip {
  cursor: pointer;
  font-family: inherit;
}
.chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--verdant);
  transform: translateY(1px);
}
.chip.active {
  background: var(--accent-soft);
  color: var(--accent-active);
  font-weight: 600;
  border-color: rgba(139, 157, 119, 0.45);
}
.chip-removable b {
  cursor: pointer;
  font-weight: 700;
  margin: 0 -1px 0 2px;
  padding: 0 3px;
  color: var(--text-3);
}
.chip-removable b:hover {
  color: var(--red);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-xs);
  padding: 2px 8px;
}
.badge .ic {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}
.badge-warn {
  background: var(--yellow-soft);
  color: var(--yellow-ink);
}
.badge-exp {
  background: var(--accent-soft);
  color: var(--accent-active);
}

/* ================================================================
   9. 内容卡片
   ================================================================ */
.clip-list {
  margin-top: 8px;
}
.clip {
  position: relative;
  padding: 16px 20px 14px;
  margin-bottom: 12px;
  border-radius: var(--r-lg);
  background-color: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: box-shadow 500ms var(--ease), border-color 500ms var(--ease),
    background-color 500ms var(--ease), transform 500ms var(--ease);
  animation: card-in 500ms var(--ease) backwards;
}
/* 隔张镜像圆角：同款手捏形，不显得机械复制 */
.clip:nth-child(even) {
  border-radius: var(--r-lg-alt);
}
.clip:nth-child(2) { animation-delay: 40ms; }
.clip:nth-child(3) { animation-delay: 80ms; }
.clip:nth-child(4) { animation-delay: 120ms; }
.clip:nth-child(5) { animation-delay: 160ms; }
.clip:nth-child(6) { animation-delay: 200ms; }
.clip:nth-child(7) { animation-delay: 240ms; }
.clip:nth-child(8) { animation-delay: 280ms; }
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 悬停浮现的鼠尾草色叶脉（Verdant Tint） */
.clip::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: var(--r-xs);
  background: var(--cat, var(--accent));
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: center;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.clip:hover {
  transform: translateY(2px);
  box-shadow: var(--sh-sm);
  border-color: rgba(139, 157, 119, 0.45);
  background-color: rgba(255, 255, 255, 0.94);
}
.clip:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
html[data-theme="dark"] .clip:hover {
  background-color: rgba(47, 41, 35, 0.95);
  border-color: rgba(163, 180, 148, 0.38);
}
/* 已脱敏内容：常驻琥珀叶脉，一眼识别，不必等悬停 */
.clip.sens::before {
  background: var(--yellow);
  opacity: 0.4;
  transform: scaleY(1);
}
.clip.sens:hover::before {
  opacity: 1;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .clip {
  background-image:
    repeating-linear-gradient(0deg, rgba(236, 229, 220, 0.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(236, 229, 220, 0.010) 0 1px, transparent 1px 5px);
}
.clip:active {
  box-shadow: var(--sh-xs);
}

.clip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.clip-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  color: color-mix(in srgb, var(--cat, var(--accent)) 65%, var(--text-2));
  background: var(--bg-soft);
  background: color-mix(in srgb, var(--cat, var(--accent)) 13%, transparent);
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent);
  border-radius: var(--r-xs);
  padding: 2px 10px 2px 8px;
  transition: color 500ms var(--ease), background-color 500ms var(--ease),
    border-color 500ms var(--ease);
}
.clip:hover .clip-cat {
  color: color-mix(in srgb, var(--cat, var(--accent)) 80%, var(--ink));
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 42%, transparent);
}
.clip-cat .dot {
  width: 9px;
  height: 9px;
  /* 不规则小块，而非完美圆形 */
  border-radius: 62% 38% 44% 56% / 52% 46% 54% 48%;
  display: inline-block;
  background: var(--cat, var(--accent));
}
.clip-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.clip-content {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.65;
  word-break: break-word;
  max-height: 5.6em;
  overflow: hidden;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.clip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.clip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.clip-time {
  font-size: 12px;
  color: var(--text-3);
}
.clip-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  border-radius: var(--r-xs);
  padding: 4px 11px;
  cursor: pointer;
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
    border-color 500ms var(--ease), transform 500ms var(--ease);
}
.act:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--verdant);
  transform: translateY(1.5px);
}
.act:active {
  transform: translateY(2.5px);
  background: var(--verdant-soft);
  color: var(--accent-active);
}
.act:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}
.act .ic {
  width: 13px;
  height: 13px;
}
.act-del:hover {
  color: var(--red);
  background: var(--red-soft);
  border-color: rgba(176, 112, 80, 0.38);
}

.empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--text-3);
}
.empty-ic {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
}
.empty-ic .ic {
  width: 30px;
  height: 30px;
}
.empty p {
  font-size: 14px;
  margin: 0;
}
.load-more-box {
  padding: 14px 0 60px;
  text-align: center;
}

/* ================================================================
   10. 弹层
   ================================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(92, 64, 51, 0.28);
  animation: mask-in 300ms var(--ease) backwards;
}
@keyframes mask-in {
  from { opacity: 0; }
}
html[data-theme="dark"] .modal-mask {
  background: rgba(12, 9, 7, 0.66);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  animation: modal-in 400ms var(--ease) backwards;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 700ms var(--ease);
}
.modal-card:hover {
  border-color: rgba(139, 157, 119, 0.45);
}
html[data-theme="dark"] .modal-card {
  background: rgba(47, 41, 35, 0.94);
  border-color: rgba(255, 255, 255, 0.06);
}
.modal-narrow {
  max-width: 380px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  flex-wrap: wrap;
}
.modal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
}
.modal-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-content {
  margin: 0;
  padding: 20px 22px;
  overflow: auto;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
/* 代码分类的内容用等宽字体查看 */
.view-content.mono-view {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
}
.modal-body {
  padding: 24px 22px;
  text-align: center;
}
.confirm-ic {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--text-2);
}
.confirm-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}
.confirm-sub {
  color: var(--text-2);
  font-size: 13px;
  margin: 0 0 18px;
  line-height: 1.65;
}
.btn-row {
  display: flex;
  gap: 8px;
}
.btn-row .btn {
  flex: 1;
}
.key-box {
  text-align: left;
  margin-bottom: 16px;
}

/* ================================================================
   11. Toast
   ================================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  z-index: 200;
  background: var(--text);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.toast.err {
  background: var(--red);
  color: var(--card);
}
.toast .link-btn {
  color: inherit;
  text-decoration: underline;
  background: transparent;
}
.toast .link-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ================================================================
   12. 认证表单
   ================================================================ */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.code-row {
  display: flex;
  gap: 8px;
}
.code-row .field {
  flex: 1;
}

/* ================================================================
   13. 移动端抽屉
   ================================================================ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(92, 64, 51, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}
.scrim.show {
  opacity: 1;
  pointer-events: auto;
}
html[data-theme="dark"] .scrim {
  background: rgba(12, 9, 7, 0.66);
}
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  z-index: 160;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-radius: var(--r-xl) 0 0 var(--r-md);
  box-shadow: var(--sh-md);
  transform: translateX(100%);
  transition: transform 500ms var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.show {
  transform: translateX(0);
}
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.mobile-drawer-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.mobile-drawer-body {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
    transform 500ms var(--ease);
}
.drawer-item:hover {
  background: var(--accent-soft);
  color: var(--verdant);
  transform: translateY(1.5px);
}
.drawer-item:active {
  background: var(--verdant-soft);
  color: var(--accent-active);
  transform: translateY(2.5px);
}
.drawer-item .ic {
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* ================================================================
   14. 用户菜单
   ================================================================ */
.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}
/* 头像用 showcase 的不规则圆角，而非完美圆形 */
.user-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--card);
  background: var(--accent);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
}
.user-card-id {
  min-width: 0;
}
.user-card-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-mail {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-toggle {
  display: inline-flex;
  margin: -4px 0 14px;
  font-size: 12.5px;
}
/* 改名行：默认隐藏，点「修改用户名」展开 */
.rename-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  text-align: left;
}

/* 开关：记住账号 */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 500ms var(--ease), background-color 500ms var(--ease);
}
.switch-row:hover {
  border-color: var(--tan);
  background: var(--tan-soft);
}
.switch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.switch-text b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.switch-text em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.5;
}
/* 真实 checkbox 视觉隐藏但保留可聚焦/可点 */
.switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.switch-ui {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 25px;
  background: var(--sand);
  border: 1px solid var(--line-2);
  /* 轨道同样用手捏感的不规则圆角 */
  border-radius: 14px 12px 15px 11px / 12px 15px 11px 14px;
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease);
}
.switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  background: var(--card);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
  box-shadow: var(--sh-xs);
  transition: transform 500ms var(--ease), background-color 500ms var(--ease);
}
.switch-input:checked + .switch-ui {
  background: var(--accent);
  border-color: var(--accent);
}
.switch-input:checked + .switch-ui::after {
  transform: translateX(19px);
  background: #ffffff;
}
.switch-input:focus-visible + .switch-ui {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}
.switch-row:has(.switch-input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 纵向按钮组：退出确认面板用 */
.btn-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ================================================================
   15. 管理页
   ================================================================ */
.admin-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.admin-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 246, 241, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
html[data-theme="dark"] .admin-head {
  background: rgba(31, 27, 23, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.admin-head-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px;
  background: var(--sand);
  border-radius: 28px 32px 24px 30px / 28px 30px 32px 26px;
}
.admin-brand-ic {
  display: flex;
  color: var(--accent);
}
.admin-brand-text {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.admin-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px var(--gutter) 60px;
}

/* 概览卡片 */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--sh-xs);
  transition: box-shadow 700ms var(--ease), border-color 700ms var(--ease),
    transform 700ms var(--ease);
}
.stat-card:hover {
  box-shadow: var(--sh-sm);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.stat-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
}
.stat-ic .ic {
  width: 20px;
  height: 20px;
}
.stat-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.stat-body b {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}
.stat-body em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-2);
}

/* 面板 */
.admin-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: 20px 22px 22px;
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
}
.panel-sub {
  font-size: 12.5px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.6;
  max-width: 46em;
}
.panel-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-wrap-inline {
  position: relative;
  display: flex;
  align-items: center;
}
.search-ic-inline {
  position: absolute;
  left: 12px;
  display: flex;
  color: var(--text-3);
  pointer-events: none;
}
.search-field-inline {
  width: 220px;
  padding-left: 34px;
  font-size: 13px;
}
.panel-foot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
}

/* 表格 */
.admin-table-wrap {
  text-align: left;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 10px 12px;
  color: var(--text-2);
  font-family: var(--font-serif);
  font-weight: 600;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
.admin-table tbody tr {
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
.admin-table tbody tr:hover {
  background: var(--accent-soft);
}
.admin-table tbody tr:hover td {
  color: var(--verdant);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-table .col-act {
  text-align: right;
}
/* 选择列：勾选框用主题强调色，行选中时整行着色 */
.admin-table .col-sel {
  width: 34px;
  text-align: center;
  white-space: nowrap;
}
.admin-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.admin-table tbody tr:has(.row-sel:checked) {
  background: var(--accent-soft);
}
.admin-table tbody tr:has(.row-sel:checked) td {
  color: var(--accent-active);
}
.admin-table .cell-owner {
  white-space: nowrap;
}
.admin-table .cell-key {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table .cell-name {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
/* 列表里的迷你头像，同样用不规则圆角 */
.mini-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--card);
  background: var(--accent);
  border-radius: 60% 40% 50% 50% / 40% 60% 50% 60%;
}
.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.admin-table .empty-row td {
  text-align: center;
  padding: 26px 12px;
  color: var(--text-3);
  font-size: 13px;
}
.admin-foot {
  margin-top: 12px;
}

/* ================================================================
   16. 响应式（统一由 --gutter 驱动）
   ================================================================ */
@media (max-width: 860px) {
  :root {
    --gutter: 14px;
  }
  /* 分类导航横向滑动，不换行不截断 */
  .stream-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stream-cats::-webkit-scrollbar {
    display: none;
  }
  .stream-cats-inner {
    flex-wrap: nowrap;
  }
  .stream-cats .chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .stream-foot {
    justify-content: stretch;
  }
  .stream-foot .btn {
    flex: 1;
  }

  /* 管理台：概览改双列，表格横向滚动而不是挤压列宽 */
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-panel {
    padding: 16px 14px 18px;
  }
  .panel-tools {
    width: 100%;
  }
  .search-wrap-inline {
    flex: 1;
  }
  .search-field-inline {
    width: 100%;
  }
  .admin-table-wrap {
    max-height: none;
  }
  .admin-table {
    min-width: 660px;
  }

  /* 触控友好 */
  .btn {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
  }
  .btn-sm {
    min-height: 36px;
    padding: 8px 16px;
  }
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
  .chip {
    font-size: 13px;
    padding: 4px 11px;
  }
  .field {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
  }
  .field.slim {
    min-height: 36px;
    padding: 8px 10px;
  }
  .composer-input {
    min-height: 120px;
    font-size: 16px;
  }
  .search-field {
    min-height: 44px;
  }
  .sb-name {
    font-size: 13px;
  }
  .sb-hint {
    font-size: 10px;
  }
  .count-chip {
    font-size: 11px;
    padding: 2px 8px;
  }
  .clip {
    padding: 14px 14px 12px;
  }
  .clip::before {
    left: 6px;
    top: 14px;
    bottom: 14px;
  }
  .clip-content {
    font-size: 15px;
  }
  .act {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  :root {
    --gutter: 12px;
  }
  .admin-stats {
    grid-template-columns: 1fr;
  }
  .stat-card {
    padding: 13px 15px;
  }
  .stat-body b {
    font-size: 21px;
  }
  .panel-head {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-tools .btn {
    width: 100%;
  }
  .gate-card,
  .auth-card {
    padding: 26px 18px;
  }
  .composer-bar #submitBtn {
    margin-left: 0;
    width: 100%;
  }
  .clip-content {
    font-size: 14px;
  }

  .btn {
    min-height: 48px;
    font-size: 15px;
  }
  .btn-sm {
    min-height: 40px;
  }
  .chip {
    font-size: 13px;
    padding: 5px 12px;
  }
  .field {
    min-height: 48px;
    font-size: 16px;
  }
  .composer-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 6px 14px 0;
  }
  .composer-bar select {
    width: 100%;
  }
  .composer-bar #pasteBtn {
    width: 100%;
    justify-content: center;
  }
  .stream-foot {
    flex-direction: column;
  }
  .stream-foot .btn {
    width: 100%;
  }
  .clip {
    padding: 14px;
    margin-bottom: 12px;
  }
  .clip::before {
    display: none;
  }
  .clip-actions {
    flex-wrap: wrap;
  }
  .clip-actions .act {
    flex: 1;
    justify-content: center;
    min-height: 42px;
  }
  .modal {
    padding: 12px;
  }
  .modal-narrow {
    max-width: 100%;
  }
  /* 小屏下背景装饰收敛，避免干扰阅读 */
  .organic-bg .blob-c {
    display: none;
  }
}

/* ================================================================
   17. 桌面端增强
   ================================================================ */
@media (min-width: 861px) {
  :root {
    --max-w: 960px;
    --gutter: 32px;
  }
  body {
    font-size: 15.5px;
  }
  .stream-head {
    padding: 14px var(--gutter);
  }
  .composer-input {
    min-height: 180px;
    padding: 22px 24px 12px;
  }
  .composer-bar {
    margin: 6px 22px 0;
    padding: 12px 0 16px;
  }
  .tag-row {
    padding: 0 22px 20px;
  }
  .clip {
    padding: 16px 22px 14px;
  }
  .clip::before {
    left: 9px;
  }
  .empty {
    padding: 64px 24px;
  }
  .sb-name {
    font-size: 15px;
  }
  .sb-hint {
    font-size: 12px;
  }
  .clip-content {
    font-size: 15px;
  }
}

/* ================================================================
   18. 响应式工具类
   ================================================================ */
.only-mobile {
  display: none !important;
}
.only-desktop {
  display: block !important;
}
@media (max-width: 860px) {
  .only-mobile {
    display: block !important;
  }
  .only-desktop {
    display: none !important;
  }
}

/* ================================================================
   19. 细节打磨
   ================================================================ */
::selection {
  background: rgba(139, 157, 119, 0.32);
}
html[data-theme="dark"] ::selection {
  background: rgba(163, 180, 148, 0.30);
}

.field:-webkit-autofill,
.field:-webkit-autofill:hover,
.field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 99999s ease-in-out 0s;
}

.view-content,
.admin-table-wrap,
.space-list {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.view-content::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar,
.space-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.view-content::-webkit-scrollbar-thumb,
.admin-table-wrap::-webkit-scrollbar-thumb,
.space-list::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}
.view-content::-webkit-scrollbar-thumb:hover,
.admin-table-wrap::-webkit-scrollbar-thumb:hover,
.space-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
.view-content::-webkit-scrollbar-track,
.admin-table-wrap::-webkit-scrollbar-track,
.space-list::-webkit-scrollbar-track {
  background: transparent;
}

.chip:focus-visible,
.auth-tab:focus-visible,
.drawer-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

@keyframes shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.shake {
  animation: shake 400ms var(--ease);
}

/* ================================================================
   20. 无障碍：尊重减少动态效果
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover,
  .icon-btn:hover,
  .chip:hover,
  .act:hover,
  .drawer-item:hover {
    transform: none;
  }
}