/*
 * CoCanvas 花园画布视觉层。
 *
 * 本文件最后加载，只覆盖登录、模式大厅、加入房间、创建页与图像工作室的视觉表现，
 * 不改变白板坐标、同步协议或业务状态。背景图均为项目内原创静态资源；动态感来自
 * 低频背景位移与纯 CSS 花叶层，并在系统要求减少动态效果时完全停用。
 */

:root {
  --garden-art:url("assets/cocanvas-garden-bg.webp");
  --garden-page-scrim:linear-gradient(135deg,rgba(250,248,239,.72),rgba(229,242,237,.57) 48%,rgba(238,236,247,.58));
  --garden-glass:rgba(255,253,247,.76);
  --garden-glass-strong:rgba(255,253,247,.9);
  --garden-line:rgba(91,120,110,.2);
  --garden-ink:#243630;
  --garden-muted:#60736c;
  --garden-accent:#397a69;
  --garden-accent-2:#df8d74;
}

:root[data-theme="dark"] {
  --garden-page-scrim:linear-gradient(135deg,rgba(12,24,23,.8),rgba(18,30,35,.73) 48%,rgba(31,25,42,.76));
  --garden-glass:rgba(18,28,29,.78);
  --garden-glass-strong:rgba(19,29,30,.92);
  --garden-line:rgba(200,226,214,.18);
  --garden-ink:#f4f5ed;
  --garden-muted:#bdcbc4;
  --garden-accent:#82c7ad;
  --garden-accent-2:#f1a98f;
}

/* 需要氛围背景的页面共享同一张画，避免跨页面跳变和额外下载。 */
#loginPage,
#dashboardPage,
#lobbyPage,
#createPage,
#aiStudioPage {
  position:relative;
  isolation:isolate;
  background-color:#e8efea!important;
  background-image:var(--garden-page-scrim),var(--garden-art)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:50% 50%!important;
  animation:gardenBackdropDrift 30s ease-in-out infinite alternate;
}

/* 两组原创矢量花叶只作为装饰层；页面内容始终在其上方且可正常点击。 */
#loginPage::before,
#dashboardPage::before,
#lobbyPage::before,
#createPage::before,
#aiStudioPage::before {
  content:""!important;
  position:fixed!important;
  z-index:0!important;
  inset:-34vh 0 auto!important;
  width:100%!important;
  height:150vh!important;
  display:block!important;
  pointer-events:none!important;
  opacity:.46!important;
  background-color:transparent!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='250' viewBox='0 0 190 250'%3E%3Cg opacity='.82'%3E%3Cpath fill='%23829f86' d='M31 24c19 4 30 15 33 35-20 1-33-9-38-29 0-3 2-6 5-6Z'/%3E%3Cpath fill='%23d99782' d='M142 73c9 1 16 7 18 16-9 4-18 1-23-8-1-4 1-7 5-8Z'/%3E%3Cpath fill='%23f0c7b4' d='M128 67c-1-9 3-16 12-20 6 8 6 16-1 23-4 2-8 1-11-3Z'/%3E%3Cpath fill='%239db6a0' d='M89 174c17-5 31 0 42 14-15 10-30 8-43-5-2-3-2-6 1-9Z'/%3E%3Ccircle cx='132' cy='71' r='3' fill='%23d6a668'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'%3E%3Cg opacity='.68'%3E%3Cpath fill='%23aec0a7' d='M205 35c-5 19-17 29-37 30 1-20 12-32 32-35 3 0 6 2 5 5Z'/%3E%3Cpath fill='%23e5a18d' d='M57 160c10-2 18 2 23 11-7 7-16 8-24 2-3-4-3-9 1-13Z'/%3E%3Cpath fill='%23f4d8c8' d='M52 156c-7-7-8-15-3-24 10 4 15 11 13 21-2 4-6 6-10 3Z'/%3E%3Cpath fill='%238ba991' d='M158 231c19 2 31 12 37 30-19 4-34-4-42-22-1-4 1-7 5-8Z'/%3E%3Ccircle cx='56' cy='158' r='3' fill='%23ce9d64'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-repeat:repeat-x,repeat-x!important;
  background-size:190px 250px,260px 300px!important;
  background-position:0 -250px,80px -300px!important;
  animation:gardenPetalFall 22s linear infinite!important;
  will-change:background-position;
}

#loginPage > *,
#dashboardPage > *,
#lobbyPage > *,
#createPage > *,
#aiStudioPage > * { position:relative; z-index:1; }

/* 登录与注册共用同一块温暖玻璃画布。 */
#loginPage { color:var(--garden-ink); }
.login-container {
  color:var(--garden-ink)!important;
  background:var(--garden-glass-strong)!important;
  border-color:var(--garden-line)!important;
  border-radius:28px!important;
  box-shadow:0 28px 80px rgba(54,76,66,.2),inset 0 1px rgba(255,255,255,.68)!important;
  backdrop-filter:blur(22px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(118%)!important;
}
.logo-icon { border-radius:19px!important; box-shadow:0 12px 30px rgba(44,82,68,.23)!important; }
.app-title { color:var(--garden-ink)!important; }
.app-subtitle,.login-value-line { color:var(--garden-muted)!important; }
.login-tabs,.server-bar { background:rgba(255,255,255,.5)!important; border-color:var(--garden-line)!important; }
.tab-btn.active { color:#2f6f5e!important; background:rgba(255,255,255,.88)!important; border-color:rgba(74,119,103,.25)!important; }
.form-group label { color:var(--garden-muted)!important; }
.form-group input { color:var(--garden-ink)!important; background:rgba(255,255,255,.72)!important; border-color:rgba(92,120,111,.28)!important; }
.form-group input:focus { border-color:var(--garden-accent)!important; box-shadow:0 0 0 4px rgba(57,122,105,.13)!important; }
.submit-btn { background:linear-gradient(135deg,#397a69,#649d84)!important; border-color:#397a69!important; box-shadow:0 10px 24px rgba(57,122,105,.24)!important; }

/* 顶栏像半透明画框，不再切断背景。 */
.dashboard-header,.create-header,.lobby-header,.ai-studio-header {
  background:rgba(255,253,247,.76)!important;
  border-color:var(--garden-line)!important;
  backdrop-filter:blur(20px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(118%)!important;
}
:root[data-theme="dark"] .dashboard-header,
:root[data-theme="dark"] .create-header,
:root[data-theme="dark"] .lobby-header,
:root[data-theme="dark"] .ai-studio-header { background:rgba(16,25,26,.78)!important; }
.dashboard-brand strong,.create-header h1,.lobby-header h1,.ai-studio-brand-copy strong { color:var(--garden-ink)!important; }
.dashboard-brand small,.create-header p,.lobby-header p,.ai-studio-brand-copy small { color:var(--garden-muted)!important; }
.dashboard-brand-mark,.lobby-brand-mark { overflow:hidden; box-shadow:0 8px 24px rgba(45,78,67,.2); }

/* 首页主视觉保持简洁，为模式入口让出注意力。 */
.dashboard-main { padding-top:28px; }
.dashboard-hero {
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
  min-height:180px;
  color:var(--garden-ink)!important;
  background:linear-gradient(120deg,var(--garden-glass-strong),rgba(255,253,247,.58))!important;
  border-color:var(--garden-line)!important;
  box-shadow:0 24px 70px rgba(45,71,62,.16),inset 0 1px rgba(255,255,255,.6)!important;
  backdrop-filter:blur(16px) saturate(112%);
  -webkit-backdrop-filter:blur(16px) saturate(112%);
}
:root[data-theme="dark"] .dashboard-hero { background:linear-gradient(120deg,rgba(15,28,27,.9),rgba(39,31,49,.7))!important; }
.dashboard-hero h1 { color:var(--garden-ink)!important; }
.dashboard-hero p { max-width:680px; color:var(--garden-muted)!important; }
.dashboard-hero .eyebrow { color:var(--garden-accent)!important; }
.dashboard-hero-note { display:none!important; }
.dashboard-section-heading h2,.dashboard-section-heading span { color:var(--garden-ink)!important; }
.dashboard-section-heading small { color:var(--garden-muted)!important; }

/* 四种模式各自拥有原创画面；深色渐变保证任何图像位置都能读清核心文字。 */
.dashboard-mode-card {
  min-height:360px!important;
  padding:20px!important;
  color:#fff!important;
  background-color:#273a35!important;
  background-image:linear-gradient(180deg,rgba(8,17,15,.06) 0%,rgba(8,17,15,.25) 40%,rgba(7,13,14,.92) 100%),var(--mode-art)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:50% 48%!important;
  border-color:rgba(255,255,255,.2)!important;
  border-radius:24px!important;
  box-shadow:0 20px 48px rgba(39,55,49,.24)!important;
  animation:modeArtworkDrift 18s ease-in-out infinite alternate;
}
.dashboard-mode-card.solo { --mode-art:url("assets/mode-solo.webp"); }
.dashboard-mode-card.collab { --mode-art:url("assets/mode-collab.webp"); animation-duration:21s; }
.dashboard-mode-card.game { --mode-art:url("assets/mode-game.webp"); animation-duration:24s; }
.dashboard-mode-card.ai-image { --mode-art:url("assets/mode-ai-image.webp"); animation-duration:27s; }
.dashboard-mode-card::before,.dashboard-mode-card::after { content:none!important; }
.dashboard-mode-card > * { position:relative; z-index:1; }
.dashboard-mode-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,.48)!important; box-shadow:0 28px 66px rgba(31,46,40,.32)!important; }
.dashboard-mode-head { min-height:58px; }
.dashboard-mode-icon {
  color:#fff!important;
  background:rgba(11,24,21,.34)!important;
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 8px 26px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.dashboard-mode-card h2 { margin:auto 0 14px!important; color:#fff!important; font-size:27px!important; text-shadow:0 2px 14px rgba(0,0,0,.52); }
.dashboard-mode-index,.dashboard-mode-card > p,.dashboard-mode-features { display:none!important; }
.dashboard-mode-actions { margin-top:0!important; }
.mode-action.primary {
  color:#fff!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.mode-action.secondary { color:#fff!important; background:rgba(8,15,15,.35)!important; border-color:rgba(255,255,255,.22)!important; }

/* 历史画布默认收起；按钮本身沿用纸张与植物色。 */
.history-disclosure-section,.recent-room-section { padding:14px; background:var(--garden-glass); border:1px solid var(--garden-line); border-radius:20px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.history-disclosure-toggle { color:var(--garden-ink)!important; background:rgba(255,255,255,.5)!important; border-color:var(--garden-line)!important; box-shadow:none!important; }
.history-disclosure-toggle i { color:var(--garden-accent)!important; }

/* 加入与创建页成为同一套轻盈画布，而非独立深色弹层。 */
.lobby-card {
  color:var(--garden-ink)!important;
  background:var(--garden-glass-strong)!important;
  border-color:var(--garden-line)!important;
  box-shadow:0 28px 80px rgba(45,71,62,.2),inset 0 1px rgba(255,255,255,.58)!important;
  backdrop-filter:blur(18px) saturate(112%);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
}
.lobby-card h2 { color:var(--garden-ink)!important; }
.lobby-card > p,.lobby-join-form > label { color:var(--garden-muted)!important; }
.lobby-orbit { display:none!important; }
.lobby-mode-switch { background:rgba(255,255,255,.5)!important; border-color:var(--garden-line)!important; }
.lobby-mode-switch button { color:var(--garden-muted)!important; }
.lobby-mode-switch button.active { color:#fff!important; background:var(--garden-accent)!important; border-color:transparent!important; }
#lobbyRoomCode { color:var(--garden-ink)!important; background:rgba(255,255,255,.72)!important; border-color:rgba(92,120,111,.3)!important; }
#joinRoomBtn,.create-btn { background:linear-gradient(135deg,#397a69,#649d84)!important; box-shadow:0 10px 24px rgba(57,122,105,.2)!important; }
.create-main { width:min(820px,100%); margin:0 auto; }
.preset-card,.room-input-area { background:var(--garden-glass-strong)!important; border-color:var(--garden-line)!important; box-shadow:0 10px 30px rgba(45,71,62,.1); }

/* 图像 Agent 仍清晰展示真实运行模式，但与全站共享花园背景。 */
#aiStudioPage { --ai-panel:var(--garden-glass-strong); --ai-panel-soft:rgba(255,255,255,.58); --ai-line:var(--garden-line); color:var(--garden-ink)!important; }
.ai-studio-panel,.ai-studio-notice {
  color:var(--garden-ink)!important;
  background:var(--garden-glass-strong)!important;
  border-color:var(--garden-line)!important;
  box-shadow:0 22px 60px rgba(45,71,62,.17)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.ai-studio-intro h1,.ai-studio-label-row label,.ai-studio-legend,.ai-preview-top h2,.ai-studio-notice strong { color:var(--garden-ink)!important; }
.ai-studio-intro p,.ai-studio-notice,.ai-studio-label-row small { color:var(--garden-muted)!important; }
.ai-studio-intro .eyebrow,.ai-section-kicker { color:var(--garden-accent)!important; }
/* 顶部只保留标题、核心说明和能力标签；英文眉题与重复流程条由下方表单完整表达。 */
.ai-studio-intro .eyebrow,.ai-agent-loop { display:none!important; }
.ai-studio-capabilities span,.ai-provider-badge { color:var(--garden-muted)!important; background:rgba(255,255,255,.55)!important; border-color:var(--garden-line)!important; }
:root[data-theme="dark"] .ai-studio-capabilities span,
:root[data-theme="dark"] .ai-provider-badge { background:rgba(8,18,18,.38)!important; }

@keyframes gardenBackdropDrift {
  from { background-position:48% 50%; }
  to { background-position:53% 48%; }
}
@keyframes gardenPetalFall {
  from { background-position:0 -250px,80px -300px; }
  to { background-position:95px calc(100vh + 250px),-70px calc(100vh + 300px); }
}
@keyframes modeArtworkDrift {
  from { background-position:50% 43%; }
  to { background-position:50% 57%; }
}

@media (max-width:760px) {
  #loginPage,#dashboardPage,#lobbyPage,#createPage,#aiStudioPage { background-position:58% 50%!important; }
  .dashboard-mode-card { min-height:310px!important; }
  .dashboard-hero { min-height:0; }
  .history-disclosure-section,.recent-room-section { padding:11px; border-radius:17px; }
}

@media (prefers-reduced-motion:reduce) {
  #loginPage,#dashboardPage,#lobbyPage,#createPage,#aiStudioPage,
  #loginPage::before,#dashboardPage::before,#lobbyPage::before,#createPage::before,#aiStudioPage::before,
  .dashboard-mode-card { animation:none!important; }
  #loginPage::before,#dashboardPage::before,#lobbyPage::before,#createPage::before,#aiStudioPage::before { opacity:.2!important; }
}