/* 給与レポート（pay-report.html / en/pay-report.html）の見た目。
   ★2026-08-27 に日英の <style> から切り出した。それまで 779行が2枚に同じ内容で入っていて、
   片方だけ直すと日英で見た目がずれた（コメントの訳だけが違い、規則は1バイトも同じだった）。
   ⚠️ ここを触ると日英の両方が同時に変わる。片方だけ変えたいときは、
   そのページの <link> の後ろに小さい <style> を足す（この1枚を分岐させない）。
   ⚠️ pay-viz.css と同じ切り出し方。読み込む順は Tailwind CDN より前のまま変えない。 */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#0a0c0f;color:#e8edf2;font-family:'Inter','Noto Sans JP',sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");background-size:128px;opacity:.3}
nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s ease}
nav.scrolled{background:rgba(10,12,15,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-link{color:rgba(255,255,255,.6);font-size:.85rem;font-weight:500;letter-spacing:.04em;transition:color .2s;text-decoration:none}
.nav-link:hover{color:#fff}
.logo-img{height:40px;width:auto;filter:brightness(1.15) drop-shadow(0 0 8px rgba(249,115,22,.5));transition:filter .3s}
.btn-orange{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-weight:700;font-size:.9rem;background:linear-gradient(135deg,#f97316,#f5c842);color:#000;border:none;cursor:pointer;transition:opacity .2s,transform .2s cubic-bezier(.16,1,.3,1);text-decoration:none}
.btn-orange:hover{opacity:.9;transform:translateY(-1px)}
.btn-orange:focus-visible{outline:2px solid rgba(245,200,66,.7);outline-offset:3px}
.btn-orange:active{transform:translateY(1px)}
.btn-orange:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-weight:600;font-size:.9rem;color:#e8edf2;border:1px solid rgba(255,255,255,.15);background:transparent;cursor:pointer;transition:border-color .2s,background .2s;text-decoration:none}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.btn-ghost:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.card{background:rgba(17,22,32,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px}
/* ★項目名は小さい・薄い・全部大文字の3つ重ねで読みにくかった（2026-08-27 オーナー指摘
   「対象月」「勤務時間（Duty time）」…が灰色の薄い文字で見えにくい）。
   明るさを上げ・少し大きくし・字間と全部大文字をやめる。入力欄の文字（#e8edf2）よりは
   一段落として、項目名 → 入力値 → 補足（.fld-hint）の順に読める強さを保つ。 */
.form-label{display:block;font-size:.83rem;font-weight:700;color:#ccd6e2;margin-bottom:8px;letter-spacing:.01em;line-height:1.5}
/* 欄の小札は3つ。★色の役割を分ける（2026-08-13 その4）。
   これまでは「任意」だけが在り、しかもブランド最強色の金だった＝いちばん目立つ色が
   「入れなくていい欄」に付いていた。必須の欄には印すら無かった。
     必須 = オレンジ（.sec-tag.req と同じ色）
     自動 = 緑（.form-input.ai-filled と同じ色＝こちらが入れた値）
     任意 = 中立グレー（.sec-tag.opt と同じ色）
   ★.req-tag が付く欄は「ゲートが実際に見ている欄」と一致していること。
     ズレると画面と送信の判定が食い違う。db/test-form-contract.mjs の静的検査⑧が見張る。 */
.opt-tag,.req-tag,.auto-tag,.miss-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:none}
.opt-tag{color:#9ca3af;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.req-tag{color:#fb923c;background:rgba(249,115,22,.13);border:1px solid rgba(249,115,22,.3)}
.auto-tag{color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.28)}
/* ★2026-08-27 オーナー指示。「匿名で提出」を押したとき、足りない必須項目の
   右横に出す赤い札。markMissing() が挿し、markRequired() が埋まった瞬間に落とす。
   ★ラベルの中に流し込む（.fld.is-req::after の ✓ と同じ右上に浮かせると、
     「パーディアム（その月の合計）」のような長いラベルと2列組みで重なる）。 */
.miss-tag{color:#f87171;background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.36)}
.form-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;color:#e8edf2;font-size:.9rem;transition:border-color .2s,background .2s;outline:none;font-family:'Inter','Noto Sans JP',sans-serif}
/* ★iOS は 16px 未満の入力欄に触れるとページごと拡大し、戻らない。拡大した画面では
   position:fixed のヘッダーと常設バーが窓より広い箱になり、左右とも切れる
   （2026-08-27、オーナーの iPhone 16 で実測 1.09 倍）。⚠️ この 16px を下げない。 */
@media (pointer:coarse),(max-width:820px){.form-input{font-size:16px}}
.form-input:focus{border-color:rgba(245,200,66,.4);background:rgba(255,255,255,.07)}
.form-input:focus-visible{outline:2px solid rgba(245,200,66,.35);outline-offset:1px}
.form-input::placeholder{color:#6b7d93}
.form-input:disabled{opacity:.45;cursor:not-allowed}
/* ★読み取り専用は「無効」に見せない（opacity を落とさない）。こちらが計算した
   数字が入るだけで、その額面はページで一番大事な数字なので読めることが要る。
   触れないことは破線の枠とわずかに沈んだ面で示す。 */
.form-input[readonly]{cursor:default;border-style:dashed;background:rgba(255,255,255,.03)}
.form-input[readonly]:focus{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
select.form-input option,select.form-input optgroup{background:#111620}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);color:#e8edf2;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:background .2s,color .2s;flex-shrink:0}
footer{background:#060809;border-top:1px solid rgba(255,255,255,.05)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0a0c0f}
::-webkit-scrollbar-thumb{background:#18212f;border-radius:3px}
.warn-row{display:flex;align-items:flex-start;gap:8px;padding:10px 16px;border-radius:10px;background:rgba(245,200,66,.05);border:1px solid rgba(245,200,66,.18);color:#f5c842;font-size:.78rem;line-height:1.65}
/* 見出しの下の1行。ブランド金の丸ピル。
   ★ここに数字を書かない（2026-08-23 オーナー判断）。
     前は「1000件以上の給与情報が提出されました！」と出ていたが、実際の
     給与レポートは2桁に届いていない。数字を盛らないのは VISION の約束で、
     しかもここは「一次データを出してもらう」ための画面＝いちばん盛っては
     いけない場所だった。実数を出しても人数が外から分かるだけなので出さない。
     代わりに Give & Get（1件出すと読める）そのものを書く。
     数字が戻ってこないことは db/test-form-contract.mjs が見張る。 */
.pay-count{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:radial-gradient(120% 160% at 0% 50%,rgba(245,200,66,.14),transparent 70%),rgba(245,200,66,.05);
  border:1px solid rgba(245,200,66,.24);color:#f5c842;font-size:.82rem;font-weight:700;letter-spacing:-.01em;
  /* 狭い画面で2行になったとき、2行目に数文字だけ残さない。
     auto-phrase は日本語を文節で折る（「パイロッ／ト」で切れるのを防ぐ）。
     対応していないブラウザは balance だけが効いて、2行が均等に割れる。 */
  text-align:center;text-wrap:balance;word-break:auto-phrase}
/* ── セクション（必須 / 推奨 / 任意）─────────────────────── */
.sec{margin-bottom:20px}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.sec-title{font-size:1.02rem;font-weight:800;letter-spacing:-.015em}
.sec-tag{font-size:.62rem;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.05em;white-space:nowrap}
.sec-tag.req{background:rgba(249,115,22,.14);color:#fb923c;border:1px solid rgba(249,115,22,.32)}
.sec-tag.rec{background:rgba(61,155,255,.12);color:#5fb0ff;border:1px solid rgba(61,155,255,.3)}
.sec-tag.opt{background:rgba(255,255,255,.06);color:#9ca3af;border:1px solid rgba(255,255,255,.14)}
.sec-sub{font-size:.78rem;color:#6b7d93;margin-bottom:18px;line-height:1.65}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
/* ラベルが1行の列と2行の列が混ざると input の上端がズレる（EN で実測18px）。
   ラベルを短く書き直す対処は、言語を足すたびに再発する。subgrid で
   「ラベル行・入力行・注記行」を列をまたいで揃え、行の高さは中身に決めさせる。
   row-gap を 0 にするのは、残すと label→input の間にも同じ隙間が入るため
   （縦の間隔は .form-label の margin-bottom と .fld-hint の margin-top が持つ）。 */
.grid2>.fld,.grid3>.fld{display:grid;grid-template-rows:subgrid;grid-row:span 3;margin-bottom:0}
.grid2:has(>.fld),.grid3:has(>.fld){margin-bottom:16px}
/* 国名・役職は選択肢が長い（最長「セントビンセント及びグレナディーン諸島」274px）。
   241カ国すべてが収まる幅は存在しないので、実際に選ばれる国が読み切れる配分を優先する。
   税率は2〜3桁、乗務日数は2桁しか入らないため狭くてよい。 */
.grid2.tax-row{grid-template-columns:1.6fr .9fr}
.grid3.role-row{grid-template-columns:1.5fr .75fr .75fr}
@media(max-width:600px){.grid2,.grid3,.grid2.tax-row,.grid3.role-row{grid-template-columns:1fr}}
.fld{margin-bottom:16px}
.fld:last-child{margin-bottom:0}
/* 必須の欄には左にレールを引く。埋まったら中立色に落とす（.is-done は updateSteps() が付ける）。
   ＝列を上から眺めるだけで「まだ残っている欄」が分かる。小札だけだと、
   埋めた欄と埋めていない欄が同じ見た目のまま並ぶ。
   ★border ではなく擬似要素で外に出す。border+padding にすると必須の欄だけ内側にずれ、
     隣に任意の欄が並ぶ2列組み（フライトタイム／勤務時間 など）で行がガタつく。 */
.fld.is-req{position:relative}
.fld.is-req::before{content:'';position:absolute;left:-12px;top:3px;bottom:3px;width:2px;border-radius:2px;
  background:rgba(249,115,22,.32);transition:background .28s cubic-bezier(.16,1,.3,1)}
/* ★埋まったら「消す」のではなく「緑にする」（2026-08-17 オーナー指摘）。
   もとは中立グレーに落としていた＝印が消えるので、埋めた欄と、そもそも必須でない欄が
   同じ見た目になっていた。残り＝オレンジ／済み＝緑 の2値にして、どちらも目に見える形にする。 */
.fld.is-req.is-done::before{background:rgba(52,211,153,.45)}
/* 埋まった欄の右上に小さい ✓。欄が縦に並ぶと ✓ が1列に揃うので、
   上から眺めるだけで「まだ残っている欄」が分かる。
   ★::before は左のレールが使っているので ::after を使う。
   ★pointer-events:none。ラベルの上に重なるので、押せてしまうと欄が選べなくなる。 */
.fld.is-req::after{content:'✓';position:absolute;right:0;top:-2px;width:18px;height:18px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;color:#34d399;background:rgba(52,211,153,.12);
  border:1px solid rgba(52,211,153,.3);opacity:0;transform:scale(.55);pointer-events:none;
  transition:opacity .18s,transform .28s cubic-bezier(.34,1.56,.64,1)}
.fld.is-req.is-done::after{opacity:1;transform:none}
/* 埋まった欄の「必須」はもう用済み。沈めて、残っている欄のオレンジだけが目に入るようにする
   （札そのものは消さない。HTML の req-tag が必須の唯一の出どころなので）。 */
.fld.is-req .req-tag{transition:opacity .2s}
.fld.is-req.is-done .req-tag{opacity:.3}
@media (prefers-reduced-motion:reduce){.fld.is-req::before,.fld.is-req::after,.fld.is-req .req-tag{transition:none}}
/* ★足りない必須の欄を赤く囲う（2026-08-27 オーナー指示
     「そのまま必須項目の該当する欄まで飛んで、そこを赤く囲うとかはどう？」）。
   ★border-color と box-shadow で描く＝レイアウトが動かないので、2列組みの行
     （フライトタイム／勤務時間 など）がガタつかない。 */
.fld.is-miss .form-input{border-color:rgba(239,68,68,.7);background:rgba(239,68,68,.06);
  box-shadow:0 0 0 3px rgba(239,68,68,.13)}
/* ★飛んで focus しても赤いまま。金に戻ると「もう直った」ように見える。 */
.fld.is-miss .form-input:focus{border-color:rgba(239,68,68,.85);background:rgba(239,68,68,.08)}
.fld.is-miss .form-input:focus-visible{outline-color:rgba(239,68,68,.5)}
/* 役職・区分は値を hidden の #f-jobrole が持つので、囲うのはチェックボックス群のほう。 */
.fld.is-miss .roleboxes{border-radius:14px;outline:2px solid rgba(239,68,68,.45);outline-offset:7px}
/* 左のレールも赤へ。オレンジのままだと「まだ残っている」と「押したのに空だった」が同じ色になる。 */
.fld.is-req.is-miss::before{background:rgba(239,68,68,.7)}
/* 段の見出しの右端に出す進み具合のゲージ。押すと最初の未入力欄へ飛ぶ。
   ＝送信ボタンが出ない理由が、常に見出しに書いてある状態にする。
   ★器は中立の灰、伸びるバーだけ緑（2026-08-18 オーナー決定）。
     「まだ残っている欄」は各欄の左レールのオレンジが受け持つので、
     ここまでオレンジにすると画面がオレンジだらけになる。 */
.sec-prog{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;
  font-size:.62rem;font-weight:800;letter-spacing:.05em;white-space:nowrap;cursor:pointer;
  color:#9ca3af;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:background .2s,border-color .2s,color .2s,transform .12s cubic-bezier(.16,1,.3,1)}
.sec-prog:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.sec-prog:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.sec-prog:active{transform:translateY(1px)}
.sec-prog.done{color:#34d399;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3);cursor:default}
.sec-prog.done:hover{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.sec-prog.done:active{transform:none}
/* 器と、その中を伸びる緑。中身は markProgress() が1回だけ組み立てる。 */
.sec-prog-bar{width:46px;height:5px;border-radius:999px;flex:none;overflow:hidden;background:rgba(255,255,255,.12)}
.sec-prog-bar>i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#34d399,#48c78e);
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.sec-prog.done .sec-prog-bar{background:rgba(52,211,153,.22)}
/* 桁が 0%→100% と増えても、100% で頭に ✓ が付いても、小札の幅が動かないように
   等幅数字＋最小幅で固定する（一番長い「✓ 100%」に合わせてある）。 */
.sec-prog-num{font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
@media (prefers-reduced-motion:reduce){.sec-prog-bar>i{transition:none}}
.fld-hint{font-size:.72rem;color:#6b7d93;margin-top:6px;line-height:1.6}
.fld-hint b{color:#a8b3c2;font-weight:700}
.cur-row{display:grid;grid-template-columns:210px 1fr;gap:10px}
@media(max-width:420px){.cur-row{grid-template-columns:1fr}}
/* ── 年換算のライブ表示 ─────────────────────────────────── */
.sal-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 18px;border-radius:14px;border:1px solid rgba(245,200,66,.25);background:radial-gradient(130% 170% at 100% 0%,rgba(245,200,66,.11),transparent 60%),rgba(245,200,66,.04)}
.sal-total-lab{font-size:.75rem;font-weight:700;color:#9ca3af;letter-spacing:.04em}
.sal-total-val{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:#f5c842;font-variant-numeric:tabular-nums;line-height:1.1}
.sal-total-val .u{font-size:.8rem;font-weight:600;color:#9ca3af;margin-left:5px;letter-spacing:0}
/* ── 常設の提出バー（2026-08-27 オーナー指示）──────────────────────
   「3. 報酬」が出たところから、画面の下に**年換算の総額と「匿名で提出」**を置く。
   途中で出したい人が押せる所を、いつでも持っている状態にする。
   ★#submit-block が画面に入っている間は .is-off で沈める（同じボタンを2つ並べない）。
   ★動かすのは transform と opacity だけ（transition-all は使わない）。 */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:120;
  /* ★箱を画面より広くしない。iOS はページが横に溢れるとレイアウト幅を広げ、
     left:0;right:0 はその広げられた幅に貼りつく＝見えている窓からは左右にはみ出す
     （2026-08-27、実機で数字とボタンの端が左右とも切れていた。真因は上のヘッダーの溢れ）。
     ⚠️ viewport-fit=cover は足さない。env(safe-area-inset-*) が 0 なのは正しい。 */
  box-sizing:border-box;max-width:100vw;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,12,15,0),rgba(10,12,15,.93) 26%,rgba(10,12,15,.985));
  border-top:1px solid rgba(245,200,66,.18);backdrop-filter:blur(14px);
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1)}
.sticky-cta.is-off{opacity:0;transform:translateY(105%);pointer-events:none}
.sticky-cta[hidden]{display:none}
.sticky-cta-in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:14px}
.sticky-cta-sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sticky-cta-lab{font-size:.66rem;font-weight:700;color:#9ca3af;letter-spacing:.05em}
.sticky-cta-val{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;color:#f5c842;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta-val .u{font-size:.68rem;font-weight:600;color:#9ca3af;margin-left:4px;letter-spacing:0}
.sticky-cta .btn-orange{flex:0 0 auto;padding:11px 20px;font-size:.86rem}
/* バーの下に隠れる欄が出ないよう、出ているあいだだけ足元を空ける。 */
body.has-cta #form-wrap{padding-bottom:96px}
@media (max-width:430px){
  .sticky-cta-in{gap:10px}
  .sticky-cta-val{font-size:1rem}
  .sticky-cta .btn-orange{padding:10px 15px;font-size:.79rem}
}
/* ★320px（iPhone SE 1 / 5s）だけもう一段詰める。ボタンの文字数は言語で違い、
   英語の「Submit anonymously」は 160px（日本語の「匿名で提出する」は 118px）。
   その差で金額の右端「JPY / yr」が 16px ぶん省略記号に化けていた（2026-08-27 実測）。
   バーの左右（16→10）とボタンの内側（15→11）で 20px 返す。
   ⚠️ 金額の font-size は下げない。ここは読ませる数字で、単位より先に守る。
   ⚠️ 360px 以上には当てない（今のままで足りている）。 */
@media (max-width:340px){
  .sticky-cta{padding-left:10px;padding-right:10px}
  .sticky-cta-in{gap:8px}
  .sticky-cta .btn-orange{padding:10px 11px;font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
.sal-hint{font-size:.73rem;color:#6b7d93;margin-top:8px;line-height:1.65}
/* ── 送信後の結果 ───────────────────────────────────────── */
.res{border-radius:20px;border:1px solid rgba(52,211,153,.3);background:radial-gradient(130% 170% at 0% 0%,rgba(52,211,153,.12),transparent 60%),rgba(17,22,32,.7);padding:28px}
/* 出し終わりの目印。confetti.js のクラッカーと同じ瞬間に出る。
   ★動きを控える設定では animation だけ止める。opacity は 1 のままなので消えない。 */
.res-pop{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;line-height:1;margin-bottom:14px;
  background:radial-gradient(120% 120% at 30% 20%,rgba(245,200,66,.30),rgba(52,211,153,.10) 62%,transparent);
  border:1px solid rgba(245,200,66,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px -8px rgba(245,200,66,.42),0 20px 42px -24px rgba(52,211,153,.55);
  animation:resPop .62s cubic-bezier(.2,1.5,.32,1) both}
@keyframes resPop{from{opacity:0;transform:scale(.4) rotate(-16deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.res-pop{animation:none}}
.res-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.06em;color:#34d399;text-transform:uppercase;margin-bottom:10px}
.res-big{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;color:#34d399;font-variant-numeric:tabular-nums;line-height:1.15}
.res-sub{font-size:.85rem;color:#9ca3af;margin-top:4px;font-variant-numeric:tabular-nums}
.res-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.res-row:last-child{border-bottom:none}
.res-k{color:#6b7d93;font-size:.82rem;flex:none}
.res-v{font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;text-align:right}
.res-v.hi{color:#f5c842;font-size:1.15rem;font-weight:800}
.bench{margin-top:18px;padding:18px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.bench-bar{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(95,176,255,.35),rgba(52,211,153,.35),rgba(245,200,66,.45));margin:16px 0 8px}
.bench-you{position:absolute;top:-5px;width:4px;height:20px;border-radius:2px;background:#f5c842;box-shadow:0 0 0 3px rgba(245,200,66,.22);transition:left .5s cubic-bezier(.16,1,.3,1)}
.bench-scale{display:flex;justify-content:space-between;font-size:.68rem;color:#6b7d93;font-variant-numeric:tabular-nums}
.bench b{color:#e8edf2;font-weight:700}
.res-note{font-size:.75rem;color:#6b7d93;margin-top:16px;line-height:1.7}
/* ── アラート ───────────────────────────────────────────── */
.form-alert{display:block;border:1px solid rgba(239,68,68,.45);border-left:3px solid #ef4444;background:rgba(239,68,68,.10);border-radius:12px;padding:14px 16px;color:#e8edf2;font-size:.9rem;line-height:1.7;animation:formAlertIn .22s ease-out}
.form-alert .fa-title{display:block;font-weight:700;font-size:.95rem;color:#f87171;margin-bottom:4px;letter-spacing:.01em}
@keyframes formAlertIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.form-alert{animation:none}.bench-you{transition:none}}
.restore-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-radius:12px;background:rgba(61,155,255,.07);border:1px solid rgba(61,155,255,.22);color:#5fb0ff;font-size:.79rem;margin-bottom:18px}
.restore-bar button{margin-left:auto;font-size:.74rem;font-weight:700;color:#9ca3af;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:4px 12px;cursor:pointer;transition:color .2s,border-color .2s}
.restore-bar button:hover{color:#e8edf2;border-color:rgba(255,255,255,.32)}
.restore-bar button:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
/* ── 段階表示 ── 一度出したら隠さないので、出るときだけ動かす。
   高さは animate しない（レイアウトが跳ねる）。transform と opacity だけ。 */
.step[hidden],.opt-fld[hidden]{display:none}
.step-in{animation:stepIn .34s cubic-bezier(.16,1,.3,1) both}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.opt-fld{margin-bottom:16px}
/* ★:last-child を外さない。教官の節（#opt-instr-pay）だけ中に .fld が3つ並ぶので、
   全部を 0 にすると欄と欄がくっついて1つの塊に見える（2026-08-26 その3）。 */
.opt-fld>.fld:last-child{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:700;color:#a8b3c2;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.chip:hover{color:#f5c842;border-color:rgba(245,200,66,.45);background:rgba(245,200,66,.07)}
.chip:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.chip:active{transform:translateY(1px)}
.chip .p{font-size:.95rem;line-height:1;font-weight:800;color:#f5c842}
/* 役職・区分（複数選択）。中身は node gen-vocab.mjs が配る。 */
.roleboxes{display:flex;flex-wrap:wrap;gap:8px}
.rolebox{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;font-size:.82rem;font-weight:600;color:#a8b3c2;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .18s cubic-bezier(.16,1,.3,1)}
.rolebox:hover{color:#e8edf2;border-color:rgba(245,200,66,.4);background:rgba(245,200,66,.06)}
.rolebox:active{transform:translateY(1px)}
.rolebox input{flex:none;width:16px;height:16px;margin:0;accent-color:#f5c842;cursor:pointer}
.rolebox:has(input:checked){color:#f5c842;border-color:rgba(245,200,66,.55);background:rgba(245,200,66,.1)}
.rolebox:has(input:focus-visible){outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rolebox{transition:none}}
/* 給与の内訳。繰り返し行（変動給／その他の現金手当）と年に一度のもの。 */
.pd-none{margin-top:10px;padding:7px 12px;font-size:.78rem}
.pd-block{margin-bottom:16px}
.pd-rows{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.pd-row{position:relative;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09)}
.pd-row>.fld{margin-bottom:12px}
/* × は箱の右上に浮いている。逃げの余白は1行目の見出しにだけ持たせる。
   行ぜんぶに右の余白を持たせると、欄だけが箱の中で左に寄って見える。 */
.pd-row>.fld:first-of-type>.form-label{padding-right:34px}
/* ★2026-08-26 その2、行の先頭が「種類」（必須）になったので、✓ の印が × と同じ角に
   重なった。印だけ × の左へ逃がす（× は 9px + 28px ＝ 右から 37px まで使う）。 */
.pd-row>.fld:first-of-type.is-req::after{right:28px}
.pd-row>.fld:last-child{margin-bottom:0}
.pd-del{position:absolute;top:9px;right:9px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#8a95a3;font-size:1rem;line-height:1;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.pd-del:hover{color:#e8edf2;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.pd-del:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.pd-warn{margin:4px 0 16px;padding:11px 14px;border-radius:12px;font-size:.8rem;line-height:1.6;color:#f0b8b8;background:rgba(214,92,92,.1);border:1px solid rgba(214,92,92,.32)}
.pd-warn[hidden]{display:none}
.pd-year{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09)}
.pd-year-h{margin-bottom:14px;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8a95a3}
@media (prefers-reduced-motion:reduce){.pd-del{transition:none}}
@media (prefers-reduced-motion:reduce){.step-in{animation:none}}
/* ── 手当ごとの内訳（畳んで残す）── 総支給の欄とは排他 ────────── */
.pay-detail{margin-top:4px;border-top:1px solid rgba(255,255,255,.07);padding-top:14px}
/* ★2026-08-27 オーナー指示「『＋給与の内訳を追加』と、その他の役職の給与の内訳を
   追加（５種類あるやつ）のボタンを目立たせよう。DEEP PAY を見るには必須だから」。
   もとは破線の枠＋灰色の字で、周りの入力欄より弱かった＝「開かなくてよいもの」に見えていた。
   閉じているあいだはブランド金の実線ピル（地は .pay-count と同じ放射）。開いたら静める
   （用の済んだボタンが居座らない）。6つ（内訳＋役割5つ）ともこの1か所で決まる。
   ★ここに説明文を足さない。うたい文句になり得るのは「DEEP PAY が開く」だけだが、
     DEEP PAY のページはまだ無く「準備中」なので、書くと嘘になる。 */
.pay-detail>summary{display:flex;align-items:center;gap:9px;width:fit-content;max-width:100%;list-style:none;cursor:pointer;font-size:.84rem;font-weight:700;color:#f5c842;padding:9px 16px 9px 13px;border-radius:999px;border:1px solid rgba(245,200,66,.42);
  background:radial-gradient(120% 160% at 0% 50%,rgba(245,200,66,.14),transparent 70%),rgba(245,200,66,.05);
  transition:color .2s,border-color .2s,background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.pay-detail>summary::-webkit-details-marker{display:none}
.pay-detail>summary:hover{color:#ffd968;border-color:rgba(245,200,66,.7);transform:translateY(-1px);
  background:radial-gradient(120% 160% at 0% 50%,rgba(245,200,66,.2),transparent 70%),rgba(245,200,66,.09)}
.pay-detail>summary:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.pay-detail>summary:active{transform:translateY(1px)}
/* ＋は丸に入れる。文字だけだと「開く印」に見えず、押せる物に見えない。 */
.pay-detail>summary .p{flex:none;width:19px;height:19px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.86rem;line-height:1;font-weight:800;color:#f5c842;background:rgba(245,200,66,.16);border:1px solid rgba(245,200,66,.42);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.pay-detail[open]>summary{color:#e8edf2;border-color:rgba(245,200,66,.32);background:rgba(255,255,255,.04);margin-bottom:16px}
.pay-detail[open]>summary:hover{color:#f5c842;background:rgba(245,200,66,.07);transform:none}
.pay-detail[open]>summary .p{transform:rotate(45deg)}
.pay-detail-b{animation:stepIn .3s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.pay-detail-b{animation:none}.pay-detail>summary,.pay-detail>summary .p{transition:none}}
/* ── 4. 契約と税：前月の値が入っているときは要約1行に畳む ────────── */
.sum-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);font-size:.81rem;color:#c8d2de;line-height:1.7}
.sum-row b{color:#e8edf2;font-weight:700}
.sum-row button{margin-left:auto;flex:none;font-size:.74rem;font-weight:700;color:#a8b3c2;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:5px 12px;cursor:pointer;transition:color .2s,border-color .2s}
.sum-row button:hover{color:#f5c842;border-color:rgba(245,200,66,.45)}
.sum-row button:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.sum-row[hidden],#s4-body[hidden]{display:none}
/* ── 明細から自動入力 ── 端末の中で黒塗り → 本人が見る → 送る ── */
/* 入口の2択（明細から自動入力／手動で入力）*/
.entry-q{font-size:.84rem;font-weight:700;color:#a8b3c2;letter-spacing:-.01em;margin:0 0 12px}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px}
@media (max-width:640px){.entry-grid{grid-template-columns:1fr}}
.entry-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;
  text-align:left;padding:22px 18px 18px;border-radius:16px;cursor:pointer;color:#e8edf2;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);
  box-shadow:0 20px 44px -32px rgba(0,0,0,.95),0 2px 6px -3px rgba(0,0,0,.55);
  transition:border-color .22s,background .22s,box-shadow .22s,transform .3s cubic-bezier(.16,1,.3,1)}
.entry-card.is-primary{border-color:rgba(245,200,66,.34);
  background:radial-gradient(120% 150% at 0% 0%,rgba(245,200,66,.11),transparent 62%),rgba(245,200,66,.03);
  box-shadow:0 24px 50px -32px rgba(245,200,66,.5),0 2px 6px -3px rgba(0,0,0,.55)}
.entry-card:hover{transform:translateY(-2px);border-color:rgba(245,200,66,.6);
  box-shadow:0 26px 54px -30px rgba(245,200,66,.55),0 3px 8px -3px rgba(0,0,0,.6)}
.entry-card:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:3px}
.entry-card:active{transform:translateY(0)}
.entry-ico{font-size:1.45rem;line-height:1;color:#f5c842}
.entry-t{font-size:1rem;font-weight:800;letter-spacing:-.02em}
/* 選ぶ材料（2026-08-13 その4）。説明1行だと「明細を読ませると何が良いのか」が伝わらない。
   ✓ は緑 ── この画面で緑は既に「安全側／こちらが入れた値」の色（.form-input.ai-filled）。 */
.entry-benefits{display:flex;flex-direction:column;gap:5px;margin-top:1px;width:100%}
.entry-b{display:flex;align-items:flex-start;gap:7px;font-size:.735rem;line-height:1.55;color:#a8b3c2;text-align:left}
.entry-b[hidden]{display:none}
.entry-b>i{flex:none;font-style:normal;font-weight:800;color:#34d399;line-height:1.55}
.entry-b b{color:#e8edf2;font-weight:700}
.entry-formats{margin-top:auto;padding-top:10px;font-size:.63rem;font-weight:700;letter-spacing:.09em;color:#6b7d93}
.ps-benefits{margin-top:10px}
/* 「暗号化＆セキュア」の横の盾（2026-08-14）。行の頭の ✓ と同じ緑にして、
   同じ「安心の印」の仲間に見せる。文字の流れの中に置くので inline のまま。 */
.entry-shield{flex:none;width:14px;height:14px;margin-top:2px;color:#34d399}
.ai-legend{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 14px;border-radius:10px;
  font-size:.74rem;line-height:1.6;color:#a8b3c2;background:rgba(52,211,153,.05);border:1px solid rgba(52,211,153,.2)}
.ai-legend>i{flex:none;font-style:normal;color:#34d399;font-size:.7rem}
.ai-legend[hidden]{display:none}
.entry-tag{position:absolute;top:14px;right:14px;font-size:.62rem;font-weight:800;letter-spacing:.05em;
  padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.05);color:#a8b3c2;border:1px solid rgba(255,255,255,.12)}
.entry-card.is-primary .entry-tag{background:rgba(245,200,66,.12);color:#f5c842;border-color:rgba(245,200,66,.28)}
.ps-step{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:#f5c842;margin:0 0 8px}
.ps-skip{display:inline-block;margin-top:10px;padding:4px 2px;font-size:.76rem;font-weight:700;
  color:#a8b3c2;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.18);cursor:pointer;
  transition:color .2s,border-color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.ps-skip:hover{color:#e8edf2;border-bottom-color:rgba(245,200,66,.6)}
.ps-skip:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:3px}
.ps-skip:active{transform:translateY(1px)}
/* 手動で入力を選んだあと ── 明細の入口は1行の帯にして上に残す */
.ps.is-slim .ps-step,.ps.is-slim .ps-benefits,.ps.is-slim .ps-skip,.ps.is-slim .ps-drop-txt small{display:none}
.ps.is-slim .ps-drop{padding:11px 14px}
.ps.is-slim .ps-drop-txt b{font-size:.82rem}
.ps{margin-bottom:18px}
.ps-drop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:12px;border:1px dashed rgba(245,200,66,.3);background:linear-gradient(180deg,rgba(245,200,66,.06),rgba(245,200,66,.02));color:#e8edf2;cursor:pointer;transition:border-color .2s,background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.ps-drop:hover,.ps-drop.is-over{border-color:rgba(245,200,66,.6);background:linear-gradient(180deg,rgba(245,200,66,.12),rgba(245,200,66,.04))}
.ps-drop:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.ps-drop:active{transform:translateY(1px)}
/* 明細を選んだときだけ（ステップ 1/2）── ここが画面の主役なので落とす的を大きく取る。
   帯のまま出すと、何をする画面なのかが一目で分からない。 */
.ps:not(.is-slim) .ps-drop{flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:34px 22px;border-radius:16px}
.ps:not(.is-slim) .ps-ico{font-size:1.9rem}
.ps:not(.is-slim) .ps-drop-txt{align-items:center;gap:4px}
.ps:not(.is-slim) .ps-drop-txt b{font-size:.95rem}
.ps-ico{font-size:1.15rem;line-height:1;flex:none}
.ps-drop-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ps-drop-txt b{font-size:.86rem;font-weight:700;letter-spacing:-.01em}
.ps-drop-txt small{font-size:.72rem;color:#a8b3c2;line-height:1.5}
.ps-edit,.ps-res{margin-top:12px;padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);box-shadow:0 18px 40px -28px rgba(245,200,66,.35),0 2px 6px -2px rgba(0,0,0,.5);animation:stepIn .34s cubic-bezier(.16,1,.3,1) both}
.ps-lead{font-size:.82rem;font-weight:700;color:#e8edf2;margin-bottom:10px}
.ps-lead-sm{font-size:.78rem;font-weight:600;color:#f5c842;margin:10px 0 2px}
/* ★確認画面だけ本文の段組み（max-w-2xl＝約640px）より外へ広げる。
   ここは「本人が字を読んで確かめる」ただ一つの場所で、**読めない大きさは
   確認していないのと同じ**。負のマージンで外へ出すので transform を使わない
   （transform を掛けると中の position:fixed の基準がここに移ってしまう）。
   上限 1440px は明細の実寸（長辺 MAX_EDGE=1568px）に届く手前まで。これ以上広げても
   canvas は width:auto ＝実寸止まりで、拡大されずに余白が増えるだけ。 */
.ps-edit{width:min(1440px,94vw);max-width:none;margin-left:calc((100% - min(1440px,94vw)) / 2)}
.ps-stage{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;line-height:0;border-radius:10px;overflow:hidden;background:#0b0f14;touch-action:none}
/* ★頭打ちは「高さ」ではなく「幅」で決める。以前は max-height:62vh で、A4縦の紙は
   高さで先に止まり、幅はカードの半分ほどしか使えなかった（＝字が読めない）。
   縦に長い紙は画面をはみ出して縦スクロールになるが、**読めないより良い**。 */
.ps-cv{display:block;max-width:100%;max-height:min(150vh,1500px);width:auto;height:auto}
.ps-rect{position:absolute;z-index:2;background:#000;border:1px solid rgba(245,200,66,.75);cursor:move;touch-action:none}
/* 送る枠。外側を暗く落とすのは box-shadow を画面いっぱいに広げるだけ（要素は1つ）。
   本体は pointer-events:none ＝中の黒塗りをこれまで通りつまめる。 */
.ps-frame{position:absolute;z-index:3;pointer-events:none;border:2px solid #f5c842;border-radius:3px;box-shadow:0 0 0 9999px rgba(2,6,12,.7)}
.ps-frame-tag{position:absolute;left:0;top:0;pointer-events:auto;cursor:move;touch-action:none;background:#f5c842;color:#0b0f14;font-size:.66rem;font-weight:800;line-height:1;letter-spacing:.02em;padding:5px 8px;border-radius:0 0 7px 0;white-space:nowrap;user-select:none}
.ps-frame-grip{position:absolute;width:18px;height:18px;pointer-events:auto;touch-action:none;background:#f5c842;border:1px solid rgba(0,0,0,.45);border-radius:3px}
.ps-frame-grip.is-nw{left:-9px;top:-9px;cursor:nwse-resize}
.ps-frame-grip.is-ne{right:-9px;top:-9px;cursor:nesw-resize}
.ps-frame-grip.is-sw{left:-9px;bottom:-9px;cursor:nesw-resize}
.ps-frame-grip.is-se{right:-9px;bottom:-9px;cursor:nwse-resize}
.ps-rect:focus-visible{outline:2px solid #f5c842;outline-offset:2px}
.ps-rect-del{position:absolute;top:6px;right:6px;width:22px;height:22px;line-height:1;border-radius:999px;border:1px solid rgba(0,0,0,.3);background:rgba(255,255,255,.92);color:#0f172a;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.ps-rect-del:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.ps-rect-del:focus-visible{outline:2px solid #f5c842;outline-offset:2px}
.ps-rect-del:active{transform:scale(.9)}
.ps-rect-grip{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:3px;background:#f5c842;border:1px solid rgba(0,0,0,.4);cursor:nwse-resize}
.ps-hint,.ps-note{font-size:.72rem;color:#6b7d93;line-height:1.65;margin-top:8px}
.ps-note b{color:#a8b3c2}
.ps-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ps-btn{font-size:.78rem;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.ps-btn:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.ps-btn:active{transform:translateY(1px)}
.ps-btn-ghost{color:#a8b3c2;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16)}
.ps-btn-ghost:hover{color:#e8edf2;border-color:rgba(255,255,255,.34)}
.ps-btn-go{display:block;width:100%;margin-top:12px;padding:13px;font-size:.9rem;font-weight:800;color:#0b0f14;background:linear-gradient(180deg,#f7d15e,#e6b52c);border:1px solid rgba(245,200,66,.9);box-shadow:0 14px 30px -18px rgba(245,200,66,.8)}
.ps-btn-go:hover:not([disabled]){background:linear-gradient(180deg,#ffdd77,#f0c33e)}
.ps-btn-go[disabled]{opacity:.34;filter:grayscale(.75);box-shadow:none;cursor:not-allowed}
.ps-warn{margin-top:10px;font-size:.76rem;line-height:1.6;color:#f5c842}
/* ★枠が画像ぜんぶになったときの警告。ふつうの注意書き（.ps-warn の小さな金色）と
   同じ見え方だと読み飛ばされる。ここは「このまま押すと紙が丸ごと出ていく」唯一の
   歯止めなので、フォームのエラー（.form-alert）と同じ赤い呼び方に揃えて強くする。 */
.ps-frwarn{display:block;margin-top:12px;border:1px solid rgba(239,68,68,.45);border-left:3px solid #ef4444;background:rgba(239,68,68,.10);border-radius:12px;padding:13px 15px;color:#e8edf2;font-size:.88rem;line-height:1.7}
.ps-frwarn b{color:#f87171;font-weight:800}
/* ★探している間は明細そのものを出さない ────────────────────────
   以前は明細を先に描いてから、探索の結果を**あとから**その上に乗せていた。
   その数秒のあいだ、画面には「黒塗りの無い明細」＋「送る」ボタンが並ぶ。
   出来上がったものだと思って押せてしまう＝そのまま氏名も口座も外へ出る。
   送信ボタンは元から disabled だが、**disabled は見えない**。見えない歯止めは
   歯止めとして数えない。だから見えるところから消す。
   ★.ps-wait には JS が aspect-ratio を入れる（明細と同じ縦横比）。
     入れないと、明細が現れた瞬間にページの高さが飛んで、読んでいた場所を失う。 */
.ps-edit.is-wait > .ps-stage,
.ps-edit.is-wait > .ps-lead-sm,
.ps-edit.is-wait > .ps-frwarn,
.ps-edit.is-wait > .ps-hint,
.ps-edit.is-wait > .ps-bar,
.ps-edit.is-wait > .ps-warn,
.ps-edit.is-wait > .ps-confirm,
.ps-edit.is-wait > .ps-btn-go,
.ps-edit.is-wait > .ps-note{display:none !important}
.ps-wait{display:none}
.ps-edit.is-wait > .ps-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;width:100%;margin:0 auto;padding:24px;border-radius:10px;background:#0b0f14;border:1px solid rgba(255,255,255,.08);color:#a8b3c2;font-size:.78rem;line-height:1.7;text-align:center}
.ps-wait::before{content:"";flex:none;width:26px;height:26px;border-radius:999px;border:3px solid rgba(245,200,66,.22);border-top-color:#f5c842;animation:psSpin .7s linear infinite}
.ps-wait b{display:block;font-size:.86rem;font-weight:800;color:#e8edf2;margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.ps-wait::before{animation:none;border-top-color:rgba(245,200,66,.22)}}
.ps-scan{display:flex;align-items:flex-start;gap:7px;font-size:.75rem;line-height:1.6;color:#a8b3c2;margin:-4px 0 10px}
.ps-scan.is-busy::before{content:"";flex:0 0 auto;width:11px;height:11px;margin-top:3px;border-radius:999px;border:2px solid rgba(245,200,66,.28);border-top-color:#f5c842;animation:psSpin .7s linear infinite}
.ps-scan.is-warn{color:#f5c842}
@keyframes psSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ps-scan.is-busy::before{animation:none;border-top-color:rgba(245,200,66,.28)}}
.ps-confirm{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 13px;border-radius:11px;border:1px solid rgba(245,200,66,.3);background:rgba(245,200,66,.06);font-size:.78rem;font-weight:700;line-height:1.55;color:#e8edf2;cursor:pointer;transition:border-color .2s,background .2s}
.ps-confirm:hover{border-color:rgba(245,200,66,.55);background:rgba(245,200,66,.1)}
.ps-confirm:focus-within{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.ps-confirm.is-off{opacity:.5;cursor:default}
.ps-confirm input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:#e6b52c;cursor:pointer}
.ps-confirm.is-off input{cursor:default}
.ps-msg{margin-top:10px;padding:12px 14px;border-radius:12px;font-size:.8rem;line-height:1.6}
.ps-msg-busy{color:#a8b3c2;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.ps-msg-warn{color:#f5c842;border:1px solid rgba(245,200,66,.32);background:rgba(245,200,66,.07)}
.ps-res-title{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:#34d399}
.ps-res-title.ps-sm{font-size:.82rem;color:#a8b3c2;margin-top:18px}
.ps-res-lead{font-size:.78rem;color:#a8b3c2;line-height:1.7;margin-top:4px}
.ps-res-lead b{color:#e8edf2}
.ps-tbl{width:100%;margin-top:10px;border-collapse:collapse;font-size:.78rem}
.ps-tbl th{text-align:left;font-weight:700;color:#6b7d93;font-size:.68rem;letter-spacing:.04em;padding:0 0 6px}
.ps-tbl td{padding:7px 0;border-top:1px solid rgba(255,255,255,.07);color:#e8edf2;vertical-align:top}
.ps-tbl .ps-to{color:#a8b3c2}
.ps-tbl .ps-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.ps-tbl-dim td{color:#a8b3c2}
/* 明細の内訳を畳む札（2026-08-12）。開閉は details/summary に任せる ―
   JS で高さを測ると、中の表が通貨切替で書き換わるたびに閉じ位置がずれる。 */
.ps-fold{margin-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.ps-fold-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 2px;font-size:.78rem;font-weight:700;color:#a8b3c2;transition:color .18s cubic-bezier(.16,1,.3,1),opacity .18s}
.ps-fold-s::-webkit-details-marker{display:none}
.ps-fold-s:hover{color:#e8edf2}
.ps-fold-s:focus-visible{outline:2px solid rgba(245,200,66,.7);outline-offset:3px;border-radius:6px}
.ps-fold-s:active{opacity:.72}
.ps-fold-i{margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.ps-fold[open] > .ps-fold-s > .ps-fold-i{transform:rotate(225deg) translate(-2px,-2px)}
.ps-fold-b{padding-bottom:4px;animation:stepIn .28s cubic-bezier(.16,1,.3,1) both}
.ps-fold-b > .ps-tbl:first-child{margin-top:0}
.form-input.ai-filled{border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.07)}
.ps-rate{margin-bottom:16px;padding:16px 18px;border-radius:14px;border:1px solid rgba(245,200,66,.28);background:radial-gradient(130% 170% at 100% 0%,rgba(245,200,66,.10),transparent 60%),rgba(255,255,255,.025)}
.ps-rate:empty{display:none}
.ps-rate-t{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f5c842}
.ps-rate-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ps-rate-row:last-of-type{border-bottom:none}
.ps-rate-k{font-size:.82rem;font-weight:700;color:#e8edf2}
.ps-rate-v{flex:none;text-align:right;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:#f5c842;font-variant-numeric:tabular-nums;line-height:1.15}
.ps-rate-min{display:block;font-size:.68rem;font-weight:600;color:#6b7d93;letter-spacing:0}
/* 年間ペース × 公開レンジ（payslip.js の renderAha）。時給カードの直後に出る。
   ★時給＝黄（#f5c842）、こちら＝緑（#48c78e）で役割を分ける。同じ色にすると
     「同じことを2回言っている」に見えて、2枚目を読まれない。 */
.ps-aha{margin-bottom:16px;padding:16px 18px;border-radius:14px;border:1px solid rgba(72,199,142,.24);background:radial-gradient(130% 170% at 0% 0%,rgba(72,199,142,.09),transparent 62%),rgba(255,255,255,.025)}
.ps-aha:empty{display:none}
.ps-aha-t{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#48c78e}
.ps-aha-msg{font-size:.8rem;color:#9ca3af;line-height:1.65;margin-top:10px}
.ps-aha-b{margin-top:12px}
.ps-aha-pace{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:10px}
.ps-aha-pk{font-size:.82rem;font-weight:700;color:#e8edf2}
.ps-aha-pv{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;color:#48c78e;font-variant-numeric:tabular-nums;line-height:1.15}
.ps-aha-h{font-size:.7rem;color:#6b7d93;line-height:1.55;margin-top:2px}
.ps-aha-sec{margin-top:18px;font-size:.76rem;font-weight:700;color:#e8edf2}
.ps-aha-bar{position:relative;height:8px;margin-top:12px;border-radius:99px;background:linear-gradient(90deg,rgba(72,199,142,.16),rgba(72,199,142,.44))}
.ps-aha-avg{position:absolute;top:-3px;width:2px;height:14px;border-radius:2px;background:rgba(255,255,255,.5);transform:translateX(-1px)}
.ps-aha-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#f5c842;border:2px solid #0d1520;box-shadow:0 2px 9px rgba(245,200,66,.42);transform:translate(-50%,-50%)}
.ps-aha-bar.is-under .ps-aha-dot,.ps-aha-bar.is-over .ps-aha-dot{box-shadow:0 0 0 3px rgba(245,200,66,.22),0 2px 9px rgba(245,200,66,.42)}
.ps-aha-avgl{position:relative;height:1.15em;margin-top:7px}
.ps-aha-avgl span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:.68rem;color:#6b7d93;font-variant-numeric:tabular-nums}
.ps-aha-ends{display:flex;justify-content:space-between;gap:8px;margin-top:2px;font-size:.68rem;color:#6b7d93;font-variant-numeric:tabular-nums}
.ps-aha-where{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px;margin-top:9px;font-size:.82rem;font-weight:700;color:#e8edf2}
.ps-aha-where span{font-weight:600;font-size:.76rem;color:#9ca3af}
.ps-aha-list{margin-top:10px}
.ps-aha-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ps-aha-row:last-child{border-bottom:none}
.ps-aha-name{flex:1;min-width:0;font-size:.8rem;font-weight:600;color:#e8edf2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-aha-tf{margin-left:7px;padding:1px 6px;border-radius:99px;font-size:.6rem;font-weight:800;letter-spacing:.04em;color:#48c78e;background:rgba(72,199,142,.14)}
.ps-aha-num{flex:none;font-size:.8rem;font-weight:700;color:#9ca3af;font-variant-numeric:tabular-nums}
.ps-aha-gap{flex:none;min-width:5.5em;text-align:right;font-size:.8rem;font-weight:800;color:#48c78e;font-variant-numeric:tabular-nums}
.ps-aha-rank{margin-top:11px;font-size:.72rem;color:#6b7d93}
.ps-pd{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:.75rem;color:#a8b3c2;cursor:pointer}
.ps-pd input{accent-color:#f5c842;cursor:pointer}
.ps-tbl-edit td{padding:5px 0}
.ps-tbl-edit .ps-amt{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.ps-cur{font-size:.66rem;font-weight:700;letter-spacing:.04em;color:#6b7d93}
.ps-cur:empty{display:none}
.ps-amt-in{width:9ch;min-width:74px;padding:5px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e8edf2;font:inherit;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;transition:border-color .2s,background .2s,color .2s}
.ps-amt-in::-webkit-outer-spin-button,.ps-amt-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ps-amt-in:hover{border-color:rgba(255,255,255,.3)}
.ps-amt-in:focus{outline:none;border-color:rgba(245,200,66,.7);background:rgba(245,200,66,.07);color:#fff}
.ps-amt-in:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:1px}
.ps-ask{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px dashed rgba(245,200,66,.34);background:rgba(245,200,66,.05)}
.ps-ask[hidden]{display:none}
.ps-ask-t{font-size:.8rem;font-weight:700;color:#f5c842}
.ps-ask-l{font-size:.72rem;line-height:1.65;color:#a8b3c2;margin-top:3px}
.ps-ask-in{display:flex;align-items:center;gap:7px;margin-top:9px}
.ps-ask-in input{width:112px;padding:8px 10px;border-radius:9px;border:1px solid rgba(245,200,66,.4);background:rgba(0,0,0,.25);color:#e8edf2;font:inherit;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;transition:border-color .2s,background .2s}
.ps-ask-in input:hover{border-color:rgba(245,200,66,.65)}
.ps-ask-in input:focus{outline:none;border-color:#f5c842;background:rgba(0,0,0,.4)}
.ps-ask-in input:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.ps-ask-in input::placeholder{color:#5c6a7d;font-weight:600;opacity:1}
.ps-ask-in span{font-size:.78rem;font-weight:700;color:#a8b3c2}
.ps-ask.is-filled{border-style:solid;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.ps-ask.is-filled .ps-ask-t{font-size:.74rem;font-weight:700;color:#a8b3c2}
/* 「1項目だけ確認できます」（payslip.js の renderAsk）。分類できなかった行は
   もう金額として数えてあるので、これは**答えなくてよい質問**。だから時給（黄）・
   年収ペース（緑）より弱い面に置く。強く出すと「まだ終わっていない」に見える。 */
.ps-q{margin-top:16px;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(120% 160% at 100% 0%,rgba(245,200,66,.07),transparent 62%),rgba(255,255,255,.02)}
.ps-q-h{display:flex;align-items:baseline;gap:12px}
.ps-q-t{flex:1;min-width:0;font-size:.8rem;font-weight:800;letter-spacing:-.01em;color:#e8edf2}
.ps-q-skip{flex:none;padding:4px 9px;border:0;border-radius:8px;background:none;color:#6b7d93;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;transition:color .2s,background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.ps-q-skip:hover{color:#a8b3c2;background:rgba(255,255,255,.05)}
.ps-q-skip:focus-visible{outline:2px solid rgba(245,200,66,.6);outline-offset:2px}
.ps-q-skip:active{transform:translateY(1px)}
.ps-q-l{font-size:.72rem;line-height:1.65;color:#6b7d93;margin-top:3px}
.ps-q-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:11px;padding:9px 11px;border-radius:9px;background:rgba(0,0,0,.22)}
.ps-q-lb{min-width:0;font-size:.82rem;font-weight:700;color:#e8edf2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-q-am{flex:none;font-size:.86rem;font-weight:800;color:#f5c842;font-variant-numeric:tabular-nums}
.ps-q-q{font-size:.76rem;font-weight:700;color:#a8b3c2;margin-top:11px}
.ps-q-c{margin-top:9px}
.ps-next{margin-top:16px;padding:14px 16px;border-radius:12px;border:1px solid rgba(52,211,153,.26);background:rgba(52,211,153,.06)}
.ps-next-t{font-size:.86rem;font-weight:800;letter-spacing:-.01em;color:#34d399}
.ps-next-l{font-size:.74rem;line-height:1.65;color:#a8b3c2;margin-top:4px}
.ps-next .btn-orange{margin-top:11px;padding:10px 20px;font-size:.85rem}
@media (prefers-reduced-motion:reduce){.ps-edit,.ps-res{animation:none}}
/* ── Light mode ─────────────────────────────────────────── */
[data-theme="light"] body{background:#f3f5f8!important;color:#0f172a!important}
[data-theme="light"] nav{background:rgba(243,245,248,.95)!important;backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.07)!important}
[data-theme="light"] nav.scrolled{background:rgba(243,245,248,.98)!important}
[data-theme="light"] .nav-link{color:rgba(15,23,42,.55)!important}
[data-theme="light"] .nav-link:hover{color:#0f172a!important}
[data-theme="light"] .card{background:rgba(255,255,255,.85)!important;border-color:rgba(0,0,0,.08)!important}
[data-theme="light"] .form-input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#0f172a}
/* ★ライトには .form-label の上書きが無く、暗い地むけの #9ca3af が白いカードに
   そのまま乗っていた（コントラスト 2.3:1 ＝ 読めない）。濃い側に落とす。 */
[data-theme="light"] .form-label{color:#334155}
[data-theme="light"] .form-input:focus{border-color:rgba(200,149,0,.5);background:rgba(0,0,0,.06)}
[data-theme="light"] .form-input[readonly],
[data-theme="light"] .form-input[readonly]:focus{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.18)}
[data-theme="light"] select.form-input option,[data-theme="light"] select.form-input optgroup{background:#fff}
[data-theme="light"] .theme-toggle{background:rgba(0,0,0,.06);color:#0f172a;border-color:rgba(0,0,0,.13)}
[data-theme="light"] .btn-ghost{color:#0f172a!important;border-color:rgba(0,0,0,.15)!important}
[data-theme="light"] .btn-ghost:hover{border-color:rgba(0,0,0,.3)!important;background:rgba(0,0,0,.04)!important}
[data-theme="light"] .text-text{color:#0f172a!important}
[data-theme="light"] .pay-count{border-color:rgba(200,149,0,.32);color:#a97e00;
  background:radial-gradient(120% 160% at 0% 50%,rgba(200,149,0,.14),transparent 70%),rgba(200,149,0,.05)}
[data-theme="light"] .warn-row{background:rgba(200,149,0,.07);border-color:rgba(200,149,0,.3);color:#8a6600}
/* ★白いカードの上ではオレンジ #fb923c が沈む。必須の印は読めなければ意味が無いので、
   ライトだけ濃いオレンジに落とす（.sec-tag.req はこれまでライトの定義が無く、暗いまま置かれていた）。 */
[data-theme="light"] .opt-tag{color:#64748b;background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12)}
[data-theme="light"] .req-tag,[data-theme="light"] .sec-tag.req{color:#a34a00;background:rgba(163,74,0,.08);border-color:rgba(163,74,0,.28)}
[data-theme="light"] .auto-tag{color:#0d8a63;background:rgba(13,138,99,.08);border-color:rgba(13,138,99,.28)}
[data-theme="light"] .miss-tag{color:#dc2626;background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.32)}
[data-theme="light"] .fld.is-req::before{background:rgba(163,74,0,.3)}
/* ★白の上では #34d399 が薄すぎて読めない。済みの印はライトだけ濃い緑に落とす
   （既存の .auto-tag と同じ #0d8a63）。もとは rgba(0,0,0,.12) ＝ ほぼ見えなかった。 */
[data-theme="light"] .fld.is-req.is-done::before{background:rgba(13,138,99,.5)}
[data-theme="light"] .fld.is-req::after{color:#0d8a63;background:rgba(13,138,99,.1);border-color:rgba(13,138,99,.32)}
[data-theme="light"] .sec-prog{color:#64748b;background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.11)}
[data-theme="light"] .sec-prog:hover{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.2)}
[data-theme="light"] .sec-prog.done,[data-theme="light"] .sec-prog.done:hover{
  color:#0d8a63;background:rgba(13,138,99,.09);border-color:rgba(13,138,99,.3)}
/* 明るい地では #34d399 が白に溶けるので、濃いほうの緑に差し替える。 */
[data-theme="light"] .sec-prog-bar{background:rgba(0,0,0,.1)}
[data-theme="light"] .sec-prog-bar>i{background:linear-gradient(90deg,#0d8a63,#12a878)}
[data-theme="light"] .sec-prog.done .sec-prog-bar{background:rgba(13,138,99,.2)}
[data-theme="light"] .entry-b{color:#475569}
[data-theme="light"] .entry-b>i{color:#0d8a63}
[data-theme="light"] .entry-b b{color:#0f172a}
[data-theme="light"] .entry-shield{color:#0d8a63}
[data-theme="light"] .entry-formats{color:#64748b}
[data-theme="light"] .ai-legend{color:#475569;background:rgba(13,138,99,.06);border-color:rgba(13,138,99,.24)}
[data-theme="light"] .ai-legend>i{color:#0d8a63}
[data-theme="light"] .sec-sub,[data-theme="light"] .fld-hint,[data-theme="light"] .sal-hint,[data-theme="light"] .res-note{color:#64748b}
[data-theme="light"] .fld-hint b{color:#334155}
[data-theme="light"] .sec-tag.opt{background:rgba(0,0,0,.05);color:#64748b;border-color:rgba(0,0,0,.12)}
[data-theme="light"] .sal-total{border-color:rgba(200,149,0,.32);background:radial-gradient(130% 170% at 100% 0%,rgba(200,149,0,.12),transparent 60%),rgba(200,149,0,.05)}
[data-theme="light"] .sal-total-lab,[data-theme="light"] .sal-total-val .u{color:#64748b}
[data-theme="light"] .sal-total-val{color:#a97e00}
[data-theme="light"] .sticky-cta{background:linear-gradient(180deg,rgba(243,245,248,0),rgba(243,245,248,.94) 26%,rgba(243,245,248,.99));border-top-color:rgba(200,149,0,.3)}
[data-theme="light"] .sticky-cta-lab,[data-theme="light"] .sticky-cta-val .u{color:#64748b}
[data-theme="light"] .sticky-cta-val{color:#a97e00}
[data-theme="light"] .fld.is-miss .form-input{border-color:rgba(220,38,38,.65);background:rgba(220,38,38,.05);
  box-shadow:0 0 0 3px rgba(220,38,38,.1)}
[data-theme="light"] .fld.is-miss .form-input:focus{border-color:rgba(220,38,38,.8);background:rgba(220,38,38,.07)}
[data-theme="light"] .fld.is-miss .form-input:focus-visible{outline-color:rgba(220,38,38,.45)}
[data-theme="light"] .fld.is-miss .roleboxes{outline-color:rgba(220,38,38,.4)}
[data-theme="light"] .fld.is-req.is-miss::before{background:rgba(220,38,38,.65)}
[data-theme="light"] .res{background:radial-gradient(130% 170% at 0% 0%,rgba(16,140,100,.12),transparent 60%),rgba(255,255,255,.88);border-color:rgba(16,140,100,.28)}
/* 明るいテーマだと金の放射が白地に溶ける。線と影だけ濃くする（形は同じ）。 */
[data-theme="light"] .res-pop{background:radial-gradient(120% 120% at 30% 20%,rgba(245,200,66,.45),rgba(13,138,99,.10) 62%,transparent);border-color:rgba(169,126,0,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px -8px rgba(169,126,0,.34),0 18px 36px -24px rgba(13,138,99,.42)}
[data-theme="light"] .res-eyebrow,[data-theme="light"] .res-big{color:#0d8a63}
[data-theme="light"] .res-sub,[data-theme="light"] .res-k{color:#64748b}
[data-theme="light"] .res-row{border-bottom-color:rgba(0,0,0,.08)}
[data-theme="light"] .res-v.hi{color:#a97e00}
[data-theme="light"] .bench{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.02)}
[data-theme="light"] .bench-scale{color:#64748b}
[data-theme="light"] .bench b{color:#0f172a}
[data-theme="light"] .form-alert{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.35);border-left-color:#dc2626;color:#7f1d1d}
[data-theme="light"] .form-alert .fa-title{color:#dc2626}
[data-theme="light"] .restore-bar{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.22);color:#1d4ed8}
[data-theme="light"] .restore-bar button{color:#475569;border-color:rgba(0,0,0,.15)}
[data-theme="light"] .restore-bar button:hover{color:#0f172a;border-color:rgba(0,0,0,.32)}
[data-theme="light"] .chip{color:#475569;background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.18)}
[data-theme="light"] .chip:hover{color:#a97e00;border-color:rgba(200,149,0,.5);background:rgba(200,149,0,.07)}
[data-theme="light"] .chip .p{color:#a97e00}
[data-theme="light"] .rolebox{color:#475569;background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.14)}
[data-theme="light"] .rolebox:hover{color:#1e293b;border-color:rgba(200,149,0,.45);background:rgba(200,149,0,.07)}
[data-theme="light"] .rolebox:has(input:checked){color:#a97e00;border-color:rgba(200,149,0,.6);background:rgba(200,149,0,.1)}
[data-theme="light"] .rolebox input{accent-color:#a97e00}
[data-theme="light"] .pd-row{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.1)}
[data-theme="light"] .pd-del{color:#64748b;border-color:rgba(0,0,0,.14)}
[data-theme="light"] .pd-del:hover{color:#1e293b;border-color:rgba(0,0,0,.28);background:rgba(0,0,0,.04)}
[data-theme="light"] .pd-warn{color:#9c3535;background:rgba(214,92,92,.08);border-color:rgba(214,92,92,.3)}
[data-theme="light"] .pd-year{border-top-color:rgba(0,0,0,.1)}
[data-theme="light"] .pd-year-h{color:#64748b}
[data-theme="light"] .pay-detail{border-top-color:rgba(0,0,0,.08)}
[data-theme="light"] .pay-detail>summary{color:#a97e00;border-color:rgba(200,149,0,.45);
  background:radial-gradient(120% 160% at 0% 50%,rgba(200,149,0,.14),transparent 70%),rgba(200,149,0,.05)}
[data-theme="light"] .pay-detail>summary:hover{color:#8a6600;border-color:rgba(200,149,0,.72);
  background:radial-gradient(120% 160% at 0% 50%,rgba(200,149,0,.2),transparent 70%),rgba(200,149,0,.09)}
[data-theme="light"] .pay-detail>summary .p{color:#a97e00;background:rgba(200,149,0,.14);border-color:rgba(200,149,0,.42)}
[data-theme="light"] .pay-detail[open]>summary{color:#0f172a;border-color:rgba(200,149,0,.4);background:rgba(0,0,0,.03)}
[data-theme="light"] .pay-detail[open]>summary:hover{color:#a97e00;background:rgba(200,149,0,.07)}
[data-theme="light"] .sum-row{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.08);color:#475569}
[data-theme="light"] .sum-row b{color:#0f172a}
[data-theme="light"] .sum-row button{color:#475569;border-color:rgba(0,0,0,.15)}
[data-theme="light"] .sum-row button:hover{color:#a97e00;border-color:rgba(200,149,0,.5)}
[data-theme="light"] .entry-q{color:#64748b}
[data-theme="light"] .entry-card{color:#0f172a;border-color:rgba(0,0,0,.09);background:rgba(255,255,255,.85);
  box-shadow:0 20px 44px -34px rgba(15,23,42,.55),0 2px 6px -3px rgba(15,23,42,.14)}
[data-theme="light"] .entry-card.is-primary{border-color:rgba(200,149,0,.4);
  background:radial-gradient(120% 150% at 0% 0%,rgba(200,149,0,.12),transparent 62%),rgba(255,255,255,.9);
  box-shadow:0 24px 50px -34px rgba(200,149,0,.6),0 2px 6px -3px rgba(15,23,42,.14)}
[data-theme="light"] .entry-card:hover{border-color:rgba(200,149,0,.7)}
[data-theme="light"] .entry-card:focus-visible{outline-color:rgba(200,149,0,.85)}
[data-theme="light"] .entry-ico{color:#a97e00}
[data-theme="light"] .entry-tag{background:rgba(0,0,0,.04);color:#64748b;border-color:rgba(0,0,0,.12)}
[data-theme="light"] .entry-card.is-primary .entry-tag{background:rgba(200,149,0,.12);color:#a97e00;border-color:rgba(200,149,0,.35)}
[data-theme="light"] .ps-step{color:#a97e00}
[data-theme="light"] .ps-skip{color:#475569;border-bottom-color:rgba(0,0,0,.18)}
[data-theme="light"] .ps-skip:hover{color:#0f172a;border-bottom-color:rgba(200,149,0,.7)}
[data-theme="light"] .ps-skip:focus-visible{outline-color:rgba(200,149,0,.85)}
[data-theme="light"] .ps-drop{color:#0f172a;border-color:rgba(200,149,0,.4);background:linear-gradient(180deg,rgba(200,149,0,.08),rgba(200,149,0,.02))}
[data-theme="light"] .ps-drop:hover,[data-theme="light"] .ps-drop.is-over{border-color:rgba(200,149,0,.7);background:linear-gradient(180deg,rgba(200,149,0,.14),rgba(200,149,0,.05))}
[data-theme="light"] .ps-drop-txt small{color:#64748b}
[data-theme="light"] .ps-fold{border-top-color:rgba(0,0,0,.09)}
[data-theme="light"] .ps-fold-s{color:#64748b}
[data-theme="light"] .ps-fold-s:hover{color:#0f172a}
[data-theme="light"] .ps-fold-s:focus-visible{outline-color:rgba(200,149,0,.85)}
[data-theme="light"] .ps-hint,[data-theme="light"] .ps-note,[data-theme="light"] .ps-rate-min{color:#64748b}
[data-theme="light"] .ps-note b{color:#334155}
[data-theme="light"] .ps-edit,[data-theme="light"] .ps-res{border-color:rgba(0,0,0,.09);background:rgba(255,255,255,.85);box-shadow:0 18px 40px -30px rgba(200,149,0,.45),0 2px 6px -3px rgba(15,23,42,.18)}
[data-theme="light"] .ps-lead{color:#0f172a}
[data-theme="light"] .ps-stage{background:#e2e8f0}
[data-theme="light"] .ps-rect{border-color:rgba(200,149,0,.85)}
[data-theme="light"] .ps-frame{border-color:#a97e00;box-shadow:0 0 0 9999px rgba(15,23,42,.55)}
[data-theme="light"] .ps-frame-tag,[data-theme="light"] .ps-frame-grip{background:#a97e00;color:#fff}
[data-theme="light"] .ps-lead-sm{color:#a97e00}
[data-theme="light"] .ps-rect-grip{background:#a97e00}
[data-theme="light"] .ps-btn-ghost{color:#475569;background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.16)}
[data-theme="light"] .ps-btn-ghost:hover{color:#0f172a;border-color:rgba(0,0,0,.34)}
[data-theme="light"] .ps-btn-go{color:#3a2c00;background:linear-gradient(180deg,#f7d15e,#e0ac1e);border-color:rgba(200,149,0,.9);box-shadow:0 14px 30px -20px rgba(200,149,0,.85)}
[data-theme="light"] .ps-btn-go:hover:not([disabled]){background:linear-gradient(180deg,#ffe083,#eaba2c)}
[data-theme="light"] .ps-warn{color:#8a6600}
[data-theme="light"] .ps-frwarn{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.35);border-left-color:#dc2626;color:#7f1d1d}
[data-theme="light"] .ps-frwarn b{color:#dc2626}
[data-theme="light"] .ps-edit.is-wait > .ps-wait{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.12);color:#64748b}
[data-theme="light"] .ps-wait b{color:#0f172a}
[data-theme="light"] .ps-wait::before{border-color:rgba(200,149,0,.24);border-top-color:#a97e00}
[data-theme="light"] .ps-scan{color:#64748b}
[data-theme="light"] .ps-scan.is-warn{color:#8a6600}
[data-theme="light"] .ps-scan.is-busy::before{border-color:rgba(200,149,0,.28);border-top-color:#a97e00}
[data-theme="light"] .ps-confirm{color:#0f172a;border-color:rgba(200,149,0,.4);background:rgba(200,149,0,.08)}
[data-theme="light"] .ps-confirm:hover{border-color:rgba(200,149,0,.65);background:rgba(200,149,0,.13)}
[data-theme="light"] .ps-msg-busy{color:#475569;border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.02)}
[data-theme="light"] .ps-msg-warn{color:#8a6600;border-color:rgba(200,149,0,.35);background:rgba(200,149,0,.07)}
[data-theme="light"] .ps-res-title{color:#0d8a63}
[data-theme="light"] .ps-res-title.ps-sm{color:#475569}
[data-theme="light"] .ps-res-lead{color:#475569}
[data-theme="light"] .ps-res-lead b{color:#0f172a}
[data-theme="light"] .ps-tbl th{color:#64748b}
[data-theme="light"] .ps-tbl td{color:#0f172a;border-top-color:rgba(0,0,0,.08)}
[data-theme="light"] .ps-tbl .ps-to,[data-theme="light"] .ps-tbl-dim td{color:#475569}
[data-theme="light"] .form-input.ai-filled{border-color:rgba(13,138,99,.5);background:rgba(13,138,99,.07)}
[data-theme="light"] .ps-rate{border-color:rgba(200,149,0,.32);background:radial-gradient(130% 170% at 100% 0%,rgba(200,149,0,.12),transparent 60%),rgba(255,255,255,.6)}
[data-theme="light"] .ps-rate-t,[data-theme="light"] .ps-rate-v{color:#a97e00}
[data-theme="light"] .ps-rate-k{color:#0f172a}
[data-theme="light"] .ps-rate-row{border-bottom-color:rgba(0,0,0,.08)}
[data-theme="light"] .ps-aha{border-color:rgba(15,118,86,.26);background:radial-gradient(130% 170% at 0% 0%,rgba(15,118,86,.10),transparent 62%),rgba(255,255,255,.6)}
[data-theme="light"] .ps-aha-t,[data-theme="light"] .ps-aha-pv,[data-theme="light"] .ps-aha-gap,[data-theme="light"] .ps-aha-tf{color:#0f7656}
[data-theme="light"] .ps-aha-pk,[data-theme="light"] .ps-aha-sec,[data-theme="light"] .ps-aha-where,[data-theme="light"] .ps-aha-name{color:#0f172a}
[data-theme="light"] .ps-aha-h,[data-theme="light"] .ps-aha-avgl span,[data-theme="light"] .ps-aha-ends,[data-theme="light"] .ps-aha-rank,[data-theme="light"] .ps-aha-msg,[data-theme="light"] .ps-aha-where span,[data-theme="light"] .ps-aha-num{color:#64748b}
[data-theme="light"] .ps-aha-row{border-bottom-color:rgba(0,0,0,.08)}
[data-theme="light"] .ps-aha-dot{border-color:#fff}
[data-theme="light"] .ps-aha-avg{background:rgba(15,23,42,.42)}
[data-theme="light"] .ps-aha-tf{background:rgba(15,118,86,.12)}
[data-theme="light"] .ps-pd{color:#475569}
[data-theme="light"] .ps-cur{color:#64748b}
[data-theme="light"] .ps-amt-in{border-color:rgba(0,0,0,.14);background:#fff;color:#0f172a}
[data-theme="light"] .ps-amt-in:hover{border-color:rgba(0,0,0,.3)}
[data-theme="light"] .ps-amt-in:focus{border-color:rgba(200,149,0,.8);background:rgba(200,149,0,.08);color:#0f172a}
[data-theme="light"] .ps-ask{border-color:rgba(200,149,0,.4);background:rgba(200,149,0,.07)}
[data-theme="light"] .ps-ask-t{color:#a97e00}
[data-theme="light"] .ps-ask-l,[data-theme="light"] .ps-ask-in span,[data-theme="light"] .ps-next-l{color:#475569}
[data-theme="light"] .ps-ask-in input{border-color:rgba(200,149,0,.45);background:#fff;color:#0f172a}
[data-theme="light"] .ps-ask-in input:focus{border-color:#a97e00;background:#fffdf5}
[data-theme="light"] .ps-ask-in input::placeholder{color:#94a3b8}
[data-theme="light"] .ps-ask.is-filled{border-color:rgba(0,0,0,.1);background:rgba(255,255,255,.7)}
[data-theme="light"] .ps-ask.is-filled .ps-ask-t{color:#475569}
[data-theme="light"] .ps-q{border-color:rgba(0,0,0,.09);background:radial-gradient(120% 160% at 100% 0%,rgba(200,149,0,.09),transparent 62%),rgba(255,255,255,.6)}
[data-theme="light"] .ps-q-t,[data-theme="light"] .ps-q-lb{color:#0f172a}
[data-theme="light"] .ps-q-l,[data-theme="light"] .ps-q-skip{color:#64748b}
[data-theme="light"] .ps-q-skip:hover{color:#0f172a;background:rgba(0,0,0,.05)}
[data-theme="light"] .ps-q-row{background:rgba(15,23,42,.05)}
[data-theme="light"] .ps-q-am{color:#a97e00}
[data-theme="light"] .ps-q-q{color:#475569}
[data-theme="light"] .ps-next{border-color:rgba(13,138,99,.28);background:rgba(13,138,99,.06)}
[data-theme="light"] .ps-next-t{color:#0d8a63}