/* ===== 全局默认 ===== */
:root{
  --pink:#FFB6C8;
  --pink-deep:#FF8FAB;
  --blue:#A8D8FF;
  --blue-deep:#60A5FA;
  --ink:#4A5568;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}

body{
  font-family:-apple-system,"PingFang SC",sans-serif;
  margin:0; overflow:hidden; color:var(--ink);
  /* 女友端背景：粉色与淡蓝色的柔和交汇 */
  background:radial-gradient(circle at 15% 20%, #FFE4EC 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, #E0F2FE 0%, transparent 45%),
    linear-gradient(180deg,#FFF6F9 0%,#F0F9FF 100%);
  height:100vh; width:100vw; display:flex; flex-direction:column;
  position:relative; transition: background 0.3s, color 0.3s;
}

/* 背景装饰 */
.bg-deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.float-item{position:absolute;bottom:-50px;font-size:22px;opacity:.7;animation:floatUp linear infinite;}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.8} 90%{opacity:.8}
  100%{transform:translateY(-115vh) rotate(360deg);opacity:0}
}

/* 玻璃卡片 */
.glass{
  background:rgba(255,255,255,.85); backdrop-filter:blur(16px);
  border:2px solid rgba(255,255,255,.9); border-radius:28px;
  box-shadow:0 10px 30px rgba(168,216,255,.25),inset 0 2px 0 rgba(255,255,255,.9);
  transition: background 0.3s, border-color 0.3s;
}

/* 动画 */
.float{animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 头像 */
.cute-avatar{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFD6E3,#A8D8FF);
  border-radius:50%;
  box-shadow:0 6px 20px rgba(168,216,255,.4),inset 0 -3px 0 rgba(0,0,0,.05);
  animation:floaty 3s ease-in-out infinite; user-select:none; transition: background 0.3s;
}
.cute-avatar.big{width:110px;height:110px;font-size:60px}
.cute-avatar.small{width:42px;height:42px;font-size:24px}

/* 按钮 */
.btn{
  position:relative;border:none;border-radius:22px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#FFB6C8,#A8D8FF);
  cursor:pointer;box-shadow:0 5px 0 #8B6FD6,0 8px 16px rgba(168,216,255,.4);
  transition:.15s;overflow:hidden;font-family:inherit;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #8B6FD6,0 12px 20px rgba(168,216,255,.5)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8B6FD6}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-20deg);animation:shine 3.5s infinite;
}
@keyframes shine{0%,70%{left:-60%}100%{left:120%}}
.btn-purple{background:linear-gradient(180deg,#D6B8FF,#B497FF);box-shadow:0 5px 0 #8B6FD6}
.btn-purple:hover{box-shadow:0 7px 0 #8B6FD6}
.btn-purple:active{box-shadow:0 2px 0 #8B6FD6}

/* 输入框 */
input, select{
  border-radius:18px!important;border:2px solid #D6EAF8!important;
  background:rgba(255,255,255,.9);transition:.2s;font-family:inherit;color:var(--ink);
}
input:focus, select:focus{outline:none;border-color:var(--blue-deep)!important;box-shadow:0 0 0 4px rgba(96,165,250,.22)}

/* 进度条 */
.pbar{height:18px;background:rgba(214,234,248,.6);border-radius:99px;overflow:hidden;position:relative}
.pbar>i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FFB6C8,#A8D8FF,#D6B8FF);
  position:relative;transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.pbar>i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  animation:shine 2.2s infinite;
}

/* 标题与徽章 */
.title{font-weight:900;letter-spacing:.5px;background:linear-gradient(90deg,#FF8FAB,#A8D8FF,#D6B8FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:99px;background:rgba(168,216,255,.25);font-size:12px;font-weight:800;color:#3B82F6;}

/* 留言气泡 */
.msg-bubble{animation:bubbleIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bubbleIn{from{opacity:0;transform:scale(.7) translateY(10px)}to{opacity:1;transform:none}}
.msg-mine{background:linear-gradient(135deg,#FFB6C8,#A8D8FF);color:#fff;border-radius:22px 22px 6px 22px;}
.msg-other{background:#fff;color:#4A5568;border-radius:22px 22px 22px 6px;box-shadow:0 4px 14px rgba(168,216,255,.2);}

/* 滚动条 */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#A8D8FF;border-radius:99px}

/* =========================================
   页面切换 (Tab 切换)
========================================= */
.tab-content { display: none; animation: fadeInTab 0.3s ease-out forwards; }
.tab-content.active { display: block; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   视图切换 (手机 / 电脑)
========================================= */
.view-mobile #appView { max-width: 480px; margin: 0 auto; border-radius: 28px; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 10px 40px rgba(0,0,0,0.1); margin-top: 2vh; height: 96vh; }
.view-pc #appView { width: 100%; max-width: 1100px; margin: 0 auto; height: 100vh; }

/* =========================================
   🐹 男友专属风格 (高冷仓鼠灰蓝调)
========================================= */
body.role-bf { background: linear-gradient(180deg,#f4f6f9 0%,#e8edf4 100%); color: #334155; }
body.role-bf .float-item { display: none; }
body.role-bf .title { background: linear-gradient(90deg,#475569,#64748b); -webkit-background-clip:text;background-clip:text;color:transparent; }
body.role-bf .glass { background: rgba(255,255,255,0.9); border: 2px solid #cbd5e1; box-shadow: 0 8px 24px rgba(71,85,105,.08); }
body.role-bf input, body.role-bf select { border-color: #cbd5e1 !important; background: #fff; }
body.role-bf input:focus, body.role-bf select:focus { border-color: #64748b !important; box-shadow: 0 0 0 4px rgba(100,116,139,.15); }
body.role-bf .msg-mine { background: linear-gradient(135deg,#64748b,#475569);color:#fff; }
body.role-bf .msg-other { background:#f1f5f9;color:#334155;box-shadow:none; }
body.role-bf .cute-avatar { background: linear-gradient(135deg,#94a3b8,#64748b); animation: none; }

/* 深色模式 */
body.dark { background: linear-gradient(180deg,#1a1c24 0%,#12141c 100%); color:#ffe4ec; }
body.dark .glass { background: rgba(50,30,45,.75); border-color:rgba(255,182,200,.3); }
body.dark input, body.dark select { background: rgba(255,255,255,.1); color:#ffe4ec; border-color:#6b3a55!important; }
body.dark .msg-other { background:#3a2a35;color:#ffe4ec; }
body.role-bf.dark { background: linear-gradient(180deg,#0f172a 0%,#1e293b 100%); color: #e2e8f0; }
body.role-bf.dark .glass { background: rgba(30,41,59,0.85); border-color: #334155; }
body.role-bf.dark input, body.role-bf.dark select { background: rgba(15,23,42,0.6); border-color: #475569 !important; color: #e2e8f0; }

/* 状态标签 */
.badge-pending { background: #FEF3C7; color: #D97706; }
.badge-gifted { background: #D1FAE5; color: #059669; }
.badge-rejected { background: #FEE2E2; color: #DC2626; }

/* 愤怒垃圾桶专属样式 */
.paper-ball {
  position: absolute;
  width: 60px; height: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; cursor: grab;
  box-shadow: inset -5px -5px 15px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.5);
  opacity: 0; transition: transform 0.1s, opacity 0.3s;
  z-index: 10;
  touch-action: none;
}
.paper-ball:active { cursor: grabbing; }
.paper-ball.crumpled {
  background: radial-gradient(circle at 30% 30%, #fff, #ccc, #888);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.trash-bin {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
  width: 120px; height: 140px;
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
  border-radius: 10px 10px 20px 20px;
  border-top: 6px solid #555;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 20px 30px rgba(0,0,0,0.6);
  transition: transform 0.2s;
}
.trash-bin::before { content: '🗑️'; font-size: 60px; opacity: 0.8; }
.trash-bin.hover {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 0 40px rgba(255,143,171,0.4);
}
.fireworks {
  position: absolute; pointer-events: none;
  font-size: 30px; opacity: 0;
  animation: fireworkAnim 1s ease-out forwards;
}
@keyframes fireworkAnim {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.5) translateY(-100px); opacity: 0; }
}
.surprise-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.95); border-radius: 28px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.5s;
}
.surprise-overlay.show { opacity: 1; pointer-events: auto; }
.surprise-text {
  font-size: 1rem; color: #FF8FAB;
  font-weight: bold; text-align: center; line-height: 1.6;
}