/* ===== 想想世界 · 可爱风样式 ===== */
:root{
  --font-cute: "ZCOOL KuaiLe", "Baloo 2", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ink:#6b5b73;
  --pink:#ff9ec4;
  --card:#fffdf8;
  --shadow:0 8px 22px rgba(150,120,160,.18);
}
*{box-sizing:border-box}
/* 关键:确保 hidden 属性始终隐藏元素(否则 .modal/.admin-bar 的 display 会盖过它) */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-cute);
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 18%, #fff6d9 0 14px, transparent 15px),
    radial-gradient(circle at 82% 28%, #ffe1ec 0 18px, transparent 19px),
    radial-gradient(circle at 68% 75%, #d9f2ff 0 12px, transparent 13px),
    linear-gradient(160deg,#fdeffd 0%, #eaf3ff 45%, #e9fbf3 100%);
  background-attachment:fixed;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}

/* 飘浮云朵装饰 */
body::before, body::after{
  content:"☁️"; position:fixed; font-size:60px; opacity:.5; pointer-events:none; z-index:0;
  animation:floaty 9s ease-in-out infinite;
}
body::before{ top:14%; left:6%; }
body::after{ top:60%; right:8%; font-size:48px; animation-delay:-4s; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* ===== 顶部栏 ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(8px);
  border-bottom:2px dashed #ffd0e2;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-size:38px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.12)); animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.brand-txt h1{margin:0; font-size:26px; letter-spacing:1px; color:#ff7eb0; text-shadow:1px 2px 0 #fff}
.brand-txt p{margin:0; font-size:13px; color:#a796b0}

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

/* ===== 按钮 ===== */
.btn{
  font-family:var(--font-cute); font-size:15px; cursor:pointer;
  border:none; border-radius:18px; padding:9px 16px; color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.08); transition:transform .12s, box-shadow .12s;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.08)}
.btn-diary{background:linear-gradient(135deg,#ffc36b,#ff9d6b)}
.btn-login{background:linear-gradient(135deg,#9ad0ff,#7eb6ff)}
.btn-post{background:linear-gradient(135deg,#ff9ec4,#ff7eb0); width:100%; font-size:16px}
.btn-ghost{background:#fff; color:#ff7eb0; box-shadow:0 4px 0 #ffd9e7}
.btn:hover{transform:translateY(-1px)}

.admin-bar{display:flex; align-items:center; gap:8px}
.admin-tag{background:#fff3c4; color:#c79a2b; padding:6px 12px; border-radius:14px; font-size:14px; box-shadow:0 2px 0 #f0e0a0}

/* ===== 画布 ===== */
.board-wrap{
  position:fixed; inset:0; top:0; z-index:1;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.board-scaler{
  position:relative;
  width:2800px; height:2000px;
}
.board{
  position:relative;
  width:2800px; height:2000px;
  transform-origin:0 0;
  background-image:radial-gradient(rgba(180,150,190,.10) 1.5px, transparent 1.6px);
  background-size:26px 26px;
}

/* ===== 纸条 ===== */
.note{
  position:absolute;
  width:180px; min-height:120px;
  padding:26px 16px 30px;
  background:var(--paper,#FBF0B2);
  border-radius:6px;
  box-shadow:var(--shadow);
  font-size:17px; line-height:1.5; color:#5d5160;
  transform:rotate(var(--rot,0deg));
  transition:box-shadow .15s;
  word-break:break-word; white-space:pre-wrap;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}
.note .note-text{ max-height:260px; overflow:auto; }
.note.movable{cursor:grab}
.note.movable:hover{box-shadow:0 12px 28px rgba(150,120,160,.28)}
.note.dragging{cursor:grabbing; box-shadow:0 18px 36px rgba(120,90,140,.36); transition:none}
.note.dragging .tape{filter:brightness(1.05)}

/* 胶带 */
.note .tape{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:74px; height:26px;
  background:var(--tape,#F4E08A); opacity:.85;
  border-radius:3px;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.note .tape::before, .note .tape::after{
  content:""; position:absolute; top:0; bottom:0; width:5px;
  background-image:linear-gradient(rgba(255,255,255,.45) 50%, transparent 50%);
  background-size:100% 6px;
}
.note .tape::before{left:0} .note .tape::after{right:0}

.note .note-meta{
  position:absolute; bottom:7px; right:12px;
  font-size:11px; color:rgba(90,70,90,.45);
}

/* 撕掉按钮(左上角) */
.note .note-del{
  position:absolute; top:-10px; left:-10px;
  width:24px; height:24px; border-radius:50%;
  border:none; background:#ff7e8a; color:#fff; font-size:15px; line-height:1;
  cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.2);
  display:none; z-index:2;
}
.note.deletable .note-del{display:block}
.note .note-del:hover{transform:scale(1.15) rotate(8deg)}

/* 昵称署名 */
.note .note-name{
  display:block; margin-top:8px; text-align:right;
  font-size:13px; color:rgba(120,90,120,.6);
}
.note .note-name::before{content:"— "}

/* 旋转把手 */
.note .rotate-handle{
  position:absolute; bottom:-12px; left:-12px;
  width:24px; height:24px; border-radius:50%;
  background:#fff; color:#ff9ec4; font-size:14px;
  display:none; align-items:center; justify-content:center;
  cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.18);
  touch-action:none;
}
.note.movable .rotate-handle{display:flex}
.note .rotate-handle:active{cursor:grabbing}

.note .mine-badge{
  position:absolute; bottom:7px; left:10px; font-size:11px; color:rgba(90,70,90,.5);
}

/* ===== 发纸条面板 ===== */
.composer{
  position:fixed; left:18px; bottom:18px; z-index:25;
  width:260px;
  background:var(--card);
  border:2px solid #ffe0ec; border-radius:20px;
  box-shadow:var(--shadow);
  padding:16px;
  transition:transform .25s, opacity .25s;
}
.composer.collapsed{transform:translateY(calc(100% + 30px)); opacity:0; pointer-events:none}
.composer-toggle{
  position:absolute; top:-18px; right:16px;
  width:42px; height:42px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#ff9ec4,#ff7eb0); color:#fff; font-size:20px;
  cursor:pointer; box-shadow:0 4px 10px rgba(255,126,176,.4);
}
.composer-title{font-size:17px; margin-bottom:8px; color:#ff7eb0}
#nickInput{margin-bottom:8px}
#noteInput, .ipt{
  width:100%; font-family:var(--font-cute); font-size:15px; color:var(--ink);
  border:2px solid #ffe0ec; border-radius:12px; padding:10px; resize:none; outline:none;
  background:#fffefb;
}
#noteInput:focus, .ipt:focus{border-color:#ff9ec4}
.char-count{text-align:right; font-size:12px; color:#bba9c2; margin:4px 2px}
.color-label{font-size:14px; margin:4px 0 6px}
.color-picker{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.swatch{
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:3px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.14);
  transition:transform .12s;
}
.swatch:hover{transform:scale(1.12)}
.swatch.active{border-color:#ff7eb0; transform:scale(1.18)}

/* ===== 悬浮按钮(展开 composer 用) ===== */
.composer-fab{
  position:fixed; left:18px; bottom:18px; z-index:24;
  width:58px; height:58px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#ff9ec4,#ff7eb0); color:#fff; font-size:26px;
  cursor:pointer; box-shadow:0 6px 16px rgba(255,126,176,.45);
  display:none;
}
.composer.collapsed ~ .composer-fab{display:block}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; top:78px; transform:translateX(-50%);
  z-index:60; background:rgba(107,91,115,.92); color:#fff;
  padding:10px 20px; border-radius:16px; font-size:15px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0}to{opacity:1}}
.toast.bad{background:rgba(214,93,113,.95)}
.toast.good{background:rgba(86,178,140,.95)}

/* ===== 弹窗 ===== */
.modal{
  position:fixed; inset:0; z-index:50;
  background:rgba(120,100,130,.34);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative; background:var(--card);
  border-radius:24px; box-shadow:0 20px 50px rgba(120,90,140,.3);
  padding:26px; width:100%; max-width:520px; max-height:84vh; overflow:auto;
  border:3px solid #ffe0ec;
}
.modal-close{
  position:absolute; top:14px; right:16px; width:34px; height:34px;
  border:none; border-radius:50%; background:#ffe0ec; color:#ff7eb0; font-size:22px;
  cursor:pointer;
}
.modal-title{margin:0 0 16px; color:#ff7eb0; font-size:24px}

/* 日记 */
.diary-form .ipt{margin-bottom:10px}
.diary-form-row{display:flex; gap:10px}
.ipt-mood{max-width:160px}
.diary-form-btns{display:flex; gap:10px}
.soft-hr{border:none; border-top:2px dashed #ffd0e2; margin:18px 0}
.diary-list{display:flex; flex-direction:column; gap:14px}
.diary-entry{
  background:#fffefb; border:2px solid #fff0d6; border-radius:16px; padding:14px 16px;
  box-shadow:0 4px 10px rgba(180,150,120,.12);
}
.diary-entry h3{margin:0 0 4px; color:#e8915a; font-size:19px}
.diary-entry .d-meta{font-size:12px; color:#bba; margin-bottom:8px}
.diary-entry .d-body{font-size:15px; line-height:1.7; white-space:pre-wrap; color:#6b5b73}
.diary-entry .d-ops{display:flex; gap:8px; margin-top:10px}
.diary-entry .d-ops button{
  font-family:var(--font-cute); font-size:13px; border:none; border-radius:12px;
  padding:5px 12px; cursor:pointer;
}
.d-edit{background:#cfeaffff; color:#3f86c7}
.d-del{background:#ffd6dc; color:#d65d71}
.diary-empty{text-align:center; color:#bba9c2; padding:30px 0}

/* 天气选择 */
.weather-label{font-size:14px; margin:2px 2px 6px; color:#a78}
.weather-picker{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.weather-btn{
  font-size:20px; line-height:1; width:38px; height:38px; cursor:pointer;
  background:#fffefb; border:2px solid #ffe0ec; border-radius:12px; transition:transform .12s;
}
.weather-btn:hover{transform:scale(1.1)}
.weather-btn.active{border-color:#ff7eb0; background:#fff0f6; transform:scale(1.12)}

/* 插图面板 */
.diary-img-panel{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 10px}
.img-hint{font-size:12px; color:#bba9c2}
#diaryDate{max-width:170px}

/* 日记画布(文字 + 浮动图片) */
.d-head{margin-bottom:6px}
.d-canvas{position:relative; min-height:40px; overflow:visible}
.diary-entry .d-body{position:relative; z-index:1}

.d-img{
  position:absolute; top:0; left:0;
  transform:rotate(var(--rot,0deg)); transform-origin:center center;
  z-index:2; touch-action:none;
}
.d-img img{
  display:block; width:100%; height:auto;
  background:#fff; padding:6px 6px 14px; border-radius:6px;
  box-shadow:0 6px 16px rgba(120,90,140,.28);
  pointer-events:none;
}
.d-img.editable{cursor:grab}
.d-img.editable:hover img{box-shadow:0 10px 22px rgba(120,90,140,.4)}
.d-img.dragging{cursor:grabbing; transition:none}
.d-img .d-img-del{
  position:absolute; top:-10px; left:-10px; width:22px; height:22px; border-radius:50%;
  border:none; background:#ff7e8a; color:#fff; font-size:14px; line-height:1; cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.2); display:none; z-index:3;
}
.d-img .rotate-handle{
  position:absolute; bottom:-10px; right:-10px; width:22px; height:22px; border-radius:50%;
  background:#fff; color:#ff9ec4; font-size:13px; display:none;
  align-items:center; justify-content:center; cursor:grab;
  box-shadow:0 2px 6px rgba(0,0,0,.18); touch-action:none; z-index:3;
}
.d-img.editable .d-img-del, .d-img.editable .rotate-handle{display:flex}

/* 登录 */
.login-card{max-width:380px}
.login-hint{margin:0 0 16px; color:#a796b0; font-size:14px}
.login-card .ipt{margin-bottom:12px}
.login-err{background:#ffe0e4; color:#d65d71; padding:8px 12px; border-radius:12px; font-size:14px; margin-bottom:12px}

/* ===== 背景音乐播放器 ===== */
.music-box{
  position:fixed; right:18px; bottom:18px; z-index:26;
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:2px solid #ffe0ec; border-radius:40px;
  box-shadow:var(--shadow); padding:8px 14px 8px 8px;
  max-width:240px;
}
.music-disc{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:
    radial-gradient(circle at center, #fff 0 6px, #6b5b73 7px 9px, #b59ec2 10px 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.music-disc span{ text-shadow:0 1px 2px rgba(0,0,0,.4); }
.music-disc.spinning{ animation:spin 4s linear infinite; }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

.music-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.music-name{
  font-size:13px; color:#8a7a93; max-width:150px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-ctrl{ display:flex; align-items:center; gap:4px; }
.m-btn{
  border:none; background:#fff0f6; color:#ff7eb0; cursor:pointer;
  width:26px; height:26px; border-radius:50%; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .12s;
}
.m-btn:hover{ transform:scale(1.15); background:#ffe0ec; }
.m-play{ width:30px; height:30px; font-size:15px; background:linear-gradient(135deg,#ff9ec4,#ff7eb0); color:#fff; }
::-webkit-scrollbar-thumb{background:#ffd0e2; border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

/* 移动端 */
@media (max-width:640px){
  /* 顶栏瘦身 */
  .topbar{padding:7px 10px; gap:6px}
  .brand{gap:7px}
  .logo{font-size:28px}
  .brand-txt p{display:none}
  .brand-txt h1{font-size:19px}
  .actions{gap:6px}
  .btn{font-size:13px; padding:7px 11px; box-shadow:0 3px 0 rgba(0,0,0,.08)}
  .admin-tag{font-size:12px; padding:5px 9px}

  /* 发纸条面板:贴合两侧 + 适配底部安全区 + 内部可滚动 */
  .composer{left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom)); padding:13px}
  .composer-body{max-height:58vh; overflow:auto}
  .composer-title{font-size:16px}
  .color-picker{gap:6px; margin-bottom:10px}
  .swatch{width:26px; height:26px}
  .composer-fab{left:14px; bottom:calc(14px + env(safe-area-inset-bottom)); width:52px; height:52px; font-size:23px}

  /* 播放器:右下角、避开安全区、更紧凑 */
  .music-box{right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:186px; padding:6px 12px 6px 6px; gap:8px}
  .music-disc{width:40px; height:40px; font-size:14px}
  .music-name{max-width:100px; font-size:12px}
  .m-btn{width:24px; height:24px; font-size:12px}
  .m-play{width:28px; height:28px; font-size:14px}

  /* 弹窗 */
  .modal{padding:12px}
  .modal-card{padding:18px; border-radius:20px; max-height:88vh}
  .modal-title{font-size:20px}
  .toast{top:62px; font-size:14px; max-width:86vw; text-align:center}

  /* 装饰云朵缩小,减少拥挤感 */
  body::before, body::after{font-size:36px; opacity:.32}
}

/* 超小屏(窄手机):顶栏按钮只留图标 */
@media (max-width:430px){
  .btn-label{display:none}
  .btn-diary, .btn-login{padding:7px 10px; font-size:17px; line-height:1}
  .brand-txt h1{font-size:17px}
  .logo{font-size:26px}
}