* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f4f5f7; color: #1d2330; }
.card { max-width: 560px; margin: 32px auto; background: #fff; padding: 28px; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
h1 { font-size: 1.5rem; margin: 0 0 8px; }
.muted { color: #6b7280; font-weight: normal; }
.error { background: #fdecec; color: #a11; padding: 10px 12px; border-radius: 8px; }
.error.small { padding: 2px 6px; font-size: .8rem; display: inline-block; }
form label { display: block; margin: 14px 0 0; font-weight: 600; font-size: .95rem; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; border: 1px solid #d3d7de; border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #2f6fed33; border-color: #2f6fed; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; }
label.check input { width: auto; margin-top: 4px; }
button, .btn { display: inline-block; margin-top: 20px; padding: 12px 18px; border: 0; border-radius: 8px; background: #2f6fed; color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
form > button { width: 100%; }
button:hover, .btn:hover { background: #2259c9; }
button.link { background: none; color: #2f6fed; padding: 0; margin: 4px 0 0; font-weight: normal; }

/* admin */
.admin { padding: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters input, .filters select { width: auto; margin: 0; }
.filters button, .filters .btn { margin: 0; }
.table { overflow-x: auto; background: #fff; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
th { background: #fafbfc; font-size: .8rem; text-transform: uppercase; color: #6b7280; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.badge.ok { background: #e6f6ec; color: #17733a; }
.badge.bad { background: #fdecec; color: #a11; }
.badge.warn { background: #fff4dc; color: #8a5a00; }
.badge.info { background: #e8f0fe; color: #2259c9; }
.badge.muted { background: #eef0f3; color: #6b7280; }
details summary { cursor: pointer; color: #2f6fed; }
.flash { background: #e6f6ec; color: #17733a; padding: 10px 12px; border-radius: 8px; }
.small { font-size: .85rem; }

/* applicant detail */
.detail { display: grid; gap: 16px; max-width: 900px; }
.panel { background: #fff; border-radius: 12px; padding: 20px; }
.panel h2 { font-size: 1.1rem; margin: 0 0 12px; }
.kv th { width: 140px; background: none; text-transform: none; font-size: .9rem; }
.media { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.media figure { margin: 0; }
.media figure.wide { grid-column: 1 / -1; }
.media img { width: 100%; height: 160px; object-fit: contain; background: #f4f5f7; border-radius: 8px; }
.media video { width: 100%; max-height: 420px; background: #000; border-radius: 8px; }
.media figcaption { font-size: .85rem; color: #6b7280; margin-top: 4px; }
button.secondary { background: #fff; color: #2f6fed; border: 1px solid #c9d6f5; margin-top: 4px; }
.panel.danger { border: 1px solid #f3c7c7; }
.panel.danger form { margin-bottom: 14px; }
.danger-btn { background: #c62828; margin-top: 8px; }
.danger-btn:hover { background: #a31f1f; }

/* verification step */
.step { font-size: .8rem; font-weight: 600; color: #2f6fed; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.card h3 { font-size: 1rem; margin: 18px 0 6px; }
.why { background: #fff8e6; border-radius: 10px; padding: 4px 16px 10px; margin-top: 16px; }
.trust { background: #eef4ff; border-radius: 10px; padding: 4px 16px 10px; margin: 16px 0; }
.why p, .trust p { margin: 6px 0; font-size: .95rem; }
.needs { margin: 6px 0; padding-left: 20px; }
.needs li { margin: 4px 0; }

/* ---------- creator collab form ---------- */
fieldset { border: 0; padding: 0; margin: 22px 0 0; }
legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 2px; }
fieldset > input { margin-top: 8px; }
.row { display: flex; gap: 10px; }
.row label { flex: 1; }
.row label.num { flex: 0 0 120px; }
p.label { font-weight: 600; font-size: .95rem; margin: 14px 0 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { margin: 0 !important; font-weight: normal !important; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-block; padding: 7px 14px; border: 1px solid #d3d7de; border-radius: 99px; cursor: pointer; font-size: .92rem; background: #fff; }
.pill input:checked + span { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.pill input:focus-visible + span { outline: 2px solid #2f6fed66; }
.why ul.needs { margin: 6px 0; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
@media (max-width: 480px) { .row label.num { flex-basis: 96px; } .card { margin: 0; border-radius: 0; padding: 22px 18px; } }

/* ---------- collab admin ---------- */
.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.top h1 { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0; border-bottom: 1px solid #e3e6eb; }
.tab { padding: 8px 12px; color: #4b5563; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .92rem; }
.tab span { background: #eef0f3; border-radius: 99px; padding: 0 7px; font-size: .78rem; margin-left: 2px; }
.tab.on { color: #2f6fed; border-color: #2f6fed; font-weight: 600; }
.filters .short { width: 130px; }
.btn.secondary, button.secondary { background: #fff; color: #2f6fed; border: 1px solid #c9d6f5; }
.btn.secondary:hover, button.secondary:hover { background: #f3f6fe; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; }
.bulk button, .bulk label { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.collab { background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid transparent; }
.collab.overdue { border-color: #f3c7c7; }
.collab header { display: flex; gap: 10px; align-items: flex-start; }
.collab .pick { width: 18px; height: 18px; margin: 3px 0 0; flex: none; }
.collab .who { flex: 1; min-width: 0; }
.reach { text-align: right; line-height: 1.1; }
.reach b { font-size: 1.35rem; display: block; }
.reach span { font-size: .72rem; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.socs { display: flex; flex-wrap: wrap; gap: 6px; }
.soc { font-size: .85rem; text-decoration: none; color: #1d2330; background: #f4f5f7; border-radius: 8px; padding: 4px 9px; }
.soc b { color: #6b7280; font-size: .75rem; margin-right: 2px; }
.soc span { font-weight: 700; margin-left: 4px; }
.soc:hover { background: #e8f0fe; }
.facts { display: flex; flex-direction: column; gap: 3px; font-size: .88rem; }
.facts a { color: #2f6fed; margin-right: 8px; }
.ship { background: #f6f8fb; border-radius: 8px; padding: 6px 9px; }
.more summary { font-size: .85rem; }
.more p { margin: 6px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.actions .btn, .actions button { margin: 0; padding: 9px 14px; font-size: .9rem; }
form.inline { display: flex; gap: 6px; align-items: center; margin: 0; }
form.inline select, form.inline input { margin: 0; padding: 8px 10px; width: auto; font-size: .9rem; }
form.posted { flex: 1 1 100%; }
form.posted input { flex: 1; min-width: 0; }
button.approve { background: #17733a; }
button.approve:hover { background: #125c2e; }
.btn.wa { background: #1fa855; }
.btn.wa:hover { background: #178a45; }
.danger-link { color: #c62828 !important; font-size: .85rem; }
.admin form > button { width: auto; }
.filters input[name=q] { min-width: 240px; }
.cities { margin: 6px 0 0; }
.cities button.link { margin: 0; }
form.edit { display: grid; gap: 4px; margin: 8px 0 12px; }
form.edit label { margin: 4px 0 0; font-size: .85rem; }
form.edit input, form.edit textarea { padding: 8px 10px; font-size: .9rem; }
form.edit button { justify-self: start; margin-top: 6px; padding: 8px 14px; font-size: .9rem; }
.login { max-width: 380px; }
.top .logout { margin-left: auto; color: #6b7280; }
.pack-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.warehouse-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff8e6; border: 1px solid #f3dfa8; border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.warehouse-bar span { flex: 1 1 260px; }
.warehouse-bar .btn { margin: 0; padding: 9px 14px; font-size: .9rem; }
.warehouse .steps { background: #fff; border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.warehouse .labels .btn { margin: 0 6px 6px 0; }
table.pack td { vertical-align: middle; }
table.pack input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.warehouse form > button { margin-top: 12px; }
h2.sub { font-size: 1.05rem; margin: 28px 0 8px; }
@media (max-width: 520px) { table.pack th, table.pack td { padding: 8px 6px; } .warehouse .admin, .admin { padding: 12px; } }
.up { background: #f3f0ff; border-radius: 8px; padding: 6px 9px; line-height: 1.6; }
.up.error { background: #fdecec; }
.up-panel { background: #fff; border-radius: 12px; padding: 8px 12px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.up-panel form.inline select { padding: 5px 8px; }
.up-panel form.inline button { margin: 0; padding: 5px 10px; font-size: .85rem; }
.up-panel button.link { margin: 0; }
.collab form.inline input[type=email] { flex: 1; min-width: 0; }
/* creator account */
.account h2 { font-size: 1.1rem; margin: 0 0 10px; }
.account .box { border: 1px solid #eef0f3; border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.acct-top { display: flex; justify-content: space-between; align-items: flex-start; }
.timeline { list-style: none; display: flex; padding: 0; margin: 4px 0 14px; counter-reset: s; }
.timeline li { flex: 1; text-align: center; font-size: .75rem; color: #9ca3af; position: relative; }
.timeline li span { display: block; width: 14px; height: 14px; border-radius: 99px; background: #e5e7eb; margin: 0 auto 4px; position: relative; z-index: 1; }
.timeline li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; }
.timeline li:first-child::before { display: none; }
.timeline li.done, .timeline li.now { color: #17733a; font-weight: 600; }
.timeline li.done span, .timeline li.done::before, .timeline li.now::before { background: #17733a; }
.timeline li.now span { background: #fff; border: 3px solid #17733a; width: 16px; height: 16px; margin-top: -1px; }
.copy { display: flex; gap: 6px; margin-top: 6px; }
.copy input { margin: 0; font-size: .9rem; }
.copy button { margin: 0; padding: 8px 14px; }
.code { background: #f3f0ff; padding: 2px 8px; border-radius: 6px; letter-spacing: .03em; }
.earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.earn div { background: #f6f8fb; border-radius: 10px; padding: 10px; text-align: center; }
.earn b { display: block; font-size: 1.25rem; }
.earn span { font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.account .why form.inline { margin-top: 8px; }
.account .why form.inline input { flex: 1; margin: 0; }
.account .why form.inline button { margin: 0; width: auto; }
.right { text-align: right; margin: 0; }
.center { text-align: center; }
.mono { font-family: ui-monospace, Menlo, monospace; }
/* profile photos */
.avatar { width: 44px; height: 44px; border-radius: 99px; object-fit: cover; flex: none; background: #eef0f3; }
.avatar.big { width: 56px; height: 56px; }
.acct-me { display: flex; gap: 12px; align-items: center; }
.acct-me h1 { margin: 0; }
.acct-me .step { margin: 0 0 2px; }
/* ---------- admin navigation & new pages ---------- */
.mainnav { display: flex; flex-wrap: wrap; gap: 2px; background: #fff; border-radius: 12px; padding: 6px; margin-bottom: 14px; align-items: center; }
.mainnav a { padding: 7px 12px; border-radius: 8px; color: #374151; text-decoration: none; font-size: .92rem; }
.mainnav a.on { background: #e8f0fe; color: #2259c9; font-weight: 600; }
.mainnav a:hover { background: #f4f5f7; }
.mainnav .logout { margin-left: auto; color: #6b7280; }
.top .btn, .top form.inline button { margin: 0; }
.top { gap: 12px; margin-bottom: 8px; }
.today { background: #fff; border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.today pre { white-space: pre-wrap; font: inherit; margin: 8px 0; }
.roi { background: #f0faf3; border-radius: 8px; padding: 6px 9px; }
.roi .good { color: #17733a; }
form.again select { max-width: 130px; }
.panel { background: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.campaign-form textarea { font-size: .92rem; }
.campaign-form .row label { flex: 1; }
.linkbox { font-size: .8rem; padding: 6px 8px; min-width: 220px; margin: 0; }
details.brief, .brief-box { background: #f3f0ff; border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.brief-box h4, details.brief h4 { margin: 10px 0 2px; font-size: .9rem; }
.brief-box ul, details.brief ul { margin: 2px 0; padding-left: 20px; }
.brief-box p, details.brief p { margin: 2px 0; }
.up-box { margin-top: 12px; border: 1px dashed #c9d6f5; border-radius: 10px; padding: 10px 12px; }
.up-box input[type=file] { padding: 8px; }
/* content library */
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.item { background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid transparent; }
.item.starred { border-color: #f3c84b; }
.item .media { background: #111; aspect-ratio: 4 / 5; position: relative; display: flex; align-items: center; justify-content: center; }
.item .media img, .item .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.item .media a { display: block; width: 100%; height: 100%; }
.item .media .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.2rem; text-shadow: 0 2px 8px #0008; }
.item .media .ph { color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; }
.item .meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.item .cap { color: #4b5563; margin: 0; }
.item-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.item-actions button.link { margin: 0; font-size: .85rem; }
.who-line { display: flex; gap: 8px; align-items: center; }
.avatar.sm { width: 28px; height: 28px; }
/* analytics */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: #fff; border-radius: 12px; padding: 14px; }
.tile b { display: block; font-size: 1.5rem; }
.tile span { color: #374151; font-size: .9rem; }
.tile em { display: block; color: #6b7280; font-size: .8rem; font-style: normal; }
.funnel th { width: 110px; background: none; text-transform: none; color: #374151; font-size: .9rem; }
.funnel td { vertical-align: middle; }
.bar { display: inline-block; width: 220px; max-width: 45vw; height: 10px; background: #eef0f3; border-radius: 99px; vertical-align: middle; overflow: hidden; }
.bar i { display: block; height: 100%; background: #2f6fed; border-radius: 99px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.two .panel { margin: 0; }
/* ---------- paid collabs ---------- */
.deal fieldset legend .muted { font-weight: normal; font-size: .9rem; }
.deal .indent { margin-left: 28px; }
.deal .row.indent { gap: 10px; }
.deal .total { font-size: 1.1rem; margin: 14px 0 0; padding: 10px 12px; background: #f0faf3; border-radius: 8px; }
.terms { padding-left: 20px; font-size: .9rem; color: #374151; }
.terms li { margin: 6px 0; }
.req { font-size: .7rem; text-transform: uppercase; background: #fdecec; color: #a11; padding: 2px 6px; border-radius: 99px; vertical-align: middle; letter-spacing: .03em; }
.linkbox.wide, input.wide { width: 100%; min-width: 260px; }
.btn.disabled { opacity: .5; cursor: not-allowed; }
.agents { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.agent-chip { background: #fff; border: 1px solid #e3e6eb; border-radius: 99px; padding: 5px 12px; text-decoration: none; color: #374151; }
.agent-chip.on { border-color: #2f6fed; background: #e8f0fe; }
.paid-list { display: flex; flex-direction: column; gap: 10px; }
.pcard { background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; border-left: 4px solid #c9d6f5; }
.pcard.st-files-received, .pcard.st-posted { border-left-color: #f3c84b; }
.pcard.st-ready-to-pay { border-left-color: #17733a; }
.pcard.st-paid { border-left-color: #9ca3af; opacity: .85; }
.pcard.st-cancelled { border-left-color: #e5e7eb; opacity: .6; }
.pc-left input { width: 18px; height: 18px; margin: 3px 0 0; }
.pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-name { font-size: 1.05rem; }
.pc-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 14px; font-size: .88rem; }
.pc-grid .lbl { display: block; font-size: .72rem; text-transform: uppercase; color: #6b7280; letter-spacing: .03em; margin-bottom: 2px; }
.amts { margin-top: 4px; }
.amts .tot { font-size: 1rem; }
.good { color: #17733a; }
.flist { margin: 0; padding-left: 0; list-style: none; }
.flist li { margin: 2px 0; }
.pc-ship { background: #f6f8fb; border-radius: 8px; padding: 6px 9px; }
.pc-side { display: flex; flex-direction: column; gap: 6px; width: 170px; flex: none; }
.pc-side select { margin: 0; padding: 7px 8px; font-size: .9rem; }
.agent-sel.none { border-color: #f3c84b; background: #fffbea; }
.log { margin: 6px 0 0; padding-left: 18px; color: #6b7280; }
.pcard details form.inline { margin: 6px 0; flex-wrap: wrap; }
@media (max-width: 900px) { .pc-grid { grid-template-columns: 1fr 1fr; } .pcard { flex-wrap: wrap; } .pc-side { width: 100%; flex-direction: row; } }
.ebiz h2 { font-size: 1.05rem; margin: 0 0 10px; }
.ebiz-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ebiz-files > div { background: #f6f8fb; border-radius: 10px; padding: 12px; }
.ebiz-files .btn { margin-top: 8px; padding: 8px 14px; font-size: .9rem; }
.ebiz-files .tot { font-size: 1.4rem; font-weight: 700; }
.bulk select, .bulk input { width: auto; margin: 0; }
.bulk input.short { width: 200px; }
.deal .row label.num2 { flex: 0 0 150px; }
form.inline.adv { margin-top: 6px; }
form.inline.adv input.short { width: 120px; }
.ebiz h3 { font-size: .95rem; margin: 14px 0 8px; }
.ebiz h3:first-of-type { margin-top: 0; }
form.inline.adv { flex-wrap: wrap; gap: 6px; }
form.inline.adv button { white-space: nowrap; padding: 6px 10px; font-size: .85rem; }
form.inline.adv button.link { padding: 0; }

/* =====================================================================
   Team dashboard theme (sidebar layout). Herb green for done/primary,
   saffron for "waiting on us", brick for overdue/blocked, slate for
   "waiting on the creator".
   ===================================================================== */
:root { --side: #23392F; --side-ink: #C9D6CE; --bg: #F5F6F2; --ink: #1E2420; --muted: #5F6A63; --line: #E3E6DF;
        --herb: #2F6B4F; --herb-soft: #E6F0EA; --saffron: #C38A1E; --saffron-soft: #FBF1DC; --brick: #B4483E; --brick-soft: #F8E5E2;
        --slate: #5B6770; --slate-soft: #E9EDEF; }
body { font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.admin { background: var(--bg); color: var(--ink); padding: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; font-size: 15px; }
body.admin.solo { display: block; padding: 20px; }
.admin .main { padding: 24px 28px 60px; max-width: 1280px; width: 100%; }
.admin .num, .admin .tile b, .admin .tot, .admin .q b, .admin .prog, .admin .reach b { font-variant-numeric: tabular-nums; }

/* sidebar */
.side { background: var(--side); color: var(--side-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 12px; }
.side .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; padding: 4px 10px 18px; line-height: 1.2; }
.side .brand span { display: block; font-weight: 400; font-size: .8rem; color: var(--side-ink); }
.side nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.side nav p { margin: 16px 10px 4px; font-size: .78rem; color: #8FA59A; font-weight: 600; }
.side nav a { display: flex; align-items: center; justify-content: space-between; color: var(--side-ink); text-decoration: none; padding: 7px 10px; border-radius: 7px; font-size: .93rem; }
.side nav a:hover { background: #2E4A3D; color: #fff; }
.side nav a.on { background: #F5F6F2; color: var(--side); font-weight: 600; }
.side nav a i { font-style: normal; font-size: .75rem; font-weight: 700; background: var(--saffron); color: #fff; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; }
.side nav a.on i { background: var(--side); }
.side .me { border-top: 1px solid #36513F; padding: 12px 10px 0; font-size: .82rem; line-height: 1.45; }
.side .me b { color: #fff; display: block; }
.side .me span { display: block; color: #8FA59A; overflow: hidden; text-overflow: ellipsis; }
.side .me a { color: var(--side-ink); margin-right: 10px; }
.side a:focus-visible, .admin a:focus-visible, .admin button:focus-visible, .admin summary:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* type, controls */
.admin h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; }
.admin h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.admin h4 { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.admin .muted { color: var(--muted); }
.admin a { color: var(--herb); }
.admin button, .admin .btn, .auth button { background: var(--herb); border-radius: 7px; padding: 9px 14px; font-size: .92rem; margin-top: 0; }
.admin button:hover, .admin .btn:hover, .auth button:hover { background: #24563F; }
.admin button.secondary, .admin .btn.secondary { background: #fff; color: var(--herb); border: 1px solid #C5D6CB; }
.admin button.secondary:hover, .admin .btn.secondary:hover { background: var(--herb-soft); }
.admin button.link { background: none; color: var(--herb); padding: 0; border: 0; }
.admin button.approve { background: var(--herb); }
.admin .danger-btn { background: var(--brick); }
.admin .danger-link { color: var(--brick) !important; }
.admin input, .admin select, .admin textarea { border-color: #D4D9D1; border-radius: 7px; padding: 8px 10px; font-size: .92rem; }
.admin input:focus, .admin select:focus, .admin textarea:focus { outline: 2px solid #2F6B4F33; border-color: var(--herb); }
.admin form label { font-size: .88rem; }
.hint { font-weight: 400; color: var(--muted); font-size: .8rem; margin-left: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.admin .flash { background: var(--herb-soft); color: #1F4D37; border-radius: 8px; margin: 0 0 14px; }
.admin .error { background: var(--brick-soft); color: #8A2F27; }
.admin .badge { font-weight: 600; font-size: .74rem; border-radius: 5px; padding: 1px 7px; }
.admin .badge.ok { background: var(--herb-soft); color: #1F5A40; }
.admin .badge.warn { background: var(--saffron-soft); color: #7A5410; }
.admin .badge.bad { background: var(--brick-soft); color: #8A2F27; }
.admin .badge.info { background: var(--slate-soft); color: #3E4A52; }
.admin .badge.muted { background: #EEF0EC; color: var(--muted); }
.admin .good { color: var(--herb); }
.admin .panel, .admin .tile, .admin .collab, .admin .pcard, .admin .bulk, .admin .table, .admin .up-panel { box-shadow: none; border: 1px solid var(--line); }
.admin th { text-transform: none; font-size: .8rem; letter-spacing: 0; color: var(--muted); background: #FAFBF8; font-weight: 600; }
.admin .top { align-items: center; margin-bottom: 16px; }
.admin .tabs { border-color: var(--line); }
.admin .tab.on { color: var(--herb); border-color: var(--herb); }
.admin .tab span { background: #EEF0EC; }
.admin .tile b { font-size: 1.45rem; }
.admin .tile span { font-size: .85rem; color: var(--muted); }
.admin .agent-chip.on { border-color: var(--herb); background: var(--herb-soft); }
.admin details > summary { color: var(--ink); }
.admin details.panel > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.admin details.panel > summary::-webkit-details-marker { display: none; }
.admin details.panel > summary h2 { margin: 0; }
.admin details.panel > summary::before { content: "▸"; color: var(--muted); }
.admin details.panel[open] > summary::before { content: "▾"; }
.admin details.panel[open] > summary { margin-bottom: 12px; }
.empty-line, .allclear { background: #fff; border: 1px dashed #D4D9D1; border-radius: 10px; padding: 18px; color: var(--muted); }
.empty { max-width: 520px; padding: 40px 0; }
.conn { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.conn .up-panel { border: 0; padding: 6px 0 0; margin: 0; }
.crumb { margin: 0 0 8px; font-size: .88rem; }

/* Today */
.today { background: none; padding: 0; margin: 0 0 22px; }
.today p { margin: 0; }
.today h1 { font-size: 1.9rem; margin: 2px 0 0; }
.today-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.today-cols h2 { margin: 0 0 10px; }
.today-cols section > h2 + * { margin-bottom: 24px; }
.queue { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.q { display: flex; align-items: center; gap: 16px; padding: 12px 16px; text-decoration: none; color: var(--ink); border-left: 4px solid transparent; }
.q + .q { border-top: 1px solid var(--line); }
.q:hover { background: #FAFBF8; }
.q b { font-size: 1.9rem; font-weight: 700; min-width: 2.6ch; text-align: right; line-height: 1; }
.q span { display: flex; flex-direction: column; }
.q strong { font-weight: 600; }
.q em { font-style: normal; color: var(--muted); font-size: .85rem; }
.q-bad { border-left-color: var(--brick); } .q-bad b { color: var(--brick); }
.q-warn { border-left-color: var(--saffron); } .q-warn b { color: #9C6C12; }
.q-slate { border-left-color: var(--slate); } .q-slate b { color: var(--slate); }
.allclear { color: var(--herb); border-color: #C5D6CB; background: var(--herb-soft); border-style: solid; }
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.feed time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.feed .ev-ok div::before { content: "● "; color: var(--herb); }
.feed .ev-bad div::before { content: "● "; color: var(--brick); }
.feed .ev-info div::before { content: "● "; color: var(--slate); }

/* paid cards */
.alerts { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.alert { text-decoration: none; padding: 9px 14px; border-radius: 8px; font-size: .92rem; }
.alert.bad { background: var(--brick-soft); color: #8A2F27; }
.alert.warn { background: var(--saffron-soft); color: #7A5410; }
.admin .pcard { border-left: 4px solid var(--slate); padding: 16px 18px; }
.admin .pcard.st-new { border-left-color: var(--saffron); }
.admin .pcard.st-ready-to-pay { border-left-color: var(--saffron); }
.admin .pcard.st-posted, .admin .pcard.st-paid { border-left-color: var(--herb); }
.admin .pcard.is-overdue { border-left-color: var(--brick); }
.pc-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
a.pc-name, a.pname { color: var(--ink); font-weight: 700; text-decoration: none; }
a.pc-name { font-size: 1.08rem; }
a.pc-name:hover, a.pname:hover { text-decoration: underline; }
.admin .pc-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.pc-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .88rem; }
.pc-links p { margin: 2px 0 6px; }
.flist li { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
form.x { display: inline; margin: 0; }
form.x button { font-size: 1rem; line-height: 1; padding: 0 4px; }
.addlink { margin-top: 6px !important; }
.addlink input { flex: 1; min-width: 0; }
.dlist { list-style: none; padding: 0; margin: 0; }
.dlist li { padding: 3px 0; }
.dlist .prog { display: inline-block; min-width: 34px; font-weight: 700; }
.dlist .it-done { color: var(--muted); }
.dlist .it-done .prog { color: var(--herb); }
.dlist .it-overdue .prog { color: var(--brick); }
.quote { color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; margin: 6px 0 0; }
.admin .pc-ship { background: none; padding: 8px 0 0; border-top: 1px solid var(--line); }
.admin .pc-ship p { margin: 0; }
.pc-side { width: 180px; }
.sidelabel { margin: 0 0 8px !important; font-size: .78rem !important; color: var(--muted); font-weight: 600 !important; }
.sidelabel select { margin-top: 3px; }
table.items { width: auto; margin: 8px 0; }
table.items th, table.items td { padding: 4px 6px 4px 0; border: 0; background: none; }
table.items select, table.items input { margin: 0; padding: 6px 8px; }
table.items input.num { width: 64px; }
table.items input[type=date] { width: 150px; }
label.del { display: flex; gap: 4px; align-items: center; font-weight: 400 !important; margin: 0 !important; white-space: nowrap; }
label.del input { width: auto; }
.editbox { background: #FAFBF8; border-radius: 8px; padding: 8px 10px; }

/* parcel picker */
details.parcel { background: #FAFBF8; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .88rem; width: 100%; }
details.parcel summary { color: var(--ink); }
details.parcel summary span { color: var(--herb); margin-left: 4px; text-decoration: underline; }
.parcel-body label { margin: 8px 0 0; font-size: .82rem; }
.parcel-body input { margin-top: 3px; padding: 6px 8px; font-size: .88rem; }
.qtys { display: flex; flex-wrap: wrap; gap: 10px; }
.qtys label { flex: 0 0 96px; }
.qtys label:nth-last-child(2) { flex: 1 1 140px; }
.qtys label.q { flex: 0 0 64px; }
.shipform { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; margin: 0; }
.shipform button { margin: 0; }
details.again, details.shipbox { width: 100%; }
details.again > summary, details.shipbox > summary { list-style: none; display: inline-block; cursor: pointer; }
details.again > summary::-webkit-details-marker, details.shipbox > summary::-webkit-details-marker { display: none; }
details.again[open] > summary, details.shipbox[open] > summary { margin-bottom: 8px; }
ul.links { list-style: none; padding: 0; margin: 0; }
ul.links li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }

/* barter cards */
.admin .collab { border: 1px solid var(--line); }
.admin .collab.overdue { border-color: #E2B5AF; border-left: 4px solid var(--brick); }
.admin .ship, .admin .roi, .admin .up { background: #FAFBF8; }
.admin .warehouse-bar { background: var(--saffron-soft); border-color: #EBD3A0; }

/* profiles */
.prof-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.prof-head h1 { margin: 0 0 2px; }
.prof-head p { margin: 0 0 6px; }
.prof-head > div:nth-child(2) { flex: 1; }
.prof-act { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.prof-act form { margin: 0; }
.prof-act button, .prof-act .btn { width: 100%; text-align: center; }
.avatar.big { width: 64px; height: 64px; }
.blockline { color: var(--brick); font-weight: 600; }
.prof-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.notes { list-style: none; padding: 0; margin: 12px 0 0; }
.notes li { border-top: 1px solid var(--line); padding: 8px 0; }
.notes p { margin: 0; }
table.people td { vertical-align: middle; }
a.person { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
a.person span { display: flex; flex-direction: column; }
a.person em { font-style: normal; color: var(--muted); font-size: .82rem; }
a.person .avatar { width: 36px; height: 36px; }

/* team */
.member { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.member.off { opacity: .6; }
.member header { margin-bottom: 6px; }
.member .actions { margin-top: 12px; }
.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; margin-top: 10px; }
label.perm { display: flex; gap: 8px; align-items: flex-start; margin: 0 !important; font-weight: 400 !important; }
label.perm input { width: auto; margin-top: 3px; }
label.perm span { display: flex; flex-direction: column; font-size: .88rem; }
label.perm em { font-style: normal; color: var(--muted); font-size: .8rem; }
.callout { background: var(--saffron-soft); border: 1px solid #EBD3A0; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.callout p { margin: 0 0 6px; }
.big { font-size: 1.15rem; font-weight: 700; }
.copybox { font-size: .85rem; }
.panel.narrow { max-width: 460px; }

/* login screens */
body.auth { background: var(--side); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.authbox { background: #fff; border-radius: 12px; padding: 30px 28px; width: 100%; max-width: 380px; }
.authbox.wide { max-width: 480px; }
.authbox h1 { margin: 0; }
.authbox > p { margin: 2px 0 14px; }
.authbox .panel { padding: 0; border: 0; }
.brandmark { color: var(--herb); font-weight: 700; margin: 0 0 4px !important; }
.auth form > button { width: 100%; margin-top: 18px; }
.auth input:focus { outline: 2px solid #2F6B4F33; border-color: var(--herb); }
.asbar { background: var(--saffron); color: #fff; padding: 9px 16px; font-size: .9rem; text-align: center; }
.asbar a { color: #fff; font-weight: 700; }

@media (max-width: 1100px) { .admin .pc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  body.admin { display: block; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px; }
  .side .brand { padding: 0 8px 0 4px; }
  .side nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; gap: 2px; }
  .side nav p { display: none; }
  .side nav a { white-space: nowrap; }
  .side .me { border: 0; padding: 0; margin-left: auto; }
  .side .me b, .side .me span { display: none; }
  .admin .main { padding: 16px 14px 40px; }
  .today-cols, .prof-cols, .pc-links { grid-template-columns: 1fr; }
  .prof-head { flex-wrap: wrap; }
  .prof-act { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .pc-side { width: 100%; flex-direction: row; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.admin a.btn, .auth a.btn { color: #fff; text-decoration: none; }
.admin a.btn.secondary { color: var(--herb); }
.admin a.btn.wa { background: #1fa855; color: #fff; }
.admin a.q { color: var(--ink); }
.admin a.q strong { color: var(--ink); }
.side { min-height: 100vh; }
.qtys label { display: flex; flex-direction: column; }
.qtys label input { width: 100%; }
.admin .reach span { text-transform: none; letter-spacing: 0; font-size: .75rem; }
.admin .collab .actions { gap: 8px; }
/* performance, activity, payouts */
table.perf td { vertical-align: top; }
table.perf .num, .admin td.num, .admin th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.perf tr.lv-bad td:first-child { box-shadow: inset 4px 0 0 var(--brick); }
table.perf tr.lv-check td:first-child { box-shadow: inset 4px 0 0 var(--saffron); }
ul.reasons { margin: 4px 0; padding-left: 16px; font-size: .8rem; color: var(--muted); max-width: 300px; }
details.numedit summary { color: var(--herb); font-size: .88rem; white-space: nowrap; }
details.numedit form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; min-width: 220px; }
details.numedit label { margin: 0 !important; font-size: .78rem !important; }
details.numedit input { padding: 5px 7px; margin-top: 2px; }
details.numedit button { grid-column: span 2; justify-self: start; padding: 6px 10px; }
.allfile { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.alertbox { border-left: 4px solid var(--brick) !important; }
ul.alist { list-style: none; padding: 0; margin: 0; }
ul.alist li { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
ul.alist p { margin: 4px 0; font-size: .88rem; }
ul.devices { list-style: none; padding: 0; margin: 0; }
ul.devices li { padding: 8px 0; border-top: 1px solid var(--line); }
table.actlog tr.k-security td:nth-child(3) { color: #8A2F27; }
table.actlog tr.k-money td:nth-child(3) { color: #7A5410; }
.nowrap { white-space: nowrap; }
.admin td .inline { display: flex; gap: 6px; align-items: center; }
.admin td .inline input { margin: 0; }

.warnline { background: #fff6e0; color: #7a5300; padding: 6px 8px; border-radius: 6px; }
details.past summary { font-weight: 600; }
details.past ul { margin: 4px 0 8px; padding-left: 18px; }
/* grades, duplicate warnings, win-back, featured */
.grade { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: .78rem; font-weight: 700; vertical-align: middle; cursor: help; font-variant-numeric: tabular-nums; }
.grade.big { min-width: 34px; height: 30px; font-size: 1rem; border-radius: 8px; }
.grade.gA { background: #2F6B4F; color: #fff; }
.grade.gB { background: #CFE3D6; color: #1F4D37; }
.grade.gC { background: #FBF1DC; color: #7A5410; }
.grade.gD { background: #F8E5E2; color: #8A2F27; }
.grade.gN { background: #EEF0EC; color: #5F6A63; font-weight: 600; }
.dupbox { background: #FBF1DC; border-left: 4px solid #C38A1E; border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: .86rem; }
.dupbox.high { background: #F8E5E2; border-left-color: #B4483E; }
.dupbox ul { margin: 4px 0 0; padding-left: 18px; }
.dupbox a { color: inherit; }
.scorecard table { width: 100%; font-size: .9rem; }
.scorecard th { text-align: left; font-weight: 400; color: #5F6A63; background: none; padding: 5px 8px 5px 0; width: 45%; }
.scorecard td { padding: 5px 0; }
.gpick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .88rem; }
.gpick label { display: flex; gap: 4px; align-items: center; margin: 0 !important; font-weight: 400 !important; white-space: nowrap; }
.gpick input { width: auto; margin: 0; }
.wb-act { margin-top: 16px; }
.wb-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.wb-two h3 { margin: 0 0 8px; font-size: 1rem; }
.wb-results { list-style: none; padding: 0; margin: 0; }
.wb-results li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #E3E6DF; flex-wrap: wrap; }
.wb-results li.bad b { color: #8A2F27; }
.small-btn { padding: 5px 12px !important; font-size: .82rem !important; }
.featlist { list-style: none; padding: 0; margin: 0; }
.featlist li { padding: 6px 0; border-top: 1px solid #E3E6DF; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 860px) { .wb-two { grid-template-columns: 1fr; } }

/* application form: language switch and Urdu */
.langbar { max-width: 640px; margin: 0 auto 10px; display: flex; justify-content: flex-end; }
.langbar .langs { display: flex; gap: 4px; font-size: .85rem; }
.langbar .langs a { text-decoration: none; padding: 5px 10px; border-radius: 99px; color: inherit; opacity: .75; }
.langbar .langs a.on { background: #fff; opacity: 1; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
[dir=rtl] body { font-family: "Public Sans", "Noto Nastaliq Urdu", sans-serif; line-height: 2.1; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] legend { font-family: "Public Sans", "Noto Nastaliq Urdu", sans-serif; line-height: 1.8; letter-spacing: 0; }
[dir=rtl] .right { text-align: left; }
[dir=rtl] .langbar { justify-content: flex-start; }
[dir=rtl] input[dir=ltr], [dir=rtl] select[dir=ltr] { text-align: left; font-family: "Public Sans", system-ui, sans-serif; }
[dir=rtl] .needs { padding-right: 20px; padding-left: 0; }
[dir=rtl] button, [dir=rtl] .btn { font-family: "Public Sans", "Noto Nastaliq Urdu", sans-serif; line-height: 2; }