* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100vh;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

/* ===== Theme Variables ===== */
:root, .theme-miku {
  --c: #39C5BB;  --c-dim: rgba(57,197,187,0.4);
  --c-bg: rgba(57,197,187,0.10); --c-bg2: rgba(57,197,187,0.18); --c-brd: rgba(57,197,187,0.20);
  --c-text: #1a7a72; --c-text-bright: #0d5a54;
  --pink: #ff6088; --pink-dim: rgba(255,96,136,0.3);
  --bg1: #f0faf7; --bg2: #e0f5ef; --panel-bg: rgba(255,255,255,0.96);
  --header-from: #39C5BB; --header-to: #2da89e;
  --particle: circle, #39C5BB;
}
.theme-teto {
  --c: #ff6088;  --c-dim: rgba(255,96,136,0.4);
  --c-bg: rgba(255,96,136,0.10); --c-bg2: rgba(255,96,136,0.18); --c-brd: rgba(255,96,136,0.20);
  --c-text: #cc3366; --c-text-bright: #aa2244;
  --pink: #39C5BB; --pink-dim: rgba(57,197,187,0.3);
  --bg1: #fff5f8; --bg2: #ffe8ef; --panel-bg: rgba(255,255,255,0.96);
  --header-from: #ff6088; --header-to: #e04070;
  --particle: circle, #ff6088;
}

body {
  background:
    radial-gradient(circle at 20% 30%, var(--c-bg) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--c-bg) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
  transition: background 0.5s;
}

/* ===== Floating Pets ===== */
.miku-pet { position: fixed; width: 150px; z-index: 9999; cursor: grab; user-select: none; -webkit-user-select: none; }
.miku-pet:active { cursor: grabbing; }
.teto-pet { width: 120px; z-index: 9998; }
.miku-pet.inactive { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.pet-label {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--c-dim); white-space: nowrap;
  letter-spacing: 1px; font-weight: 600;
}
.miku-img-wrap { position: relative; width: 100%; }
.miku-img-wrap img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--c) 20%, transparent));
  animation: float 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.miku-img-wrap.jumping img { animation: mikuJump 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes mikuJump { 0%{transform:translateY(0) scale(1)} 30%{transform:translateY(-50px) scale(.92)} 60%{transform:translateY(-55px) scale(.9)} 100%{transform:translateY(0) scale(1)} }
.miku-img-wrap.dance1 img { animation: dance1 .5s ease-in-out infinite alternate; }
@keyframes dance1 { 0%{transform:translateY(0) rotate(-4deg)} 100%{transform:translateY(-10px) rotate(4deg)} }
.miku-img-wrap.dance2 img { animation: dance2 .7s ease-in-out infinite alternate; }
@keyframes dance2 { 0%{transform:rotate(-10deg) translateX(-5px)} 100%{transform:rotate(10deg) translateX(5px)} }
.miku-img-wrap.dance3 img { animation: dance3 .35s ease-in-out infinite alternate; }
@keyframes dance3 { 0%{transform:translateY(0) scaleX(1)} 100%{transform:translateY(-8px) scaleX(1.04)} }
.miku-img-wrap.eating img { animation: eat .3s ease-in-out 4; }
@keyframes eat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px) scale(.97)} }

/* Teto-style dance with shadow */
.miku-img-wrap.dance-pro img {
  animation: none !important;
  transition: transform 0.02s linear;
}

.blink-overlay { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.08s; z-index: 5; }
.blink-overlay.closed { opacity: 1; }

.miku-bubble {
  position: absolute; bottom: 100%; right: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--c-brd); border-radius: 14px;
  padding: 8px 12px; max-width: 220px; min-width: 60px;
  font-size: 13px; color: var(--c-text); margin-bottom: 10px;
  display: none; box-shadow: 0 4px 16px color-mix(in srgb, var(--c) 8%, transparent);
  word-break: break-all; line-height: 1.4; z-index: 10;
}
.miku-bubble.show { display: block; animation: pop .25s ease-out; }
@keyframes pop { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.miku-bubble::after {
  content:""; position:absolute; bottom:-8px; right:24px;
  width:12px;height:12px;
  background:rgba(0,0,0,0.7);
  border-right:1px solid var(--c-brd);
  border-bottom:1px solid var(--c-brd);
  transform:rotate(45deg);
}

.char-shadow {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 14px;
  background: radial-gradient(ellipse, var(--c-dim) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
  transition: width 0.08s, height 0.08s, opacity 0.08s;
}

.food-fly { position:fixed; font-size:48px; pointer-events:none; z-index:10000; opacity:0; transition:all .5s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--c) 30%, transparent)); }
.food-fly.flying { opacity:1; }
.sparkle { position:fixed; pointer-events:none; z-index:9999; font-size:18px; opacity:0; animation:sparkleFloat .9s ease-out forwards; }
@keyframes sparkleFloat { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-50px) scale(.2)} }

/* ===== Panel ===== */
.miku-resizer { position:absolute; bottom:0; right:0; width:20px; height:20px; cursor:nwse-resize; z-index:100; display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:auto; }
.miku-resizer::after { content:''; width:10px; height:10px; border-right:2px solid var(--c-dim); border-bottom:2px solid var(--c-dim); margin:0 3px 3px 0; }

.miku-panel {
  position: fixed; bottom:auto; right:auto;
  left: calc(100vw - 420px - 24px); top: calc(100vh - 560px - 190px);
  width: 420px; height: 560px;
  min-width: 320px; min-height: 360px; max-width: 90vw; max-height: 90vh;
  background: var(--panel-bg);
  border: 1px solid var(--c-brd); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 9998; animation: rise .25s ease-out;
  transition: border-color 0.3s, background 0.3s;
}
@keyframes rise { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.miku-panel.hidden { display: none; }
.miku-panel.mini-mode { width: 180px; height: 240px; min-width: 140px; min-height: 180px; }
.miku-panel.mini-mode .miku-tab:not(.active) { display: none; }
.miku-panel.mini-mode .miku-header nav { display: none; }
.miku-panel.mini-mode .miku-name { font-size: 12px; }
.miku-panel.mini-mode #miku-close { display: none; }
.miku-panel.mini-mode .chat-form { display: none; }
.miku-panel.mini-mode .miku-resizer { display: none; }
.miku-panel.mini-mode .chat-log { display: none; }
.miku-panel.mini-mode #tab-chat { display: flex !important; }
.miku-panel.mini-mode .char-area-compact {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.miku-panel.mini-mode .char-area-compact img { max-width: 130px; max-height: 140px; }

.miku-header {
  background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
  color: var(--c-text); padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; cursor: grab;
  transition: background 0.3s;
}
.miku-header:active { cursor: grabbing; }
.miku-name { font-weight:700; font-size:14px; letter-spacing:.5px; margin-right:2px; }
.char-switch-btn {
  font-size:16px; cursor:pointer; padding:2px 6px; border-radius:6px;
  transition:all .2s; margin-right:4px; line-height:1;
}
.char-switch-btn:hover { background:var(--c-bg2); transform:scale(1.15); }
.miku-header nav { display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; }
.miku-header nav::-webkit-scrollbar { display:none; }
.miku-header nav button {
  background: var(--c-bg2); color: var(--c-text);
  border:0; padding:4px 10px; border-radius:10px;
  font-size:12px; cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:all .15s;
}
.miku-header nav button.active { background:var(--c); color:var(--bg1); font-weight:600; }
#miku-close { background:transparent; color:rgba(255,255,255,.4); border:0; font-size:22px; cursor:pointer; padding:0 6px; line-height:1; }

/* ===== Tabs ===== */
.miku-tab { display:none; flex:1; flex-direction:column; padding:12px; overflow:hidden; }
.miku-tab.active { display:flex; overflow-y:auto; }

/* Chat */
.chat-log { flex:1; overflow-y:auto; padding:8px; background:rgba(0,0,0,.03); border-radius:12px; border:1px solid var(--c-brd); }
.chat-log::-webkit-scrollbar { width:4px; }
.chat-log::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--c) 15%, transparent); border-radius:4px; }
.chat-msg { margin-bottom:10px; display:flex; font-size:13px; line-height:1.4; }
.chat-msg.user { justify-content:flex-end; }
.chat-msg .b { display:inline-block; padding:10px 14px; border-radius:14px; max-width:80%; word-break:break-all; white-space:pre-wrap; font-size:14px; line-height:1.5; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.chat-msg.miku .b { background:#fff; color:var(--c-text); border-bottom-left-radius:4px; border:1px solid var(--c-brd); }
.chat-msg.user .b { background:var(--c); color:#fff; border-bottom-right-radius:4px; }
.chat-form { display:flex; gap:6px; padding-top:10px; flex-shrink:0; }
#chat-input { flex:1; padding:8px 12px; background:#fff; border:1px solid var(--c-brd); border-radius:10px; font-size:13px; outline:none; font-family:inherit; color:var(--c-text); }
#chat-input:focus { border-color:var(--c); box-shadow:0 0 0 2px var(--c-bg); }
#chat-input::placeholder { color:var(--c-dim); }
.chat-form button { background:var(--c); color:#fff; border:0; padding:8px 16px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }
.chat-form button:hover { filter:brightness(1.1); }

/* Mic button */
.mic-btn { background:transparent; border:0; font-size:18px; cursor:pointer; padding:4px 6px; border-radius:50%; transition:all .15s; line-height:1; }
.mic-btn:hover { background:var(--c-bg); }
.mic-btn.listening { background:#e55; animation:micPulse .8s ease-in-out infinite; }
@keyframes micPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,50,50,.4)} 50%{box-shadow:0 0 0 8px rgba(255,50,50,0)} }

.typing-dots { display:inline-flex; gap:3px; align-items:center; padding:0 4px; }
.typing-dots span { width:6px; height:6px; border-radius:50%; background:var(--c); animation:dotBounce 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-8px)} }

/* Songs */
.tab-actions { display:flex; flex-direction:column; gap:8px; flex:1; overflow:hidden; }
.built-in-label { font-size:12px; color:var(--c-dim); font-weight:600; letter-spacing:1px; }
.song-grid { display:flex; flex-wrap:wrap; gap:4px; }
.song-grid .sg-item { background:var(--c-bg); border:1px solid var(--c-brd); color:var(--c-text); padding:4px 10px; border-radius:8px; font-size:11px; cursor:pointer; transition:all .15s; }
.song-grid .sg-item:hover { background:var(--c-bg2); }
.song-grid .sg-item.playing { background:color-mix(in srgb, var(--c) 20%, transparent); color:var(--c-text-bright); }
.btn-teal { background:var(--c-bg2); color:var(--c); padding:7px 14px; border-radius:10px; cursor:pointer; font-size:13px; border:1px solid var(--c-brd); font-family:inherit; display:inline-block; transition:all .15s; }
.btn-teal:hover { background:color-mix(in srgb, var(--c) 25%, transparent); }
.btn-teal.big { width:100%; padding:12px; font-size:15px; font-weight:600; text-align:center; }
.btn-ghost { background:transparent; color:var(--c-dim); border:1px solid var(--c-brd); padding:6px 12px; border-radius:10px; cursor:pointer; font-size:12px; font-family:inherit; }
.btn-ghost:hover { border-color:var(--c-dim); color:var(--c); }
.btn-ghost.full { width:100%; margin-bottom:6px; }
.tip { font-size:11px; color:rgba(255,255,255,.2); }
.tab-sep { height:1px; background:var(--c-brd); margin:6px 0; }
.song-list { flex:1; overflow-y:auto; list-style:none; border:1px solid var(--c-brd); border-radius:10px; background:rgba(0,0,0,.1); margin-top:4px; }
.song-list li { padding:8px 12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:12px; border-bottom:1px solid var(--c-brd); color:#aaa; }
.song-list li:last-child { border-bottom:0; }
.song-list li:hover { background:var(--c-bg); }
.song-list li.playing { color:var(--c); font-weight:700; background:var(--c-bg); }
.song-list .del { background:transparent; border:0; color:rgba(255,255,255,.2); cursor:pointer; font-size:15px; padding:0 4px; }
.song-list .empty { padding:24px; text-align:center; color:rgba(255,255,255,.15); font-size:12px; cursor:default; }
#song-player { width:100%; margin-top:6px; height:36px; }

/* Poems */
.poem-grid { display:flex; flex-wrap:wrap; gap:4px; }
.poem-grid .pg-item { background:var(--c-bg); border:1px solid var(--c-brd); color:var(--c-text); padding:4px 10px; border-radius:8px; font-size:11px; cursor:pointer; transition:all .15s; }
.poem-grid .pg-item:hover { background:var(--c-bg2); }
.poem-display { flex:1; background:rgba(0,0,0,.1); border-radius:12px; padding:16px; margin-top:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1px solid var(--c-brd); }
.poem-display.hidden { display:none; }
.poem-title { font-size:15px; font-weight:700; color:var(--c); }
.poem-content { font-size:14px; color:var(--c-text); line-height:1.8; text-align:center; white-space:pre-wrap; }
#poem-stop { margin-top:6px; }

/* Play */
.play-wrap { display:flex; flex-direction:column; gap:16px; flex:1; overflow-y:auto; padding:4px 0; }
.play-btns { display:flex; flex-wrap:wrap; gap:6px; }
.play-btn { background:var(--c-bg); border:1px solid var(--c-brd); color:var(--c-text); padding:8px 14px; border-radius:10px; font-size:13px; cursor:pointer; transition:all .15s; font-family:inherit; }
.play-btn:hover { background:var(--c-bg2); border-color:color-mix(in srgb, var(--c) 15%, transparent); transform:scale(1.03); }
.play-btn:active { transform:scale(.97); }
.play-btn.dance { background:color-mix(in srgb, var(--pink) 6%, transparent); border-color:color-mix(in srgb, var(--pink) 8%, transparent); color:var(--pink); }
.play-btn.dance:hover { background:color-mix(in srgb, var(--pink) 12%, transparent); }
.feed-counter { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px; background:rgba(0,0,0,.08); border-radius:14px; }
.feed-emoji { font-size:48px; }
.feed-num { font-size:40px; font-weight:700; color:var(--c); }
.feed-label { font-size:13px; color:rgba(255,255,255,.4); }
#onion-btn, #onion-give { width:80%; max-width:220px; }

/* Words */
.word-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(0,0,0,.1); border-radius:16px; padding:24px; border:1px solid var(--c-brd); }
.word-en { font-size:34px; font-weight:700; color:var(--c); letter-spacing:1px; }
.word-zh { font-size:18px; color:var(--c-text); min-height:24px; }
.word-zh.hidden { visibility:hidden; }
.word-actions { display:flex; gap:8px; }
.word-actions button { padding:8px 14px; border-radius:10px; cursor:pointer; background:transparent; color:var(--c-dim); border:1px solid var(--c-brd); font-family:inherit; font-size:13px; }
.word-actions button:hover { border-color:var(--c-dim); }
.word-actions .btn-teal { background:var(--c-bg2); color:var(--c); }
.word-stats { text-align:center; padding:10px; color:rgba(255,255,255,.4); font-size:13px; }

/* Custom words (from Teto) */
.word-add-row { display:flex; gap:6px; margin-bottom:8px; }
.word-add-row input { flex:1; background:rgba(0,0,0,.15); border:1px solid var(--c-brd); border-radius:8px; padding:6px 10px; color:var(--c-text); font-size:12px; font-family:inherit; outline:none; }
.word-add-row input:focus { border-color:var(--c-dim); }
.word-add-row input::placeholder { color:rgba(255,255,255,.15); }
.word-add-btn { padding:6px 14px; background:var(--c-bg2); color:var(--c); border:1px solid var(--c-brd); border-radius:8px; font-size:12px; cursor:pointer; font-family:inherit; }
.custom-word-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:rgba(0,0,0,.08); border:1px solid var(--c-brd); font-size:12px; margin-bottom:4px; }
.custom-word-item .en { color:var(--c-text-bright); font-weight:600; }
.custom-word-item .zh { color:var(--c-dim); }
.custom-word-item .action { cursor:pointer; font-size:13px; opacity:.5; }
.custom-word-item .action:hover { opacity:1; }

/* Settings */
.set-wrap { flex:1; overflow-y:auto; padding:4px 2px; font-size:13px; color:var(--c-text); min-height:0; }
.set-wrap::-webkit-scrollbar { width:4px; }
.set-wrap::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--c) 10%, transparent); border-radius:4px; }
.set-label { display:block; margin-bottom:10px; font-size:12px; color:var(--c-dim); }
.set-label input, .set-label select {
  display:block; width:100%; padding:8px 10px; margin-top:4px;
  background:#fff; border:1px solid var(--c-brd);
  border-radius:10px; font-size:13px; font-family:inherit; color:var(--c-text); outline:none;
}
.set-label input:focus, .set-label select:focus { border-color:var(--c-dim); }
.set-label input[type="range"] { padding:0; background:transparent; border:0; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 4px; }
.set-status { font-size:12px; color:rgba(255,255,255,.3); flex:1; }
.set-status.ok { color:#4c9; font-weight:600; }
.set-status.err { color:#e55; }
.set-status.busy { color:var(--c); }
.set-sep { height:1px; background:var(--c-brd); margin:12px 0; }
.eye-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin-bottom:10px; }
.eye-label { font-size:11px; color:rgba(255,255,255,.3); display:block; margin-bottom:2px; }
.eye-grid input[type="range"] { width:100%; }

/* Help */
.help-wrap { flex:1; overflow-y:auto; padding:4px; font-size:13px; color:#aaa; line-height:1.6; }
.help-wrap::-webkit-scrollbar { width:4px; }
.help-wrap::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--c) 10%, transparent); border-radius:4px; }
.help-wrap h3 { color:var(--c); margin:10px 0 6px; font-size:14px; }
.help-wrap code { background:var(--c-bg); padding:1px 6px; border-radius:4px; font-size:12px; color:var(--c); }
.help-wrap p { margin-bottom:6px; }

@media (max-width:600px) {
  .miku-panel { width:98vw; height:70vh; right:1vw; bottom:160px; }
  .miku-pet { width:120px; right:12px; bottom:12px; }
}