:root { --canvas:#f5f7f5; --paper:#fff; --ink:#142420; --muted:#708079; --line:#e1e9e4; --teal:#0d5c52; --teal-dark:#08473e; --mint:#e1f2ea; --lime:#c8ed5c; --yellow:#f3c96f; --soft:#f1f5f2; --red:#b75a4b; --display:"Manrope","Noto Sans SC",sans-serif; --body:"Noto Sans SC","Manrope",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--body); font-size:14px; -webkit-font-smoothing:antialiased; } button,input,textarea { font:inherit; } button { cursor:pointer; } .hidden { display:none !important; }
.app-shell { min-height:100vh; } .topbar { height:72px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.82); backdrop-filter:blur(16px); padding:0 5%; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }.brand-mark { width:31px; height:31px; border-radius:9px; background:var(--teal); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:8px 7px; }.brand-mark i { width:4px; border-radius:4px; background:var(--lime); }.brand-mark i:first-child { height:8px; }.brand-mark i:nth-child(2) { height:13px; }.brand-mark i:last-child { height:9px; }.brand strong,.brand small { display:block; }.brand strong { font:800 19px/1 var(--display); letter-spacing:-.8px; }.brand small { margin-top:3px; color:#81908a; font-size:9px; letter-spacing:.13em; }.top-nav { display:flex; align-items:center; gap:4px; }.top-nav-button { border:0; border-radius:7px; background:transparent; color:#8b9892; padding:9px 12px; font-size:11px; }.top-nav-button:hover,.top-nav-button.is-active { color:var(--teal); background:var(--mint); font-weight:700; }.lock { font-size:13px; margin-left:3px; }.top-user { display:flex; align-items:center; gap:8px; }.top-user > div strong,.top-user > div small { display:block; }.top-user > div strong { font-size:11px; }.top-user > div small { font-size:9px; color:var(--muted); margin-top:3px; }.user-chip { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#e8c0a4; color:#53352b; font:700 11px var(--display); }.online-dot { width:6px; height:6px; border-radius:50%; background:#5bb993; box-shadow:0 0 0 3px #def2e8; }.more-button { border:0; background:transparent; color:#9da8a3; letter-spacing:2px; margin-left:8px; }
.page { display:none; max-width:1340px; margin:0 auto; padding:43px 5% 65px; }.page.is-visible { display:block; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:27px; }.eyebrow { color:#89958f; text-transform:uppercase; font:500 9px var(--display); letter-spacing:.12em; display:flex; align-items:center; gap:8px; margin:0 0 12px; }.eyebrow > span { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(200,237,92,.2); }.eyebrow .admin-dot { background:#ee9c70; box-shadow:0 0 0 4px rgba(238,156,112,.17); }.page-heading h1 { font:700 clamp(26px,3.2vw,35px)/1.2 var(--display); letter-spacing:-1.5px; margin:0; }.page-heading h1 b { color:var(--teal); font-size:.72em; vertical-align:4px; }.heading-copy { color:var(--muted); font-size:12px; margin:10px 0 0; }.user-id-card,.admin-session { border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:11px 14px; min-width:190px; }.id-label { display:block; color:#99a49f; font:500 9px var(--display); text-transform:uppercase; letter-spacing:.1em; }.user-id-card strong { display:block; font:600 12px var(--display); margin-top:4px; }.secure-label { color:#639076; font-size:9px; display:inline-flex; align-items:center; gap:5px; }.user-id-card .secure-label { margin-top:7px; }.secure-label i { font-style:normal; font-weight:700; width:14px; height:14px; background:var(--mint); border-radius:50%; display:inline-grid; place-items:center; }.admin-session { display:flex; align-items:center; gap:9px; color:#7e8c85; font-size:10px; }.admin-badge { color:#9f5d40; background:#fbe8dd; border-radius:5px; padding:5px 6px; font:700 8px var(--display); letter-spacing:.08em; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }.metric { border:1px solid var(--line); background:var(--paper); border-radius:10px; min-height:122px; padding:15px 17px; }.metric-green { background:var(--teal); border-color:var(--teal); color:#fff; }.metric-label { display:flex; justify-content:space-between; color:#829089; font-size:10px; }.metric-green .metric-label { color:#b5d5c8; }.metric-label span { width:22px; height:22px; border-radius:7px; background:var(--mint); display:grid; place-items:center; color:var(--teal); font:700 12px var(--display); }.metric-green .metric-label span { color:var(--teal); }.metric strong { display:block; color:var(--ink); font:700 24px/1 var(--display); letter-spacing:-1px; margin:18px 0 10px; }.metric-green strong { color:var(--lime); }.metric strong em { color:var(--muted); font:500 11px var(--body); letter-spacing:0; }.metric small { color:#a2aca7; font-size:9px; }.metric-green small { color:#c2ddd2; }.metric-status { font-size:17px !important; letter-spacing:-.4px !important; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:10px; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:21px 22px 17px; }.section-kicker { color:#a2ada7; font:500 9px var(--display); letter-spacing:.14em; }.section-kicker span { display:inline-block; width:4px; height:4px; background:var(--lime); border-radius:50%; vertical-align:2px; margin-left:3px; }.panel h2 { font:700 17px/1.15 var(--display); letter-spacing:-.5px; margin:8px 0 0; }.panel h2 sup { color:#9ca8a2; font:500 10px var(--display); vertical-align:3px; }.panel-heading p { color:#89958f; font-size:10px; line-height:1.5; margin:8px 0 0; }.task-picker { margin-top:17px; }.pool-note { flex:0 0 auto; color:#658075; background:#f2f8f4; border-radius:6px; padding:7px 9px; font-size:9px; }.pool-note i { width:5px; height:5px; border-radius:50%; background:#5eb68f; display:inline-block; margin-right:5px; }.pool-note b { font:700 12px var(--display); color:var(--teal); margin-right:2px; }.batch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 22px 17px; }.batch-card { border:1px solid var(--line); background:#fbfcfb; border-radius:8px; display:flex; align-items:center; gap:11px; padding:14px 14px; position:relative; text-align:left; transition:.18s; }.batch-card:hover { border-color:#93bcae; background:#f8fcfa; transform:translateY(-1px); }.batch-card.batch-featured { border-color:#b8d9c8; background:#f0f8f3; }.recommended { position:absolute; right:10px; top:9px; color:#659177; background:#dcefe3; border-radius:4px; padding:3px 5px; font-size:8px; }.batch-number { color:var(--teal); font:700 29px/1 var(--display); letter-spacing:-1px; }.batch-copy { min-width:0; flex:1; }.batch-copy strong,.batch-copy small { display:block; }.batch-copy strong { font-size:11px; }.batch-copy small { color:#9aa59f; font-size:9px; margin-top:5px; }.batch-arrow { color:var(--teal); font-size:19px; }.picker-foot { border-top:1px solid var(--line); color:#9ca8a2; display:flex; justify-content:space-between; padding:11px 22px; font-size:9px; }.picker-foot b { color:var(--teal); }.task-panel { margin-top:17px; }.task-panel-heading { align-items:center; }.task-actions { display:flex; align-items:center; gap:8px; }.task-state { color:#9d7a36; background:#fff4d9; border-radius:5px; padding:5px 7px; font-size:9px; white-space:nowrap; }.task-state.active { color:#327b62; background:var(--mint); }.task-state.review { color:#6075a6; background:#e9eef9; }.task-state.approved { color:#327b62; background:#d9f0e0; }.task-state.rejected { color:#ac594c; background:#fbe7e2; }.small-button { min-height:30px !important; padding:7px 10px !important; font-size:9px !important; }.completion-banner { display:flex; align-items:center; gap:11px; margin:0 22px 15px; border:1px solid #c6e1d0; border-radius:8px; background:#f1faf4; padding:12px 13px; }.completion-check { width:25px; height:25px; border-radius:50%; background:#bce9c8; color:#268153; display:grid; place-items:center; font-weight:700; }.completion-banner > div:nth-child(2) { flex:1; }.completion-banner strong,.completion-banner span { display:block; }.completion-banner strong { font-size:11px; }.completion-banner span { color:#7f9388; font-size:9px; margin-top:4px; }.completion-banner .button { flex:0 0 auto; }.task-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:0 22px 13px; border-bottom:1px solid var(--line); }.search-box { height:32px; max-width:230px; flex:1; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; gap:7px; padding:0 9px; color:#a4afa9; }.search-box input { border:0; background:transparent; outline:0; width:100%; min-width:0; font-size:10px; }.search-box input::placeholder { color:#a3aea8; }.task-count { color:#9ca8a2; font-size:10px; }.task-count b { color:var(--teal); font:700 11px var(--display); }.task-list { display:grid; }.task-row { display:grid; grid-template-columns:34px minmax(160px,1fr) minmax(130px,1.1fr) 110px; gap:12px; align-items:center; padding:12px 22px; border-bottom:1px solid #edf2ee; }.task-row:last-child { border-bottom:0; }.task-avatar { width:31px; height:31px; border-radius:9px; background:#e2efe5; color:#47735d; display:grid; place-items:center; font:700 10px var(--display); }.task-avatar.alt-1 { background:#f5e7c7; color:#886331; }.task-avatar.alt-2 { background:#e4e8f5; color:#56658e; }.task-avatar.alt-3 { background:#f4e1e8; color:#8b526b; }.task-contact strong,.task-contact span,.task-message strong,.task-message span { display:block; }.task-contact strong { font-size:11px; }.task-contact span { color:#7d8b84; font:10px var(--display); margin-top:4px; }.task-message { min-width:0; }.task-message strong { color:#8b9892; font-size:9px; font-weight:500; margin-bottom:4px; }.task-message span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#62736b; font-size:10px; }.task-row-actions { display:flex; justify-content:flex-end; align-items:center; gap:7px; }.sent-label { color:#549477; font-size:9px; }.sent-dot { width:6px; height:6px; border-radius:50%; background:#66b997; }.send-button { border:0; border-radius:6px; padding:8px 10px; background:var(--teal); color:#fff; font-size:10px; font-weight:600; }.send-button:hover { background:var(--teal-dark); }.send-button.resend { background:var(--soft); color:#6c7e75; }.empty-task { min-height:200px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; color:#81908a; }.empty-task strong { color:var(--ink); font-size:12px; }.empty-task span { font-size:10px; }.empty-task-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--teal); font-size:19px; margin-bottom:2px; }.user-history { margin-top:17px; }.history-tip,.review-note { color:#9aa59f; font-size:9px; }.submission-list { border-top:1px solid var(--line); }.submission-row { padding:12px 22px; display:flex; align-items:center; gap:11px; border-bottom:1px solid #edf2ee; }.submission-row:last-child { border-bottom:0; }.submission-icon { width:27px; height:27px; border-radius:7px; background:#eef3f0; color:var(--teal); display:grid; place-items:center; }.submission-copy { flex:1; min-width:0; }.submission-copy strong,.submission-copy span { display:block; }.submission-copy strong { font-size:10px; }.submission-copy span { color:#94a09a; font-size:9px; margin-top:3px; }.submission-status { border-radius:5px; padding:5px 7px; font-size:9px; }.status-pending { color:#997328; background:#fff4d8; }.status-approved { color:#397c5d; background:#e1f3e7; }.status-rejected { color:#a85649; background:#fbe7e2; }
.admin-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-top:17px; }.import-panel,.script-admin-panel { min-width:0; }.import-limit { color:#6d937c; background:#eff8f2; border-radius:5px; padding:6px 7px; font:500 9px var(--display); white-space:nowrap; }.drop-zone { border:1px dashed #b7cec1; background:#f8fcf9; border-radius:8px; margin:0 22px 15px; padding:20px; display:flex; align-items:center; gap:11px; position:relative; cursor:pointer; }.drop-zone:hover { background:#f1f9f4; border-color:#7eaf99; }.drop-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }.drop-icon { width:28px; height:28px; border-radius:8px; background:var(--mint); color:var(--teal); display:grid; place-items:center; font-size:17px; }.drop-zone strong,.drop-zone small { display:block; }.drop-zone strong { font-size:10px; }.drop-zone small { color:#98a59f; font-size:9px; margin-top:4px; }.field-label { display:block; color:#68776f; font-size:10px; margin:0 22px 15px; }.field-label input,.field-label textarea { display:block; width:100%; border:1px solid var(--line); border-radius:6px; background:#fbfcfb; color:var(--ink); outline:0; margin-top:7px; padding:9px 10px; font-size:11px; resize:vertical; }.field-label input:focus,.field-label textarea:focus { border-color:#83b6a0; box-shadow:0 0 0 3px #e8f5ed; }.compact-label { margin-bottom:9px; }.import-preview { border-top:1px solid var(--line); padding:14px 22px 16px; display:flex; justify-content:space-between; align-items:center; color:#9ba6a1; font-size:9px; gap:8px; }.import-message { min-height:0; padding:0 22px 14px; color:#4c9071; font-size:10px; }.live-status { color:#3f9577; background:#e1f2e8; border-radius:5px; font-size:9px; padding:5px 7px; }.editor-footer { border-top:1px solid var(--line); padding:16px 22px 0; display:flex; justify-content:space-between; align-items:center; color:#a0aaa6; font-size:9px; }.admin-lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:17px; }.text-button { border:0; padding:0; background:transparent; color:var(--teal); font-size:10px; font-weight:600; }.text-button:hover { text-decoration:underline; }.number-table-head,.number-table-row { display:grid; grid-template-columns:1.5fr .9fr .7fr; gap:10px; align-items:center; }.number-table-head { border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#a1aca6; padding:9px 22px; font-size:9px; }.number-table { max-height:290px; overflow:auto; }.number-table-row { padding:10px 22px; border-bottom:1px solid #edf2ee; }.number-table-row strong,.number-table-row span { display:block; }.number-table-row strong { font-size:10px; }.number-table-row span { color:#8d9993; font:9px var(--display); margin-top:3px; }.pool-status { color:#528d70; font-size:9px; }.review-list { border-top:1px solid var(--line); max-height:330px; overflow:auto; }.review-empty { min-height:180px; display:grid; place-items:center; color:#9ba6a1; font-size:10px; }.review-row { padding:12px 18px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; border-bottom:1px solid #edf2ee; }.review-thumb { width:32px; height:40px; border-radius:4px; object-fit:cover; object-position:top; border:1px solid var(--line); }.review-copy { min-width:0; }.review-copy strong,.review-copy span { display:block; }.review-copy strong { font-size:10px; }.review-copy span { color:#929e98; font-size:9px; margin-top:4px; }.review-actions { display:flex; gap:5px; }.review-actions button { border:0; border-radius:5px; padding:6px 7px; font-size:9px; }.approve-button { color:#347a5e; background:#e1f3e7; }.reject-button { color:#a95649; background:#fbe7e2; }.review-view-button { color:#5d719f; background:#e8eef9; }.user-isolation-panel { margin-top:17px; }.user-table { border-top:1px solid var(--line); }.user-table-head,.user-table-row { display:grid; grid-template-columns:1.25fr 1fr .8fr .8fr; gap:10px; align-items:center; }.user-table-head { color:#a1aca6; padding:9px 22px; font-size:9px; border-bottom:1px solid var(--line); }.user-table-row { padding:11px 22px; border-bottom:1px solid #edf2ee; font-size:10px; }.user-table-row:last-child { border-bottom:0; }.user-table-row strong,.user-table-row span { display:block; }.user-table-row span { color:#8d9993; font-size:9px; margin-top:3px; }.isolation-tag { color:#4c8c6f; background:#e4f3e9; padding:5px 6px; border-radius:5px; font-size:9px; width:max-content; }
.modal-backdrop { position:fixed; inset:0; background:rgba(12,30,25,.38); z-index:20; display:grid; place-items:center; padding:20px; }.modal { width:min(100%,480px); max-height:92vh; overflow:auto; position:relative; background:var(--paper); border-radius:12px; box-shadow:0 25px 70px rgba(10,35,28,.22); padding:27px; }.modal-small { width:min(100%,390px); }.modal-close { position:absolute; top:16px; right:16px; width:27px; height:27px; border:0; border-radius:50%; background:var(--soft); color:#81908a; font-size:19px; }.modal-kicker { color:#99a49f; font:500 9px var(--display); letter-spacing:.16em; }.modal h2 { font:700 21px var(--display); letter-spacing:-.7px; margin:8px 0 6px; }.modal > p { color:var(--muted); font-size:10px; line-height:1.6; margin:0 0 19px; }.modal .field-label { margin-left:0; margin-right:0; }.demo-hint { color:#9ba6a1; font-size:9px; margin:-3px 0 14px; }.demo-hint b { color:var(--teal); }.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:8px; }.template-guide { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #f3e5c3; background:#fff9ea; border-radius:8px; padding:9px 10px; margin-bottom:13px; }.template-guide strong,.template-guide small { display:block; }.template-guide strong { color:#745b27; font-size:10px; }.template-guide small { color:#a08b5c; font-size:8px; margin-top:3px; }.template-guide img { width:38px; height:54px; border-radius:3px; object-fit:cover; object-position:top; border:1px solid #eadbb8; }.upload-box { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; border:1px dashed #b8cec1; border-radius:8px; background:#f8fcf9; min-height:145px; text-align:center; cursor:pointer; position:relative; }.upload-box:hover { background:#f1f9f4; border-color:#78a991; }.upload-box input { position:absolute; inset:0; opacity:0; cursor:pointer; }.upload-symbol { width:28px; height:28px; border-radius:8px; background:var(--mint); color:var(--teal); display:grid; place-items:center; font-size:17px; }.upload-box strong { font-size:10px; }.upload-box small { color:#99a59f; font-size:9px; }.review-preview { width:100%; max-height:250px; object-fit:contain; background:#f6f8f6; border:1px solid var(--line); border-radius:7px; margin-top:12px; }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); z-index:30; border-radius:7px; background:#183b32; color:#fff; padding:11px 16px; font-size:10px; box-shadow:0 13px 32px rgba(10,35,28,.22); opacity:0; pointer-events:none; transition:.2s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:1020px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.admin-grid,.admin-lower-grid { grid-template-columns:1fr; }.admin-lower-grid .number-table { max-height:240px; } }
@media (max-width:700px) { .topbar { padding:0 16px; height:62px; }.top-nav-button { font-size:0; padding:8px; }.top-nav-button:first-child { font-size:10px; }.top-user > div,.online-dot { display:none; }.more-button { margin-left:0; }.page { padding:30px 16px 50px; }.page-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:22px; }.user-id-card,.admin-session { width:100%; }.metric-grid { gap:8px; }.metric { min-height:116px; padding:13px; }.metric strong { font-size:21px; }.metric small { font-size:8px; }.panel-heading { padding:17px 16px 14px; }.panel h2 { font-size:15px; }.batch-grid { grid-template-columns:1fr; padding:0 16px 15px; }.batch-card { padding:12px; }.picker-foot { padding:11px 16px; display:block; line-height:1.8; }.picker-foot span { display:block; }.task-panel-heading { align-items:flex-start; }.task-actions { flex-direction:column; align-items:flex-end; }.completion-banner { margin-left:16px; margin-right:16px; align-items:flex-start; flex-wrap:wrap; }.completion-banner .button { width:100%; }.task-toolbar { padding-left:16px; padding-right:16px; }.task-row { grid-template-columns:30px minmax(0,1fr) auto; gap:9px; padding:12px 16px; }.task-message { grid-column:2; }.task-row-actions { grid-column:3; grid-row:1 / span 2; flex-direction:column; gap:4px; }.sent-label { display:none; }.task-row-actions .send-button { padding:7px 8px; }.submission-row { padding-left:16px; padding-right:16px; }.number-table-head,.number-table-row { grid-template-columns:1.4fr .7fr; padding-left:16px; padding-right:16px; }.number-table-head span:nth-child(2),.number-table-row > div:nth-child(2) { display:none; }.user-table-head,.user-table-row { grid-template-columns:1.3fr .7fr .7fr; padding-left:16px; padding-right:16px; }.user-table-head span:nth-child(2),.user-table-row > div:nth-child(2) { display:none; }.import-panel .panel-heading,.script-admin-panel .panel-heading { display:block; }.import-limit,.live-status { display:inline-block; margin-top:11px; }.drop-zone,.field-label,.compact-label { margin-left:16px; margin-right:16px; }.import-preview,.editor-footer { padding-left:16px; padding-right:16px; }.modal { padding:23px 20px; }.template-guide img { width:34px; height:50px; } }
.auth-screen { position:fixed; inset:0; z-index:15; display:grid; place-items:center; padding:20px; background:var(--canvas); }
.button { border:1px solid transparent; border-radius:7px; min-height:38px; padding:10px 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:10px; font-weight:700; white-space:nowrap; transition:background .18s,transform .18s; }.button:hover:not(:disabled) { transform:translateY(-1px); }.button-dark { background:var(--teal); color:#fff; box-shadow:0 5px 12px rgba(13,92,82,.14); }.button-dark:hover:not(:disabled) { background:var(--teal-dark); }.button-outline { background:#fff; color:var(--ink); border-color:var(--line); }.button-outline:hover:not(:disabled) { background:var(--soft); }
.auth-panel { width:min(100%,410px); border:1px solid var(--line); border-radius:10px; background:var(--paper); box-shadow:0 18px 55px rgba(20,36,32,.08); padding:30px; }
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:32px; }.auth-brand strong,.auth-brand small { display:block; }.auth-brand strong { font:800 19px var(--display); letter-spacing:-.7px; }.auth-brand small { color:var(--muted); font-size:9px; margin-top:1px; }.auth-panel h1 { margin:10px 0 7px; font:700 24px var(--display); }.auth-panel > p { color:var(--muted); font-size:11px; line-height:1.6; margin:0 0 25px; }.auth-panel .field-label { margin-left:0; margin-right:0; }.auth-submit { width:100%; margin-top:5px; }.auth-toggle { margin-top:17px; }.auth-demo { border-top:1px solid var(--line); margin-top:24px; padding-top:15px; color:#98a49d; font-size:9px; }.auth-demo b { color:var(--teal); }
.withdraw-strip { margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid #d6e6db; border-radius:8px; background:#edf6ef; }.withdraw-strip strong,.withdraw-strip span { display:block; }.withdraw-strip strong { color:var(--teal); font-size:10px; }.withdraw-strip span { color:#788b7e; font-size:9px; margin-top:4px; }.withdraw-strip b { color:var(--teal); }.button:disabled,.batch-card.is-disabled { cursor:not-allowed; opacity:.52; transform:none; }.review-view-button { display:inline-block; text-decoration:none; border-radius:5px; padding:6px 7px; font-size:9px; }.review-view-button:hover { text-decoration:underline; }
.template-guide { align-items:flex-start; }.template-guide img { width:100px; height:166px; object-fit:contain; background:#fff; }.template-guide a { display:block; flex:0 0 100px; }.template-guide a:hover img { border-color:#b79f62; }
.country-tabs { display:flex; gap:8px; margin:0 22px 16px; }.country-tab { flex:1; min-width:0; border:1px solid var(--line); border-radius:7px; background:#fff; color:#65766d; padding:10px 11px; text-align:left; font-size:11px; font-weight:700; }.country-tab span { font-size:16px; margin-right:5px; vertical-align:-2px; }.country-tab small { display:block; color:#9ca8a1; font-size:9px; font-weight:400; margin:4px 0 0 26px; }.country-tab:hover { border-color:#9bbfae; }.country-tab.is-active { border-color:#7eb39a; background:#edf8f1; color:var(--teal); box-shadow:inset 0 0 0 1px #b9dfc8; }.country-tab.is-active small { color:#5d9475; }
.batch-grid { gap:12px; }.batch-card { display:block; min-height:160px; padding:17px; overflow:hidden; }.batch-featured { background:#edf8f1 !important; }.batch-main { display:flex; align-items:center; gap:13px; }.batch-number { white-space:nowrap; font-size:30px; }.batch-number small { color:#87968d; font:500 9px var(--body); letter-spacing:0; }.batch-copy { flex:1; }.batch-copy strong { font-size:11px; }.batch-earn { display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid #e5ece6; margin-top:20px; padding-top:12px; }.batch-earn small { color:#839189; font-size:9px; }.batch-earn strong { color:var(--teal); font:800 20px var(--display); letter-spacing:0; }.batch-featured .batch-earn strong { color:#1f7950; }.batch-arrow { position:absolute; right:15px; top:14px; font-size:17px; }.recommended { right:12px; top:52px; }.batch-card:hover .batch-earn strong { color:#0a7b55; }
.field-label select { display:block; width:100%; border:1px solid var(--line); border-radius:6px; background:#fbfcfb; color:var(--ink); outline:0; margin-top:7px; padding:9px 10px; font-size:11px; }.field-label select:focus { border-color:#83b6a0; box-shadow:0 0 0 3px #e8f5ed; }.sent-panel { margin-top:17px; }.sent-panel .number-table { max-height:270px; }.task-state.expired { color:#986e3a; background:#f8ebd9; }.task-picker { border-color:#d6e6da; box-shadow:0 7px 27px rgba(20,36,32,.035); }
.batch-earn strong,.batch-featured .batch-earn strong { color:#a96919; }.batch-card:hover .batch-earn strong { color:#8e5610; }
.batch-card.is-disabled { opacity:.78; }
@media (max-width:700px) { .country-tabs { margin:0 16px 14px; gap:6px; }.country-tab { padding:8px 6px; text-align:center; font-size:10px; }.country-tab span { display:block; margin:0 0 2px; }.country-tab small { margin:3px 0 0; font-size:8px; }.batch-grid { grid-template-columns:1fr; }.batch-card { min-height:112px; padding:14px; }.batch-earn { margin-top:12px; padding-top:9px; }.batch-arrow { top:10px; right:12px; }.recommended { top:43px; } }
@media (max-width:700px) { .auth-panel { padding:24px 20px; }.withdraw-strip { align-items:flex-start; flex-direction:column; }.withdraw-strip .button { width:100%; } }
.sent-filters { display:flex; flex-wrap:wrap; gap:12px; padding:0 22px 16px; }
.sent-filters label { display:flex; align-items:center; gap:8px; color:#77867e; font-size:10px; }
.sent-filters select,.sent-filters input { height:34px; border:1px solid var(--line); border-radius:6px; background:#fbfcfb; color:var(--ink); outline:0; padding:0 10px; font-size:10px; }
.sent-filters input { width:190px; }
.sent-filters select:focus,.sent-filters input:focus { border-color:#83b6a0; box-shadow:0 0 0 3px #e8f5ed; }
.sent-pagination { display:flex; justify-content:space-between; align-items:center; padding:12px 22px; color:#829087; font-size:10px; }
.sent-pagination > div { display:flex; gap:8px; }
@media (max-width:700px) { .sent-filters { padding:0 16px 14px; }.sent-filters label { width:100%; justify-content:space-between; }.sent-filters select,.sent-filters input { width:min(70%,230px); }.sent-pagination { padding:12px 16px; } }
.quick-earnings { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.quick-earnings span { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 10px; border:1px solid #e6d7b6; border-radius:5px; background:#fff9eb; color:#6e6246; font-size:11px; }
.quick-earnings b { color:#965e16; font:800 13px var(--display); }
.heading-copy,.panel-heading p { font-size:12px; }
.panel h2 { font-size:18px; }
.metric-label,.metric small,.field-label,.country-tab,.batch-copy strong { font-size:12px; }
.country-tab small,.batch-copy small,.batch-earn small,.picker-foot,.number-table-head,.number-table-row span { font-size:10px; }
.batch-earn strong { font-size:22px; }
.field-label input,.field-label textarea,.field-label select { font-size:12px; }
.number-table-row strong { font-size:12px; }
@media (max-width:700px) { .quick-earnings { gap:6px; }.quick-earnings span { font-size:10px; padding:5px 8px; }.quick-earnings b { font-size:12px; }.panel h2 { font-size:16px; } }
.country-tab:disabled,.country-tab.is-active:disabled { background:#f1f3f2; border-color:#e0e5e1; color:#a2aaa5; box-shadow:none; cursor:not-allowed; filter:grayscale(1); opacity:.65; }
.country-tab:disabled small,.country-tab.is-active:disabled small { color:#a2aaa5; }
.country-tab:disabled:hover { border-color:#e0e5e1; }
.claim-summary { display:grid; grid-template-columns:1.25fr .7fr 1fr; gap:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin:0 0 15px; }
.claim-summary > div { min-width:0; }
.claim-summary span,.claim-summary strong { display:block; }
.claim-summary span { color:#829087; font-size:10px; margin-bottom:6px; }
.claim-summary strong { color:var(--ink); font:700 13px/1.35 var(--display); overflow-wrap:anywhere; }
.claim-summary > div:last-child strong { color:#a96919; font-size:18px; }
.modal .claim-note { margin:0 0 14px; padding:11px 13px; border-left:3px solid var(--teal); background:#f1f7f3; color:#4f675b; font-size:11px; line-height:1.55; }
@media (max-width:700px) { .claim-summary { grid-template-columns:1fr 1fr; }.claim-summary > div:last-child { grid-column:1 / -1; } }

/* Mobile first task flow: show the earning choices before account details. */
.how-it-works { display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid #d6e6db; border-radius:10px; background:#edf6ef; margin:0 0 17px; }
.how-step { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.how-step > span { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:50%; background:var(--teal); color:#fff; font:800 12px var(--display); }
.how-step strong,.how-step small { display:block; }
.how-step strong { color:var(--teal); font-size:11px; }
.how-step small { color:#71877a; font-size:9px; line-height:1.3; margin-top:2px; }
.how-it-works > i { color:#91ad9e; font-style:normal; font-size:16px; }
.login-earnings { display:grid; grid-template-columns:1fr 1.35fr; gap:8px; margin:0 0 22px; }
.login-earnings > div { padding:11px 10px; border:1px solid #e6d7b6; border-radius:7px; background:#fff9eb; }
.login-earnings strong,.login-earnings span { display:block; }
.login-earnings strong { color:#965e16; font:800 16px/1 var(--display); }
.login-earnings span { color:#85775a; font-size:9px; line-height:1.35; margin-top:4px; }
@media (max-width:700px) {
  .user-page.is-visible { display:flex; flex-direction:column; }
  .user-page.is-visible > .page-heading { order:1; }
  .user-page.is-visible > .how-it-works { order:2; }
  .user-page.is-visible > .task-picker { order:3; }
  .user-page.is-visible > .user-metrics { order:4; }
  .user-page.is-visible > .withdraw-strip { order:5; }
  .user-page.is-visible > .task-panel { order:6; }
  .user-page.is-visible > .user-history { order:7; }
  .how-it-works { gap:5px; padding:11px 9px; margin-bottom:12px; }
  .how-step { gap:5px; }
  .how-step > span { width:23px; height:23px; flex-basis:23px; font-size:11px; }
  .how-step strong { font-size:10px; }
  .how-step small { font-size:8px; }
  .how-it-works > i { font-size:13px; }
  .login-earnings { grid-template-columns:1fr 1.25fr; margin-bottom:19px; }
  .login-earnings strong { font-size:15px; }
  .login-earnings span { font-size:8px; }
  .auth-screen { padding:14px; }
  .auth-panel { padding:23px 18px; border-radius:12px; }
  .auth-brand { margin-bottom:24px; }
  .auth-panel h1 { font-size:22px; }
  .auth-panel > p { margin-bottom:18px; }
  .auth-submit { min-height:46px; font-size:11px; }
  .task-picker { margin-top:0; }
  .task-picker .panel-heading { padding-top:15px; }
  .task-picker .panel-heading p { max-width:245px; }
  .batch-card { min-height:108px; }
  .batch-card .batch-arrow { font-size:21px; }
  .send-button { min-height:40px; min-width:68px; font-size:11px; }
}