/* 独立页面公共样式：基础变量、toast、登录遮罩。页面自身布局放各自目录。 */

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--wx-bg); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.primary { background: var(--green); color:#fff; border: 0; border-radius: 8px; padding: 8px 18px; }
.primary:disabled { opacity: .5; cursor: default; }
.soft { background:#fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; color: var(--ink-2); }

#sq-toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(16px); background:var(--n-800); color:#fff; padding: 9px 18px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; z-index: 60; max-width: 80vw; }
#sq-toast.show { opacity: 1; transform: translateX(-50%); }

#sq-login { position: fixed; inset: 0; background: rgba(28, 36, 32, .45); display: grid; place-items: center; z-index: 50; }
#sq-login[hidden] { display: none; }
/* 卡片从 form 挪到 #sq-login-card：2026-09-22 起弹窗里不止一个表单
   （飞书登录是个 <a>，账号密码才是 form），样式挂在 form 上就只包住半个弹窗。 */
#sq-login-card { background:#fff; border-radius: 16px; padding: 28px 30px; width: min(92vw, 360px); display: grid; gap: 12px; }
#sq-login h2 { margin: 0; font-size: 18px; }
#sq-login p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
#sq-login form { display: grid; gap: 12px; margin: 0; }
#sq-login label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
#sq-login input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; }
#sq-login #sq-login-error { color:var(--danger-fg); min-height: 1em; }

/* 飞书登录：弹窗里唯一的实心主按钮，一眼就知道该点它 */
#sq-login-feishu {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: 10px; text-decoration: none;
  background: var(--green); color: #fff; font-size: 15px; font-weight: 600;
}
#sq-login-feishu[hidden] { display: none; }
#sq-login-feishu:hover { background: var(--green-2); }
#sq-login-feishu span {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 400;
}

/* 管理员登录：刻意做成一行小字而不是按钮——它是备用入口，不该和飞书登录抢注意力 */
#sq-login-toggle {
  border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--muted); font-size: 12px; text-decoration: underline; padding: 2px;
}
#sq-login-toggle:hover { color: var(--ink-2); }
#sq-login-toggle[hidden] { display: none; }
#sq-login form[hidden] { display: none; }

@layer legacy{
/* P1 升级版 common.js 的配套样式：右下角 toast 与确认框（此前缺失，提示是裸文字） */
#app-toast { position: fixed; right: 24px; bottom: 24px; z-index: 600; display: grid; gap: 8px; max-width: min(360px, 90vw); }
#app-toast .toast { background: var(--n-800); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-2); font-size: 13px; }
#app-toast .toast[data-tone="danger"] { background: var(--danger-solid); }
#app-toast .toast[data-tone="success"] { background: var(--accent); }
dialog.modal { border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text-primary); padding: 24px; width: 420px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-3); }
dialog.modal::backdrop { background: var(--overlay); }
dialog.modal .modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
dialog.modal .modal-head h2 { margin: 0; font-size: 16px; }
dialog.modal .modal-close { margin-left: auto; border: 0; background: none; font-size: 16px; color: var(--text-muted); cursor: pointer; }
dialog.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
dialog.modal .btn { font: inherit; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
dialog.modal .btn-primary { background: var(--accent); color: #fff; }
dialog.modal .btn-secondary { background: #fff; border-color: var(--border-control); color: var(--text-secondary); }
dialog.modal .btn-danger { background: var(--danger-solid); color: #fff; }
dialog.modal .btn:disabled { opacity: .55; cursor: not-allowed; }
}

/* ---------- 内嵌模式 ----------
   页面被控制台当作内嵌页载入时（判定见每页 <head> 的一行脚本），外壳已经提供了侧边栏和页头，
   所以隐藏页面自己的返回导航与重复标题，只保留说明文字；直接访问该 URL 时一切照旧。 */
html[data-embedded] header nav { display: none; }
html[data-embedded] header h1 { display: none; }
/* 宽度：内嵌页一律铺满 frame。这里原本是一张写死的类名清单，每加一个新页面都得记得回来补一行，
   而 .ac-app / .rv-app / .sl-app / .si-app / .od-app / .ak-app 就是一直没补上的——外壳已经铺满，
   frame 里的页面还按自己的 860~1280px 居中，于是内容两侧又多出一圈白边。
   各页根容器的约定是 body 下那一个 class 以 -app 结尾的 div（.set-app、.rpt-app……），
   按后缀选就不用再维护清单；没有 max-width 的满屏页（.fs-app、.lb-app）命中了也没有副作用。 */
html[data-embedded] body > [class$="-app"] { max-width: none; }
/* 上下留白：外壳已经有自己的页头，这几页把顶部留白收窄一档。
   自己撑满一屏、内部分栏滚动的 .fs-app / .lb-app / .chat-app 不在此列——
   它们本来就是无留白的满屏布局，给了 padding 反而会挤掉内部可视高度。 */
html[data-embedded] .tool-app,
html[data-embedded] .mem-app,
html[data-embedded] .rpt-app,
html[data-embedded] .set-app,
html[data-embedded] .fin-app,
html[data-embedded] .ph-app { padding-top: 4px; padding-bottom: 28px; }
html[data-embedded] .chat-app { box-shadow: none; }

/* 按角色藏入口（规则见 shared/common.js 的 SquAccess）：拿到规则前带 data-api 的先不画；没放行的打 data-denied。 */
html:not([data-access-ready]) [data-api],
[data-denied] { display: none !important; }