/* ============================================================
     陪跑 · 大屏主页（DEMO 01）
     ★ 产品正式名未定：界面名统一用变量 BRAND 集中定义，改名只改一处
     ★ 中间消息播报条 = 开发/测试期的系统实时工作播报（调试用），
       正式上线后此栏隐藏 —— 2026-09 用户拍板
     公共主题（配色/毛玻璃/弹层）在 assets/demo.css，调主题只改那一个文件
     ============================================================ */
  body{overflow:hidden; min-height:100vh}
  /* 左上 LOGO */
  .logo{
    position:fixed; top:3vh; left:2.6vw; text-align:left;
    line-height:1.15; z-index:30; user-select:none;
  }
  .logo .heart{font-size:15px; vertical-align:5px}
  .logo-name{
    font-size:clamp(22px,3vh,30px); font-weight:900; color:var(--main-deep);
    letter-spacing:3px;
  }
  .logo-sub{display:block; font-size:11px; color:var(--ink-soft); margin-top:3px; letter-spacing:1px}

  /* 右上角控件组：退出全屏 + 个人中心 */
  .top-right{
    position:fixed; top:2.8vh; right:2.6vw; z-index:30;
    display:flex; align-items:center; gap:10px;
  }
  .btn-full{
    border:1.6px solid rgba(224,85,112,.5); background:rgba(255,255,255,.9);
    color:var(--main-deep); font-family:inherit; font-size:12.5px; font-weight:700;
    border-radius:999px; padding:7px 16px; cursor:pointer; transition:all .15s;
    white-space:nowrap;
  }
  .btn-full:hover{background:#fff0f3}
  .user-chip{
    display:flex; align-items:center; gap:9px;
    background:var(--card); border-radius:999px; padding:6px 16px 6px 7px;
    cursor:pointer; user-select:none;
  }
  .user-chip .u-ava{
    width:36px; height:36px; border-radius:50%; flex:none;
    background:var(--mist);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:900; color:#fff;
  }
  .user-chip .u-name{font-size:13.5px; font-weight:800; color:var(--ink)}
  .user-chip .u-role{display:block; font-size:10px; color:var(--ink-soft); font-weight:400; margin-top:1px}
  .user-pop{
    position:fixed; top:9.6vh; right:2.6vw; z-index:31;
    background:#fff; border-radius:14px; padding:10px 16px;
    font-size:12.5px; color:var(--ink-soft); box-shadow:0 8px 26px rgba(224,85,112,.22);
    display:none; max-width:320px;
  }
  .user-pop.show{display:block; animation:popIn .25s ease}

  /* 中央：只有妈妈大头像（消息条已沉底、按钮已上右上） */
  .center-col{
    position:fixed; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    pointer-events:none; z-index:10;
  }
  .center-col>*{pointer-events:auto}

  /* 妈妈大头像（圆形居中，尽可能大——陪伴感，越小越像监控） */
  .avatar-outer{position:relative; flex:none; width:min(40vw,76vh); aspect-ratio:1}
  .avatar{
    width:100%; height:100%; border-radius:50%; position:relative; overflow:hidden;
    background:var(--mist);
    display:flex; align-items:center; justify-content:center;
    font-weight:900; color:#fff;
    border:clamp(5px,1.1vh,10px) solid rgba(255,255,255,.92);
    box-shadow:0 0 0 clamp(8px,1.8vh,16px) rgba(255,255,255,.5),
               0 10px 42px rgba(224,85,112,.30);
    animation:glow 3.4s ease-in-out infinite; cursor:pointer;
    font-size:clamp(64px,22vh,240px); letter-spacing:2px; user-select:none;
  }
  .avatar .mini{font-size:clamp(24px,8.5vh,90px); margin-top:12px}
  .avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:scale(1.16); object-position:50% 44%}
  @keyframes glow{
    0%,100%{box-shadow:0 0 0 clamp(8px,1.8vh,16px) rgba(255,255,255,.5), 0 10px 42px rgba(224,85,112,.30)}
    50%    {box-shadow:0 0 0 clamp(14px,2.8vh,26px) rgba(255,255,255,.28), 0 10px 42px rgba(224,85,112,.30)}
  }
  .sticker{position:absolute; z-index:6; pointer-events:none; line-height:1;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.18)); animation:popIn .28s ease}
  @keyframes popIn{from{transform:scale(0) rotate(-30deg)} to{transform:scale(1) rotate(0)}}
  .avatar-outer.wobble{animation:wobble .55s ease}
  @keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) scale(1.05)}
    40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}

  /* 系统消息播报条（测试期调试用，正式版隐藏）：固定在屏幕底部中央 */
  .msg-bar{
    position:fixed; left:50%; transform:translateX(-50%); bottom:2.6vh; z-index:15;
    display:flex; align-items:center; gap:12px;
    width:min(44vw,540px); min-height:52px; padding:10px 24px;
    background:var(--card); border-radius:999px;
  }
  .msg-dot{flex:none; width:12px; height:12px; border-radius:50%; background:var(--ok);
    transition:background .3s}
  .msg-dot.pulse{animation:dotpulse 1.1s ease infinite}
  @keyframes dotpulse{50%{box-shadow:0 0 0 7px rgba(76,175,125,.18)}}
  .msg-dot.yellow{background:var(--warn)} .msg-dot.pink{background:var(--main)}
  .msg-dot.blue{background:var(--info)} .msg-dot.gold{background:var(--gold)}
  .msg-text{font-size:15.5px; line-height:1.5; color:var(--ink); font-weight:600}
  .msg-text.pop{animation:msgIn .35s ease}
  @keyframes msgIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

  /* 退出全屏按钮（已上移并入 .top-right 组） */

  /* 左右下角卡片（随大头像等比例放大） */
  .corner{
    position:fixed; bottom:4vh; width:min(24vw,440px);
    background:var(--card); border-radius:26px; padding:18px 20px 16px;
    z-index:20; user-select:none;
  }
  .corner.pet{left:3vw}
  .corner.plan{right:3vw}
  .corner .c-head{display:flex; align-items:center; gap:7px;
    font-size:14.5px; font-weight:800; color:var(--main-deep); letter-spacing:1px; margin-bottom:10px}
  .c-body{display:flex; align-items:center; gap:14px}
  .pet-face{
    flex:none; width:92px; height:92px; border-radius:50%;
    background:#f8e8bd;
    display:flex; align-items:center; justify-content:center;
    font-size:52px; box-shadow:0 4px 14px rgba(240,168,60,.32);
  }
  .pet-info{flex:1; min-width:0}
  .pet-name{font-size:19px; font-weight:800; color:var(--ink)}
  .pet-stage{font-size:13px; color:var(--ink-soft); margin:3px 0 8px}
  .stars{display:flex; gap:6px; align-items:center}
  .stars i{width:17px; height:17px; border-radius:50%; background:#f4d9e0}
  .stars i.on{background:#edae3f}
  .stars span{margin-left:5px; font-size:12.5px; color:var(--ink-soft)}
  .pet-hint{font-size:12.5px; color:var(--ink-soft); margin-top:10px; line-height:1.6}
  .corner .c-more{
    display:inline-block; margin-top:9px; border:none; background:none;
    font-family:inherit; font-size:13.5px; color:var(--main-deep); font-weight:700;
    cursor:pointer; padding:2px 0;
  }
  .corner .c-more:hover{text-decoration:underline}

  /* 今日计划 */
  .plan-head{display:flex; justify-content:space-between; align-items:center}
  .plan-count{font-size:13px; color:var(--ink-soft); font-weight:600}
  .task{display:flex; align-items:center; gap:11px; padding:9px 10px;
    border-radius:13px; transition:background .15s}
  .task:hover{background:#fff0f4}
  .task .txt{flex:1; font-size:16px; min-width:0}
  .task .do{flex:none; width:30px; height:30px; border-radius:50%; border:2px solid #f0c3cd;
    background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:15px; color:transparent; transition:all .2s; font-weight:900}
  .task:hover .do{border-color:var(--main)}
  .task.done .do{background:var(--ok); border-color:var(--ok); color:#fff; animation:popIn .3s ease}
  .task.done .txt{color:var(--muted)}
  .plan-foot{font-size:12px; color:#c9a0ab; margin-top:9px; text-align:center}

  /* 进化链（弹层基础样式由公共 demo.css 提供：.overlay/.pop-card/.pop-btn） */
  .evo-line{display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap;
    margin:6px 0 12px}
  .evo-node{display:flex; flex-direction:column; align-items:center; width:60px; padding:8px 2px;
    border-radius:14px}
  .evo-node .e{font-size:30px; line-height:1.2; filter:grayscale(.35); opacity:.75}
  .evo-node .n{font-size:10.5px; color:var(--ink-soft); margin-top:3px; white-space:nowrap; font-weight:700}
  .evo-node .d{font-size:9.5px; color:#d8b6bf; margin-top:1px; white-space:nowrap}
  .evo-node.done .e{filter:none; opacity:1}
  .evo-node.done .d{color:var(--ok); font-weight:700}
  .evo-node.cur{background:rgba(255,245,247,.9); outline:2px solid #ffd3de; box-shadow:0 3px 12px rgba(224,85,112,.18)}
  .evo-node.cur .e{transform:scale(1.2); filter:none; opacity:1}
  .evo-node.cur .n{color:var(--main-deep); font-weight:800}
  .evo-node.cur .d{color:var(--main-deep); font-weight:700}
  .evo-arrow{color:#f0c3cd; font-size:13px; flex:none}
  /* 进化进度 */
  .pet-progress{background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7);
    border-radius:16px; padding:10px 14px; margin:2px 0 12px; text-align:left}
  .pp-label{font-size:12px; color:var(--ink-soft); font-weight:700; margin-bottom:6px}
  .pp-bar{height:10px; border-radius:6px; background:rgba(224,85,112,.13); overflow:hidden}
  .pp-bar i{display:block; height:100%; border-radius:6px; background:#edae3f}
  .pp-tip{font-size:12px; color:#b04a66; margin-top:7px; font-weight:700}

  /* 全部完成彩蛋 */
  #partyOverlay{background:#f7f1e5; z-index:950}
  .party-core{position:relative; text-align:center; padding:20px}
  .party-emoji{font-size:70px; animation:bounce 1s ease infinite; display:inline-block}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  .party-title{font-size:clamp(24px,4vh,34px); font-weight:900; color:var(--main-deep);
    margin-top:12px; text-shadow:0 2px 0 #fff}
  .party-sub{font-size:16px; color:#b04a66; margin-top:10px; line-height:1.7; font-weight:600}
  .party-close{margin-top:22px; border:none; background:var(--main); color:#fff;
    font-size:15px; font-weight:800; border-radius:999px; padding:11px 34px; cursor:pointer}
  .party-close:hover{background:var(--main-deep)}
  .confetti{position:fixed; top:-30px; font-size:24px; animation:fall linear forwards; z-index:951;
    pointer-events:none}
  @keyframes fall{to{transform:translateY(112vh) rotate(400deg); opacity:.85}}

  /* ===== v2.0 增量模块（2026-09-07 方案页1；原布局冻结，只在空白处加）===== */

  /* 顶部中央组：问候条 + 家人头像排 */
  .top-mid{position:fixed; top:clamp(6px,1.5vh,20px); left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px; z-index:26; pointer-events:none}
  .greet-bar{font-size:clamp(15px,2.2vh,20px); font-weight:800; color:#8e4a5e;
    background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.65); padding:8px 24px;
    border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 20px rgba(224,85,112,.1);
    white-space:nowrap; text-align:center; pointer-events:auto}
  .fam-row{display:flex; gap:10px; pointer-events:auto}
  .fam-ava{width:clamp(34px,4.4vh,46px); height:clamp(34px,4.4vh,46px); border-radius:50%;
    border:1.5px solid rgba(255,255,255,.8); background:rgba(255,255,255,.65);
    display:flex; align-items:center; justify-content:center; font-size:clamp(15px,2.2vh,21px);
    cursor:pointer; box-shadow:0 3px 10px rgba(224,85,112,.12); transition:transform .15s;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
  .fam-ava:hover{transform:scale(1.12)}
  .fam-ava.add{border-style:dashed; color:#c9a0ab}

  /* 右上角小图标（勋章墙） */
  .icon-chip{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.65);
    background:rgba(255,255,255,.85); font-size:18px; cursor:pointer; display:flex;
    align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(224,85,112,.14);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .15s}
  .icon-chip:hover{transform:scale(1.1)}

  /* 右下计划卡内：底部操作条（方案页1：开始学习/今天收工/加张卡） */
  .ops-row{display:flex; gap:8px; margin-top:12px}
  .ops-btn{flex:1; border:none; border-radius:14px; padding:11px 4px; font-size:14px; font-weight:900;
    font-family:inherit; cursor:pointer; text-align:center; text-decoration:none; line-height:1.3}
  .ops-btn.main{background:var(--leaf); color:#fff;
    box-shadow:0 5px 16px rgba(224,85,112,.32)}
  .ops-btn.main:hover{filter:brightness(1.07)}
  .ops-btn.ghost2{background:rgba(255,255,255,.85); color:var(--main-deep);
    border:1.5px solid #f3c0cb}
  .ops-btn.ghost2:hover{background:#fff0f3}
  .ops-btn small{display:block; font-size:10px; font-weight:600; opacity:.8; margin-top:1px}

  /* 任务卡：挪到明天 */
  .task .post{flex:none; border:none; background:none; color:#d8a6b2; font-size:11px;
    cursor:pointer; padding:3px 4px; display:none; font-weight:700}
  .task:hover .post{display:block}
  .task .post:hover{color:var(--main-deep)}

  /* 加卡弹层 */
  .pool-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 12px}
  @media (max-width:560px){ .pool-grid{grid-template-columns:1fr} }
  .pool-it{display:flex; align-items:center; gap:10px; text-align:left; width:100%;
    background:rgba(255,255,255,.85); border:1.5px solid rgba(224,85,112,.18); border-radius:16px;
    padding:10px 12px; cursor:pointer; font-family:inherit; transition:all .15s}
  .pool-it:hover{border-color:var(--main); background:#fff0f3}
  .pool-it .pi2{flex:none; font-size:24px}
  .pool-it .pt2{flex:1; font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.4}
  .pool-it .who2{display:block; font-size:10px; color:var(--ink-soft); font-weight:600; margin-top:2px}
  .add-inline{display:flex; gap:8px}
  .add-inline input{flex:1; min-width:0; border:1.5px dashed rgba(224,85,112,.4); border-radius:12px;
    padding:10px 12px; font-size:13.5px; font-family:inherit; outline:none; background:rgba(255,255,255,.9)}
  .add-inline input:focus{border-style:solid; border-color:var(--main)}
  .add-inline button{border:none; background:var(--main); color:#fff; border-radius:12px;
    padding:0 18px; font-weight:800; font-family:inherit; cursor:pointer}

  /* 休息卡（任务衔接·眼睛休息语音引导；无按钮无记录） */
  #restOverlay{background:rgba(60,20,30,.4); z-index:960}
  .rest-core{background:var(--mist); border-radius:30px; padding:34px 38px;
    width:92%; max-width:560px; text-align:center; box-shadow:0 24px 70px rgba(40,60,90,.3);
    animation:popIn .4s ease; position:relative}
  .rest-core .re{font-size:60px; animation:breathe 3s ease-in-out infinite}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  .rest-core h2{font-size:22px; color:#3e6d8c; margin:14px 0 10px; letter-spacing:1px}
  .rest-core .rg{font-size:17px; color:#5a7d95; line-height:2; font-weight:600}
  .rest-core .voice-note{font-size:11px; color:#9db8c9; margin-top:14px}
  .rest-skip{position:absolute; top:10px; right:14px; border:none; background:none;
    font-size:11px; color:#b6ccda; cursor:pointer; font-family:inherit}
  .rest-core.everning{background:var(--mist)}
  .rest-core.everning h2{color:#6a55a8}
  .rest-core.everning .rg{color:#7a6aa8}

  /* 弹层卡细节微调（毛玻璃主体见公共 demo.css） */
  .task:hover{background:rgba(255,255,255,.5)}
  .evo-node.cur{background:rgba(255,240,245,.92)}