*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#f6f6f4;color:#1e2529}
.topbar{background:#fff;border-bottom:1px solid #deded8;padding:10px max(18px,calc((100% - 1080px)/2));display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.logo{display:block;width:min(260px,58vw);height:auto}.status{font-size:.8rem;color:#16813b;font-weight:700}.status.offline{color:#a75b00}
.wrap{max-width:1080px;margin:auto;padding:25px 18px 80px}.screen{display:none}.screen.active{display:block}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:20px 0 30px}.eyebrow{font-size:.72rem;letter-spacing:.16em;color:#f58220;font-weight:800;margin:0}
h1{font-size:2rem;line-height:1.1;margin:.25em 0}.hero p{max-width:650px;color:#667077}
.primary,.secondary,.danger,.back{border-radius:12px;padding:12px 17px;font-weight:750;cursor:pointer;font:inherit}.primary{border:0;background:#f58220;color:white}.secondary{background:white;border:1px solid #d5d7d4;color:#273036}.danger{background:#fff0ed;border:1px solid #f1c8c0;color:#9d2c20}.back{border:0;background:transparent;color:#5d676c;padding-left:0}
.cards{display:grid;gap:14px}.card{background:#fff;border:1px solid #deded8;border-radius:18px;padding:20px;box-shadow:0 5px 20px #00000009}
.job-card{display:flex;justify-content:space-between;gap:18px;align-items:center}.job-card h3{margin:8px 0 4px}.muted{color:#697379}.badge{display:inline-block;border-radius:99px;padding:5px 10px;font-size:.74rem;font-weight:800;background:#eee;color:#555}.badge.signed{background:#e7f6ec;color:#176f39}.badge.pending{background:#fff3dc;color:#885600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{font-size:.9rem;font-weight:750}.form-grid input,.form-grid textarea,.inline-input{display:block;width:100%;margin-top:7px;border:1px solid #cfd2d0;border-radius:10px;padding:12px;font:inherit;background:#fff}.form-grid textarea{min-height:90px;resize:vertical}.full{grid-column:1/-1}.notice{background:#fff8ee;border-left:4px solid #f58220;padding:12px;border-radius:8px;font-size:.9rem}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}.detail{background:#f8f8f6;border-radius:12px;padding:13px}.detail small{display:block;color:#727b80;margin-bottom:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.agreement{line-height:1.55;max-width:900px}.agreement h2{font-size:1.18rem;margin-top:1.7em}.agreement ul{padding-left:22px}.agreement label{font-weight:750}.agreement .logo-vertical{display:block;width:120px;max-height:105px;object-fit:contain;margin:0 auto 8px}
.signature{width:100%;height:190px;border:2px dashed #b9bfbd;border-radius:12px;background:#fff;touch-action:none;margin-top:8px}.sign-wrap{margin-top:18px}
.photo-box{border:1px dashed #c9cecb;border-radius:12px;padding:15px;margin-top:15px}.photo-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.photo-preview img{width:110px;height:90px;object-fit:cover;border-radius:9px;border:1px solid #ddd}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:12px 16px;border-radius:10px;display:none;z-index:30}
.empty{padding:35px;text-align:center;color:#70797e;background:#fff;border:1px dashed #ccc;border-radius:16px}
@media(max-width:650px){.hero{display:block}.hero .primary{margin-top:15px;width:100%}.form-grid,.detail-grid{grid-template-columns:1fr}.job-card{display:block}.job-card .secondary{margin-top:12px;width:100%}.topbar{padding:10px 14px}}