/* 幼之乐系统门户 · 对外页 / 对内页共用样式（work-record/2233，源自 ops-yunwei/portal/index.html）。
   配色与版式沿用 vr.youzhile.net：大厅大图页头 + 胶囊切换 → 按分组的「上图下文」卡片 → 两侧使用说明。
   每组一种按钮色：青蓝（生产）、橙（客户项目）、青绿（产品演示）、紫（预发布与内部工具）。
   字体只用系统中文字体。卡片封面放 covers/<slug>.jpg 即自动显示，没有就用渐变占位。 */
:root {
  color-scheme: light;
  --page: #eef1f8;
  --panel: #ffffff;
  --panel-soft: #f3f2fa;
  --ink: #36425e;
  --muted: #7a84a0;
  --line: #e2e4f0;
  --brand-blue: #4a7db8;
  --brand-orange: #f07d2a;
  --btn-top: #8fbcd3;
  --btn-bottom: #6c9fbf;
  --btn-edge: #52819f;
  --btn-ink: #1e4563;
  --aq-top: #ffb060;
  --aq-bottom: #f5843a;
  --aq-edge: #d0661d;
  --ocm-top: #6ccfc7;
  --ocm-bottom: #3aa7a0;
  --ocm-edge: #2a8079;
  --in-top: #ada6d6;
  --in-bottom: #857cbd;
  --in-edge: #635a9c;
  --sage: #9dbe87;
  --wood: #ead5b3;
  --off: #b9bfd1;
  --ok: #4caf7a;
  --bad: #e0574f;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --num: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.6 var(--font); }

.hero {
  position: relative; color: #fff;
  background: #c9b79a url("/covers/hero.jpg") center 40% / cover no-repeat;
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,40,70,.15), rgba(30,40,70,.55)); }
.hero-in {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
  padding-block: 28px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 22px;
}
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.logo img { display: block; height: 52px; width: auto; max-width: 100%; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.summary { display: flex; align-items: center; gap: 10px; font-size: 14px; background: rgba(20,28,50,.45); border-radius: 999px; padding: 5px 14px; font-variant-numeric: tabular-nums; }
.summary .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); display: inline-block; }
.summary .dot.ok { background: var(--ok); }
.summary .dot.bad { background: var(--bad); }
.title { display: grid; gap: 6px; padding-block: 34px 26px; }
.title h1 { margin: 0; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.25; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.title p { margin: 0; font-size: 16px; opacity: .95; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

.tabs {
  display: flex; flex-wrap: wrap; gap: 8px; width: fit-content; max-width: 100%;
  background: rgba(20,28,50,.45); border-radius: 999px; padding: 6px;
}
.tabs button {
  font: inherit; font-size: 15px; border: 0; cursor: pointer; color: rgba(255,255,255,.85);
  background: transparent; border-radius: 999px; padding: 8px 20px;
}
.tabs button small { font: 12px var(--num); opacity: .75; margin-left: 4px; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 700; }

.layout {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "left right" "main main";
  padding-block: 26px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* grid-area 只给 .layout 的直接子元素：对内页 #lines.wrap 嵌在 main.wrap 里，若也带 grid-area:main，
   main.wrap 里没有叫 main 的区域，浏览器会把它塞进隐式第二列（左边空出 350px）。 */
.wrap { min-width: 0; display: grid; gap: 40px; align-content: start; }
.layout > .wrap { grid-area: main; }
.side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.side-left { grid-area: left; }
.side-right { grid-area: right; }
@media (min-width: 1200px) {
  .layout { max-width: none; grid-template-columns: 230px minmax(0, 1fr) 230px; grid-template-areas: "left main right"; gap: 28px;
    padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .wrap { justify-self: center; width: 100%; max-width: 1180px; }
  .side { position: sticky; top: 18px; align-self: start; }
}
@media (min-width: 1200px) and (max-width: 1699px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 20px; }
}
@media (max-width: 640px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "left" "right"; }
}

.line { display: grid; gap: 22px; }
.ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.ribbon h2 {
  margin: 0; font-size: 19px; color: #fff; border-radius: 10px; padding: 6px 18px;
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); box-shadow: 0 3px 0 var(--btn-edge);
}
.aq .ribbon h2 { background: linear-gradient(180deg, var(--aq-top), var(--aq-bottom)); box-shadow: 0 3px 0 var(--aq-edge); }
.ocm .ribbon h2 { background: linear-gradient(180deg, var(--ocm-top), var(--ocm-bottom)); box-shadow: 0 3px 0 var(--ocm-edge); }
.in .ribbon h2 { background: linear-gradient(180deg, var(--in-top), var(--in-bottom)); box-shadow: 0 3px 0 var(--in-edge); }
.ribbon p { margin: 0; color: var(--muted); font-size: 14px; }
.grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  background: var(--panel); border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  box-shadow: 0 6px 18px rgba(54,66,94,.08); border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.on:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(54,66,94,.14); }
.shot { position: relative; aspect-ratio: 16 / 9; background: var(--wood); overflow: hidden; }
.shot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot img[hidden] { display: none; }
.shot .ph {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center;
  background: linear-gradient(160deg, #d6f4fb 0%, #eefaff 55%, #8fd3f2 100%);
  color: var(--ink); font-weight: 800; font-size: 26px; letter-spacing: .12em;
}
.aq .shot .ph { background: linear-gradient(160deg, #fde3c8 0%, #fff3e6 55%, #f7b98a 100%); }
.ocm .shot .ph { background: linear-gradient(160deg, #d3efec 0%, #eefaf8 55%, #8ed3cb 100%); }
.in .shot .ph { background: linear-gradient(160deg, #e7e5f3 0%, #f6f5fb 55%, #c3bddf 100%); }
.shot .ph small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 2px; }
.tag {
  position: absolute; z-index: 2; top: 10px; left: 10px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  background: rgba(255,255,255,.92); color: var(--brand-blue);
}
.aq .tag { color: var(--aq-edge); }
.ocm .tag { color: var(--ocm-edge); }
.in .tag { color: var(--in-edge); }
.tag.prod { background: var(--brand-orange); color: #fff; }
.state {
  position: absolute; z-index: 2; top: 10px; right: 10px; font-size: 12px; border-radius: 999px; padding: 2px 10px 2px 8px;
  background: rgba(255,255,255,.92); color: var(--muted); display: flex; align-items: center; gap: 5px;
}
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--off); }
.state.ok { color: #2f7f55; } .state.ok::before { background: var(--ok); }
.state.bad { color: var(--bad); } .state.bad::before { background: var(--bad); }
.body { background: var(--panel-soft); padding: 14px 18px 16px; display: grid; gap: 6px; grid-template-rows: auto 1fr auto; }
.body h4 { margin: 0; font-size: 17px; color: var(--ink); }
.body p { margin: 0; font-size: 13.5px; color: var(--muted); min-width: 0; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.domain { font: 13px var(--num); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.go {
  text-decoration: none; font-weight: 800; font-size: 14px; letter-spacing: .3em; padding: 6px 12px 6px 18px; border-radius: 12px;
  white-space: nowrap; flex-shrink: 0;
  color: var(--btn-ink); background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); box-shadow: 0 3px 0 var(--btn-edge);
}
.aq .go { color: #fff; background: linear-gradient(180deg, var(--aq-top), var(--aq-bottom)); box-shadow: 0 3px 0 var(--aq-edge); }
.ocm .go { color: #fff; background: linear-gradient(180deg, var(--ocm-top), var(--ocm-bottom)); box-shadow: 0 3px 0 var(--ocm-edge); }
.in .go { color: #fff; background: linear-gradient(180deg, var(--in-top), var(--in-bottom)); box-shadow: 0 3px 0 var(--in-edge); }
.go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); }
.soon { font-size: 13px; color: var(--off); font-weight: 700; white-space: nowrap; }
.go:focus-visible, .tabs button:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }

/* 使用说明：轻量帮助提示（半透明底、虚线框、细线小图标），不和可点击的卡片混淆 */
.help-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.help-title svg { width: 16px; height: 16px; }
.note {
  background: rgba(255,255,255,.42); border-radius: 12px; padding: 11px 13px; border: 1px dashed #cdd3e4;
  display: grid; gap: 6px; align-content: start;
}
.note-head { display: flex; align-items: center; gap: 7px; }
.note-head h3 { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--brand-blue); }
.icon.orange { color: var(--aq-edge); }
.icon svg { width: 16px; height: 16px; }
.note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.note li { position: relative; padding-left: 14px; line-height: 1.55; }
.note li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.note li b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card.on:hover { transform: none; } }

/* ---- work-record/2233 新增 ---- */
/* 卡片里的附加链接（如「移动 H5」）：比「进入」轻一档 */
.foot .acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.more { font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 1px dashed currentColor; white-space: nowrap; }
.more:hover { color: var(--ink); }
.more:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }

/* 对外页底部「内部入口」：故意不显眼 */
.page-foot { max-width: 1180px; margin: 0 auto; padding: 0 16px 28px; text-align: center; font-size: 12px; }
.page-foot a { color: var(--off); text-decoration: none; }
.page-foot a:hover { color: var(--muted); text-decoration: underline; }

/* 对内页：单栏 + 登录/提示面板 + 右上角用户 */
.layout.single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
@media (min-width: 1200px) { .layout.single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; } }
.user { display: flex; align-items: center; gap: 10px; font-size: 14px; background: rgba(20,28,50,.45); border-radius: 999px; padding: 4px 6px 4px 14px; }
[hidden] { display: none !important; }  /* 带 display 的块（summary/tabs/user/panel）一律尊重 hidden */
.user img { width: 26px; height: 26px; border-radius: 50%; display: block; }
.user button { font: inherit; font-size: 13px; border: 0; cursor: pointer; border-radius: 999px; padding: 4px 12px; background: rgba(255,255,255,.9); color: var(--ink); }
.user button:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }
.panel {
  justify-self: center; width: min(440px, 100%); background: var(--panel); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(54,66,94,.08); padding: 28px 26px; display: grid; gap: 14px; text-align: center;
}
.panel h2 { margin: 0; font-size: 19px; }
.panel p { margin: 0; color: var(--muted); font-size: 14px; }
.panel .err { color: var(--bad); background: #fdeceb; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.login {
  justify-self: center; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .1em; padding: 10px 26px; border-radius: 12px;
  color: #fff; background: linear-gradient(180deg, var(--in-top), var(--in-bottom)); box-shadow: 0 3px 0 var(--in-edge);
}
.login:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--in-edge); }
.login:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }