:root { --brand:#00C853; --ink:#0F172A; --muted:#6B7280; --bg:#F8FAFC; --card:#FFFFFF; --border:#E5E7EB; }
* { box-sizing: border-box; } html,body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--brand); text-decoration: none; }
.hidden { display: none !important; }
.container { max-width: 1060px; margin: 24px auto; padding: 0 16px; }
.app-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; } .logo-img { height:36px; } .tagline { font-size:12px; color:var(--muted); }
.user-nav .btn { margin-left:8px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0; }
.grid { display:grid; gap:12px; } .grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 720px){ .grid.two { grid-template-columns: 1fr; } }
.field .label { display:block; font-size:14px; margin-bottom:6px; color:#111827; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff; }
.options { display:flex; flex-wrap:wrap; gap:8px; } .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:20px; background:#fff; cursor:pointer; }
.upload-slot { border:1px dashed var(--border); border-radius:12px; padding:12px; } .upload-title { font-weight:600; margin-bottom:8px; } .upload-ctl { display:flex; gap:8px; margin-bottom:8px; }
.file-input { display:none; } .preview { display:flex; flex-wrap:wrap; gap:8px; } .preview .thumb { position:relative; width:112px; height:84px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#f3f4f6; }
.preview .thumb img { width:100%; height:100%; object-fit:cover; } .preview .thumb .remove { position:absolute; top:2px; right:2px; background:#fff; border:1px solid #ddd; border-radius:50%; width:20px; height:20px; line-height:18px; text-align:center; cursor:pointer; }
.muted { color: var(--muted); } .small { font-size:12px; }
.btn { appearance:none; border:none; background:var(--brand); color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn.outline { background:#fff; color:var(--brand); border:1px solid var(--brand); } .btn.small { padding:6px 10px; font-size:12px; } .btn.primary { background: var(--brand); }
.status { margin:10px 0; min-height:22px; } .status .err { color:#b00020; } .status .ok { color:#0a7a32; }
.signature { border:1px dashed var(--border); border-radius:12px; padding:8px; background:#fff; }
.gate { position: fixed; inset: 0; background: rgba(255,255,255,.96); display:none; align-items:center; justify-content:center; z-index:1000; } .gate.visible { display:flex; } .gate-card { width:min(720px, 92vw); background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; }
.app-footer { padding:20px 16px; color:var(--muted); border-top:1px solid var(--border); margin-top:40px; } .agree-line { display:flex; align-items:center; gap:10px; }