/* =========================================================
   风格 · 晴窗（Daylight）
   浅雾底 + 通透白卡 + 大圆角 + 柔和双层阴影 + 蓝青强调。
   与纸间的主要区别：圆角、阴影、分段控件胶囊化、工具栏胶囊。
   ========================================================= */

html[data-theme="daylight"] {
  --accent: #2f6df0;
  --accent-strong: #1d55cc;
  --accent-ink: #ffffff;
  --primary: var(--accent);
  --primary-strong: var(--accent-strong);
  --primary-weak: #e8f0ff;
  --primary-faint: #f3f7ff;

  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --surface-sunken: #f7f9fc;
  --surface-rgb: 255 255 255;

  --text: #17202e;
  --text-2: #5c6a80;
  --text-3: #8b97a9;
  --line: #e6ebf4;
  --line-strong: #d7dfec;
  --teal: #12907f;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 5px rgb(20 34 58 / .05), 0 22px 48px -30px rgb(20 34 58 / .28);
  --shadow-sm: 0 1px 2px rgb(20 34 58 / .05), 0 8px 22px -16px rgb(20 34 58 / .18);
  color-scheme: light;
}

html[data-theme="daylight"] body {
  background-image:
    radial-gradient(1100px 520px at 84% -14%, rgb(47 109 240 / .07), transparent 66%),
    radial-gradient(820px 460px at 2% 104%, rgb(18 144 127 / .06), transparent 62%);
  background-attachment: fixed;
}
html[data-theme="daylight"][data-has-bg] body { background-image: none; }

/* ---------- 侧栏：白色 + 胶囊选中 ---------- */
html[data-theme="daylight"] .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
}
html[data-theme="daylight"] .shell { grid-template-columns: 248px 1fr; }
html[data-theme="daylight"] .brand-name { font-size: 16px; letter-spacing: -.01em; }
html[data-theme="daylight"] .nav { gap: 2px; }
html[data-theme="daylight"] .nav-item {
  border-radius: 11px; padding: 10px 12px; font-size: 13.5px;
  transition: background .18s, color .18s;
}
html[data-theme="daylight"] .nav-item:hover { background: var(--surface-2); color: var(--text); }
html[data-theme="daylight"] .nav-item.active {
  background: var(--primary-weak); color: var(--accent-strong); font-weight: 620;
}
html[data-theme="daylight"] .nav-badge { background: #e0574c; border-radius: 999px; }

/* ---------- 卡片：大圆角 + 柔和双层阴影 ---------- */
html[data-theme="daylight"] .card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-theme="daylight"] .card:hover { box-shadow: var(--shadow); }
html[data-theme="daylight"] .page-title { font-size: 26px; font-weight: 680; letter-spacing: -.025em; }
html[data-theme="daylight"] .page-desc { font-size: 13px; color: var(--text-2); }

/* ---------- 按钮：胶囊主按钮 ---------- */
html[data-theme="daylight"] .btn {
  border-radius: 11px; font-size: 14px; font-weight: 600;
  box-shadow: none; transition: background .18s, box-shadow .18s, transform .12s, border-color .18s;
}
html[data-theme="daylight"] .btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 6px 16px -8px rgb(47 109 240 / .65);
}
html[data-theme="daylight"] .btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
html[data-theme="daylight"] .btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text-2); }
html[data-theme="daylight"] .btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); background: var(--primary-faint); }
html[data-theme="daylight"] .btn-sm { border-radius: 999px; font-size: 12.5px; padding: 0 14px; }

/* ---------- 输入框：圆角 + 聚焦柔光 ---------- */
html[data-theme="daylight"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="daylight"] textarea,
html[data-theme="daylight"] select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 13.5px;
}
html[data-theme="daylight"] input:focus,
html[data-theme="daylight"] textarea:focus,
html[data-theme="daylight"] select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(47 109 240 / .16);
  outline: none;
}

/* ---------- 分段控件：胶囊化（与纸间的方角分段形成明显差异） ---------- */
html[data-theme="daylight"] .seg {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px;
}
html[data-theme="daylight"] .seg-btn {
  border-radius: 999px; font-size: 12.5px; border: 0;
  transition: background .18s, color .18s, box-shadow .18s;
}
html[data-theme="daylight"] .seg-btn.is-active {
  background: var(--surface); color: var(--text); font-weight: 620; box-shadow: var(--shadow-sm);
}

/* ---------- 工具条 / 媒体控制：胶囊浮动条 ---------- */
html[data-theme="daylight"] .duo-actions { gap: 8px; }
html[data-theme="daylight"] .duo-actions .btn { border-radius: 999px; }
html[data-theme="daylight"] .media-bar,
html[data-theme="daylight"] .share-media-row {
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
}
html[data-theme="daylight"] .share-media-row .btn,
html[data-theme="daylight"] .media-bar .btn { border-radius: 999px; }

/* ---------- 动态流 ---------- */
html[data-theme="daylight"] .post { border-radius: var(--radius); }
html[data-theme="daylight"] .post-name { font-size: 13.5px; font-weight: 640; }
html[data-theme="daylight"] .post-content { font-size: 13.5px; line-height: 1.78; }
html[data-theme="daylight"] .chip { border-radius: 999px; border-color: transparent; background: var(--surface-2); color: var(--text-2); }
html[data-theme="daylight"] .chip-topic { background: var(--primary-weak); color: var(--accent-strong); border-radius: 999px; }

/* ---------- 任务 / 音乐 / 我的 ---------- */
html[data-theme="daylight"] .task-item,
html[data-theme="daylight"] .music-item,
html[data-theme="daylight"] .me-link,
html[data-theme="daylight"] .stat-card {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: none;
  transition: box-shadow .18s, transform .12s, border-color .18s;
}
html[data-theme="daylight"] .task-item:hover,
html[data-theme="daylight"] .music-item:hover,
html[data-theme="daylight"] .me-link:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }

/* ---------- 弹窗：大圆角 + 深投影 ---------- */
html[data-theme="daylight"] .dialog,
html[data-theme="daylight"] .announce-modal {
  border-radius: 24px; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -44px rgb(9 17 30 / .55);
}
html[data-theme="daylight"] .dialog-title,
html[data-theme="daylight"] .announce-title { font-size: 18px; font-weight: 660; letter-spacing: -.02em; }
html[data-theme="daylight"] .modal-overlay { background: rgb(15 24 38 / .42); }
html[data-theme="daylight"] .modal-close { border-radius: 50%; }

/* ---------- 房间 ---------- */
html[data-theme="daylight"] .duo-video-box { border-radius: 16px; }
html[data-theme="daylight"] .duo-video { border-radius: var(--radius); }
html[data-theme="daylight"] .share-stage { border-radius: 18px; box-shadow: 0 30px 70px -46px rgb(9 17 30 / .5); }
html[data-theme="daylight"] .share-stage-badge { border-radius: 999px; padding: 3px 10px; }
html[data-theme="daylight"] .room-code-value {
  border-radius: var(--radius-sm); background: var(--surface-2); border-color: var(--line);
  font-family: "SF Mono", Consolas, monospace; letter-spacing: .14em;
}

/* ---------- 消息 / 聊天：气泡大圆角 ---------- */
html[data-theme="daylight"] .chat-bubble {
  border-radius: 14px 14px 14px 5px; border-color: transparent; background: var(--surface-2);
}
html[data-theme="daylight"] .chat-msg.mine .chat-bubble {
  border-radius: 14px 14px 5px 14px; background: var(--accent); border-color: transparent; color: var(--accent-ink);
}
html[data-theme="daylight"] .chat-input-row input { border-radius: 999px; padding-left: 16px; }
html[data-theme="daylight"] .chat-input-row .btn { border-radius: 999px; }
html[data-theme="daylight"] .conv-row { border-radius: var(--radius-sm); }
html[data-theme="daylight"] .conv-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

/* ---------- 音乐厅 ---------- */
html[data-theme="daylight"] .music-card { border-radius: 22px; }
html[data-theme="daylight"] .turntable {
  border-radius: 24px;
  background: linear-gradient(155deg, #f4f7fc, #ffffff);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
html[data-theme="daylight"] .turntable-label {
  background: radial-gradient(circle at 34% 28%, #ffffff, #dfe8f6 62%, #c9d6e8);
}
html[data-theme="daylight"] .turntable-label::after { background: var(--accent); }

/* ---------- 顶栏 / 提示 ---------- */
html[data-theme="daylight"] .topbar {
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
html[data-theme="daylight"] .toast { border-radius: 999px; border: 1px solid var(--line); }

/* ---------- 等级徽章：胶囊 + 蓝青细边 + 经验进度 ---------- */
html[data-theme="daylight"] .level-chip {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  background: var(--primary-faint);
  color: var(--accent-strong);
}
html[data-theme="daylight"] .level-chip::before { background: rgb(47 109 240 / .12); }
html[data-theme="daylight"] .level-chip-bar {
  background: linear-gradient(90deg, #7fb0ff, var(--accent));
  border-radius: 999px;
}
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  html[data-theme="daylight"] .level-chip { border-color: var(--line-strong); }
}

/* ---------- 有背景时：卡片变半透明玻璃，圆角保留 ---------- */
html[data-theme="daylight"][data-has-bg] .sidebar { background-color: rgb(var(--surface-rgb) / calc(var(--panel-alpha) * .8)); }
html[data-theme="daylight"][data-has-bg] .card { background-color: rgb(var(--surface-rgb) / var(--panel-alpha)); }