:root { --brand:#1f3864; --bg:#f4f6fa; --card:#fff; --line:#e3e7ef; --muted:#6b7280; --w:640px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }  /* hidden属性を display 指定より必ず優先させる */
html,body { margin:0; }
body { font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
       background:var(--bg); color:#1f2430; }
.muted { color:var(--muted); font-size:12.5px; }
.msg { margin-top:10px; font-size:13px; min-height:1em; }
.msg.ng { color:#c0392b; } .msg.ok { color:#1e7d34; }
button { font:inherit; cursor:pointer; }

/* パスコード画面 */
.gate { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.gate-card { width:100%; max-width:360px; background:var(--card); border-radius:16px;
             padding:28px 22px; box-shadow:0 4px 18px rgba(0,0,0,.08); text-align:center; }
.gate-card h1 { color:var(--brand); font-size:22px; margin:0 0 6px; }
.gate-card input { width:100%; margin-top:14px; padding:14px; font-size:18px; text-align:center;
                   border:1px solid #ccd3e0; border-radius:10px; letter-spacing:.15em; }
.gate-card button { width:100%; margin-top:14px; padding:14px; border:0; border-radius:10px;
                    background:var(--brand); color:#fff; font-size:16px; font-weight:700; }
.remember { display:block; margin-top:14px; font-size:12.5px; color:var(--muted); }
.remember input { margin-right:6px; }

/* ヘッダー（コンテンツ幅を中央寄せ） */
.topbar { position:sticky; top:0; z-index:5; background:var(--brand); color:#fff;
          padding:calc(10px + env(safe-area-inset-top)) 14px 10px; }
.topbar .bar { max-width:var(--w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.topbar .title { font-weight:700; font-size:17px; }
.topbar .icon { background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:8px;
                width:38px; height:38px; font-size:18px; }

/* ステータスタブ */
.tabs { max-width:var(--w); margin:0 auto; display:flex; gap:6px; padding:12px 12px 0; }
.tab { flex:1; padding:9px 2px; border-radius:999px; border:1px solid var(--line);
       background:#fff; font-size:13px; font-weight:600; color:#374151; white-space:nowrap; }
.tab .cnt { display:inline-block; min-width:17px; padding:0 4px; margin-left:2px; border-radius:999px;
            background:#eef1f6; color:#4b5563; font-size:11px; line-height:17px; }
.tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.tab.active .cnt { background:rgba(255,255,255,.25); color:#fff; }

.status { max-width:var(--w); margin:0 auto; padding:6px 14px 0; font-size:12.5px; color:var(--muted); min-height:1.1em; }

/* カード一覧 */
.list { max-width:var(--w); margin:0 auto; padding:8px 12px 92px; display:flex; flex-direction:column; gap:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 14px;
        box-shadow:0 1px 3px rgba(0,0,0,.05); }

/* 見出し（タップで開閉） */
.head { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.chev { color:var(--muted); font-size:13px; flex:none; transition:transform .15s; }
.card.open .chev { transform:rotate(90deg); }
.head .name { flex:1; font-weight:700; font-size:15.5px; line-height:1.35; }
.badge { flex:none; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.b-teian { background:#eef2fb; color:#31456e; }
.b-saiyo { background:#e6f4ea; color:#1e7d34; }
.b-miokuri { background:#f1f2f4; color:#6b7280; }

.summary { margin-top:6px; padding-left:21px; font-size:12.5px; color:#4b5563; }

/* 進捗ステップ（採用案件） */
.steps { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; padding-left:21px; }
.step { font-size:11px; padding:3px 9px; border-radius:999px; background:#f1f2f4; color:#6b7280; }
.step.done { background:#e6f4ea; color:#1e7d34; font-weight:700; }

/* 詳細（開いたときだけ） */
.body { display:none; margin-top:11px; border-top:1px dashed var(--line); padding-top:11px; }
.card.open .body { display:block; }
.comment { font-size:13px; color:#374151; background:#fafbfd; border-radius:8px; padding:8px 10px; white-space:pre-wrap; }
.sub { margin-top:8px; font-size:11.5px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; }
.sub a { color:#2b57b3; }

/* 写真サムネイル（カード展開時にインライン表示・タップで原寸） */
.photos { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.photos .photo { display:block; color:#2b57b3; font-size:13px; }
.photos img { width:100%; height:130px; object-fit:cover; border-radius:10px;
              border:1px solid var(--line); background:#fafbfd; display:block; }

.btns { margin-top:11px; display:flex; flex-wrap:wrap; gap:8px; }
.btns button { flex:1 1 auto; min-width:96px; padding:11px; border-radius:10px; border:1px solid var(--line);
               background:#fff; font-size:14px; font-weight:600; }
.btns .primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btns .warn { background:#fff; color:#c0392b; border-color:#f0c9c4; }
.btns button:disabled { opacity:.45; }

.fix { margin-top:11px; border-top:1px dashed var(--line); padding-top:11px; }
.fix .frow { display:flex; gap:8px; }
.fix .frow > label { flex:1; font-size:12px; color:var(--muted); }
.fix input { width:100%; margin-top:4px; padding:9px 10px; border:1px solid #ccd3e0; border-radius:8px; font-size:15px; }
.orow { margin-top:9px; display:flex; gap:8px; flex-wrap:wrap; }
.orow .osel { flex:1 1 160px; min-width:150px; padding:11px 10px; border:1px solid #ccd3e0; border-radius:10px; font-size:14px; background:#fff; }
.orow button { flex:1 1 auto; min-width:150px; padding:11px; border-radius:10px; border:0; background:var(--brand); color:#fff; font-size:14px; font-weight:700; }

/* フッター */
.foot { position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between;
        gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }
.link { background:none; border:0; color:var(--brand); font-weight:700; font-size:13px; }

/* モーダル */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:20px; z-index:20; }
.modal-card { width:100%; max-width:420px; background:#fff; border-radius:14px; padding:18px; }
.modal-card h2 { margin:0 0 4px; font-size:17px; color:var(--brand); }
.copybody { margin-top:10px; background:#f6f8fc; border:1px solid var(--line); border-radius:10px;
            padding:12px; font-size:13px; white-space:pre-wrap; word-break:break-all; max-height:46vh; overflow:auto; }
.modal-btns { margin-top:14px; display:flex; gap:8px; }
.modal-btns button { flex:1; padding:12px; border-radius:10px; border:0; background:var(--brand); color:#fff; font-weight:700; }
.modal-btns .ghost { background:#eef1f6; color:#333; }

/* 発注書カテゴリ選択タブ（発注書ドロップダウンの上） */
.cats { display:flex; gap:6px; overflow-x:auto; margin:12px 0 4px; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.cats .cat { flex:0 0 auto; width:auto; margin:0; padding:7px 13px; border-radius:999px;
             border:1px solid var(--line); background:#fff; color:#444; font-size:12.5px; font-weight:600; }
.cats .cat.active { background:var(--brand); border-color:var(--brand); color:#fff; }

/* 写真ライトボックス（Driveへ遷移せずその場で拡大表示） */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:40;
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
            padding:calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
.lightbox img { max-width:96vw; max-height:82vh; object-fit:contain; border-radius:8px;
                background:#111; box-shadow:0 6px 30px rgba(0,0,0,.5); }
.lb-close { color:#fff; font-size:14px; font-weight:700; padding:9px 20px;
            background:rgba(255,255,255,.16); border-radius:999px; }
.photos button.photo { margin:0; padding:0; border:0; background:none; width:100%; display:block; }

/* トースト（画面中央に大きめ表示） */
.toast { position:fixed; left:50%; top:50%;
         transform:translate(-50%,-46%);
         background:#1f2430; color:#fff; padding:20px 28px; border-radius:16px;
         font-size:17px; font-weight:700; line-height:1.5; text-align:center;
         max-width:86vw; box-shadow:0 10px 34px rgba(0,0,0,.35);
         opacity:0; pointer-events:none; transition:all .25s; z-index:30; }
.toast.show { opacity:1; transform:translate(-50%,-50%); }
.toast.ng { background:#c0392b; }

.empty { text-align:center; color:var(--muted); padding:44px 12px; }