/* ================= 桌面端「个人档案」：千纸鹤风铃 + 手抄报展示 ================= */
/* 仅桌面端生效（.dp-profile 置于 #subOther 内，桌面端才进入该子层） */

#subOther { flex-direction: column; }
.dp-profile {
  flex: 1; min-height: 0; height: 100%;
  box-sizing: border-box;
  display: grid; grid-template-columns: minmax(220px, 28%) minmax(0, 1fr); gap: 56px;
  padding: 16px 22px 20px 78px;
  background: linear-gradient(150deg, #f7efe2 0%, #efe3cf 100%);
  overflow: hidden;
}
@media (min-width: 768px) {
  .dp-profile.desktop-only { display: grid !important; }
}

/* ---------- 左侧：风铃 + 书桌 ---------- */
.dp-left {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px;
  min-height: 0; height: 100%;
}
.dp-left-title {
  padding: 8px 12px; text-align: center; font-size: 15px; font-weight: 700;
  color: #6b5a3c;
}
/* 风铃：占满左栏中间行（grid 拉伸），内部上=三角挂架+椭圆环，下=纸鹤错落垂挂 */
.dp-cranes {
  position: relative; min-height: 340px; min-width: 0; overflow: hidden;
  align-self: stretch;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(120,90,40,0.10), transparent 60%);
  border: 1px dashed rgba(120,90,40,0.2);
}
/* 顶部挂绳：两根斜线从顶点落到椭圆环，保持轻量通透 */
.dp-cranes::before {
  content: ""; position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  width: 48%; height: 18%;
  background:
    linear-gradient(to bottom right, transparent 48%, rgba(120,90,40,0.48) 49%, rgba(120,90,40,0.48) 51%, transparent 52%) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent 48%, rgba(120,90,40,0.48) 49%, rgba(120,90,40,0.48) 51%, transparent 52%) right / 50% 100% no-repeat;
}
/* 椭圆环：纸鹤的垂挂基准（图2中间的大椭圆） */
.dp-cranes::after {
  content: ""; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  width: 88%; height: 18%; min-height: 48px;
  border: 4px solid rgba(120,90,40,0.5); border-radius: 50%;
  box-sizing: border-box;
}
.dp-crane {
  position: absolute; left: 0; top: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 1;
  transition: left 0.5s ease, top 0.5s ease;
}
/* 每只纸鹤：从椭圆环下缘(挂点)垂下的一根线 */
.dp-crane-str {
  width: 2px; height: var(--crane-string); background: rgba(120,90,40,0.35);
  border-radius: 1px; flex-shrink: 0;
}
.dp-crane-btn {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.2s ease, filter 0.2s ease; transform-origin: center top;
}
.dp-crane-body {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; font-size: 32px;
  filter: grayscale(0.1) drop-shadow(0 3px 3px rgba(0,0,0,0.2));
  transition: all 0.2s;
}
.dp-crane-name {
  font-size: 11px; color: #6b5a3c; font-weight: 600;
  background: rgba(255,255,255,0.7); padding: 2px 6px; border-radius: 8px;
  white-space: nowrap; margin-top: 3px;
}
.dp-crane-btn:hover .dp-crane-body { transform: scale(1.08); }
.dp-crane.active .dp-crane-body {
  background: radial-gradient(circle, #fff3d0, #ffd67a);
  border-radius: 50%; box-shadow: 0 0 0 3px #ffd67a, 0 6px 16px rgba(200,150,40,0.4);
}
.dp-crane.active .dp-crane-name { color: #8a5a10; font-weight: 700; }
.dp-crane.active .dp-crane-btn { animation: dpCraneBob 2s ease-in-out infinite; }
@keyframes dpCraneBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-2deg); }
}

/* 左下：书桌 + 新增档案（桌面 + 桌腿） */
.dp-desk {
  height: 200px; position: relative; cursor: pointer;
  border-radius: 12px 12px 6px 6px; overflow: hidden;
  background: linear-gradient(160deg, #caa06a, #b3894f);
  box-shadow: 0 8px 20px rgba(90,60,20,0.25);
  border: 1px solid rgba(90,60,20,0.2);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 24px;
}
/* 桌面板 */
.dp-desk::before {
  content: ""; position: absolute; top: 8px; left: 6px; right: 6px; height: 16px;
  background: linear-gradient(160deg, #d9b47e, #c39a5d); border-radius: 6px;
  box-shadow: 0 2px 6px rgba(90,60,20,0.3);
}
/* 桌腿 */
.dp-desk::after {
  content: ""; position: absolute; top: 24px; bottom: 0; left: 24px; right: 24px;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(90,60,20,0.28) 22% 26%, transparent 26% 74%, rgba(90,60,20,0.28) 74% 78%, transparent 78%);
}
/* 桌上的折纸与标签 */
.dp-desk-msg {
  position: relative; z-index: 1;
  color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  margin-top: 30px;
}
.dp-desk-paper {
  position: relative; z-index: 1; font-size: 34px; margin-top: 6px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
  transition: transform 0.2s;
}
.dp-desk:hover .dp-desk-paper { transform: translateY(-3px) rotate(-6deg); }
.dp-desk:hover .dp-desk-msg { letter-spacing: 1px; }

/* ---------- 右侧：手抄报 ---------- */
.dp-right {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  min-height: 0; height: 100%;
}
.dp-right-head { position: absolute; top: 24px; right: 134px; z-index: 2; }
.dp-right-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dp-action-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: #fff; color: #6b5a3c; font-size: 13px; font-weight: 600;
  padding: 16px 16px; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(120,90,40,0.15); transition: all 0.15s;
  border: 1px solid rgba(120,90,40,0.2);
}
.dp-action-btn.active, .dp-action-btn:hover { background: #ffd67a; color: #6b4a10; }
.dp-pane {
  flex: 0 0 auto; min-height: 0; width: calc(100% - 80px); height: 100%; box-sizing: border-box;
  overflow-y: auto;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(120,90,40,0.2);
  border-radius: 18px; padding: 24px;
  box-shadow: 0 6px 18px rgba(90,60,20,0.12);
}

/* —— 手抄报展示卡：一张「纸」上错落的便签 —— */
.dp-sheet {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 100%; box-sizing: border-box;
}
/* 头部：头像圆 + 昵称大字 + 摘要，占整行 */
.dp-sheet-masthead {
  display: flex; align-items: center; gap: 22px; padding: 0 190px 16px 30px;
  border-bottom: 2px dashed rgba(120,90,40,0.25);
}
.dp-avatar-lg {
  position: relative; width: 108px; height: 108px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%; font-size: 56px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(120,90,40,0.18);
  border: 1px solid rgba(120,90,40,0.15);
}
.dp-avatar-ring { position: absolute; inset: 4px; border: 2px solid #ffd67a; border-radius: 50%; }
.dp-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.dp-avatar-lg span { position: relative; z-index: 1; }
.dp-mast-info { min-width: 0; }
.dp-mast-job { font-size: 13px; color: #a08c66; letter-spacing: 2px; }
.dp-name { font-size: 38px; font-weight: 700; color: #4a3a1c; margin: 2px 0; line-height: 1.1; }
.dp-summary { font-size: 15px; color: #8a754e; }

/* 信息区：错落便签（位移微调，避免整齐表格感） */
.dp-sheet-cols {
  flex: 1; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 36px 20px; align-content: start; align-items: start;
}
.dp-block-basic { grid-column: span 5; }
.dp-block-personality { grid-column: span 7; }
.dp-block-likes { grid-column: span 3; }
.dp-block-dislikes { grid-column: span 4; }
.dp-block-about { grid-column: span 5; }
.dp-block-intro { grid-column: 1 / -1; }
.dp-block-basic { min-height: 158px; }
.dp-block-personality { min-height: 128px; }
.dp-block-basic { width: calc(100% - 20px); justify-self: end; }
.dp-block-personality { width: calc(100% - 20px); justify-self: start; }
.dp-block-likes { min-height: 174px; }
.dp-block-dislikes { min-height: 138px; }
.dp-block-about { min-height: 178px; }
.dp-block-intro { width: calc(100% - 60px); min-height: 128px; justify-self: center; }
.dp-block {
  background: rgba(255,252,244,0.9);
  border: 1px solid rgba(120,90,40,0.12); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 3px 10px rgba(90,60,20,0.08);
}
.dp-block-title { font-size: 14px; font-weight: 700; color: #7a643c; margin-bottom: 10px; }
.dp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dp-list li { font-size: 13px; color: #55452a; line-height: 1.6; }
.dp-key { color: #a08c66; margin-right: 8px; font-size: 12px; }
.dp-text { font-size: 13px; color: #55452a; line-height: 1.7; }

/* —— 收藏便签 —— */
.dp-fav-wrap {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc(100% - 200px);
  gap: 24px; align-items: start;
}
.dp-fav-section-title { font-size: 14px; font-weight: 700; color: #7a643c; margin-bottom: 10px; }
.dp-fav-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dp-fav-card {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: #fffdf6; border: 1px solid rgba(120,90,40,0.15);
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(120,90,40,0.1);
  transition: transform 0.15s, box-shadow 0.15s;
}
.dp-fav-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(120,90,40,0.16); }
.dp-fav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-fav-kind { font-size: 12px; font-weight: 600; color: #a06a10; }
.dp-fav-date { font-size: 11px; color: #b09c78; }
.dp-fav-title { font-size: 14px; font-weight: 600; color: #4a3a1c; }
.dp-fav-preview { font-size: 12px; color: #8a754e; margin-top: 4px; line-height: 1.4; }
.dp-fav-remove {
  margin-top: 8px; display: inline-block; font-size: 11px; color: #c26b6b; cursor: pointer;
}
.dp-fav-remove:hover { text-decoration: underline; }
.dp-fav-empty { font-size: 13px; color: #a08c66; padding: 12px 0; }

/* —— 编辑表单 —— */
.dp-right:has(.dp-editor) .dp-right-head { display: none; }
.dp-editor { width: 100%; min-height: 100%; box-sizing: border-box; }
.dp-editor-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px dashed rgba(120,90,40,0.25);
}
.dp-editor-title { font-size: 18px; font-weight: 700; color: #4a3a1c; }
.dp-editor-actions { display: flex; gap: 10px; flex-shrink: 0; }
.dp-delete-btn, .dp-delete-confirm {
  background: #fff1f0; color: #c9423a; border: 1px solid #efb7b2;
}
.dp-delete-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dp-editor-layout {
  display: grid; grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.dp-editor-avatar-panel {
  min-width: 0; padding: 16px;
  border: 1px solid rgba(120,90,40,0.12); border-radius: 14px;
  background: rgba(255,252,244,0.72);
}
.dp-editor .avatar-edit { margin-bottom: 2px; }
.dp-editor .avatar-preview {
  width: 116px; height: 116px; margin: 0 auto;
  font-size: 58px;
}
.dp-editor .avatar-actions { flex-wrap: wrap; }
.dp-editor .avatar-actions .char-btn { flex: 1; min-width: 76px; }
.dp-editor .emoji-grid { grid-template-columns: repeat(4, 1fr); }
.dp-editor-bio { margin-top: 16px; }
.dp-editor-bio textarea.form-input { min-height: 132px; }
.dp-editor-fields { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dp-field-row { display: grid; gap: 14px; }
.dp-field-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-field-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-field { min-width: 0; }
.dp-editor .form-label { margin: 0 0 5px; }
.dp-editor .form-input { margin: 0; }
.dp-editor textarea.form-input { min-height: 78px; }
.dp-delete-mask {
  position: fixed; inset: 0; z-index: 1200;
  align-items: center; justify-content: center;
  background: rgba(35,28,20,0.42); padding: 24px;
}
.dp-delete-dialog {
  width: min(440px, calc(100vw - 48px)); box-sizing: border-box;
  background: #fffdf8; border-radius: 16px; padding: 22px;
  border: 1px solid rgba(120,90,40,0.2);
  box-shadow: 0 18px 50px rgba(35,28,20,0.24);
}
.dp-delete-title { font-size: 18px; font-weight: 700; color: #4a3a1c; }
.dp-delete-copy { margin-top: 12px; color: #6b5a3c; font-size: 14px; line-height: 1.7; }
.dp-delete-copy ul { margin: 8px 0; padding-left: 22px; }
.dp-delete-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }