/* =========================================================
 * theme.css — 「柔雾玻璃」主题＋个人任务中心样式＋各种配色
 * 个人主题一律写成 body.space-me.th-xxx { 变数 }，离开个人页就完全不影响团队页。
 * ========================================================= */
:root {
  --font: "Fredoka", "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #2b2540; --muted: #7d7794; --soft: #a39db8;
  --accent: #6f6af0; --accent-dark: #5650d6; --accent-2: #4f9bff;
  --bg1: #ffd6e0; --bg2: #c9e0ff; --bg3: #e1d6ff; --bg4: #ffe6cf; --bgbase: #f6f1fc;
  --h1: #ffd6e0; --h2: #c9e0ff; --h3: #e1d6ff;
  --sk1: #cfe3ff; --sk2: #e8f1ff; --sk3: #fff4f8;
  --glass: rgba(255, 255, 255, .62); --glass-hi: rgba(255, 255, 255, .86); --glass-edge: rgba(255, 255, 255, .85);
  --line: rgba(120, 110, 170, .15);
  --shadow: 0 22px 50px -24px rgba(70, 56, 150, .35); --shadow-sm: 0 10px 24px -16px rgba(70, 56, 150, .35);
  --r1: 28px; --r2: 20px; --r3: 14px;
  --btn-grad: linear-gradient(135deg, #7d79f5, #4f9bff);
}

/* ---------- 图案 ---------- */
.face-img { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; }
.face-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.face-img .emo { font-size: 1.9em; line-height: 1; }
.brand-logo.face-img { background: #fff; box-shadow: var(--shadow-sm); font-size: 14px; }
.brand-logo.no-face { display: none; }
.hero-face .emo { font-size: 40px; }
.ge-icon .emo { font-size: 32px; }
.title-face { width: 34px; height: 34px; vertical-align: middle; margin-right: 6px; font-size: 12px; }
.title-face.no-face { display: none; }
.face { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.face.emo { display: grid; place-items: center; font-size: 28px; line-height: 1; }

/* =========================================================
 * 个人空间：配色（只在 body.space-me 时生效）
 * ========================================================= */
body.space-me:not(.face-mine) .bg-tile { display: none; }
body.space-me.th-default {}
body.space-me.th-sakura { --accent: #e86a92; --accent-dark: #c24a73; --accent-2: #ff9eb8; --ink: #3d2430; --muted: #8f6b7a; --bg1: #ffd0de; --bg2: #ffe3ec; --bg3: #fbd5e5; --bg4: #fff0f4; --bgbase: #fff5f8; --sk1: #ffe1ea; --sk2: #fff0f5; --sk3: #fffafc; --btn-grad: linear-gradient(135deg, #f07aa0, #ffa6c1); }
body.space-me.th-peach { --accent: #f08a5d; --accent-dark: #c8643a; --accent-2: #ffb07a; --ink: #3e2a20; --muted: #92705f; --bg1: #ffd6c2; --bg2: #ffe9d9; --bg3: #ffd9cc; --bg4: #fff2e5; --bgbase: #fff7f1; --sk1: #ffe4d4; --sk2: #fff1e6; --sk3: #fffaf5; --btn-grad: linear-gradient(135deg, #f58b62, #ffb36b); }
body.space-me.th-candy { --accent: #d65db1; --accent-dark: #a93f8b; --accent-2: #5ec8ff; --ink: #3a2340; --muted: #8b6c92; --bg1: #ffcdee; --bg2: #ccecff; --bg3: #fff0b8; --bg4: #d9ffe9; --bgbase: #fff6fc; --sk1: #d9f0ff; --sk2: #ffe6f6; --sk3: #fffbe6; --btn-grad: linear-gradient(135deg, #e36ac0, #63c7ff); }
body.space-me.th-lemon { --accent: #c9940a; --accent-dark: #976d00; --accent-2: #8fcf4a; --ink: #3a3220; --muted: #857a5c; --bg1: #fff2a8; --bg2: #fff9d6; --bg3: #f4ffc9; --bg4: #fff4cf; --bgbase: #fffdf0; --sk1: #fff8c9; --sk2: #fffbe3; --sk3: #fffef5; --btn-grad: linear-gradient(135deg, #e0aa18, #9fd35a); }
body.space-me.th-matcha { --accent: #6a9a4f; --accent-dark: #4b7535; --accent-2: #a7c96c; --ink: #26331f; --muted: #6e7e63; --bg1: #d9edc9; --bg2: #eef6e2; --bg3: #e5f0d3; --bg4: #f4f7e8; --bgbase: #f7fbf2; --sk1: #e1f0d4; --sk2: #eff7e7; --sk3: #fafdf6; --btn-grad: linear-gradient(135deg, #79a85a, #b0cf72); }
body.space-me.th-forest { --accent: #2f7d5b; --accent-dark: #1f5c41; --accent-2: #6fb38a; --ink: #1d2f26; --muted: #5f7569; --bg1: #c7e6d4; --bg2: #e2f0e6; --bg3: #d4e8dc; --bg4: #eef5ec; --bgbase: #f3f8f4; --sk1: #d6ebe0; --sk2: #e9f4ee; --sk3: #f7fbf8; --btn-grad: linear-gradient(135deg, #34885f, #6fb38a); }
body.space-me.th-mint { --accent: #20a691; --accent-dark: #127a6a; --accent-2: #63d1e0; --ink: #1e3532; --muted: #5f807b; --bg1: #c4f2e8; --bg2: #dff8f3; --bg3: #cdeff6; --bg4: #ebfbf7; --bgbase: #f2fcfa; --sk1: #d3f5ee; --sk2: #e8faf6; --sk3: #f7fefc; --btn-grad: linear-gradient(135deg, #2bb3a0, #63c9e0); }
body.space-me.th-sky { --accent: #3d8fe0; --accent-dark: #2569b0; --accent-2: #7fc4ff; --ink: #1f2d40; --muted: #63778f; --bg1: #cde4ff; --bg2: #e4f1ff; --bg3: #d6e8ff; --bg4: #f0f7ff; --bgbase: #f4f9ff; --sk1: #c9e2ff; --sk2: #e3f0ff; --sk3: #f7fbff; --btn-grad: linear-gradient(135deg, #4a96e6, #7fc4ff); }
body.space-me.th-ocean { --accent: #1f6fb2; --accent-dark: #134f82; --accent-2: #33b5c9; --ink: #172a3a; --muted: #5a7487; --bg1: #bcdcf3; --bg2: #d4f0f4; --bg3: #c8dcf0; --bg4: #e5f4f7; --bgbase: #eef7fa; --sk1: #bfe0f5; --sk2: #dbf0f7; --sk3: #f1f9fb; --btn-grad: linear-gradient(135deg, #2475ba, #36b8cb); }
body.space-me.th-lavender { --accent: #8b6fd6; --accent-dark: #6a4fb6; --accent-2: #c29cf0; --ink: #2d2442; --muted: #7e7396; --bg1: #e2d6ff; --bg2: #efe8ff; --bg3: #e8dcfb; --bg4: #f6f1ff; --bgbase: #f8f5ff; --sk1: #e6ddff; --sk2: #f1ecff; --sk3: #fbf9ff; --btn-grad: linear-gradient(135deg, #9375dc, #c49ef0); }
body.space-me.th-sunset { --accent: #e35d5b; --accent-dark: #b9403f; --accent-2: #ffa25c; --ink: #3a2026; --muted: #8e6b70; --bg1: #ffcfb2; --bg2: #ffc4d4; --bg3: #ffd9a8; --bg4: #e9cfff; --bgbase: #fff4f0; --sk1: #ffd4b8; --sk2: #ffd9e3; --sk3: #fff2e3; --btn-grad: linear-gradient(135deg, #ee6a5f, #ffa25c); }
body.space-me.th-morandi { --accent: #8a7f8d; --accent-dark: #675e6a; --accent-2: #9fb0a8; --ink: #34303a; --muted: #7c7680; --bg1: #e5dcd5; --bg2: #d8dfe0; --bg3: #e1d6dc; --bg4: #ece6df; --bgbase: #f3f0ed; --sk1: #e0e2e3; --sk2: #ece8e5; --sk3: #f7f5f3; --btn-grad: linear-gradient(135deg, #948998, #a6b5ad); }
body.space-me.th-coffee { --accent: #8b5e3c; --accent-dark: #6a4329; --accent-2: #c19a6b; --ink: #33261d; --muted: #7f6a5b; --bg1: #ead8c4; --bg2: #f3e8dc; --bg3: #e6d4c0; --bg4: #f6efe6; --bgbase: #f8f3ed; --sk1: #efe2d3; --sk2: #f6eee5; --sk3: #fcf9f5; --btn-grad: linear-gradient(135deg, #966645, #c7a074); }
body.space-me.th-simple { --accent: #444; --accent-dark: #222; --accent-2: #777; --ink: #222; --muted: #6f6f6f; --bg1: #eee; --bg2: #f4f4f4; --bg3: #ececec; --bg4: #f6f6f6; --bgbase: #f9f9f9; --sk1: #f0f0f0; --sk2: #f6f6f6; --sk3: #fcfcfc; --btn-grad: linear-gradient(135deg, #444, #666); --glass: rgba(255, 255, 255, .8); }
body.space-me.th-night { --accent: #9d97ff; --accent-dark: #c4c0ff; --accent-2: #6fb6ff; --ink: #ecebff; --muted: #a9a6c9; --bg1: #3a2f6b; --bg2: #1f3260; --bg3: #36265a; --bg4: #2a2550; --bgbase: #171530; --sk1: #252050; --sk2: #2f2a63; --sk3: #3e3478; --btn-grad: linear-gradient(135deg, #8a84ff, #5fa8ff); --glass: rgba(40, 36, 80, .55); --glass-hi: rgba(56, 50, 104, .82); --glass-edge: rgba(255, 255, 255, .12); --line: rgba(255, 255, 255, .1); --shadow: 0 22px 50px -24px rgba(0, 0, 0, .6); --shadow-sm: 0 10px 24px -16px rgba(0, 0, 0, .6); }
body.space-me.th-midnight { --accent: #7fb2ff; --accent-dark: #a9cbff; --accent-2: #8ef0d6; --ink: #e8eaf0; --muted: #9a9fae; --bg1: #1d1f2b; --bg2: #161822; --bg3: #20202c; --bg4: #14141c; --bgbase: #0f0f15; --sk1: #12131c; --sk2: #191b27; --sk3: #232636; --btn-grad: linear-gradient(135deg, #5f8fe8, #4ccfb0); --glass: rgba(30, 32, 44, .66); --glass-hi: rgba(42, 45, 60, .9); --glass-edge: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .08); --shadow: 0 22px 50px -24px rgba(0, 0, 0, .8); --shadow-sm: 0 10px 24px -16px rgba(0, 0, 0, .8); }
body.space-me.is-dark .main .inp { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: var(--ink); }
body.space-me.is-dark .main .inp::placeholder { color: var(--muted); }
body.space-me.is-dark .tag.soft, body.space-me.is-dark .cnt { background: rgba(255, 255, 255, .1); color: var(--muted); }
body.space-me.is-dark .who select { color: var(--ink); }
body.space-me.is-dark .avatar-stack .av { border-color: #2a2550; }
body.space-me.is-dark .quad { color: #2b2540; }

/* =========================================================
 * 个人页共用
 * ========================================================= */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.plan-head h2 { font-size: 27px; display: flex; align-items: center; gap: 8px; }
.ph-tools { display: flex; align-items: center; gap: 6px; }
.toggle { display: flex; background: var(--glass-hi); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 3px; }
.toggle button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); }
.toggle button[aria-pressed="true"] { background: var(--btn-grad); color: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip.urg[aria-pressed="true"] { background: #ff5a5f; }
.plan-pills { gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; }
.plan-pills::-webkit-scrollbar { display: none; }
.plan-pills a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--glass-hi); border: 1px solid var(--glass-edge); color: var(--ink); font-weight: 700; font-size: 13px; white-space: nowrap; }
.plan-pills a.active { background: var(--btn-grad); color: #fff; border-color: transparent; }
.center { text-align: center; }
.note { margin-top: 10px; }
.peek-plan { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.peek-plan select { margin-left: 6px; }
.readonly-note { background: #fff1c2; color: #6b4e00; }

/* 输入框 */
.add-box { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.add-inp { font-size: 16px; min-height: 48px; }
.add-opts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.add-opts .btn { margin-left: auto; }
.habit-ask { background: linear-gradient(135deg, var(--glass-hi), var(--glass)); border-color: var(--accent); }

/* 清单列 */
.plist { padding: 14px 16px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow.done .ptext { text-decoration: line-through; color: var(--muted); }
.prow.urgent .ptext { color: #d33; font-weight: 700; }
.ptext { flex: 1; min-width: 0; word-break: break-word; }
.pcheck { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--accent); background: transparent; color: #fff; font-weight: 900; display: grid; place-items: center; padding: 0; }
.pcheck.on { background: var(--accent); }
.r-when { flex: none; font-weight: 700; color: var(--accent-dark); font-size: 13px; min-width: 76px; }
.remind-big { font-size: 20px; font-weight: 700; }

/* =========================================================
 * 天空与气球
 * ========================================================= */
.sky {
  position: relative; border-radius: var(--r1); overflow: hidden; margin-bottom: 14px; min-height: 260px;
  background: linear-gradient(180deg, var(--sk1), var(--sk2) 60%, var(--sk3));
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
.clouds i { position: absolute; background: rgba(255, 255, 255, .85); border-radius: 999px; filter: blur(.5px); animation: cloud 60s linear infinite; }
.clouds i::before, .clouds i::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.clouds i:nth-child(1) { width: 120px; height: 34px; top: 30px; left: -140px; }
.clouds i:nth-child(1)::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.clouds i:nth-child(1)::after { width: 40px; height: 40px; left: 60px; top: -16px; }
.clouds i:nth-child(2) { width: 90px; height: 26px; top: 46%; left: -110px; animation-duration: 80s; animation-delay: -30s; opacity: .7; }
.clouds i:nth-child(2)::before { width: 40px; height: 40px; left: 14px; top: -20px; }
.clouds i:nth-child(3) { width: 140px; height: 38px; bottom: 26px; left: -160px; animation-duration: 95s; animation-delay: -60s; opacity: .8; }
.clouds i:nth-child(3)::before { width: 60px; height: 60px; left: 26px; top: -30px; }
.clouds i:nth-child(3)::after { width: 46px; height: 46px; left: 74px; top: -18px; }
body.space-me.is-dark .clouds i { background: rgba(255, 255, 255, .12); }
@keyframes cloud { to { transform: translateX(calc(100vw + 340px)); } }

.balloon {
  position: absolute; transform: translateX(-50%); width: 96px; border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; cursor: pointer; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.sky.rise .balloon { animation: rise .9s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: var(--d); }
.balloon > * { animation: sway var(--sw) ease-in-out infinite alternate; animation-delay: calc(var(--d) * -7); }
.b-body {
  position: relative; width: 78px; height: 92px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), transparent 28%), var(--c);
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .1), 0 12px 20px -12px rgba(60, 40, 100, .5);
  display: grid; place-items: center;
}
.b-shine { position: absolute; width: 14px; height: 22px; left: 16px; top: 14px; border-radius: 50%; background: rgba(255, 255, 255, .75); transform: rotate(25deg); }
.b-body .b-face { width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); background: #fff; }
.b-body .b-face.emo { font-size: 30px; background: rgba(255, 255, 255, .7); }
.b-knot { width: 10px; height: 8px; margin-top: -2px; background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: brightness(.9); }
.b-string { width: 2px; height: 22px; background: linear-gradient(rgba(90, 80, 120, .5), rgba(90, 80, 120, .15)); transform-origin: top; animation: string 2.4s ease-in-out infinite alternate; }
.b-label {
  margin-top: 2px; max-width: 120px; padding: 4px 9px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: #2b2540;
  font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: 0 6px 14px -8px rgba(60, 40, 100, .5); word-break: break-all;
}
.b-label small { display: block; font-size: 10px; color: #8a83a6; font-weight: 500; }
.balloon.urgent { z-index: 3; }
.balloon.urgent .b-body { width: 96px; height: 112px; animation: sway var(--sw) ease-in-out infinite alternate, glow 1.2s ease-in-out infinite; }
.balloon.urgent .b-label { background: #fff0f0; color: #c0262d; }
.balloon.team .b-label { border: 1.5px solid color-mix(in srgb, var(--accent) 50%, white); }
.balloon:hover .b-body, .balloon.sel .b-body { filter: brightness(1.05) saturate(1.1); }
.balloon.sel { z-index: 5; }
.balloon:focus-visible { outline: none; }
.balloon:focus-visible .b-body { outline: 3px solid var(--accent); outline-offset: 3px; }
.balloon.popping .b-body { animation: popB .3s ease-in forwards; }
.balloon.popping .b-label, .balloon.popping .b-string, .balloon.popping .b-knot { animation: fadeOut .25s forwards; }
@keyframes rise { from { transform: translate(-50%, 340px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes sway { from { transform: translateY(0) rotate(-2.5deg); } to { transform: translateY(-9px) rotate(2.5deg); } }
@keyframes string { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes glow { 0%, 100% { box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .1), 0 0 0 0 rgba(255, 60, 60, .55); } 50% { box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .1), 0 0 24px 10px rgba(255, 60, 60, .45); } }
@keyframes popB { 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }

.empty-sky { display: grid; place-items: center; text-align: center; padding: 40px 20px; color: var(--muted); font-weight: 700; }
.empty-face { width: 90px; height: 90px; margin-bottom: 8px; font-size: 22px; }
.empty-face.no-face { display: none; }

/* 气球旁的确认小卡 */
.pop-card {
  position: absolute; z-index: 20; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .97); color: #2b2540;
  box-shadow: 0 18px 40px -16px rgba(40, 30, 90, .5); animation: popIn .18s;
}
.pop-card b { display: block; font-size: 15px; word-break: break-word; }
.pop-card p { margin: 2px 0 8px; color: #7d7794; font-size: 13px; }
.pc-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-btns .btn.primary { flex: 1 1 100%; }

/* 点爆特效 */
.burst { position: fixed; z-index: 950; pointer-events: none; width: 0; height: 0; }
.burst .bit { position: absolute; left: 0; top: 0; border-radius: 2px; animation: bit .9s cubic-bezier(.15, .7, .3, 1) forwards; }
.burst .star { position: absolute; left: 0; top: 0; color: #ffd166; font-size: 18px; animation: bit .9s ease-out forwards; text-shadow: 0 0 6px #fff; }
.burst .ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #fff; animation: ring .5s ease-out forwards; }
@keyframes bit { to { transform: translate(var(--x), var(--y)) rotate(var(--r, 180deg)); opacity: 0; } }
@keyframes ring { to { transform: scale(7); opacity: 0; border-width: 1px; } }
.cheer { position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; pointer-events: none; transition: opacity .45s; }
.cheer.out { opacity: 0; }
.cheer-card { background: rgba(255, 255, 255, .96); color: #2b2540; padding: 20px 26px; border-radius: 26px; text-align: center; box-shadow: 0 30px 60px -20px rgba(40, 30, 90, .45); animation: cheerIn .4s cubic-bezier(.2, .9, .3, 1.4); max-width: 80vw; }
.cheer-card .cheer-face { width: 74px; height: 74px; margin: 0 auto 8px; border: 4px solid #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); }
.cheer-card .cheer-face.emo { font-size: 46px; }
.cheer-card p { font-size: 19px; font-weight: 900; margin: 0; }
.cheer.big .cheer-card { padding: 30px 36px; }
.cheer.big .cheer-face { width: 110px; height: 110px; }
.cheer.big p { font-size: 24px; }
@keyframes cheerIn { from { transform: scale(.6); opacity: 0; } }

/* =========================================================
 * 迷你行事历
 * ========================================================= */
.mini-cal { background: var(--glass-hi); border: 1px solid var(--glass-edge); border-radius: var(--r2); padding: 10px; }
.mini-cal:empty { display: none !important; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cw { font-size: 11px; color: var(--muted); padding: 2px 0; }
.cd { position: relative; border: 0; background: none; aspect-ratio: 1; border-radius: 10px; font-size: 13px; color: var(--ink); padding: 0; }
.cd:hover { background: var(--glass); }
.cd.today { font-weight: 900; color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cd.sel { background: var(--btn-grad); color: #fff; }
.dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; }
.dots b, .cal-legend b { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.d-p { background: #ff8fb0; } .d-b { background: #4f9bff; } .d-r { background: #ff3b3b; }
.cd.sel .dots b { box-shadow: 0 0 0 1px #fff; }
.cal-legend { display: flex; gap: 10px; justify-content: center; font-size: 11px; color: var(--muted); margin-top: 6px; }
.cal-legend span { display: flex; align-items: center; gap: 3px; }
.cal-m summary { cursor: pointer; }
.cal-m[open] .card-h { margin-bottom: 6px; }

/* =========================================================
 * 四象限
 * ========================================================= */
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quad { border-radius: var(--r2); padding: 14px; min-height: 190px; box-shadow: var(--shadow-sm); border: 1px solid rgba(255, 255, 255, .7); color: #2b2540; }
.q-blue { background: #dcebff; } .q-red { background: #ffe0e0; } .q-green { background: #dcf5e4; } .q-yellow { background: #fff3c9; }
.quad header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.quad header div { flex: 1; }
.quad header b { display: block; font-size: 15px; }
.quad header small { color: #6d6785; font-size: 12px; }
.q-add { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); font-size: 20px; line-height: 1; font-weight: 700; color: #2b2540; flex: none; }
.q-form { margin: 6px 0; }
.q-form .inp { background: #fff; color: #2b2540 !important; }
.quad ul { list-style: none; margin: 0; padding: 0; }
.quad li { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.q-chk { flex: 1; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; min-width: 0; }
.q-chk input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: #6f6af0; }
.q-chk span { word-break: break-word; }
.quad li.done .q-chk span { text-decoration: line-through; text-decoration-thickness: 2px; color: #8a83a6; }
.q-empty { color: #8a83a6; font-size: 13px; }

/* =========================================================
 * 专注时钟
 * ========================================================= */
.focus-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ring-wrap { position: relative; width: min(280px, 72vw); aspect-ratio: 1; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 14; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.focus-box.brk .ring-fg { stroke: #2bb3a0; }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-text b { font-family: "Fredoka", var(--font); font-size: clamp(44px, 13vw, 64px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.ring-text span { color: var(--muted); font-weight: 700; font-size: 14px; }
.f-btns { display: flex; gap: 10px; align-items: center; }
.inp.mini { width: 84px; min-height: 34px; padding: 4px 10px; }
.vol input { width: 100%; accent-color: var(--accent); }
.chips.amb { margin-bottom: 8px; }

/* =========================================================
 * 灵感笔记
 * ========================================================= */
.note-new { padding: 14px; }
.colors { display: flex; gap: 8px; }
.dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .08); padding: 0; }
.dot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.search { margin-bottom: 12px; }
.notes { columns: 2; column-gap: 12px; }
.note {
  display: block; width: 100%; break-inside: avoid; margin: 0 0 12px; text-align: left; border: 0; border-radius: 6px 6px 18px 6px;
  padding: 14px 14px 10px; color: #2b2540; box-shadow: 0 10px 22px -14px rgba(60, 40, 100, .5); transform: rotate(var(--tilt)); position: relative;
  transition: transform .15s;
}
.note:hover { transform: rotate(0) scale(1.02); }
.note-t { display: block; white-space: pre-wrap; word-break: break-word; font-size: 14px; max-height: 260px; overflow: hidden; }
.note small { display: block; margin-top: 8px; color: rgba(43, 37, 64, .5); font-size: 11px; }
.note .pin { position: absolute; top: -8px; right: 8px; }
.n-yellow { background: #fff3b0; } .n-pink { background: #ffd6e3; } .n-blue { background: #d4e8ff; } .n-green { background: #d6f5df; } .n-purple { background: #e6dcff; }

/* =========================================================
 * 我的主题
 * ========================================================= */
.preview-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 18px 16px 12px; background: linear-gradient(180deg, var(--sk1), var(--sk3)); }
.preview-row p { flex-basis: 100%; text-align: center; margin: 6px 0 0; }
.mini-b { display: flex; flex-direction: column; align-items: center; animation: sway 3s ease-in-out infinite alternate; }
.mini-b:nth-child(2n) { animation-delay: -1.5s; }
.mini-b .b-body { width: 52px; height: 62px; }
.mini-b .b-face { width: 34px; height: 34px; border-width: 2px; }
.mini-b .b-face.emo { font-size: 20px; }
.mini-b .b-string { height: 16px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid transparent; background: var(--glass-hi); border-radius: 16px; padding: 10px 6px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink); }
.theme-opt[aria-pressed="true"], .theme-opt.on { border-color: var(--accent); }
.sw { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); overflow: hidden; }
.sw i { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.sw input[type=color] { position: absolute; inset: -8px; width: 60px; height: 60px; opacity: 0; cursor: pointer; }
.face-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.face-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid transparent; background: var(--glass-hi); border-radius: 16px; padding: 10px 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.face-opt[aria-pressed="true"] { border-color: var(--accent); }
.fo-pre { display: flex; gap: 2px; height: 34px; align-items: center; }
.fo-pre img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.fo-pre i { font-style: normal; font-size: 24px; }
.pack { border-top: 1px solid var(--line); padding: 10px 0; }
.pack-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pack-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.pf { position: relative; }
.pf img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.pf button { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #e5484d; color: #fff; font-size: 11px; padding: 0; }
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.chk.pick { align-items: flex-start; }

/* =========================================================
 * 背景音乐
 * ========================================================= */
.music-btn {
  position: fixed; right: 16px; bottom: 20px; z-index: 820; display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; background: var(--glass-hi); border: 1px solid var(--glass-edge); color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 13px; cursor: pointer; user-select: none;
}
.music-btn.on .mb-main { color: var(--accent-dark); }
.mb-show { border: 0; background: var(--btn-grad); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
.music-card {
  position: fixed; right: 16px; bottom: 70px; z-index: 830; width: 300px; border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, .95); color: #2b2540; box-shadow: 0 22px 50px -20px rgba(40, 30, 90, .5); transition: opacity .2s;
}
.music-card[data-size="small"] { width: 230px; }
.music-card[data-size="small"] .mc-video { height: 1px; opacity: .01; overflow: hidden; }
.music-card[data-size="hide"] { opacity: 0; pointer-events: none; }
.music-card.away, .music-btn.away { opacity: 0; pointer-events: none; }
.mc-head { display: flex; align-items: center; gap: 2px; padding: 8px 10px; font-weight: 700; font-size: 13px; cursor: grab; background: rgba(120, 110, 170, .08); }
.mc-head button { border: 0; background: none; width: 28px; height: 26px; border-radius: 8px; font-size: 13px; color: #2b2540; }
.mc-head button:hover { background: rgba(120, 110, 170, .15); }
.mc-video { aspect-ratio: 16 / 9; background: #000; }
.mc-video iframe, .mc-video > div { width: 100%; height: 100%; display: block; border: 0; }
.mc-title { padding: 8px 12px 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-ctrl { display: flex; gap: 6px; padding: 8px 10px 10px; }
.mc-ctrl button { border: 0; background: rgba(120, 110, 170, .1); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #2b2540; }
.mc-ctrl button[data-m=loop] { margin-left: auto; }
.dragging { opacity: .85; cursor: grabbing; }

/* =========================================================
 * 游戏
 * ========================================================= */
.game-wrap { display: flex; justify-content: center; }
#gameCv { width: min(480px, 100%); aspect-ratio: 480 / 720; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); object-fit: contain; border-radius: 26px; box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; background: #eef2ff; }

/* =========================================================
 * 手机
 * ========================================================= */
@media (max-width: 900px) {
  .music-btn { bottom: calc(96px + env(safe-area-inset-bottom)); right: 12px; padding: 7px 12px; }
  body.space-me .music-btn { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .music-card { right: 12px; left: auto; bottom: calc(146px + env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 24px)); }
  .plan-head h2 { font-size: 21px; }
  .balloon { width: 84px; }
  .b-body { width: 66px; height: 78px; }
  .b-body .b-face { width: 42px; height: 42px; }
  .balloon.urgent .b-body { width: 82px; height: 96px; }
  .b-label { max-width: 100px; font-size: 11.5px; }
  .matrix { gap: 8px; }
  .quad { padding: 10px; min-height: 160px; font-size: 14px; }
  .quad header small { display: none; }
  .add-opts .btn { flex: 1 1 100%; }
  #gameCv { border-radius: 18px; }
}
@media (max-width: 420px) {
  .notes { columns: 2; column-gap: 8px; }
  .matrix { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .balloon, .balloon > *, .b-string, .mini-b, .clouds i, .balloon.urgent .b-body { animation: none !important; }
  .burst { display: none; }
}