/* ================= 首页：假对话框 + 快速开始 + 最近作品，iOS 玻璃质感 =================
     背景图挂在 ::before 上，首页没显示时伪元素不渲染，图片不会下载 */
  #homeView{--home-bg:url(/ui/home-bg-light.webp);--home-card:rgb(255 255 255 / .58);--home-card-hover:rgb(255 255 255 / .74);
      --home-edge:rgb(255 255 255 / .75);--home-shadow:0 10px 32px rgb(40 70 130 / .12);
      --home-inner:rgb(255 255 255 / .82);--home-inner-edge:rgb(255 255 255 / .9);--home-tabs:rgb(255 255 255 / .5);
      --home-blue:#1677ff;--home-blue2:#0f5fd7;--home-ai:linear-gradient(100deg,#1677ff,#0b5bd3);--home-glow:none;
      display:none;position:relative;isolation:isolate;max-width:1530px;margin:0 auto;padding:44px clamp(24px,4vw,72px) 40px}
  :root[data-theme="dark"] #homeView{--home-bg:url(/ui/home-bg-dark.webp);--home-card:rgb(36 38 46 / .74);--home-card-hover:rgb(50 52 62 / .82);--glass-saturate:105%;
      --home-edge:rgb(255 255 255 / .17);--home-shadow:0 14px 40px rgb(0 0 0 / .55);
      --home-inner:rgb(18 19 24 / .82);--home-inner-edge:rgb(255 255 255 / .1);--home-tabs:rgb(18 19 24 / .6);
      --home-blue:#4c8dff;--home-blue2:#2f6bf0;--home-ai:linear-gradient(100deg,#8fd0ff,#4c8dff);--home-glow:0 0 12px rgb(76 141 255 / .75)}
  body[data-view="home"] #homeView{display:block}
  #homeView::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--home-bg) center/cover no-repeat;pointer-events:none}

  /* 玻璃：半透明 + 模糊 + 顶部内侧高光，按下时轻轻回弹 */
  .hask,.hentry,.hwork,.hbadge,.hmore{border:1px solid var(--home-edge);background:var(--home-card);
      box-shadow:inset 0 1px 0 var(--glass-highlight),var(--home-shadow);
      -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
      transition:transform var(--dur-spring) var(--ease-spring),background .2s ease,box-shadow .2s ease}
  .hentry:hover,.hwork:hover,.hmore:hover{background:var(--home-card-hover);border-color:var(--home-edge)}
  .hentry:hover,.hwork:hover{transform:translateY(-3px)}
  .hentry:active,.hwork:active,.hmore:active{transform:scale(var(--press-scale))}

  .hhero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
  .hbadge{padding:6px 16px;border-radius:var(--radius-pill);color:var(--accent);font-size:13px;font-weight:500}
  .hhero h1{margin:0;padding-bottom:.14em;font-size:clamp(32px,3.3vw,56px);line-height:1.2;font-weight:700;letter-spacing:0;color:var(--text)}
  .hhero p{max-width:760px;margin:0;font-size:clamp(15px,1.1vw,18px);line-height:1.7;color:var(--dim)}

  /* 套娃：外层玻璃托着类型切换和里层输入区 */
  .hhero h1 .hai{position:relative;display:inline-block;background:var(--home-ai);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hai svg{position:absolute;left:0;right:0;bottom:-.1em;width:100%;height:.16em;overflow:visible;fill:none;stroke:var(--home-blue);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .hask{width:78%;margin:24px auto 0;padding:16px 20px 20px;border-radius:28px}
  .hask-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:12px;border:1px solid var(--home-edge);border-radius:var(--radius-pill);background:var(--home-tabs)}
  .hask-tabs button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 18px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);font-size:13.5px;
      transition:transform var(--dur-spring) var(--ease-spring),background .2s ease,color .2s ease}
  .hask-tabs button:hover{background:var(--home-card-hover)}
  .hask-tabs button:active{transform:scale(var(--press-scale))}
  .hask-tabs button[aria-pressed="true"]{background:var(--home-blue);color:#fff;box-shadow:0 4px 12px rgb(22 119 255 / .3)}
  .hask-box{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px 15px;border:1px solid var(--home-inner-edge);border-radius:20px;background:var(--home-inner);
      transition:border-color .2s ease,box-shadow .2s ease}
  .hask-box:focus-within{border-color:var(--home-blue);box-shadow:0 0 0 3px rgb(22 119 255 / .14)}
  #homeInput{display:block;width:100%;min-height:60px;padding:0 3px;border:0;outline:0;resize:none;background:transparent;box-shadow:none;color:var(--text);
      font:inherit;font-size:15px;line-height:1.6;user-select:text;-webkit-user-select:text;cursor:text}
  #homeInput::placeholder{color:var(--dim);opacity:.8;text-indent:2px}
  .hask-row{display:flex;align-items:center;justify-content:flex-end;gap:14px}
  #homeCount{color:var(--dim);font-size:12.5px}
  .hask-go{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 22px;border:0;border-radius:var(--radius-control);
      background:linear-gradient(180deg,var(--home-blue),var(--home-blue2));color:#fff;font-size:14px;font-weight:600;box-shadow:0 6px 16px rgb(22 119 255 / .28);
      transition:transform var(--dur-spring) var(--ease-spring),filter .15s}
  .hask-go:hover{filter:brightness(1.07);background:linear-gradient(180deg,var(--home-blue),var(--home-blue2));color:#fff}
  .hask-go:active{transform:scale(var(--press-scale))}
  .hlogin{display:flex;justify-content:center;margin-top:14px}
  .hlogin:has(#homeLogin[hidden]){display:none}
  #homeLogin{height:40px;padding:0 26px;border-radius:var(--radius-pill);font-size:14px}

  .hsec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 14px;font-size:18px;font-weight:600;color:var(--text)}
  .hsec>span:first-child{display:inline-flex;align-items:center;gap:10px}
  .hsec>span:first-child::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--home-blue);box-shadow:var(--home-glow)}
  .hmore{height:32px;padding:0 14px;border-radius:var(--radius-pill);color:var(--accent);font-size:13px;font-weight:500}

  .hentries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .hentry{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;align-content:center;height:auto;min-height:112px;padding:20px 24px;border-radius:var(--radius-card);text-align:left;color:var(--text);font-size:16px;line-height:1.4}
  .hentry svg{grid-row:1 / span 2;width:32px;height:32px;color:var(--accent)}
  .hentry b{font-weight:600}
  .hentry span{font-size:13px;line-height:1.5;color:var(--dim)}
  /* 每张卡片一张图，插画在右边，文字留在左边不压上去 */
  #homeView .hentry{padding-right:41%;border-color:var(--home-edge);background:var(--card-bg) right center/cover no-repeat;
      -webkit-backdrop-filter:none;backdrop-filter:none}
  #homeView .hentry:hover{background:var(--card-bg) right center/cover no-repeat;filter:brightness(1.03)}
  .hentry[data-go="image"]{--card-bg:url(/ui/home-card-image-light.webp)}
  .hentry[data-go="video"]{--card-bg:url(/ui/home-card-video-light.webp)}
  .hentry[data-go="chat"]{--card-bg:url(/ui/home-card-chat-light.webp)}
  .hentry[data-go="canvas"]{--card-bg:url(/ui/home-card-canvas-light.webp)}
  :root[data-theme="dark"] .hentry[data-go="image"]{--card-bg:url(/ui/home-card-image-dark.webp)}
  :root[data-theme="dark"] .hentry[data-go="video"]{--card-bg:url(/ui/home-card-video-dark.webp)}
  :root[data-theme="dark"] .hentry[data-go="chat"]{--card-bg:url(/ui/home-card-chat-dark.webp)}
  :root[data-theme="dark"] .hentry[data-go="canvas"]{--card-bg:url(/ui/home-card-canvas-dark.webp)}
  .hentry[data-go="image"] svg{color:#1677ff}
  .hentry[data-go="video"] svg{color:#7a4dff}
  .hentry[data-go="chat"] svg{color:#0fa66a}
  .hentry[data-go="canvas"] svg{color:#f07a12}
  :root[data-theme="dark"] .hentry[data-go="image"] svg{color:#6ea8ff}
  :root[data-theme="dark"] .hentry[data-go="video"] svg{color:#b394ff}
  :root[data-theme="dark"] .hentry[data-go="chat"] svg{color:#4fe0a4}
  :root[data-theme="dark"] .hentry[data-go="canvas"] svg{color:#ffae5c}

  .hworks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .hwork{display:block;min-width:0;height:auto;padding:0;overflow:hidden;border-radius:var(--radius-card);text-align:left;color:var(--text)}
  .hwork img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--panel2)}
  .hwork .cap{display:block;padding:12px 16px;font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  @media (max-width:1100px){
    .hask{width:100%}
    .hentries,.hworks{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:560px){
    #homeView{padding:40px 16px}
    .hask{width:100%;padding:10px}
    .hask-tabs{display:flex}
    .hask-tabs button{flex:1;justify-content:center;padding:0 8px}
    .hentries,.hworks{grid-template-columns:minmax(0,1fr)}
  }
  @media (prefers-reduced-motion:reduce){
    .hentry,.hwork,.hmore,.hask-tabs button,.hask-go{transition:none}
    .hentry:hover,.hwork:hover{transform:none}
  }