/* =========================================================
   画师记录站 · EchoDraw-inspired UI
   完整可替换版
   说明：保留现有 HTML / JS 所依赖的 class 与 id，
   主要重做视觉层、空间层级、导航与响应式布局。
   ========================================================= */

/* ============ 基础 ============ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #1b1b1a;
  --primary-light: #6e716b;
  --primary-soft: #eeeee9;
  --primary-grad: linear-gradient(135deg, #171716 0%, #4a4a45 100%);
  --primary-glow: rgba(30, 30, 28, .12);

  --bg: #f4f3ef;
  --bg-soft: #ecebe6;
  --card: rgba(255, 255, 255, .78);
  --card-solid: #fff;
  --card-2: rgba(255, 255, 255, .58);

  --text: #1c1c1b;
  --text-2: #74746e;
  --text-3: #aaa9a2;

  --border: rgba(25, 25, 23, .09);
  --border-soft: rgba(25, 25, 23, .055);

  --danger: #b75b65;
  --income: #4f8b68;
  --expense: #b75b65;
  --warn: #a9874a;
  --info: #607797;

  --radius-xl: 30px;
  --radius: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  --shadow-xs: 0 2px 8px rgba(25, 25, 22, .035);
  --shadow: 0 8px 30px rgba(25, 25, 22, .055);
  --shadow-md: 0 14px 44px rgba(25, 25, 22, .075);
  --shadow-lg: 0 28px 90px rgba(25, 25, 22, .16);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.42, .64, 1);
}

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

body {
  min-height: 100vh;
  font-family:
    "Inter",
    "PingFang SC",
    "Microsoft YaHei",
    "Segoe UI",
    system-ui,
    sans-serif;
  color: var(--text);
  line-height: 1.6;
  background:
    radial-gradient(circle at 7% 0%, rgba(218, 232, 225, .72), transparent 31%),
    radial-gradient(circle at 94% 92%, rgba(232, 222, 207, .72), transparent 34%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background-image:
    radial-gradient(rgba(0,0,0,.045) .5px, transparent .5px);
  background-size: 7px 7px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%);
}

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

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

button {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  color: var(--text);
}

h1 {
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: -.035em;
}

h2 {
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 680;
  letter-spacing: -.015em;
}

h3 {
  font-size: 1rem;
  font-weight: 680;
}

.num,
.stat-card .value,
.tx-amount,
.inc-amount,
.month-label {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ============ 布局 ============ */
.main {
  width: min(100% - 160px, 1280px);
  margin-left: 122px;
  padding: 42px 28px 80px;
}

.page {
  animation: pageIn .38s var(--ease-out);
}

/* hidden 属性必须生效：防止页面专属 display 规则（如 #page-home 的 grid）覆盖隐藏 */
.page[hidden] {
  display: none !important;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.page-head h1 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

/* ============ 浮动侧边栏 ============ */
.sidebar {
  position: fixed;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 82px;
  padding: 14px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 50;

  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 28px;

  box-shadow:
    0 20px 60px rgba(31, 31, 27, .08),
    inset 0 1px 0 rgba(255,255,255,.9);

  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.sidebar .logo {
  width: 56px;
  height: 56px;
  margin-bottom: 7px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 19px;
  background: #191918;

  font-size: 0;
  color: white;
  -webkit-text-fill-color: white;

  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.sidebar .logo::after {
  content: "✦";
  font-size: 23px;
  line-height: 1;
  color: white;
}

.sidebar .nav-item {
  width: 62px;
  height: 62px;
  padding: 7px 3px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border-radius: 18px;
  color: #8a8a84;
  font-size: 10.5px;
  font-weight: 600;

  transition:
    color .22s var(--ease),
    background .22s var(--ease),
    transform .22s var(--ease),
    box-shadow .22s var(--ease);
}

.sidebar .nav-item .icon {
  font-size: 19px;
  line-height: 1;
  filter: grayscale(.15);
}

.sidebar .nav-item:hover {
  color: #222;
  background: rgba(0,0,0,.045);
  transform: translateY(-1px);
}

.sidebar .nav-item.active {
  color: #fff;
  background: #191918;
  box-shadow: 0 9px 22px rgba(0,0,0,.15);
}

.sidebar .nav-item.active::before {
  display: none;
}

.bottombar {
  display: none;
}

/* ============ 通用卡片 ============ */
.card,
.stat-card,
.quick-card,
.hero-card,
.work-card,
.order-card,
.note-item {
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.88),
      rgba(255,255,255,.67)
    );
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.card {
  position: relative;
  padding: 25px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.95),
    transparent
  );
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.link {
  color: #777770;
  font-size: .82rem;
  font-weight: 650;
  transition: color .2s, transform .2s;
}

.link:hover {
  color: var(--text);
}

/* ============ 按钮 ============ */
.btn {
  min-height: 40px;
  padding: 10px 19px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 650;
  color: var(--text);
  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease),
    background .2s var(--ease),
    opacity .2s;
}

.btn.primary {
  color: #fff;
  background: #191918;
  box-shadow: 0 8px 22px rgba(0,0,0,.13);
}

.btn.primary:hover {
  background: #333330;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.17);
}

.btn.primary:active {
  transform: translateY(0);
}

.btn.primary:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.ghost {
  background: #ecebe6;
  color: #4f4f4a;
}

.btn.ghost:hover {
  background: #e1e0db;
  transform: translateY(-1px);
}

.btn.danger {
  background: #f8e9eb;
  color: var(--danger);
}

.btn.danger:hover {
  background: #f3dce0;
}

.btn.sm {
  min-height: 34px;
  padding: 7px 14px;
  font-size: .78rem;
}

.btn-edit {
  border: 0;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  color: #4d4d48;
  background: #ecebe6;
  font-size: .78rem;
  font-weight: 650;
  transition: all .2s var(--ease);
}

.btn-edit:hover {
  background: #deddd7;
  transform: translateY(-1px);
}

.btn-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #777;
  background: #f0efeb;

  transition: all .2s var(--ease);
}

.btn-close:hover {
  color: #111;
  background: #e5e4df;
  transform: rotate(90deg);
}

/* ============ 输入框 ============ */
.input {
  width: 100%;
  min-height: 44px;
  padding: 11px 15px;

  border: 1px solid rgba(20,20,18,.09);
  border-radius: 15px;
  outline: none;

  color: var(--text);
  background: rgba(255,255,255,.72);

  transition:
    border-color .2s,
    box-shadow .2s,
    background .2s;
}

.input::placeholder {
  color: #aaa9a2;
}

.input:hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(20,20,18,.15);
}

.input:focus {
  background: #fff;
  border-color: #5b5b56;
  box-shadow: 0 0 0 4px rgba(0,0,0,.055);
}

.input.sm {
  width: auto;
  min-height: 36px;
  padding: 8px 13px;
  font-size: .8rem;
}

textarea.input {
  resize: vertical;
  line-height: 1.65;
}

select.input {
  cursor: pointer;
}

input[type=file].input {
  padding: 9px 12px;
  cursor: pointer;
  background: rgba(250,250,247,.8);
  border-style: dashed;
  line-height: 1.4;
}

input[type=file].input:hover {
  background: #fff;
  border-color: #999;
}

input[type=file].input::file-selector-button,
input[type=file].input::-webkit-file-upload-button {
  border: 0;
  color: #fff;
  background: #191918;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .78rem;
  font-family: inherit;
  margin-right: 10px;
  cursor: pointer;
}

.empty {
  padding: 65px 0;
  text-align: center;
  color: var(--text-3);
  font-size: .88rem;
}

/* ============ 统计卡片 ============ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 21px;
  border-radius: 22px;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.stat-card::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,100,85,.12), transparent 70%);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-card .label {
  color: #92928b;
  font-size: .76rem;
  font-weight: 600;
}

.stat-card .value {
  margin-top: 4px;
  color: #20201f;
  font-size: 1.7rem;
  line-height: 1.15;
  font-weight: 760;
  letter-spacing: -.045em;
}

.stat-card .value.income {
  color: var(--income);
}

.stat-card .value.expense {
  color: var(--expense);
}

/* ============ 分段控件 ============ */
.seg {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(232,231,226,.78);
  box-shadow: none;
}

.seg-full {
  width: 100%;
  margin-bottom: 18px;
}

.seg-full .seg-item {
  flex: 1;
  justify-content: center;
}

.seg-item {
  min-height: 34px;
  border: 0;
  padding: 8px 17px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;

  cursor: pointer;
  color: #7d7d76;
  background: transparent;
  font-size: .82rem;
  font-weight: 650;

  transition: all .22s var(--ease);
}

.seg-item:hover:not(.active) {
  color: #292927;
  background: rgba(255,255,255,.58);
}

.seg-item.active {
  color: #fff;
  background: #191918;
  box-shadow: 0 4px 12px rgba(0,0,0,.13);
}

/* ============ 首页 ============ */
.hero-card {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  gap: 23px;

  min-height: 190px;
  padding: 32px;

  margin-bottom: 22px;

  border-radius: 30px;

  background:
    radial-gradient(circle at 90% 0%, rgba(213,226,217,.72), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(249,248,244,.68));

  box-shadow: var(--shadow-md);
}

.hero-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -100px;
  bottom: -130px;
  border-radius: 50%;
  background: rgba(217,207,192,.28);
  filter: blur(5px);
}

.avatar {
  width: 78px;
  height: 78px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 24px;
  background: #191918;
  color: white;
  font-size: 2rem;

  box-shadow:
    0 10px 25px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.avatar.big {
  width: 100px;
  height: 100px;
  border-radius: 28px;
  font-size: 2.5rem;
}

.hero-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.hero-info h1 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

.hero-info p {
  margin: 6px 0 10px;
  color: var(--text-2);
  font-size: .87rem;
}

.tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.tag {
  padding: 4px 11px;
  border-radius: 999px;
  color: #696a64;
  background: #ecece7;
  font-size: .7rem;
  font-weight: 650;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
  margin-bottom: 22px;
}

.quick-card {
  min-height: 108px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 17px 8px;

  border-radius: 22px;
  color: #777771;
  font-size: .8rem;
  font-weight: 650;

  box-shadow: var(--shadow);

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease),
    background .25s var(--ease);
}

.quick-card:hover {
  color: #20201f;
  background: rgba(255,255,255,.92);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.qc-icon {
  font-size: 1.55rem;
  transition: transform .3s var(--ease-spring);
}

.quick-card:hover .qc-icon {
  transform: scale(1.12) rotate(-3deg);
}

.work-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
}

.work-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;

  border-radius: 19px;
  background: #e9e8e3;
  box-shadow: var(--shadow-xs);
}

.work-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .55s var(--ease-out);
}

.work-thumb:hover img {
  transform: scale(1.055);
}

.work-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.045);
}

/* ============ 画集 ============ */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.works-timeline {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.work-card {
  display: flex;
  gap: 17px;

  padding: 14px;
  border-radius: 22px;
  cursor: pointer;

  box-shadow: var(--shadow);

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.work-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.work-cover {
  width: 130px;
  height: 130px;
  flex-shrink: 0;

  object-fit: cover;
  border-radius: 17px;
  background: #e9e8e3;
}

.work-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.work-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.work-title {
  font-size: .98rem;
  font-weight: 700;
}

.work-meta {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--text-2);
  font-size: .75rem;
}

.work-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 9px;
}

.work-tags .tag {
  padding: 3px 9px;
  font-size: .66rem;
}

.badge-status,
.badge-kind {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 650;
}

.badge-status.s-灵感 {
  color: #9b7940;
  background: #f5ead6;
}

.badge-status.s-草稿 {
  color: #5d7191;
  background: #e7edf5;
}

.badge-status.s-进行中 {
  color: #4f8967;
  background: #e3f0e8;
}

.badge-status.s-已完成 {
  color: #5c6d65;
  background: #e6ece8;
}

.badge-kind {
  color: #777770;
  background: #eeede9;
}

.income-flag {
  color: var(--income);
  font-size: .7rem;
  font-weight: 700;
}

.work-multi-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20,20,18,.62);
  backdrop-filter: blur(6px);
  font-size: .65rem;
}

/* ============ 节点编辑器 ============ */
.node-editor {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 6px;
}

.node-row {
  display: grid;
  grid-template-columns: 48px 1fr 100px 32px;
  gap: 8px;
  align-items: center;
}

.node-thumb {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
  background: #e9e8e3;
}

.node-row .input {
  min-height: 38px;
  padding: 8px 10px;
  font-size: .8rem;
}

.node-del {
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color .2s;
}

.node-del:hover {
  color: var(--danger);
}

.upload-hint {
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: .77rem;
}

/* ============ 排单 ============ */
.order-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 17px;
}

.order-chip {
  padding: 7px 16px;
  border: 1px solid rgba(20,20,18,.07);
  border-radius: 999px;

  color: #777770;
  background: rgba(255,255,255,.7);

  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;

  transition: all .2s var(--ease);
}

.order-chip:hover {
  color: #222;
  transform: translateY(-1px);
}

.order-chip.active {
  color: #fff;
  background: #191918;
  border-color: #191918;
}

.order-card {
  padding: 18px 20px;
  margin-bottom: 11px;

  border-radius: 20px;
  border-left: 3px solid #ddd;

  transition: all .22s var(--ease);
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.order-card.st-pending {
  border-left-color: var(--warn);
}

.order-card.st-in_progress {
  border-left-color: var(--info);
}

.order-card.st-delivered {
  border-left-color: #6f8e82;
}

.order-card.st-completed {
  border-left-color: var(--income);
}

.order-card.st-canceled {
  border-left-color: #aaa;
  opacity: .65;
}

.order-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.order-title {
  flex: 1;
  min-width: 120px;
  font-weight: 700;
}

.obadge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 650;
}

.obadge.st-pending {
  color: #96783e;
  background: #f5ead6;
}

.obadge.st-in_progress {
  color: #5e7394;
  background: #e7edf5;
}

.obadge.st-delivered {
  color: #5e756b;
  background: #e6ece8;
}

.obadge.st-completed {
  color: #4f8967;
  background: #e3f0e8;
}

.obadge.st-canceled {
  color: #777;
  background: #e9e8e5;
}

.order-meta {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--text-2);
  font-size: .75rem;
}

.order-foot {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.order-work {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 11px;
  background: rgba(238,237,232,.72);
  font-size: .8rem;
}

.order-work img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
}

.order-card.flash {
  animation: orderFlash 1.5s var(--ease);
}

@keyframes orderFlash {
  0%, 60% {
    box-shadow: 0 0 0 3px #9daea5, var(--shadow-md);
  }
  100% {
    box-shadow: var(--shadow);
  }
}

/* 分类 */
.cat-bar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cat-chip {
  border: 1px solid rgba(20,20,18,.09);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;

  color: #777770;
  background: rgba(255,255,255,.68);

  font-size: .75rem;
  font-weight: 600;
  transition: all .2s var(--ease);
}

.cat-chip b {
  color: #aaa9a2;
  font-weight: 650;
}

.cat-chip:hover {
  color: #222;
  border-color: rgba(20,20,18,.18);
}

.cat-chip.active {
  color: #fff;
  background: #191918;
  border-color: #191918;
}

.cat-chip.active b {
  color: rgba(255,255,255,.65);
}

.cat-chip.add,
.cat-chip.manage {
  border-style: dashed;
  background: transparent;
}

.cat-chip.add:hover,
.cat-chip.manage:hover {
  background: #ecebe6;
}

.cat-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
}

.cat-manage-row:last-of-type {
  border-bottom: 0;
}

.cat-count {
  margin-left: 6px;
  color: var(--text-3);
  font-size: .76rem;
}

.order-thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.order-thumbs img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: #e9e8e3;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease);
}

.order-thumbs img:hover {
  transform: scale(1.07);
}

/* ============ 日程 ============ */
.schedule-tip {
  color: var(--text-3);
  font-size: .76rem;
}

.month-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.month-label {
  min-width: 100px;
  text-align: center;
  color: #33332f;
  font-size: 1rem;
  font-weight: 750;
}

.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}

.cal-wd {
  padding: 4px 0;
  text-align: center;
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 650;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-cell {
  min-height: 82px;
  padding: 6px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: 3px;

  border: 1px solid transparent;
  border-radius: 12px;

  background: rgba(238,237,232,.64);
  transition: border-color .2s, background .2s;
}

.cal-cell:hover {
  border-color: rgba(30,30,28,.13);
}

.cal-cell.out {
  opacity: .38;
}

.cal-cell.today {
  color: #fff;
  background: #191918;
  border-color: #191918;
}

.cal-cell.today .cal-day {
  color: #fff;
}

.cal-day {
  color: #6f706a;
  font-size: .76rem;
  font-weight: 700;
}

.cal-event {
  padding: 2px 5px;
  border: 0;
  border-radius: 6px;
  text-align: left;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  cursor: pointer;
  font-family: inherit;
  font-size: .62rem;
  font-weight: 650;
}

.cal-event:hover {
  opacity: .8;
}

.cal-event.st-pending {
  color: #92743b;
  background: #f3e8d2;
}

.cal-event.st-in_progress {
  color: #5c7191;
  background: #e3eaf2;
}

.cal-event.st-delivered {
  color: #5e756b;
  background: #e3ece7;
}

.cal-event.st-completed {
  color: #4f8967;
  background: #e1eee6;
}

.cal-event.st-canceled {
  color: #92928c;
  background: #e8e7e4;
  text-decoration: line-through;
}

.cal-more {
  padding-left: 4px;
  color: var(--text-3);
  font-size: .62rem;
}

.sch-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-soft);
}

.sch-item:last-child {
  border-bottom: 0;
}

.sch-date {
  min-width: 44px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.sch-main {
  flex: 1;
  min-width: 0;
}

.sch-main .t1 {
  font-weight: 650;
}

.sch-main .t2 {
  margin-top: 2px;
  color: var(--text-2);
  font-size: .75rem;
}

.sch-overdue {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--danger);
  background: #f5e5e8;
  font-size: .67rem;
  font-weight: 650;
}

/* ============ 随手记 ============ */
.note-editor {
  margin-bottom: 13px;
}

.note-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.mood-pick {
  display: flex;
  gap: 4px;
}

.mood {
  padding: 4px 7px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  opacity: .38;
  background: transparent;
  font-size: 1.2rem;
  transition: all .22s var(--ease-spring);
}

.mood.active,
.mood:hover {
  opacity: 1;
  background: #ecebe6;
  transform: scale(1.1);
}

#note-search {
  margin-bottom: 13px;
}

.note-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.note-item {
  padding: 17px 19px;
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .22s, transform .22s;
}

.note-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.note-item .note-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.note-item .note-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: var(--text-2);
  font-size: .72rem;
}

.note-item .note-acts {
  display: flex;
  gap: 4px;
}

.note-item .note-acts button {
  padding: 3px 7px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-2);
  background: transparent;
  font-size: .72rem;
}

.note-item .note-acts button:hover {
  color: #222;
  background: #ecebe6;
}

/* ============ 账单 / 稿酬 ============ */
.ledger-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.ledger-cols .card {
  margin-bottom: 17px;
}

.chart-box {
  position: relative;
  height: 260px;
}

.tx-item,
.inc-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-soft);
  transition: background .2s;
}

.tx-item:last-child,
.inc-item:last-child {
  border-bottom: 0;
}

.tx-item:hover,
.inc-item:hover {
  background: rgba(238,237,232,.5);
}

.tx-icon,
.inc-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  border-radius: 12px;
  background: #eeede8;
  font-size: 1rem;
}

.inc-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tx-main,
.inc-main {
  flex: 1;
  min-width: 0;
}

.tx-main .t1,
.inc-main .t1 {
  font-weight: 600;
}

.tx-main .t2,
.inc-main .t2 {
  color: var(--text-2);
  font-size: .73rem;
}

.tx-amount {
  font-weight: 750;
}

.tx-amount.income {
  color: var(--income);
}

.tx-amount.expense {
  color: var(--expense);
}

.inc-amount {
  color: var(--income);
  font-weight: 750;
  white-space: nowrap;
}

.tx-acts button,
.inc-acts button {
  padding: 4px 7px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-3);
  background: transparent;
  font-size: .78rem;
}

.tx-acts button:hover,
.inc-acts button:hover {
  color: var(--danger);
  background: #f8e9eb;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
}

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

.rank-no {
  width: 25px;
  flex-shrink: 0;
  text-align: center;
  color: var(--text-3);
  font-weight: 750;
}

.rank-no.top {
  color: var(--warn);
}

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

.rank-bar-wrap {
  flex: 0 0 32%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e8e3;
}

.rank-bar {
  height: 100%;
  border-radius: inherit;
  background: #343431;
  transition: width .4s var(--ease);
}

/* ============ 弹窗 ============ */
.modal-mask[hidden],
.viewer[hidden] {
  display: none;
}

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 200;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;

  background: rgba(24,24,21,.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  animation: maskIn .25s var(--ease-out);
}

@keyframes maskIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  width: 100%;
  max-width: 540px;
  max-height: 88vh;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;

  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-lg);

  animation: pop .3s var(--ease-spring);
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 0;
}

.modal-body {
  overflow-y: auto;
  padding: 18px 24px 24px;
}

.modal-body .form-row {
  margin-bottom: 16px;
}

.modal-body label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 650;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--border-soft);
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: .84rem;
}

/* ============ 查看器 ============ */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 300;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 14px;
  padding: 20px;

  background: rgba(13,13,12,.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  animation: maskIn .25s var(--ease-out);
}

.viewer-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.viewer img#viewer-img {
  max-width: 92vw;
  max-height: 66vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}

.viewer-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.viewer-thumbs img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  opacity: .5;
  transition: all .2s var(--ease);
}

.viewer-thumbs img:hover {
  opacity: .8;
}

.viewer-thumbs img.active {
  opacity: 1;
  border-color: #fff;
  transform: scale(1.05);
}

.viewer-close {
  position: absolute;
  top: 20px;
  right: 24px;

  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;

  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.1);

  font-size: 1rem;
  transition: all .2s var(--ease);
}

.viewer-close:hover {
  background: rgba(255,255,255,.2);
  transform: rotate(90deg);
}

.viewer-info {
  max-width: 92vw;
  color: #d8d8d2;
  text-align: center;
  font-size: .84rem;
}

.viewer-info .vi-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 400;

  max-width: 86vw;
  padding: 11px 22px;

  transform: translateX(-50%);

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;

  color: #fff;
  background: rgba(24,24,22,.92);
  box-shadow: var(--shadow-lg);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  pointer-events: none;
  text-align: center;
  font-size: .82rem;

  animation: toastIn .25s var(--ease-spring);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cfcec8;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa9a2;
}

/* ============ 移动端 ============ */
@media (max-width: 900px) {
  .main {
    width: calc(100% - 122px);
    max-width: none;
  }

  .quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ledger-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(218,232,225,.7), transparent 38%),
      var(--bg);
  }

  .sidebar {
    display: none;
  }

  .main {
    width: 100%;
    margin-left: 0;
    padding:
      24px 15px
      calc(92px + env(safe-area-inset-bottom));
  }

  .bottombar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 100;

    display: flex;

    padding: 7px;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 25px;

    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 45px rgba(30,30,27,.13);

    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
  }

  .bottombar .nav-item {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;
    padding: 7px 2px;

    border-radius: 17px;

    color: #8b8b84;
    font-size: .6rem;
    font-weight: 650;
    text-align: center;

    transition: all .2s var(--ease);
  }

  .bottombar .nav-item .icon {
    font-size: 1.15rem;
    line-height: 1;
  }

  .bottombar .nav-item.active {
    color: #fff;
    background: #191918;
  }

  .bottombar .nav-item.active::before {
    display: none;
  }

  .page-head {
    margin-bottom: 22px;
  }

  .page-head h1 {
    font-size: 1.65rem;
  }

  .hero-card {
    flex-direction: column;
    text-align: center;
    padding: 27px 19px;
    border-radius: 27px;
  }

  .avatar {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .avatar.big {
    width: 88px;
    height: 88px;
    border-radius: 24px;
  }

  .hero-info h1 {
    font-size: 1.75rem;
  }

  .tags {
    justify-content: center;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card {
    padding: 17px;
    border-radius: 19px;
  }

  .stat-card .value {
    font-size: 1.42rem;
  }

  .quick-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }

  .quick-card {
    min-height: 86px;
    padding: 12px 4px;
    border-radius: 18px;
    font-size: .67rem;
  }

  .qc-icon {
    font-size: 1.35rem;
  }

  .work-grid-sm {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .card {
    padding: 19px;
    border-radius: 21px;
  }

  .work-card {
    flex-direction: column;
    border-radius: 21px;
  }

  .work-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .order-foot .btn {
    flex: 1;
  }

  .node-row {
    grid-template-columns: 40px 1fr 80px 28px;
  }

  .ledger-cols {
    grid-template-columns: 1fr;
  }

  .chart-box {
    height: 220px;
  }

  .rank-bar-wrap {
    flex-basis: 25%;
  }

  .cal-cell {
    min-height: 59px;
    padding: 4px;
    border-radius: 10px;
  }

  .cal-day {
    font-size: .68rem;
  }

  .cal-event {
    font-size: .53rem;
    padding: 2px 4px;
  }

  .schedule-tip {
    width: 100%;
  }

  .sch-date {
    min-width: 36px;
    font-size: .9rem;
  }

  .modal {
    max-height: 92vh;
    border-radius: 24px;
  }

  .modal-head {
    padding: 18px 18px 0;
  }

  .modal-body {
    padding: 15px 18px 20px;
  }

  .viewer img#viewer-img {
    max-height: 62vh;
    max-width: 94vw;
  }

  .toast {
    bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .quick-card {
    min-height: 80px;
  }

  .stats-row {
    gap: 8px;
  }

  .stat-card {
    padding: 15px;
  }

  .stat-card .value {
    font-size: 1.28rem;
  }

  .seg-item {
    padding-left: 12px;
    padding-right: 12px;
  }

  .filter-bar {
    align-items: stretch;
  }

  .filter-bar .input.sm {
    width: 100%;
  }
}

/* ============ 减少动态效果 ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}



/* =========================================================
   Icon refresh v2
   不再使用系统 Emoji 作为 UI 图标。
   通过 CSS 绘制统一的单色线性图标，避免不同系统 Emoji
   产生的“彩色、卡通、风格不一致”问题。
   ========================================================= */

/* 通用 SVG 图标容器 */
.sidebar .nav-item .icon,
.bottombar .nav-item .icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
  opacity: .72;
  transition: opacity .2s, transform .2s;
}

.sidebar .nav-item:hover .icon,
.sidebar .nav-item.active .icon,
.bottombar .nav-item:hover .icon,
.bottombar .nav-item.active .icon {
  opacity: 1;
}

.sidebar .nav-item:hover .icon,
.bottombar .nav-item:hover .icon {
  transform: translateY(-1px);
}

/* 首页 */
.nav-item[data-page="home"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E");
}

/* 画集 */
.nav-item[data-page="works"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='9' r='1.5'/%3E%3Cpath d='m4.5 17 4.5-4 3 2.5 2.5-2 5 4.5'/%3E%3C/svg%3E");
}

/* 排单 */
.nav-item[data-page="orders"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2.5'/%3E%3Cpath d='M9 3.5h6'/%3E%3Cpath d='m8 9 1.5 1.5L12 8'/%3E%3Cpath d='M13 9h3M8 14l1.5 1.5L12 13'/%3E%3Cpath d='M13 14h3'/%3E%3C/svg%3E");
}

/* 日程 */
.nav-item[data-page="schedule"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4M17 3v4M3 9h18'/%3E%3Cpath d='M8 13h3M13 13h3M8 17h3'/%3E%3C/svg%3E");
}

/* 我的 */
.nav-item[data-page="me"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.5 3.1-5.5 7-5.5s6.2 2 7 5.5'/%3E%3C/svg%3E");
}

/* 随手记 */
.nav-item[data-page="notes"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10l4 4v12H5z'/%3E%3Cpath d='M15 4v5h4M8 13h8M8 17h6'/%3E%3C/svg%3E");
}

/* 账单 */
.nav-item[data-page="ledger"] .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6z'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h2'/%3E%3Cpath d='M14 15h1'/%3E%3C/svg%3E");
}

/* 当前页图标反色 */
.sidebar .nav-item.active .icon,
.bottombar .nav-item.active .icon {
  filter: brightness(0) invert(1);
}

/* Logo 不再用星星 Emoji/字符，改成极简笔触标记 */
.sidebar .logo {
  position: relative;
  overflow: hidden;
}

.sidebar .logo::after {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 49%, transparent 49%),
    linear-gradient(45deg, transparent 0 43%, #fff 43% 50%, transparent 50%);
  transform: rotate(-8deg);
}

/* 首页头像：隐藏默认 🙂，改成极简圆形签名 */
.avatar {
  font-size: 0 !important;
  position: relative;
}

.avatar::after {
  content: "";
  width: 30px;
  height: 30px;
  border: 1.8px solid rgba(255,255,255,.92);
  border-radius: 50%;
  opacity: .9;
}

.avatar::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -7px);
}

.avatar.big::after {
  width: 38px;
  height: 38px;
}

.avatar.big::before {
  width: 12px;
  height: 12px;
}

/* 快捷入口如果是 emoji，也统一隐藏。
   由于快捷卡片由 JS 动态生成，没有额外改 HTML 的必要。 */
.qc-icon {
  width: 28px;
  height: 28px;
  display: block;
  font-size: 0 !important;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px;
  transition: transform .3s var(--ease-spring);
}

/* 按 DOM 顺序给快捷入口配图标 */
.quick-card:nth-child(1) .qc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191918' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Crect x='4' y='17' width='16' height='4' rx='2'/%3E%3C/svg%3E");
}
.quick-card:nth-child(2) .qc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191918' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5'/%3E%3Cpath d='m14 5 5 5'/%3E%3Cpath d='M5 19h5'/%3E%3C/svg%3E");
}
.quick-card:nth-child(3) .qc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191918' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 8h8M8 12h5M8 16h7'/%3E%3C/svg%3E");
}
.quick-card:nth-child(4) .qc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191918' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4M17 3v4M3 9h18'/%3E%3C/svg%3E");
}
.quick-card:nth-child(5) .qc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191918' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10l4 4v12H5z'/%3E%3Cpath d='M15 4v5h4M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

.quick-card:hover .qc-icon {
  transform: translateY(-2px) scale(1.08);
}

/* 分段按钮里的 emoji 也隐藏，保留文字 */
.seg-item {
  font-size: 0;
}

.seg-item::first-letter {
  font-size: 0;
}

/* 仅针对排单子标签：用伪元素提供干净的小图标 */
#order-subtabs .seg-item[data-sub="orders"]::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2.5'/%3E%3Cpath d='M9 9h6M9 13h6M9 17h4'/%3E%3C/svg%3E") center/15px no-repeat;
}
#order-subtabs .seg-item[data-sub="orders"]::after {
  content: "排单列表";
  font-size: .82rem;
}
#order-subtabs .seg-item[data-sub="income"]::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V9M12 19V5M19 19v-8'/%3E%3C/svg%3E") center/15px no-repeat;
}
#order-subtabs .seg-item[data-sub="income"]::after {
  content: "稿酬分析";
  font-size: .82rem;
}

/* 情绪选择器：去掉彩色 Emoji，改成克制的状态点 */
.mood {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  position: relative;
  font-size: 0 !important;
  color: transparent;
}

.mood::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1.7px solid #9a9a93;
  border-radius: 50%;
  display: block;
  margin: auto;
  transition: all .22s var(--ease);
}

.mood[data-mood="开心"]::before {
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #ecebe6;
}
.mood[data-mood="一般"]::before {
  border-radius: 3px;
}
.mood[data-mood="焦虑"]::before {
  border-radius: 50% 50% 3px 50%;
  transform: rotate(45deg);
}
.mood[data-mood="难过"]::before {
  border-radius: 3px 50% 50% 50%;
  transform: rotate(45deg);
}

.mood.active::before,
.mood:hover::before {
  width: 13px;
  height: 13px;
  border-color: #191918;
  background: #191918;
  box-shadow: none;
}

/* 空状态不再突出 Emoji */
.empty {
  color: #a1a19a;
}

/* 移动端图标尺寸 */
@media (max-width: 768px) {
  .bottombar .nav-item .icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    background-size: 18px 18px;
  }

  .bottombar .nav-item {
    gap: 4px;
  }
}



/* =========================================================
   EchoDraw Studio V3
   首页重新设计：创作者工作台 / Bento / Editorial
   不改 HTML / JS，仅重排视觉与首页空间层级。
   ========================================================= */

:root {
  --bg: #f5f4f0;
  --bg-deep: #ebeae5;
  --ink: #171716;
  --muted: #7c7b75;
  --muted-2: #a7a59e;
  --paper: rgba(255,255,255,.82);
  --paper-solid: #fffefa;
  --line: rgba(23,23,22,.085);
  --line-light: rgba(23,23,22,.055);
  --sage: #788c80;
  --sage-soft: #e4ebe6;
  --sand: #ded5c7;
  --shadow-soft: 0 12px 40px rgba(29,29,26,.055);
  --shadow-hover: 0 20px 58px rgba(29,29,26,.09);
}

/* ---------- 整体气质 ---------- */
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 4%, rgba(224,233,227,.72), transparent 28%),
    radial-gradient(circle at 95% 86%, rgba(230,220,207,.6), transparent 30%),
    #f5f4f0;
}

body::before {
  opacity: .18;
  background-size: 9px 9px;
}

/* ---------- 左侧导航：从“菜单”变成工具栏 ---------- */
.sidebar {
  width: 76px;
  left: 22px;
  top: 22px;
  bottom: 22px;
  padding: 12px 7px;
  border-radius: 25px;
  background: rgba(250,250,247,.72);
  border-color: rgba(255,255,255,.92);
  box-shadow:
    0 18px 55px rgba(28,28,25,.07),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.sidebar .logo {
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
  border-radius: 17px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.sidebar .nav-item {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  gap: 5px;
  font-size: 9.5px;
  letter-spacing: .01em;
}

.sidebar .nav-item.active {
  background: var(--ink);
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
}

.sidebar .nav-item:not(.active):hover {
  background: rgba(20,20,18,.045);
}

/* ---------- 主内容 ---------- */
.main {
  width: min(calc(100% - 138px), 1380px);
  margin-left: 116px;
  padding: 54px 36px 90px;
}

.page-head {
  margin-bottom: 30px;
}

.page-head h1 {
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  letter-spacing: -.045em;
}

/* =========================================================
   首页 Bento
   HTML 顺序：
   1 hero / 2 stats / 3 quick / 4 works / 5 notes
   ========================================================= */

#page-home {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  grid-template-areas:
    "hero hero"
    "stats quick"
    "works notes";
  gap: 18px;
  align-items: stretch;
}

#page-home > .hero-card { grid-area: hero; }
#page-home > .stats-row { grid-area: stats; }
#page-home > .quick-grid { grid-area: quick; }
#page-home > .card:nth-of-type(1) { grid-area: works; }
#page-home > .card:nth-of-type(2) { grid-area: notes; }

/* Hero：不再像个人资料卡，而像创作主页头图 */
#page-home > .hero-card {
  min-height: 245px;
  margin: 0;
  padding: 34px 38px;
  gap: 25px;
  border-radius: 34px;
  border: 1px solid rgba(23,23,22,.065);
  background:
    radial-gradient(circle at 92% 15%, rgba(203,218,208,.7), transparent 31%),
    radial-gradient(circle at 72% 100%, rgba(235,226,214,.6), transparent 28%),
    linear-gradient(135deg, rgba(255,255,253,.95), rgba(247,247,242,.76));
  box-shadow: var(--shadow-soft);
}

#page-home > .hero-card::before {
  width: 420px;
  height: 420px;
  right: -180px;
  bottom: -300px;
  background: rgba(212,220,212,.26);
  filter: blur(10px);
}

#page-home .hero-info h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.055em;
}

#page-home .hero-info p {
  max-width: 520px;
  margin: 9px 0 17px;
  font-size: .92rem;
  color: #74746e;
}

#page-home .avatar {
  width: 92px;
  height: 92px;
  border-radius: 29px;
  background: var(--ink);
  box-shadow:
    0 15px 35px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.13);
}

/* Hero 的编辑按钮更像工具入口 */
#page-home .btn-edit {
  align-self: flex-start;
  margin-left: auto;
  position: relative;
  z-index: 2;
  padding: 10px 15px;
  color: #686861;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,20,18,.08);
  backdrop-filter: blur(10px);
}

/* ---------- 统计：变成“数字信息带” ---------- */
#page-home > .stats-row {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}

#page-home .stat-card {
  min-height: 116px;
  padding: 20px 21px;
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,253,.78);
}

#page-home .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

#page-home .stat-card .label {
  font-size: .72rem;
  letter-spacing: .03em;
  color: #8d8c85;
}

#page-home .stat-card .value {
  margin-top: 10px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  letter-spacing: -.045em;
}

/* ---------- 快捷入口：缩小、减少“功能菜单感” ---------- */
#page-home > .quick-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 0;
}

#page-home .quick-card {
  min-height: 0;
  padding: 14px 7px;
  border-radius: 21px;
  box-shadow: none;
  border: 1px solid rgba(23,23,22,.065);
  background: rgba(255,255,253,.54);
  color: #77766f;
}

#page-home .quick-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,253,.88);
  box-shadow: 0 12px 30px rgba(25,25,22,.07);
}

#page-home .qc-icon {
  width: 23px;
  height: 23px;
  background-size: 21px;
}

/* ---------- 最近作品：成为首页视觉中心 ---------- */
#page-home > .card:nth-of-type(1) {
  min-width: 0;
  min-height: 390px;
  margin: 0;
  padding: 25px;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,253,.78);
}

#page-home > .card:nth-of-type(1) .card-head {
  margin-bottom: 17px;
}

#page-home > .card:nth-of-type(1) .card-head h2 {
  font-size: 1.05rem;
  letter-spacing: -.025em;
}

#page-home .work-grid-sm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-home .work-thumb {
  border-radius: 18px;
  box-shadow: none;
  background: #e8e7e2;
}

#page-home .work-thumb::after {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* ---------- 最近随手记：安静的 editorial list ---------- */
#page-home > .card:nth-of-type(2) {
  min-width: 0;
  min-height: 390px;
  margin: 0;
  padding: 25px;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  background:
    linear-gradient(145deg, rgba(255,255,253,.86), rgba(246,245,240,.68));
}

#page-home > .card:nth-of-type(2) .card-head {
  margin-bottom: 9px;
}

#page-home .note-item {
  padding: 15px 4px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
  background: transparent;
}

#page-home .note-item:first-child {
  border-top: 0;
}

#page-home .note-item:hover {
  transform: none;
  background: rgba(0,0,0,.018);
}

/* =========================================================
   其他页面：保持同一设计语言，但减少“卡片堆叠”
   ========================================================= */

.card,
.stat-card,
.quick-card,
.hero-card,
.work-card,
.order-card,
.note-item {
  border-color: var(--line-light);
}

.card {
  border-radius: 27px;
  box-shadow: var(--shadow-soft);
}

.card:hover {
  box-shadow: var(--shadow-hover);
}

.work-card {
  border-radius: 25px;
  box-shadow: var(--shadow-soft);
}

.order-card {
  box-shadow: var(--shadow-soft);
}

.seg {
  box-shadow: none;
  background: rgba(255,255,253,.65);
  border-color: var(--line);
}

.seg-item.active {
  background: var(--ink);
}

/* 作品列表更像作品集 */
.work-cover {
  width: 145px;
  height: 145px;
  border-radius: 20px;
}

.work-title {
  letter-spacing: -.015em;
}

.cat-chip.active,
.order-chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* 输入控件 */
.input {
  border-radius: 16px;
  border-color: var(--line);
  background: rgba(255,255,253,.72);
}

.input:focus {
  border-color: rgba(23,23,22,.3);
  box-shadow: 0 0 0 4px rgba(23,23,22,.045);
}

/* 主按钮：更克制 */
.btn.primary {
  background: var(--ink);
  box-shadow: 0 8px 20px rgba(0,0,0,.11);
}

.btn.primary:hover {
  background: #30302d;
}

/* =========================================================
   响应式
   ========================================================= */

@media (max-width: 1050px) {
  #page-home {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "stats"
      "quick"
      "works"
      "notes";
  }

  #page-home > .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }

  #page-home > .quick-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .main {
    padding: 28px 15px calc(96px + env(safe-area-inset-bottom));
  }

  #page-home {
    gap: 12px;
  }

  #page-home > .hero-card {
    min-height: 0;
    padding: 27px 22px;
    border-radius: 27px;
  }

  #page-home .hero-info h1 {
    font-size: 1.85rem;
  }

  #page-home > .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  #page-home > .quick-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  #page-home .quick-card {
    min-height: 78px;
    padding: 10px 4px;
  }

  #page-home > .card:nth-of-type(1),
  #page-home > .card:nth-of-type(2) {
    min-height: 0;
    padding: 20px;
    border-radius: 23px;
  }

  #page-home .work-grid-sm {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  #page-home .avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
  }

  #page-home > .hero-card {
    align-items: flex-start;
  }

  #page-home .btn-edit {
    position: absolute;
    right: 18px;
    top: 18px;
  }

  #page-home > .quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #page-home .work-grid-sm {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* =========================================================
   作品页 V4：图片按原始比例自适应
   - 不再强制 145x145 裁切
   - img 保持原始宽高比
   - 卡片高度跟随图片
   - 适合竖图 / 横图 / 方图混排
   ========================================================= */

/* 作品列表：改为自适应网格 */
#page-works .works-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* 如果作品卡片内部包含 cover + info，则改成上下结构 */
#page-works .work-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 26px;
  background: rgba(255,255,253,.82);
}

/* 图片容器不固定高度 */
#page-works .work-cover {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  flex: none;
  border-radius: 0;
  overflow: hidden;
  background: #ecebe6;
}

/* 真正的图片：完整显示原始比例 */
#page-works .work-cover img,
#page-works .work-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* 如果原结构是 background-image，则不裁切 */
#page-works .work-cover[style*="background-image"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 信息区域 */
#page-works .work-card > .work-info,
#page-works .work-card .work-meta {
  padding: 15px 17px 17px;
}

/* 防止长标题撑破布局 */
#page-works .work-title,
#page-works .work-card h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 如果页面使用 work-grid ---------- */
#page-works .work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

#page-works .work-grid .work-card {
  height: auto;
}

/* ---------- Masonry 风格：图片高度完全由比例决定 ---------- */
#page-works .work-grid-sm,
#page-works .works-grid {
  align-items: start;
}

#page-works .work-grid-sm .work-thumb,
#page-works .works-grid .work-thumb {
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
}

#page-works .work-grid-sm .work-thumb img,
#page-works .works-grid .work-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ---------- 删除旧 CSS 对图片尺寸的限制 ---------- */
#page-works .work-cover,
#page-works .work-thumb {
  min-height: 0;
  max-height: none;
}

/* ---------- 平板 ---------- */
@media (max-width: 1050px) {
  #page-works .works-list,
  #page-works .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 手机 ---------- */
@media (max-width: 600px) {
  #page-works .works-list,
  #page-works .work-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #page-works .work-card {
    border-radius: 22px;
  }
}



/* =========================================================
   EchoDraw V5 — 真正的 Masonry 瀑布流作品墙
   使用 CSS columns，让不同图片比例自然上下错落。
   不需要修改 HTML / JS。
   ========================================================= */

/* 作品墙 */
#page-works .works-list,
#page-works .work-grid,
#page-works .works-grid {
  display: block;
  column-count: 3;
  column-gap: 18px;
  column-fill: balance;
}

/* 卡片作为瀑布流单元 */
#page-works .works-list > .work-card,
#page-works .work-grid > .work-card,
#page-works .works-grid > .work-card {
  display: inline-flex;
  width: 100%;
  margin: 0 0 18px;
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  flex-direction: column;
}

/* 图片区域彻底取消固定高度 */
#page-works .work-card .work-cover,
#page-works .work-card .work-thumb {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  flex: none;
  overflow: hidden;
  border-radius: 0;
}

/* 图片按照自身比例撑开 */
#page-works .work-card .work-cover img,
#page-works .work-card .work-thumb img,
#page-works .work-card > img {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  object-fit: contain !important;
}

/* background-image 类型图片也保持比例 */
#page-works .work-card .work-cover[style*="background-image"],
#page-works .work-card .work-thumb[style*="background-image"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Masonry 卡片视觉 */
#page-works .work-card {
  overflow: hidden;
  border-radius: 25px;
  background: rgba(255,255,253,.86);
  border: 1px solid rgba(23,23,22,.065);
  box-shadow: 0 10px 35px rgba(29,29,26,.055);
  transition:
    transform .32s var(--ease-spring),
    box-shadow .32s var(--ease-spring);
}

#page-works .work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(29,29,26,.10);
}

/* 信息区不要被图片规则影响 */
#page-works .work-card .work-info,
#page-works .work-card .work-meta {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 17px 17px;
}

/* 标签 / 标题 */
#page-works .work-card .work-title,
#page-works .work-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 没有图片时也保持正常卡片 */
#page-works .work-card .empty,
#page-works .work-card .empty-state {
  min-height: 160px;
  display: grid;
  place-items: center;
}

/* ---------- 4K / 大屏 ---------- */
@media (min-width: 1500px) {
  #page-works .works-list,
  #page-works .work-grid,
  #page-works .works-grid {
    column-count: 4;
    column-gap: 20px;
  }

  #page-works .works-list > .work-card,
  #page-works .work-grid > .work-card,
  #page-works .works-grid > .work-card {
    margin-bottom: 20px;
  }
}

/* ---------- 平板 ---------- */
@media (max-width: 1050px) {
  #page-works .works-list,
  #page-works .work-grid,
  #page-works .works-grid {
    column-count: 2;
    column-gap: 15px;
  }

  #page-works .works-list > .work-card,
  #page-works .work-grid > .work-card,
  #page-works .works-grid > .work-card {
    margin-bottom: 15px;
  }
}

/* ---------- 手机 ---------- */
@media (max-width: 600px) {
  #page-works .works-list,
  #page-works .work-grid,
  #page-works .works-grid {
    column-count: 1;
  }

  #page-works .works-list > .work-card,
  #page-works .work-grid > .work-card,
  #page-works .works-grid > .work-card {
    margin-bottom: 14px;
  }

  #page-works .work-card {
    border-radius: 21px;
  }
}

/* ---------- 图片加载动画 ---------- */
#page-works .work-card img {
  opacity: 0;
  animation: masonryImageIn .45s ease forwards;
}

@keyframes masonryImageIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* =========================================================
   EchoDraw V6 — 作品页真正可用的 Masonry
   修正实际 DOM：
   #works-list = .works-timeline
   .work-cover 本身就是 <img>
   ========================================================= */

#page-works #works-list.works-timeline {
  display: block;
  column-count: 3;
  column-gap: 20px;
  column-fill: balance;
  width: 100%;
}

/* 作品卡片独立成块，不能被列拆开 */
#page-works #works-list .work-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border: 1px solid rgba(23,23,22,.065);
  border-radius: 24px;
  background: rgba(255,255,253,.88);
  box-shadow: 0 10px 34px rgba(29,29,26,.055);
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              box-shadow .3s cubic-bezier(.2,.8,.2,1);
}

#page-works #works-list .work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(29,29,26,.10);
}

/* 关键：原图比例自适应，不再 130x130 裁切 */
#page-works #works-list .work-card > div:first-child {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #eeede8;
}

#page-works #works-list .work-cover {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
  margin: 0;
  border-radius: 0;
}

/* 多图数量角标 */
#page-works #works-list .work-multi-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 9px;
  line-height: 1;
  font-size: 11px;
  font-weight: 650;
  color: #fff;
  background: rgba(20,20,18,.68);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* 作品信息 */
#page-works #works-list .work-card-info {
  width: 100%;
  min-width: 0;
  padding: 15px 17px 17px;
  box-sizing: border-box;
  background: rgba(255,255,253,.92);
}

#page-works #works-list .work-card-top {
  min-width: 0;
}

#page-works #works-list .work-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-works #works-list .work-meta {
  margin-top: 8px;
  color: #898881;
  font-size: .72rem;
}

#page-works #works-list .work-tags {
  margin-top: 10px;
  padding-top: 0;
}

/* 空状态 */
#page-works #works-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
}

/* 大屏 */
@media (min-width: 1500px) {
  #page-works #works-list.works-timeline {
    column-count: 4;
    column-gap: 20px;
  }
}

/* 平板 */
@media (max-width: 1050px) {
  #page-works #works-list.works-timeline {
    column-count: 2;
    column-gap: 15px;
  }

  #page-works #works-list .work-card {
    margin-bottom: 15px;
  }
}

/* 手机 */
@media (max-width: 600px) {
  #page-works #works-list.works-timeline {
    column-count: 1;
  }

  #page-works #works-list .work-card {
    margin-bottom: 14px;
    border-radius: 21px;
  }

  #page-works #works-list .work-card-info {
    padding: 13px 15px 15px;
  }
}



/* =========================================================
   EchoDraw V7 — Portfolio Masonry / Editorial Gallery
   目标：
   1. 作品图片成为绝对主角
   2. 默认隐藏冗余信息，Hover 才出现信息层
   3. 无 Emoji UI
   4. 多图 / 稿酬 / 状态使用极简徽标
   5. 点击作品继续使用现有 openWorkDetail / viewer
   ========================================================= */

/* ---------- 作品页顶部 ---------- */
#page-works .page-head {
  align-items: flex-end;
  margin-bottom: 22px;
}

#page-works .page-head h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -.055em;
}

/* 筛选栏轻量化 */
#page-works .filter-bar {
  margin-bottom: 24px;
  padding: 4px 0;
}

#page-works #work-tabs {
  padding: 4px;
  border-radius: 14px;
  background: rgba(255,255,253,.55);
  border: 1px solid rgba(23,23,22,.055);
}

#page-works #work-tabs .seg-item {
  min-width: 64px;
  border-radius: 10px;
}

#page-works #work-status {
  min-width: 125px;
}

/* ============ 日程：个人活动 + 排单 DDL（V11.1） ============ */
/* 活动颜色：仅用于圆点 / 小标签 / 左边框等小面积 */
.c-green  { --ev-color: #5f9e57; }
.c-blue   { --ev-color: #5a7ba8; }
.c-orange { --ev-color: #d08a3e; }
.c-red    { --ev-color: #c05c6b; }
.c-purple { --ev-color: #8a6fb8; }

.schedule-tip {
  margin: -16px 0 16px;
}

/* 筛选栏 */
.schedule-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.schedule-filter button {
  border: 1px solid rgba(23,23,22,.1);
  background: rgba(255,255,255,.7);
  color: #777770;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: .72rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.schedule-filter button.active {
  background: #191918;
  color: #fff;
  border-color: #191918;
}

/* 月视图格子内的活动 */
.cal-event.cal-ev-manual,
.cal-event.cal-ev-order {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-event.cal-ev-manual {
  background: #f4f3ef;
  color: #3f3f3a;
}
.cal-ev-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.cal-ev-time {
  flex: 0 0 auto;
  font-size: .6rem;
  font-weight: 750;
  color: var(--ev-color);
}
.cal-ev-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-event.ev-done {
  opacity: .55;
}
.cal-event.ev-done .cal-ev-text {
  text-decoration: line-through;
}
/* DDL 小标签 */
.ddl-tag {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 3px;
  padding: 0 4px;
  border-radius: 4px;
  background: #191918;
  color: #fff;
  font-size: .55rem;
  font-weight: 750;
  line-height: 1.6;
  letter-spacing: .03em;
}
.cal-cell.today .cal-more {
  color: rgba(255,255,255,.78);
}
button.cal-more {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 1px 4px;
  font: inherit;
  color: var(--text-3);
  font-size: .62rem;
  cursor: pointer;
  border-radius: 6px;
}
button.cal-more:hover {
  color: #191918;
  background: rgba(0,0,0,.05);
}
.cal-cell.today button.cal-more:hover {
  color: #191918;
}

/* 月度列表 */
.sch-item .sch-date small {
  display: block;
  margin-top: 2px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-3);
}
.sch-item.ev-manual {
  border-left: 3px solid var(--ev-color);
  padding-left: 10px;
  border-radius: 8px;
}
.sch-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.badge-ev {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #efeee9;
  color: #6f6e68;
  font-size: .62rem;
  font-weight: 650;
}
.badge-ev.range {
  background: transparent;
  padding: 0;
  color: #999890;
}
.sch-item.ev-done,
.schedule-event-card.ev-done {
  opacity: .55;
}
.sch-item.ev-done .t1,
.schedule-event-card.ev-done .schedule-event-title {
  text-decoration: line-through;
}

/* 周 / 日视图活动卡片 */
.schedule-event-card.ev-manual {
  border-left: 3px solid var(--ev-color);
}
.schedule-event-dot.ddl-dot {
  background: #191918;
}
.schedule-event-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  align-items: center;
}
.schedule-event-note {
  margin-top: 5px;
  color: #a3a29b;
  font-size: .68rem;
  line-height: 1.5;
  word-break: break-word;
}
.schedule-day-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  color: #999890;
}
.day-add-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #ecebe6;
  color: #555;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.day-add-btn:hover {
  background: #191918;
  color: #fff;
}
.day-add-inline {
  margin-top: 8px;
}
.day-list-modal {
  display: grid;
  gap: 10px;
}

/* 新建 / 编辑活动弹窗 */
.ev-form .ev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.ev-colors {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ev-color-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .5;
  transition: transform .18s var(--ease), opacity .18s, border-color .18s;
}
.ev-color-dot:hover {
  opacity: .85;
  transform: scale(1.06);
}
.ev-color-dot.active {
  opacity: 1;
  border-color: #191918;
  transform: scale(1.1);
}

/* 手机端右下角新建按钮（不遮挡底部导航） */
.sch-fab {
  display: none;
}

@media (max-width: 768px) {
  .sch-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 18px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: #191918;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    z-index: 90;
    cursor: pointer;
  }
  .sch-fab:active { transform: scale(.94); }
  /* 周视图：内部横向滚动，页面本身不溢出 */
  .schedule-detail-list.week-scroll {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .schedule-detail-list.week-scroll .schedule-day-block {
    flex: 0 0 80%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .sch-item { flex-wrap: wrap; }
  .sch-actions { width: 100%; justify-content: flex-end; }
  .schedule-event-card { flex-wrap: wrap; }
  .schedule-event-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 560px) {
  .ev-form .ev-grid { grid-template-columns: 1fr; }
}

/* ---------- Masonry 主体 ---------- */
#page-works #works-list.works-timeline {
  display: block;
  column-count: 3;
  column-gap: 18px;
  column-fill: balance;
  width: 100%;
}

/* 每个卡片就是一个作品展示单元 */
#page-works #works-list .work-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  cursor: pointer;

  border: 1px solid rgba(23,23,22,.055);
  border-radius: 22px;
  background: #e9e8e3;
  box-shadow: 0 8px 28px rgba(29,29,26,.045);

  transform: translateZ(0);
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s cubic-bezier(.2,.8,.2,1);
}

#page-works #works-list .work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 52px rgba(29,29,26,.12);
}

/* ---------- 图片区域 ---------- */
#page-works #works-list .work-card > div:first-child {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: #e9e8e3;
}

/* 用真实图片比例撑开卡片 */
#page-works #works-list .work-cover {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
  margin: 0;

  transform: scale(1);
  transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}

#page-works #works-list .work-card:hover .work-cover {
  transform: scale(1.025);
  filter: brightness(.82);
}

/* ---------- Hover 信息层 ---------- */
#page-works #works-list .work-card-info {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  width: 100%;
  padding: 46px 17px 16px;
  box-sizing: border-box;

  color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(15,15,14,0) 0%,
    rgba(15,15,14,.14) 18%,
    rgba(15,15,14,.86) 100%
  );

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.2,.8,.2,1);
}

#page-works #works-list .work-card:hover .work-card-info,
#page-works #works-list .work-card:focus-within .work-card-info {
  opacity: 1;
  transform: translateY(0);
}

/* 标题 */
#page-works #works-list .work-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

#page-works #works-list .work-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: .98rem;
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 状态徽章统一成半透明 */
#page-works #works-list .badge-status,
#page-works #works-list .badge-kind {
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}

#page-works #works-list .income-flag {
  color: #fff !important;
  background: rgba(255,255,255,.12);
  padding: 3px 8px;
  border-radius: 999px;
}

/* 元信息 */
#page-works #works-list .work-meta {
  margin-top: 6px;
  color: rgba(255,255,255,.7) !important;
  font-size: .72rem;
}

/* 自评默认隐藏，hover 时显示 */
#page-works #works-list .work-card-info .work-meta[style*="white-space"] {
  color: rgba(255,255,255,.72) !important;
}

/* 标签 */
#page-works #works-list .work-tags {
  margin-top: 9px;
  padding-top: 0;
}

#page-works #works-list .work-tags .tag {
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

/* ---------- 多图数量：彻底移除 Emoji ---------- */
#page-works #works-list .work-multi-count {
  position: absolute;
  right: 11px;
  bottom: 11px;
  z-index: 4;

  min-width: 30px;
  height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: rgba(15,15,14,.58);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  backdrop-filter: blur(10px);
}

/* JS V7 会把数量文本改为“3 张”，不需要图标 */

/* ---------- hover 右上角查看提示 ---------- */
#page-works #works-list .work-card::after {
  content: "查看";
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  padding: 6px 9px;
  color: rgba(255,255,255,.92);
  background: rgba(15,15,14,.45);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(-4px);
  backdrop-filter: blur(10px);
  transition: opacity .25s ease, transform .3s ease;
  pointer-events: none;
}

#page-works #works-list .work-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 键盘可访问 ---------- */
#page-works #works-list .work-card:focus {
  outline: none;
}

#page-works #works-list .work-card:focus-visible {
  box-shadow:
    0 0 0 3px rgba(120,140,128,.28),
    0 18px 48px rgba(29,29,26,.12);
}

/* ---------- 空状态 ---------- */
#page-works #works-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: #98978f;
}

/* ---------- Viewer：做成沉浸式画廊 ---------- */
#viewer {
  background: rgba(12,12,11,.92);
  backdrop-filter: blur(18px);
}

#viewer .viewer-body {
  max-width: 96vw;
  max-height: 92vh;
  gap: 14px;
}

#viewer #viewer-img {
  max-width: min(90vw, 1500px);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 28px 100px rgba(0,0,0,.38);
}

#viewer #viewer-info {
  color: rgba(255,255,255,.82);
}

#viewer #viewer-thumbs img {
  border-radius: 8px;
  opacity: .58;
  transition: opacity .2s ease, transform .2s ease;
}

#viewer #viewer-thumbs img:hover,
#viewer #viewer-thumbs img.active {
  opacity: 1;
  transform: translateY(-2px);
}

/* ---------- 响应式 ---------- */
@media (min-width: 1500px) {
  #page-works #works-list.works-timeline {
    column-count: 4;
    column-gap: 20px;
  }

  #page-works #works-list .work-card {
    margin-bottom: 20px;
  }
}

@media (max-width: 1050px) {
  #page-works #works-list.works-timeline {
    column-count: 2;
    column-gap: 15px;
  }
}

@media (max-width: 700px) {
  #page-works .filter-bar {
    align-items: stretch;
  }

  #page-works #work-tabs {
    width: 100%;
  }

  #page-works #work-status {
    width: 100%;
  }

  #page-works #works-list.works-timeline {
    column-count: 2;
    column-gap: 10px;
  }

  #page-works #works-list .work-card {
    margin-bottom: 10px;
    border-radius: 16px;
  }

  /* 移动端没有 hover，因此信息层直接显示精简版 */
  #page-works #works-list .work-card-info {
    position: relative;
    inset: auto;
    padding: 10px 11px 11px;
    color: var(--ink);
    background: rgba(255,255,253,.96);
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  #page-works #works-list .work-title {
    color: var(--ink);
    font-size: .78rem;
  }

  #page-works #works-list .badge-status,
  #page-works #works-list .badge-kind {
    display: none;
  }

  #page-works #works-list .work-meta {
    color: #88877f !important;
    font-size: .64rem;
  }

  #page-works #works-list .work-tags {
    display: none;
  }

  #page-works #works-list .work-card::after {
    display: none;
  }
}

@media (max-width: 430px) {
  #page-works #works-list.works-timeline {
    column-count: 1;
  }

  #page-works #works-list .work-card {
    border-radius: 20px;
  }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  #page-works #works-list .work-card,
  #page-works #works-list .work-cover,
  #page-works #works-list .work-card-info {
    transition: none;
  }
}

/* V7 viewer information */
#viewer .viewer-info {
  width: min(900px, 90vw);
  text-align: left;
}

#viewer .v7-viewer-info {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
}

#viewer .v7-viewer-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#viewer .v7-viewer-title-row strong {
  color: #fff;
  font-size: .98rem;
}

#viewer .v7-viewer-meta {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 7px;
  color: rgba(255,255,255,.62);
  font-size: .74rem;
}

#viewer .v7-viewer-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}

#viewer .v7-viewer-tags span {
  padding: 3px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.07);
}

#viewer .v7-viewer-review {
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  font-size: .78rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

#viewer .v7-order-hint {
  color: rgba(255,255,255,.45);
  font-size: .74rem;
}

#viewer .vi-actions {
  margin-top: 12px;
  justify-content: flex-start;
}

#viewer .vi-actions .btn {
  border-color: rgba(255,255,255,.14);
}

@media (max-width: 700px) {
  #viewer {
    padding: 12px;
    gap: 9px;
  }

  #viewer #viewer-img {
    max-width: 94vw;
    max-height: 70vh;
    border-radius: 6px;
  }

  #viewer .viewer-info {
    width: 94vw;
  }

  #viewer .v7-viewer-info {
    padding: 11px 12px;
    border-radius: 13px;
  }
}

/* ===== EchoDraw V8 final UI pass ===== */
html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,canvas,video{max-width:100%}

/* no emoji navigation: quiet geometric line marks */
.nav-item .icon{font-size:0;width:22px;height:22px;display:inline-grid;place-items:center;position:relative}
.nav-item .icon::before{content:"";width:15px;height:15px;border:1.4px solid currentColor;border-radius:4px;opacity:.78}
.nav-item[data-page="home"] .icon::before{border-radius:50%;width:14px;height:14px}
.nav-item[data-page="schedule"] .icon::before{border-radius:50%}
.nav-item[data-page="me"] .icon::before{border-radius:50%;box-shadow:0 7px 0 -4px currentColor}
.nav-item[data-page="notes"] .icon::before{border-radius:3px}
.nav-item[data-page="ledger"] .icon::before{border-radius:2px}

/* mobile width */
@media(max-width:768px){
  html,body,#app,.main,.page{width:100%!important;max-width:100%!important;min-width:0!important}
  body{overflow-x:hidden}
  .main{margin:0!important;padding:18px 12px calc(88px + env(safe-area-inset-bottom))!important}
  .page-head,.filter-bar,.card,.hero-card,.stats-row,.ledger-cols,.works-timeline,#orders-list,#notes-list,#sch-list{width:100%;max-width:100%;min-width:0}
  .page-head>*{min-width:0}
  .filter-bar{overflow:hidden}
  .seg-full{width:100%}
  .seg-full .seg-item{min-width:0;flex:1}
  .order-card,.note-item,.sch-item{max-width:100%;min-width:0}
  #page-orders #inc-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* work editor state labels must stay visible */
#w-status-seg .seg-item,#w-kind-seg .seg-item{
  font-size:.82rem!important;
  color:inherit!important;
  white-space:nowrap;
}

/* notes: remove mood UI even if old markup remains */
#page-notes #mood-pick{display:none!important}
#page-notes .note-editor-foot{justify-content:flex-end}
#page-notes .note-acts button{font-size:0;min-width:34px}
#page-notes .note-acts button::before{font-size:13px}
#page-notes .note-acts button:first-child::before{content:"编辑"}
#page-notes .note-acts button:last-child::before{content:"删除"}

/* clean work metadata */
#page-works .work-multi-count{font-size:.68rem}
#page-works .work-meta{gap:9px}

/* schedule */
.schedule-viewbar{
 display:flex;gap:4px;width:max-content;max-width:100%;padding:4px;margin:0 0 14px;
 border:1px solid rgba(23,23,22,.08);border-radius:13px;background:rgba(255,255,255,.7)
}
.schedule-viewbar button{
 border:0;background:transparent;color:#777770;padding:7px 16px;border-radius:9px;
 font:inherit;font-size:.76rem;font-weight:650;cursor:pointer
}
.schedule-viewbar button.active{background:#191918;color:#fff}
.schedule-detail-list{display:grid;gap:18px}
.schedule-day-block{display:grid;gap:8px}
.schedule-day-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.schedule-day-title strong{font-size:.9rem}
.schedule-day-title span{font-size:.7rem;color:#999890}
.schedule-event-card{
 display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid rgba(23,23,22,.065);
 border-radius:13px;background:rgba(255,255,253,.9);min-width:0
}
.schedule-event-dot{width:6px;height:32px;border-radius:999px;background:#9aa69f;flex:0 0 6px}
.schedule-event-main{min-width:0;flex:1}
.schedule-event-title{font-size:.82rem;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedule-event-meta{margin-top:4px;color:#8b8a83;font-size:.7rem}
.schedule-empty{padding:4px 0;color:#aaa89f;font-size:.73rem}
@media(max-width:768px){
 .schedule-viewbar{width:100%}
 .schedule-viewbar button{flex:1}
 .schedule-event-card{padding:11px 12px}
}
@media(max-width:430px){
 .main{padding-left:10px!important;padding-right:10px!important}
 .schedule-viewbar button{padding-left:10px;padding-right:10px}
}

/* V9.1 Echodraw workflow */
.create-menu-grid{display:grid;gap:12px;padding:10px 0}.create-menu-item{width:100%;padding:16px}
.income-toolbar{display:flex;gap:8px;margin:16px 0}.income-toolbar .seg-item{background:#fff;border:1px solid #e5e8e8;border-radius:18px;padding:7px 16px}.income-toolbar .active{color:#8ed05b;border-color:#b9df9c}.income-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:14px 0}.income-day{border:1px solid #edf0ee;border-radius:16px;min-height:70px;padding:8px;color:#9aa3aa}.income-day.has{border-color:#a9dc82;color:#222}.income-day b{display:block;color:#8dcc5e;margin-top:8px}.analysis-table{width:100%;border-collapse:collapse}.analysis-table td,.analysis-table th{padding:12px;border-bottom:1px solid #eee;text-align:left}

/* 导航优化：随手记固定为移动端导航最后一项，隐藏页面重复导航 */
.bottombar .nav-item[data-page="notes"] { order: 99; }
#page-works .inner-nav, #page-orders .inner-nav, #sub-income .inner-nav { display:none !important; }

/* 分账户余额 */
.account-overview{margin-bottom:18px;padding:20px;border-radius:22px;background:linear-gradient(145deg,#263b37,#4f8278);color:#fff;box-shadow:0 14px 34px rgba(47,82,76,.18)}
.account-overview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.account-overview-head>div{display:grid;gap:4px}
.account-overview-head span{font-size:.75rem;opacity:.72}
.account-overview-head strong{font-size:1.8rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.account-overview .btn{color:#fff;border-color:rgba(255,255,255,.24)}
.account-overview .btn.active-account-filter{background:#fff;color:#315b54}
.account-balance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.account-balance-card{position:relative;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.1);overflow:hidden;transition:.18s ease}
.account-balance-card.active{background:#fff;color:#274840;box-shadow:0 7px 18px rgba(0,0,0,.12)}
.account-filter{display:grid;width:100%;gap:5px;padding:14px 44px 14px 14px;text-align:left;color:inherit;border:0;background:transparent;cursor:pointer;font:inherit}
.account-filter span{font-size:.74rem;opacity:.75}
.account-filter strong{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.account-filter small{font-size:.64rem;opacity:.62;white-space:nowrap}
.account-edit{position:absolute;top:9px;right:8px;border:0;border-radius:8px;padding:5px 7px;background:rgba(255,255,255,.13);color:inherit;font-size:.65rem;cursor:pointer}
.account-balance-card.active .account-edit{background:#eaf1ef}
.form-help{margin:2px 0 12px;color:#8b8a83;font-size:.72rem;line-height:1.65}

/* ===== 花呗信用账户 ===== */
.account-balance-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.account-balance-card.credit-card{border-color:rgba(230,190,120,.45);background:rgba(214,170,90,.16)}
.account-balance-card.credit-card.active{background:#fff;border-color:#ecd9ad;color:#274840}
.account-balance-card.credit-card .account-filter strong{color:#f3d08f}
.account-balance-card.credit-card.active .account-filter strong{color:#b06f1f}
.credit-tag{font-style:normal;font-size:.6rem;padding:1px 6px;border-radius:999px;background:rgba(243,208,143,.22);color:#f3d08f;margin-left:6px;white-space:nowrap}
.account-balance-card.credit-card.active .credit-tag{background:#f6ead2;color:#b06f1f}
.credit-card .account-filter small{white-space:normal;line-height:1.5}
.credit-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 12px;min-width:0}
.repay-reminder{font-size:.66rem;color:#f0d9a8;line-height:1.4;min-width:0}
.account-balance-card.credit-card.active .repay-reminder{color:#8a6d3b}
.repay-reminder.repay-soon{color:#f3c987;font-weight:600}
.account-balance-card.credit-card.active .repay-reminder.repay-soon{color:#b07a28;font-weight:600}
.repay-reminder.repay-today{color:#ffb3a8;font-weight:700}
.account-balance-card.credit-card.active .repay-reminder.repay-today{color:#c0504d}
.btn-repay{flex-shrink:0;border:1px solid rgba(243,208,143,.55);background:transparent;color:#f3d08f;border-radius:999px;padding:5px 12px;font:inherit;font-size:.66rem;cursor:pointer;white-space:nowrap}
.btn-repay:hover{background:rgba(243,208,143,.2)}
.account-balance-card.credit-card.active .btn-repay{border-color:#d9b06a;color:#b06f1f}
.account-balance-card.credit-card.active .btn-repay:hover{background:#b06f1f;border-color:#b06f1f;color:#fff}
.credit-debt-line{display:block;margin-top:2px;font-size:.72rem;color:#f3d08f}

/* ===== 转账明细（中性色，不使用收入/支出红绿） ===== */
.tx-icon-transfer{background:#eef1f5;color:#6b7f94}
.tx-amount.transfer{color:#6b7f94;white-space:nowrap}
.tx-dir{display:inline-block;padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:500;margin-left:6px;white-space:nowrap;vertical-align:middle}
.tx-dir.out{background:#f6e9e7;color:#b0655f}
.tx-dir.in{background:#e8f1eb;color:#4f8a63}

@media(max-width:620px){
  .account-overview{padding:16px 13px;border-radius:18px}
  .account-overview-head{align-items:center}
  .account-overview-head strong{font-size:1.5rem}
  .account-balance-grid{grid-template-columns:1fr}
  .account-filter{grid-template-columns:1fr auto;align-items:center;padding:12px 48px 12px 12px}
  .account-filter small{grid-column:1/-1}
  .credit-actions{padding:0 12px 10px}
  .tx-amount{white-space:nowrap}
}

/* ===== EchoDraw 排单工作台 ===== */
#page-orders{--echo:#a8dc80;--echo-soft:#f1f9eb;--echo-ink:#283542;--echo-line:#e6e9e6;color:var(--echo-ink)}
.order-page-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 20px;border-bottom:1px solid var(--echo-line)}
.order-page-head>div{display:flex;align-items:center;gap:16px}.order-page-head h1{margin:0;font-size:2.2rem;font-weight:430;letter-spacing:.08em}.order-page-head span{color:var(--echo);font-size:.78rem;font-weight:700}
.order-add-round{width:52px;height:52px;border:0;border-radius:50%;background:var(--echo);color:#fff;font:300 1.9rem/1 inherit;cursor:pointer}
.echo-tabs{display:flex;align-items:center;gap:34px;margin:28px 0 24px;padding:0 2px;border-bottom:1px solid transparent}.echo-tabs>button{position:relative;padding:12px 0 15px;border:0;background:transparent;color:#4c5967;font:inherit;font-size:1rem;cursor:pointer}.echo-tabs>button.active{color:#101f30;font-weight:700}.echo-tabs>button.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--echo)}.echo-tabs .showcase-shortcut{margin-left:auto;width:42px;height:42px;padding:0;border:1px solid var(--echo-line);border-radius:50%;font-size:1.4rem}.echo-tabs .showcase-shortcut::after{display:none}
.echo-loading,.echo-section-intro{padding:38px 0;color:#8b969f;text-align:center}.echo-section-intro{display:flex;justify-content:space-between;text-align:left;padding:12px 2px 20px}.echo-section-intro b{font-size:1.1rem}.echo-section-intro span{font-size:.78rem;color:var(--echo)}
.ddl-toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:18px}.ddl-month{display:flex;align-items:center;gap:11px}.ddl-month>div{display:grid}.ddl-month b{font-size:.98rem}.ddl-month span{color:var(--echo);font-size:.74rem}.echo-square{width:44px;height:44px;border:1px solid var(--echo-line);border-radius:14px;background:#fff;font-size:1.6rem;color:#52606c;cursor:pointer}.ddl-month-right{display:flex;align-items:center;gap:12px;justify-self:end}.echo-chevron{border:0;background:transparent;font-size:1.2rem;color:#58646f;cursor:pointer}.echo-toggle{display:flex;grid-row:2}.echo-toggle button,.income-mode button,.archive-filters button,.echo-status-filter button,.echo-sort button,.showcase-platform-filter button{padding:7px 14px;border:1px solid var(--echo-line);background:#fff;color:#52606c;font:inherit;font-size:.74rem;cursor:pointer}.echo-toggle button:first-child,.income-mode button:first-child{border-radius:999px 0 0 999px}.echo-toggle button:last-child,.income-mode button:last-child{border-radius:0 999px 999px 0}.echo-toggle button.active,.income-mode button.active,.archive-filters button.active,.echo-status-filter button.active,.echo-sort button.active,.showcase-platform-filter button.active{background:var(--echo-soft);border-color:#cce8b7;color:#91ce63}.ddl-total{grid-row:2;grid-column:3;justify-self:end;color:#566373;font-size:.76rem}
.ddl-calendar{margin:4px 0 26px}.ddl-week,.ddl-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.ddl-week span{padding:6px;text-align:center;color:#87929d;font-size:.72rem}.ddl-day{min-height:62px;padding:8px;border:1px solid var(--echo-line);border-radius:12px;background:#fff;color:#243342;text-align:left;cursor:pointer}.ddl-day span{display:block}.ddl-day b{display:block;margin-top:4px;color:#91d162;text-align:center;font-size:.72rem}.ddl-day.muted{color:#bbc0c4;background:#fdfdfd}.ddl-day.has{border:2px solid #9cd873}
.calendar-style-toggle{display:flex;width:max-content;margin:-48px 0 18px 150px}.calendar-style-toggle button{padding:7px 13px;border:1px solid var(--echo-line);background:#fff;color:#687580;font:inherit;font-size:.7rem;cursor:pointer}.calendar-style-toggle button:first-child{border-radius:99px 0 0 99px}.calendar-style-toggle button:last-child{border-radius:0 99px 99px 0}.calendar-style-toggle button.active{background:var(--echo-soft);color:#8dcc60}.ddl-interval-list{display:grid;gap:8px;margin:8px 0 24px}.ddl-interval-list>button{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--echo-line);border-radius:12px;background:#fff;color:#364553;text-align:left;cursor:pointer}.ddl-interval-list i{color:#82909d;font-style:normal;font-size:.7rem}.ddl-interval-list b{color:#94d169;font-size:.75rem}
.echo-filters{display:grid;gap:8px;margin:12px 0}.echo-status-filter,.echo-sort{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.echo-status-filter button,.echo-sort button,.archive-filters button,.showcase-platform-filter button{border-radius:999px}.echo-select{margin-left:8px;padding:8px 13px;border:1px solid var(--echo-line);border-radius:999px;background:#fff;color:#3f4d5b}.order-count-text{margin:10px 0 20px;color:#536271;font-size:.75rem}
.echo-order-list,.painting-board{display:grid;gap:12px}.echo-order-card{display:grid;grid-template-columns:minmax(0,1fr) 142px;align-items:center;min-height:126px;padding:20px;border:1px solid var(--echo-line);border-radius:18px;background:#fff;cursor:pointer;transition:.18s}.echo-order-card:hover{border-color:#bae49b;transform:translateY(-1px);box-shadow:0 9px 22px rgba(65,83,72,.08)}.order-card-title{display:flex;align-items:center;gap:8px}.order-card-title b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-outline,.order-tags span{display:inline-flex;padding:3px 8px;border:1px solid #a8db82;border-radius:999px;color:#8dce5d;font-size:.65rem;white-space:nowrap}.echo-order-main p{margin:8px 0;color:#5c6975;font-size:.74rem}.order-tags{display:flex;flex-wrap:wrap;gap:7px}.echo-order-deadline{text-align:right;color:#a3dc78}.echo-order-deadline strong{font-size:2.4rem;font-weight:500}.echo-order-deadline>span{margin-left:4px;font-size:.7rem}.echo-order-deadline small{display:block;color:#9aa8bd;line-height:1.5}.priority-urgent{border-left:4px solid #d66f78}.priority-high{border-left:4px solid #e7bb65}
.painting-card{padding:20px;border:1px solid var(--echo-line);border-radius:18px;background:#fff}.painting-head{display:flex;justify-content:space-between;gap:12px}.painting-head>div{display:grid;gap:5px}.painting-head span{color:#87929d;font-size:.72rem}.painting-head>strong{color:#9bd672;font-size:1.4rem}.stage-track{display:flex;gap:8px;margin:18px 0 12px;overflow-x:auto}.stage-track span{flex:1;min-width:64px;padding:7px;text-align:center;border:1px solid var(--echo-line);border-radius:999px;color:#9ba4aa;font-size:.7rem}.stage-track span.done{background:var(--echo-soft);border-color:#c9e9b0;color:#84c954}.stage-track span.current{border-color:#8fd05c;color:#6bb836;font-weight:700}.progress-line{height:5px;border-radius:99px;background:#eef0ee;overflow:hidden}.progress-line i{display:block;height:100%;background:var(--echo);border-radius:99px}.painting-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.echo-help{margin-bottom:16px;border:1px solid var(--echo-line);border-radius:16px;background:#fff}.echo-help summary{padding:16px 18px;cursor:pointer}.echo-help p{margin:0;padding:0 18px 16px;color:#697682;font-size:.78rem;line-height:1.7}.capacity-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.capacity-stats>div{display:grid;gap:10px;padding:20px;border:1px solid #edf0ea;border-radius:16px;background:#fff}.capacity-stats>div:first-child{border-left:4px solid var(--echo)}.capacity-stats span{color:#9bd87a;font-size:.7rem}.capacity-stats strong{font-size:1.1rem;font-weight:500}.capacity-note{margin:18px 0;padding:20px;border:1px solid #edf0ea;border-radius:16px;background:#fff;color:#64717d;line-height:1.8}.capacity-note b{color:#8fce61}.capacity-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 28px}.capacity-actions button{border-color:#cbe8b5;color:#90cc65}.capacity-table-wrap{overflow:auto;border:1px solid var(--echo-line);border-radius:16px}.capacity-table{min-width:760px;width:100%;border-collapse:collapse;background:#fff}.capacity-table th,.capacity-table td{height:54px;padding:8px;border-bottom:1px solid #edf0ed;border-right:1px solid #edf0ed;text-align:center;font-size:.7rem}.capacity-table th:first-child{width:190px;text-align:left;padding-left:14px}.capacity-table thead th:not(:first-child){color:#596773;font-weight:500}.capacity-table thead small{display:block;margin-top:4px}.capacity-table .today{background:var(--echo-soft);color:#8ecb63}.capacity-table td b{display:inline-block;padding:6px;border:1px solid #cde9b7;border-radius:8px;background:var(--echo-soft);color:#8ac95e}
.income-mode{display:flex;margin:22px 0}.income-month-select{width:max-content;margin:14px 0;padding:12px 18px;border:1px solid var(--echo-line);border-radius:13px}.income-big{display:grid;gap:5px;margin:18px 0 28px}.income-big strong{color:#a2d978;font-size:1.8rem;font-weight:500}.income-big small{color:#65727f}.income-chart{height:330px;padding:20px;border:1px solid var(--echo-line);border-radius:18px;background:#fff}.business-bars{display:grid;gap:14px;margin:18px 0 30px}.business-bars>div{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;padding-bottom:8px;border-bottom:3px solid #eceeed}.business-bars i{position:absolute;left:0;bottom:-3px;height:3px;background:var(--echo)}.business-bars b{color:#9dd573}.analysis-block h3{margin:28px 0 14px;font-size:.9rem}.analysis-switch{display:flex;justify-content:space-between}.echo-table{width:100%;border-collapse:collapse;background:#fff}.echo-table th,.echo-table td{padding:11px 9px;border-bottom:1px solid var(--echo-line);text-align:left;font-size:.75rem}.income-records{margin-top:24px}.income-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--echo-line)}.income-row>div{display:grid;gap:3px}.income-row span{color:#8c969e;font-size:.68rem}.income-row strong{color:#97d36b}.income-row>button{border:0;background:transparent;color:#a1a7ab;cursor:pointer}
.income-period-nav{display:flex;align-items:center;gap:10px}.income-calendar-grid{margin:10px 0 28px}.income-cal-day{min-height:58px;padding:7px;border:1px solid var(--echo-line);border-radius:10px;color:#263542}.income-cal-day.muted{color:#bcc1c5}.income-cal-day b{display:block;margin-top:5px;color:#91cf66;text-align:center;font-size:.7rem}.income-cal-day.has{border:2px solid #a1d979}
.echo-search{width:100%;padding:13px 18px;border:1px solid var(--echo-line);border-radius:999px;outline:0}.archive-filters{display:flex;gap:5px;margin:12px 0 20px}.archive-month>div{display:flex;justify-content:space-between;margin:18px 0 10px;color:#52616e}.archive-card{display:grid;grid-template-columns:1fr auto;gap:12px;padding:20px;border:1px solid var(--echo-line);border-radius:18px;background:#fff;margin-bottom:12px;cursor:pointer}.archive-card>div{display:grid;gap:6px}.archive-card span{color:#6c7781;font-size:.72rem}.archive-card>strong{color:#9dd872;font-size:1.55rem;text-align:right}.archive-card small{display:block;color:#65727d;font-size:.65rem;line-height:1.45}.showcase-create{width:100%;margin-bottom:12px}.showcase-platform-filter{display:flex;gap:6px;margin:10px 0}.showcase-card{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;padding:16px 0;border-bottom:1px solid var(--echo-line)}.showcase-card>div{display:grid;gap:5px}.showcase-card span{color:#6b7782;font-size:.7rem}.showcase-card>strong{color:#9bd671}.showcase-card p{grid-column:1/-1;margin:4px 0;color:#65727d;font-size:.75rem;line-height:1.7}.quick-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.quick-picks button{padding:4px 10px;border:1px solid #a9dc81;border-radius:999px;background:#fff;color:#8dcd5e;cursor:pointer}.form-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:#7b8790}.form-divider::before,.form-divider::after{content:"";height:1px;flex:1;background:var(--echo-line)}.order-image-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.order-image-list span{display:flex;gap:6px;padding:5px 8px;border:1px solid var(--echo-line);border-radius:8px;font-size:.7rem}.order-image-list button{border:0;background:transparent;cursor:pointer}.order-detail-meta{display:flex;gap:8px}.order-detail-meta span{padding:5px 9px;border:1px solid #cbe8b5;border-radius:99px;color:#8dcc60;font-size:.68rem}.order-detail>p{color:#687581;line-height:1.7}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.detail-grid>div{display:grid;gap:5px;padding:12px;border:1px solid var(--echo-line);border-radius:12px}.detail-grid span{color:#9099a1;font-size:.68rem}.detail-grid b{font-size:.8rem}.order-detail-images{display:flex;gap:8px;overflow:auto;margin:14px 0}.order-detail-images img{width:96px;height:96px;object-fit:cover;border-radius:12px}.modal-foot.wrap{flex-wrap:wrap}

@media(max-width:768px){
  .order-page-head h1{font-size:1.8rem}.order-add-round{width:46px;height:46px}.echo-tabs{gap:0;justify-content:space-between;overflow:visible;margin:18px 0}.echo-tabs>button{font-size:.9rem}.echo-tabs .showcase-shortcut{position:fixed;right:16px;bottom:96px;z-index:8;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.12)}
  .ddl-toolbar{grid-template-columns:1fr auto}.ddl-total{grid-column:2}.ddl-week,.ddl-days{gap:4px}.ddl-day{min-height:49px;padding:5px;border-radius:9px;font-size:.72rem}.echo-order-card{grid-template-columns:minmax(0,1fr) 90px;padding:15px;min-height:112px}.echo-order-deadline strong{font-size:2rem}.order-card-title{align-items:flex-start;flex-wrap:wrap}.order-card-title b{white-space:normal}.capacity-stats{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.income-chart{height:260px}.showcase-card{grid-template-columns:1fr auto}.showcase-card .btn{grid-row:auto}.echo-table{min-width:540px}.analysis-block{overflow:auto}.archive-card{padding:15px}.archive-card>strong{font-size:1.25rem}
}
@media(max-width:430px){.echo-tabs>button{font-size:.78rem}.order-page-head span{font-size:.65rem}.ddl-toolbar{gap:8px}.echo-square{width:40px;height:40px}.echo-status-filter button,.echo-sort button{padding:6px 10px}.echo-order-card{grid-template-columns:1fr}.echo-order-deadline{text-align:left;display:flex;align-items:baseline;gap:5px}.echo-order-deadline small{margin-left:auto;text-align:right}.account-overview-head .btn{font-size:.62rem}}
.inline-link{margin-top:7px;padding:0;border:0;background:transparent;color:#78b94e;text-decoration:underline;cursor:pointer;font:inherit;font-size:.72rem}
@media(max-width:520px){.calendar-style-toggle{margin:-6px 0 14px}.ddl-interval-list>button{grid-template-columns:1fr auto}.ddl-interval-list i{grid-row:2}.ddl-interval-list b{grid-row:1;grid-column:2}}
.inline-link{margin-top:7px;padding:0;border:0;background:transparent;color:#78b94e;text-decoration:underline;cursor:pointer;font:inherit;font-size:.72rem}

/* 排单融入全站视觉：沿用米白玻璃卡片、墨色主按钮和低饱和绿色提示 */
#page-orders{--echo:var(--income);--echo-soft:rgba(79,139,104,.10);--echo-ink:var(--text);--echo-line:var(--border)}
#page-orders .order-page-head{border-color:var(--border)}
#page-orders .order-page-head h1{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:760;letter-spacing:-.035em}
#page-orders .order-page-head span{color:var(--income)}
#page-orders .order-add-round{background:#191918;box-shadow:0 9px 22px rgba(0,0,0,.14)}
#page-orders .echo-tabs>button.active::after{background:#191918}
#page-orders .echo-tabs .showcase-shortcut{background:rgba(255,255,255,.72);border-color:var(--border);box-shadow:var(--shadow-xs)}
#page-orders .echo-toggle button,#page-orders .income-mode button,#page-orders .archive-filters button,#page-orders .echo-status-filter button,#page-orders .echo-sort button,#page-orders .showcase-platform-filter button{background:rgba(255,255,255,.62);border-color:var(--border);color:var(--text-2)}
#page-orders .echo-toggle button.active,#page-orders .income-mode button.active,#page-orders .archive-filters button.active,#page-orders .echo-status-filter button.active,#page-orders .echo-sort button.active,#page-orders .showcase-platform-filter button.active{background:#191918;border-color:#191918;color:#fff}
#page-orders .echo-square,#page-orders .echo-select,#page-orders .ddl-day,#page-orders .ddl-interval-list>button,#page-orders .echo-order-card,#page-orders .painting-card,#page-orders .echo-help,#page-orders .capacity-stats>div,#page-orders .capacity-note,#page-orders .capacity-table,#page-orders .income-chart,#page-orders .archive-card{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.67));border-color:var(--border-soft);box-shadow:var(--shadow-xs);backdrop-filter:blur(16px)}
#page-orders .echo-order-card,#page-orders .painting-card,#page-orders .archive-card{border-radius:var(--radius-md)}
#page-orders .echo-order-card:hover{border-color:rgba(79,139,104,.28);box-shadow:var(--shadow)}
#page-orders .status-outline,#page-orders .order-tags span,#page-orders .quick-picks button{border-color:rgba(79,139,104,.35);color:var(--income);background:rgba(79,139,104,.06)}
#page-orders .echo-order-deadline,#page-orders .painting-head>strong,#page-orders .business-bars b,#page-orders .income-big strong,#page-orders .income-row strong,#page-orders .archive-card>strong,#page-orders .showcase-card>strong{color:var(--income)}
#page-orders .progress-line i,#page-orders .business-bars i{background:var(--income)}
#page-orders .stage-track span.done,#page-orders .stage-track span.current,#page-orders .capacity-table td b{border-color:rgba(79,139,104,.3);background:rgba(79,139,104,.08);color:var(--income)}
#page-orders .calendar-style-toggle button.active{background:#191918;color:#fff}

/* 画集文件夹顶栏 */
.gallery-toolbar{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;min-height:66px;margin:-12px 0 26px;padding:0 4px 14px;border-bottom:1px solid var(--border)}
.gallery-eye,.gallery-tools button,.gallery-folder-trigger{border:0;background:transparent;color:var(--text);cursor:pointer}
.gallery-eye{width:42px;height:42px;border-radius:50%;font-size:1.25rem}.gallery-eye:hover,.gallery-tools button:hover{background:rgba(0,0,0,.045)}
.gallery-folder-trigger{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;padding:12px;font-size:1rem}.gallery-folder-trigger b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-folder-trigger span{color:var(--text-2);font-size:.8rem}
.gallery-tools{display:flex;align-items:center;gap:6px}.gallery-tools button{width:42px;height:42px;border-radius:50%;font-size:1.25rem}.gallery-tools .gallery-add{background:#191918;color:#fff}
.gallery-folder-menu{position:absolute;z-index:40;top:56px;left:50%;width:min(380px,calc(100vw - 28px));padding:10px;transform:translateX(-50%);border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:var(--shadow-lg);backdrop-filter:blur(24px)}
.gallery-folder-menu>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 14px;border:0;border-radius:14px;background:transparent;color:var(--text);cursor:pointer;text-align:left}.gallery-folder-menu>button:hover{background:rgba(0,0,0,.035)}.gallery-folder-menu>button.active{background:rgba(79,139,104,.11);color:var(--income)}
.gallery-folder-menu>button span{display:flex;align-items:center;gap:7px}.gallery-folder-menu>button small{padding:2px 6px;border-radius:6px;background:rgba(79,139,104,.1);font-size:.6rem}.gallery-folder-menu>button b{color:var(--text-3);font-size:.72rem;font-weight:500}
.folder-menu-foot{display:flex;gap:8px;margin-top:7px;padding-top:9px;border-top:1px solid var(--border)}.folder-menu-foot button{flex:1;padding:9px;border:0;border-radius:10px;background:var(--primary-soft);cursor:pointer;color:var(--text-2)}
.gallery-filter-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-10px 0 20px;padding:14px 16px;border:1px solid var(--border-soft);border-radius:var(--radius-md);background:rgba(255,255,255,.62);box-shadow:var(--shadow-xs)}
.folder-manage-list{display:grid}.folder-manage-list>div{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--border)}.folder-manage-list b{color:var(--text-3);font-size:.72rem}
body.gallery-focus-mode .sidebar,body.gallery-focus-mode .bottombar{display:none!important}body.gallery-focus-mode .main{width:min(100% - 40px,1500px);margin:0 auto;padding-top:24px}
@media(max-width:768px){.gallery-toolbar{margin-top:-8px;grid-template-columns:42px minmax(0,1fr) auto}.gallery-tools{gap:2px}.gallery-tools button,.gallery-eye{width:38px;height:38px}.gallery-folder-trigger{font-size:.9rem}.gallery-filter-panel{align-items:stretch;flex-direction:column}.folder-manage-list>div{grid-template-columns:1fr auto}.folder-manage-list .btn{grid-row:2}.gallery-focus-mode .main{width:100%;padding:14px 10px 30px!important}}

/* Supabase 云端登录 */
body.cloud-lock>.sidebar,body.cloud-lock>.bottombar,body.cloud-lock>.main{visibility:hidden}
.cloud-auth{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 20% 10%,rgba(79,139,104,.18),transparent 34%),var(--bg)}
.cloud-auth[hidden]{display:none}.cloud-auth-card{width:min(100%,420px);padding:34px;border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-xl);background:rgba(255,255,255,.82);box-shadow:var(--shadow-lg);backdrop-filter:blur(24px)}
.cloud-auth-mark{display:grid;place-items:center;width:54px;height:54px;margin-bottom:18px;border-radius:18px;background:#191918;color:#fff;font-size:1.35rem;font-weight:800}.cloud-auth-card h1{margin-bottom:7px}.cloud-auth-card>p{margin-bottom:24px;color:var(--text-2);font-size:.9rem}.cloud-auth-card label{display:grid;gap:7px;margin:14px 0;color:var(--text-2);font-size:.82rem}.cloud-auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.cloud-auth-card small{display:block;min-height:22px;margin-top:14px;color:var(--danger);line-height:1.6}
.cloud-logout{position:fixed;right:18px;top:18px;z-index:55;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.82);color:var(--text-2);cursor:pointer;font:inherit;font-size:.72rem;backdrop-filter:blur(16px)}
@media(max-width:768px){.cloud-logout{top:10px;right:10px;font-size:.65rem}.cloud-auth-card{padding:26px 22px}.cloud-auth-actions{grid-template-columns:1fr}}

/* ============================================================
   随手记 · 纸质手账本（先记录，后整理）
   ============================================================ */
#page-notes .journal-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:26px;align-items:start;max-width:1180px;margin:0 auto}
#page-notes .journal-main{min-width:0}

/* 桌面左侧筛选栏 */
.journal-rail{position:sticky;top:24px;padding:23px 17px;border:1px solid var(--border-soft);border-radius:26px;background:rgba(255,253,247,.9);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.journal-brand{font-family:Georgia,"Microsoft YaHei",serif;font-size:1.45rem;font-weight:800;margin-bottom:20px}
.journal-brand small{display:block;font-family:system-ui,sans-serif;font-size:.6rem;letter-spacing:2px;color:var(--text-3);margin-top:5px;font-weight:500}
.journal-rail-label{font-size:.66rem;letter-spacing:1px;color:var(--text-3);margin:18px 5px 9px}
.journal-rail-group{display:flex;flex-direction:column;gap:3px}
.jfilter{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;border-radius:13px;background:transparent;cursor:pointer;color:#5b574f;font:inherit;font-size:.82rem;text-align:left;transition:background .18s,color .18s}
.jfilter:hover{background:rgba(0,0,0,.04)}
.jfilter.active{background:#e4edd5;color:#35402b;font-weight:700}
.jdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:#c9c4b6}
.jfilter-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jcount{margin-left:auto;color:#a7a296;font-size:.7rem}
.jfilter.active .jcount{color:#6f7d5c}
.jarchive-year{font-size:.66rem;color:var(--text-3);margin:12px 5px 4px;letter-spacing:1px}
.jarchive-month{padding-left:20px}
.jdot-month{background:transparent;border:1px solid #cfc9ba;width:9px;height:9px}
.journal-manage-btn{width:100%;margin-top:15px;padding:9px;border:1px dashed #c4bdac;background:transparent;border-radius:13px;color:#777266;cursor:pointer;font:inherit;font-size:.76rem;transition:all .18s}
.journal-manage-btn:hover{background:#f1ede2;color:#5b574f;border-color:#b8b1a0}

/* 标题 */
.journal-top{margin-bottom:18px}
.journal-title h1{font-family:Georgia,"Microsoft YaHei",serif;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin:0;letter-spacing:.5px}
.journal-title p{margin:7px 0 0;color:var(--text-2);font-size:.86rem}

/* 常驻记录框 */
.quick-composer{margin-bottom:14px;padding:16px 18px 12px;border:1px solid var(--border);border-radius:22px;background:rgba(255,253,247,.95);box-shadow:var(--shadow)}
.quick-composer textarea{display:block;width:100%;min-height:92px;border:0;outline:0;resize:vertical;background:transparent;color:var(--text);font:inherit;font-size:1rem;line-height:1.75}
.quick-composer textarea::placeholder{color:#b3ada0}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px dashed #e0dace;padding-top:11px;margin-top:4px}
.composer-hint{color:#a29c8f;font-size:.72rem}
.btn-composer{border:0;border-radius:14px;background:#222;color:#fff;padding:10px 26px;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-composer:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.btn-composer:active{transform:translateY(0)}

/* 搜索 */
.journal-search{display:block;width:100%;margin:0 0 16px;padding:12px 16px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.88);outline:none;font:inherit;font-size:.86rem;color:var(--text)}
.journal-search:focus{border-color:#b9c9a6;box-shadow:0 0 0 3px rgba(169,195,154,.22)}

/* 移动端胶囊 + 日期下拉（桌面端隐藏） */
.journal-chips{display:none;gap:8px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.journal-chips::-webkit-scrollbar{display:none}
.jchip{white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fffdf7;border-radius:999px;padding:8px 14px;font:inherit;font-size:.8rem;color:#5b574f;cursor:pointer}
.jchip.active{background:#dce9ca;border-color:#c3d6ac;font-weight:700}
.jchip-manage{border-style:dashed;color:#777266}
.journal-archive-select{display:none;width:100%;margin-bottom:14px;padding:11px 14px;border:1px solid var(--border);border-radius:14px;background:#fffdf7;font:inherit;font-size:.82rem;color:var(--text)}

/* 手账本主体 */
.journal-book{position:relative;padding:32px 34px 44px;border-radius:26px;background:#fffdf7;box-shadow:var(--shadow-md);min-height:300px;background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(125,151,160,.08) 32px)}
.jday{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;margin-bottom:30px}
.jday:last-child{margin-bottom:0}
.jday-date{text-align:right;padding-top:10px}
.jday-date b{display:block;font-family:Georgia,serif;font-size:2rem;line-height:1;color:#3a3830}
.jday-date span{display:block;margin-top:6px;font-size:.7rem;color:var(--text-3)}
.jday-date em{display:inline-block;margin-top:8px;font-style:normal;font-size:.62rem;color:#6f7d5c;background:#e4edd5;border-radius:999px;padding:2px 9px}
.jday-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}

/* 记录卡片 */
.jnote{position:relative;padding:36px 20px 16px;border:1px solid #e6e1d3;border-radius:7px 18px 14px 16px;background:#fffefa;box-shadow:0 7px 17px rgba(73,62,37,.08);transform:rotate(var(--r,0deg));transition:transform .2s,box-shadow .2s;min-width:0}
.jnote:hover{transform:translateY(-3px) rotate(var(--r,0deg));box-shadow:0 13px 24px rgba(73,62,37,.13)}
.jtape{position:absolute;top:-9px;left:50%;width:70px;height:18px;transform:translateX(-50%) rotate(-2deg);background:var(--tape,#dedbd2);opacity:.78;border-radius:2px;pointer-events:none}
.jcorner{position:absolute;left:13px;top:11px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 130px);border:0;background:transparent;border-radius:10px;padding:4px 7px;cursor:pointer;color:#6e695f;font:inherit;font-size:.72rem}
.jcorner:hover{background:#f2efe6}
.jcorner span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jcorner-block{width:26px;height:13px;flex:0 0 auto;border-radius:4px 8px 5px 7px;background:var(--corner,#dedbd2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.jcorner-arrow{font-size:.6rem;color:#9a9486}
.jtime{position:absolute;right:14px;top:13px;border:0;background:transparent;border-radius:8px;padding:3px 7px;cursor:pointer;color:#a09a8e;font:inherit;font-size:.7rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.jtime:hover{background:#f0ede5;color:#625e55}
.jtext{margin:0;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;color:#4a463d;line-height:1.78;font-size:.88rem;cursor:text;min-height:40px}
.jedit-hint{margin-top:12px;color:#b6b1a5;font-size:.66rem;opacity:0;transition:opacity .2s}
.jnote:hover .jedit-hint{opacity:1}
.jinline-edit{width:100%;min-height:110px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:11px 12px;resize:vertical;line-height:1.7;font:inherit;font-size:.88rem;color:var(--text);outline:none}
.jinline-edit:focus{border-color:#b9c9a6;box-shadow:0 0 0 3px rgba(169,195,154,.2)}
.jinline-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.jinline-actions button,.jtime-editor button{border:1px solid var(--border);background:#fff;border-radius:10px;padding:7px 14px;cursor:pointer;font:inherit;font-size:.76rem;color:#5b574f}
.jinline-actions button.primary,.jtime-editor button.primary{background:#222;color:#fff;border-color:#222}
.jinline-actions button.danger{color:#b65d62;margin-right:auto}
.jinline-actions button.danger:hover{background:#f9ecec}
.jtime-editor{display:flex;align-items:center;gap:7px;margin:2px 0 12px;padding:9px;background:#f5f2e9;border-radius:12px}
.jtime-editor input{flex:1;min-width:0;border:1px solid var(--border);background:#fff;border-radius:9px;padding:8px;font:inherit;font-size:.8rem;color:var(--text)}
.journal-empty{padding:70px 20px;text-align:center;color:#a29c8f;font-size:.88rem;line-height:1.9}

/* 颜色角标浮层 */
.cat-picker{position:fixed;z-index:1200;width:210px;padding:9px;background:#fffdf8;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg)}
.cat-picker.manager-mode{width:min(340px,calc(100vw - 24px));max-height:min(76vh,520px);overflow:auto;padding:15px}
.cp-item{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left;font:inherit;font-size:.84rem;color:#4a463d}
.cp-item:hover{background:#f1eee5}
.cp-item.active{font-weight:700}
.cp-swatch{width:24px;height:14px;flex:0 0 auto;border-radius:5px 9px 6px 8px;background:#ddd;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.cp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-check{color:#6f7d5c;font-weight:700}
.cp-new{width:100%;margin-top:5px;padding:11px 10px 9px;border:0;border-top:1px solid var(--border);background:transparent;color:#687a54;cursor:pointer;font:inherit;font-size:.8rem;text-align:left}
.cp-new:hover{background:#f1eee5}

/* 浮层内：新建组别 / 组别管理 */
.group-creator{display:grid;gap:12px}
.group-creator>b,.gm-head b{font-size:.95rem}
.gc-field{display:grid;gap:6px;color:#7d776c;font-size:.72rem}
.gc-field input[type=text]{width:100%;border:1px solid var(--border);border-radius:9px;padding:9px 10px;background:#fff;font:inherit;color:var(--text)}
.gc-color-line{display:flex;align-items:center;gap:9px}
.gc-color-line input[type=color]{width:44px;height:34px;border:0;background:transparent;padding:0;cursor:pointer}
.gc-preview{width:36px;height:18px;border-radius:5px 9px 6px 8px;background:#ddd}
.gc-color-line code{font-size:.66rem;color:#8b8579}
.gc-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border);padding-top:11px}
.gc-actions button,.gm-actions button{border:1px solid var(--border);background:#fff;border-radius:10px;padding:7px 15px;cursor:pointer;font:inherit;font-size:.78rem;color:#5b574f}
.gc-actions button.primary,.gm-actions button.primary{background:#222;color:#fff;border-color:#222}
.group-manager{display:grid;gap:11px}
.gm-head{display:flex;align-items:center;justify-content:space-between}
.gm-head button{border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:#9a9486;line-height:1;padding:2px 6px}
.gm-tip{margin:0;color:#969084;font-size:.68rem;line-height:1.6}
.gm-rows{display:grid;gap:9px}
.gm-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto auto;gap:7px;align-items:center}
.gm-color{width:38px;height:34px;border:0;background:transparent;padding:0;cursor:pointer}
.gm-name{min-width:0;border:1px solid var(--border);background:#fff;border-radius:9px;padding:9px 10px;font:inherit;font-size:.82rem;color:var(--text)}
.gm-name[readonly]{background:#f1eee7;color:#908a80;cursor:default}
.gm-count{font-size:.66rem;color:#a29c8f;white-space:nowrap}
.gm-move{display:flex;gap:2px}
.gm-move button{width:26px;height:28px;border:1px solid var(--border);background:#fff;border-radius:7px;cursor:pointer;color:#777266;font-size:.72rem;line-height:1}
.gm-move button:disabled{opacity:.3;cursor:default}
.gm-delete{width:30px;height:30px;border:0;background:transparent;color:#b65d62;font-size:1.05rem;cursor:pointer;border-radius:8px}
.gm-delete:disabled{opacity:.25;cursor:default}
.gm-actions{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:11px}

/* 响应式：移动端隐藏侧栏，改胶囊 + 下拉，卡片单列 */
@media (max-width:860px){
  #page-notes .journal-layout{grid-template-columns:1fr;gap:0}
  .journal-rail{display:none}
  .journal-chips{display:flex}
  .journal-archive-select{display:block}
  .journal-book{padding:24px 15px 30px;border-radius:22px}
  .jday{grid-template-columns:52px minmax(0,1fr);gap:12px;margin-bottom:24px}
  .jday-date b{font-size:1.5rem}
  .jday-date span{font-size:.62rem}
  .jday-notes{grid-template-columns:minmax(0,1fr)}
  .composer-foot{justify-content:flex-end}
  .composer-hint{display:none}
  .quick-composer textarea{min-height:80px;font-size:.95rem}
  .cat-picker{width:min(210px,calc(100vw - 24px))}
}
@media (max-width:430px){
  .gm-row{grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:"color name del" "color count move";row-gap:6px}
  .gm-color{grid-area:color}.gm-name{grid-area:name}.gm-count{grid-area:count}.gm-move{grid-area:move;justify-self:end}.gm-delete{grid-area:del;justify-self:end}
  .jinline-actions button,.jtime-editor button{padding:7px 11px}
}