/* 多乐工具箱 门户样式 —— 沿用工具们的 slate + 靛蓝，深浅三态 */
:root{
  --ground:#f0f4f8; --surf:#ffffff; --surf2:#f8fafc;
  --ink:#1e293b; --ink2:#475569; --ink3:#5f6e85;
  --accent:#4f46e5; --accent2:#4338ca; --accent-soft:#eef0fd;
  --line:#e2e8f0; --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0f172a; --surf:#1e293b; --surf2:#172033;
    --ink:#e2e8f0; --ink2:#a8b6c8; --ink3:#94a3b8;
    --accent:#8b93f8; --accent2:#a5abfa; --accent-soft:#232748;
    --line:#2b3648; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --ground:#0f172a; --surf:#1e293b; --surf2:#172033;
  --ink:#e2e8f0; --ink2:#a8b6c8; --ink3:#94a3b8;
  --accent:#8b93f8; --accent2:#a5abfa; --accent-soft:#232748;
  --line:#2b3648; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--ground); color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  font-size:15px; line-height:1.7; display:flex; flex-direction:column;
}
.wrap{width:100%; max-width:960px; margin:0 auto; padding:0 24px; flex:1 0 auto}

/* 顶栏 */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0}
.brand{display:flex; align-items:baseline; gap:10px; min-width:0}
.brand .n{font-size:16px; font-weight:700; letter-spacing:.01em}
.brand .t{font-size:13px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tools{display:flex; gap:8px; flex:0 0 auto}
.tb{
  background:var(--surf); color:var(--ink2); border:1px solid var(--line);
  padding:5px 12px; border-radius:16px; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:.15s; font-family:inherit;
}
.tb{text-decoration:none; display:inline-block}
.tb:hover{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.tb:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 主区 */
.hero{padding:56px 0 40px; border-top:1px solid var(--line)}
.hero h1{font-size:clamp(26px,4vw,36px); margin:0 0 14px; letter-spacing:-.01em; text-wrap:balance}
.hero p{color:var(--ink2); margin:0; max-width:56ch}

/* 应用卡片（阶段二启用） */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; padding-bottom:48px}
.card{
  position:relative; display:block; text-decoration:none; color:inherit; background:var(--surf);
  border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  box-shadow:var(--shadow); transition:.18s;
}
.card:hover{transform:translateY(-2px); border-color:var(--accent)}
.card:focus-within{border-color:var(--accent)}
/* 整卡可点：透明链接铺满卡片；问号链接叠在它上面 */
.card .cover{position:absolute; inset:0; z-index:1; border-radius:inherit}
.card .cover:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card .cn{font-weight:700; font-size:15px; margin-bottom:6px}
.card .cd{font-size:13px; color:var(--ink3); line-height:1.6}
.card.has-help .cd{padding-right:22px}
.card .help{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:24px; height:24px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; line-height:1; text-decoration:none;
  color:var(--ink3); background:var(--surf2); border:1px solid var(--line); transition:.15s;
}
.card .help:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.card .help:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* 触屏上 24px 太小，扩大可点区域但不改变外观 */
.card .help::after{content:""; position:absolute; inset:-10px; border-radius:50%}

.empty{
  border:1px dashed var(--line); border-radius:10px; padding:28px 24px;
  color:var(--ink3); font-size:13.5px; text-align:center; margin-bottom:48px;
}

/* 飞书环境提示条 */
.fsbar{
  display:none; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent2);
  border-radius:8px; padding:10px 16px; font-size:13px; margin:16px 0 0;
}
.fsbar.on{display:flex}
.fsbar button{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:5px 12px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
}

footer{
  flex:0 0 auto; border-top:1px solid var(--line); margin-top:auto;
  font-size:12.5px; color:var(--ink3);
}
footer .in{max-width:960px; margin:0 auto; padding:18px 24px; display:flex; gap:18px; flex-wrap:wrap}
footer a{color:var(--ink3); text-decoration:none}
footer a:hover{color:var(--accent)}
footer a.beian{display:inline-flex; align-items:center; gap:5px}
footer a.beian img{display:block; flex:0 0 auto}

/* 卡片状态标签（apps.json 的 badge 字段，如「测试中」） */
.card .badge{
  position:absolute; top:20px; right:18px; z-index:0;
  font-size:11.5px; font-weight:600; line-height:1; letter-spacing:.02em;
  padding:4px 8px; border-radius:999px; pointer-events:none;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent);
}
.card.has-badge .cn{padding-right:68px}