/* Avery Press-On Studio — standalone pages (checkout, order, admin). Builds on wizard.css tokens. */
html, body { margin: 0; background: #fbf7f5; }
[hidden] { display: none !important; }
body { -webkit-text-size-adjust: 100%; }
.app-wizard .apo, .app-page { min-height: 100vh; }
.app-page .apo-shell { padding-bottom: 24px; }
.app-head { margin-bottom: 22px; }
.app-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.app-acc-link { font-size: 14px; font-weight: 600; color: var(--apo-ink); text-decoration: none; white-space: nowrap; }
.app-acc-form .app-acc-id { margin: 8px 0 12px; font-size: 14px; }
.app-acc { border: 1.5px solid var(--apo-blush); }
.app-order-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.apo .app-order-row img { width: 52px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.app-order-main { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.app-order-main small { color: var(--apo-muted); }
.app-order-main .app-status { font-size: 13px; margin-top: 2px; }
.app-order-total { font-weight: 600; white-space: nowrap; }
.app-head a.apo-lang { display: inline-flex; align-items: center; text-decoration: none; }
.apo .app-logo { height: 20px; width: auto; max-width: 110px; display: block; }

.app-card { background: var(--apo-surface); border-radius: var(--apo-radius); box-shadow: var(--apo-shadow); padding: 18px; margin-bottom: 14px; }
.app-section { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.app-section > legend { padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.app-section > legend + * { clear: both; }

.app-set-head { display: flex; gap: 14px; align-items: center; }
.apo .app-set-head img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--apo-radius-sm); flex: none; }
.app-set-head > div { flex: 1; min-width: 0; }
.app-set-name { font-weight: 600; font-size: 16px; }
.app-sizes { margin-top: 12px; border-top: 1px solid var(--apo-line); }
.app-sizes summary { cursor: pointer; padding: 12px 0 4px; font-size: 14px; font-weight: 600; }
.app-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 12px 0; font-size: 14px; }
.app-dl dt { color: var(--apo-muted); }
.app-dl dd { margin: 0; overflow-wrap: anywhere; }

.app-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--apo-muted); }
.app-field small { font-size: 12px; }
.app-field input, .app-field textarea, .app-field select {
  font: inherit; font-size: 16px; color: var(--apo-ink); background: var(--apo-surface);
  border: 1.5px solid var(--apo-line); border-radius: var(--apo-radius-sm); padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box;
}
.app-field textarea { min-height: 64px; resize: vertical; }
.app-field input:focus, .app-field textarea:focus, .app-field select:focus { outline: none; border-color: var(--apo-ink); }
.app-field [aria-invalid="true"] { border-color: var(--apo-error); }
.app-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }

.app-choice {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  background: var(--apo-surface); border: 1.5px solid transparent; border-radius: var(--apo-radius); box-shadow: var(--apo-shadow);
}
.app-choice:has(input:checked) { border-color: var(--apo-ink); }
.app-choice input { width: 20px; height: 20px; accent-color: var(--apo-ink); flex: none; margin: 0; }
.app-choice-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.app-choice-text strong { font-weight: 600; font-size: 15px; }
.app-choice-text small { font-size: 13px; color: var(--apo-muted); }
.app-choice-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.app-pay-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--apo-blush-soft); display: grid; place-items: center; font-size: 18px; flex: none; }
.app-free { margin: 4px 0 12px; }
.app-address { padding: 4px 2px 0; }

.app-totals .apo-price td, .app-totals .apo-price th { color: var(--apo-muted); }
/* Checkout: the action bar sits at the end of the form (not floating), so it never covers a field while typing. */
.apo .app-nav { position: static; margin: 18px 0 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--apo-line); }
.app-field input, .app-field textarea, .app-field select { scroll-margin: 24px 0 120px; }
.app-wide { width: 100%; }
.app-ok { border-radius: var(--apo-radius-sm); background: #e9f3ea; color: #2f5b37; padding: 12px 16px; margin-bottom: 16px; font-size: 15px; }

.app-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin-top: 4px; }
.app-status span { width: 10px; height: 10px; border-radius: 50%; background: var(--apo-rose); }
.app-status-pending_payment span, .app-status-awaiting_verification span { background: #d9a441; }
.app-status-paid span, .app-status-in_production span, .app-status-quality_check span, .app-status-ready span, .app-status-shipped span, .app-status-completed span { background: #5f9a68; }
.app-status-cancelled span { background: #a8432f; }

.app-qr-box { text-align: center; padding: 8px 0 4px; }
.apo .app-qr-box img { width: 240px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; background: #fff; }
.app-qr-amount { font-size: 26px; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; }
.app-steps { list-style: decimal; padding-left: 1.3em; display: grid; gap: 6px; margin: 14px 0 10px; font-size: 15px; }
.app-receipt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--apo-line); display: grid; gap: 10px; }
.app-file { position: relative; overflow: hidden; }
.app-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.app-other summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.app-other-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.app-track { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.app-track li { display: flex; align-items: center; gap: 10px; color: var(--apo-muted); font-size: 15px; }
.app-track li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--apo-line); flex: none; }
.app-track li.is-done { color: var(--apo-ink); }
.app-track li.is-done::before { background: var(--apo-rose); border-color: var(--apo-rose); }
.app-track li.is-cur { font-weight: 600; }
.app-mono { font-family: ui-monospace, Menlo, monospace; }
.app-center { text-align: center; }
.app-links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px 0; }

/* ---------- Admin ---------- */
.adm { --ink: #3a2e2a; --muted: #85766f; --line: #eee3de; --rose: #b5806f; font-family: "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: var(--ink); background: #fbf7f5; min-height: 100vh; font-size: 14px; }
.adm a { color: var(--ink); }
.adm-main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; min-width: 0; width: 100%; box-sizing: border-box; }
.adm h1 { font-size: 22px; margin: 0 0 14px; }
.adm h2 { font-size: 16px; margin: 0 0 10px; }
.adm-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(58,46,42,.04), 0 6px 20px rgba(58,46,42,.06); padding: 16px; margin-bottom: 14px; min-width: 0; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 860px) { .adm-grid { grid-template-columns: minmax(0, 1fr); } }
.adm-table-wrap { overflow-x: auto; }
.adm table { width: 100%; border-collapse: collapse; }
.adm th, .adm td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm thead th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.adm .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-filters a { text-decoration: none; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.adm-filters a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.adm-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f0e8e3; white-space: nowrap; }
.adm-badge.pending_payment { background: #f6ecd6; }
.adm-badge.awaiting_verification { background: #fbe1c4; color: #7a4a10; }
.adm-badge.paid, .adm-badge.in_production, .adm-badge.quality_check, .adm-badge.ready { background: #e2efe4; color: #2f5b37; }
.adm-badge.shipped, .adm-badge.completed { background: #e6eaf3; }
.adm-badge.cancelled { background: #f6dcd6; color: #8a2f20; }
.adm-flag { background: #fbf0e1; color: #8a5a1c; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.adm-m { width: 100%; font-variant-numeric: tabular-nums; }
.adm-m td { font-size: 17px; font-weight: 600; text-align: center; }
.adm-m td.flag { background: #fbf0e1; }
.adm-m thead th { text-align: center; }
.adm-btn { appearance: none; border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.adm-btn.line { background: #fff; color: var(--ink); }
.adm-btn.ok { background: #2f6b3a; border-color: #2f6b3a; }
.adm-btn.danger { background: #fff; color: #8a2f20; border-color: #d9b2a8; }
.adm-form label { display: block; margin-bottom: 12px; }
.adm-form label > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.adm input[type=text], .adm input[type=password], .adm input[type=number], .adm input[type=email], .adm input[type=url], .adm textarea, .adm select {
  font: inherit; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #ddd0c9; border-radius: 9px; background: #fff; color: var(--ink);
}
.adm textarea { min-height: 80px; }
.adm-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-inline > * { flex: 0 0 auto; }
.adm-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-refs img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.adm-log { font-size: 12px; color: var(--muted); }
.adm-log li { margin-bottom: 4px; }
.adm-msg { background: #e9f3ea; color: #2f5b37; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.adm-err { background: #fbe9e4; color: #a8432f; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.adm-rep td { padding: 4px; }
.adm-rep input { min-width: 70px; }
.adm-thumb { width: 52px; height: 64px; object-fit: cover; border-radius: 8px; }
.adm-login { max-width: 360px; margin: 12vh auto; padding: 0 16px; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.adm-stats div { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(58,46,42,.04); }
.adm-stats strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.adm-stats span { color: var(--muted); font-size: 12px; }

/* Production board */
.adm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.adm-col { background: #f3ece7; border-radius: 14px; padding: 10px; min-width: 0; }
.adm-col h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; justify-content: space-between; margin: 4px 4px 10px; }
.adm-col h2 span { background: #fff; border-radius: 999px; padding: 0 8px; color: var(--ink); }
.adm-job { background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(58,46,42,.06); border-left: 3px solid transparent; }
.adm-job.is-late { border-left-color: #c0573f; }
.adm-job-top { display: flex; gap: 10px; text-decoration: none; color: inherit; line-height: 1.35; }
.adm-job-top img { width: 44px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.adm-job-top small { color: var(--muted); }
.adm-job-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.adm-late-txt { color: #c0573f; font-weight: 600; }
.adm-job-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.adm-job-actions .adm-btn { padding: 7px 12px; font-size: 13px; }
.adm-late strong { color: #c0573f; }
.adm-checks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-checks h2 { width: 100%; }
.adm-chip { text-decoration: none; background: #fbe1c4; color: #7a4a10; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; }
@media (max-width: 400px) { .apo-brand .apo-logo + .apo-title, .apo-brand a + .apo-title { display: none; } }

/* verification code + staff roles */
.app-code { font-size: 26px !important; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .45em !important; }
.adm-me { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.adm-me a { text-decoration: none; color: var(--muted, #85766f); }
.adm-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; }
.adm-check input { width: auto !important; }
.app-forgot { margin-top: 6px; }
.app-forgot summary { list-style: none; cursor: pointer; display: inline-block; }
.app-forgot summary::-webkit-details-marker { display: none; }
.app-forgot[open] { background: #fff; border: 1px solid var(--apo-line); border-radius: 14px; padding: 12px 14px; }
.app-forgot .apo-btn { margin-top: 4px; }
.adm-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13px; color: inherit; background: #fff; }
.adm-top-out { display: flex; justify-content: flex-end; padding: 14px 16px 0; max-width: 1200px; margin: 0 auto; }
.adm-login.adm-card { padding: 28px 26px; }
.adm-card form + form, .adm-card .adm-btn + form { margin-top: 10px; }
.app-sub-h { margin: 18px 0 6px; font-size: 15px; }
.app-pw { margin: 6px 0 14px; }
.app-pw summary { list-style: none; cursor: pointer; display: inline-block; padding: 6px 0; }
.app-pw summary::-webkit-details-marker { display: none; }
.app-pw[open] summary { margin-bottom: 6px; }

/* Sidebar menu (grouped) */
.adm-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.adm-shell-out { display: block; }
.adm-side { background: #fff; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 12px 14px; box-sizing: border-box; }
.adm-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 14px; }
.adm-logo img { height: 20px; display: block; }
.adm-menu-btn { display: none; font: inherit; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.adm-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.adm-nav-h { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; padding: 9px 10px; border-radius: 10px; font-weight: 500; color: var(--ink); }
.adm-nav a:hover { background: #f6efeb; }
.adm-nav a.on { background: var(--ink); color: #fff; }
.adm-nav a:focus-visible, .adm-menu-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.adm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f1e7e2; color: var(--ink); font-size: 12px; display: inline-grid; place-items: center; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.adm-count.hot { background: #e9a23b; color: #fff; }
.adm-nav a.on .adm-count { background: #fff; color: var(--ink); }
.adm-nav-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.adm-who { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.adm-who small { color: var(--muted); font-weight: 400; font-size: 12px; }
.adm-nav a.on.adm-who small { color: #eee3de; }
.adm-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 0; }
@media (max-width: 900px) {
	.adm-shell { grid-template-columns: minmax(0, 1fr); }
	.adm-side { position: sticky; top: 0; height: auto; z-index: 20; padding: 12px max(16px, env(safe-area-inset-left)) 12px; border-right: 0; border-bottom: 1px solid var(--line); }
	.adm-side-head { padding: 0; }
	.adm-menu-btn { display: inline-block; }
	.adm-nav { display: none; padding-top: 6px; }
	.adm-nav-open .adm-nav { display: flex; }
}
.adm-filters small { opacity: .65; font-variant-numeric: tabular-nums; margin-left: 2px; }
.adm-filterbar { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.adm-filterbar label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-filterbar label span { font-size: 12px; color: var(--muted); }
.adm-fb-actions { display: flex; gap: 6px; }
.adm-fb-sum { margin: -4px 0 8px; }
@media (max-width: 1100px) { .adm-filterbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .adm-fb-q { grid-column: 1 / -1; } }
@media (max-width: 560px) { .adm-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-fb-actions { grid-column: 1 / -1; } }
html:has(> body.adm) { background: #fbf7f5; }
.adm-filterbar { grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(120px, 1fr)) auto; }
.adm-filterbar input, .adm-filterbar select { height: 40px; box-sizing: border-box; }
@media (max-width: 1250px) { .adm-filterbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .adm-fb-q { grid-column: 1 / -1; } }
/* Settings: section tiles, then one section per page */
.adm-set-h { margin: 22px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.adm-set-tile { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.adm-set-tile:hover { border-color: var(--rose); box-shadow: 0 6px 18px rgba(58,46,42,.07); }
.adm-set-tile:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.adm-set-tile strong { font-size: 15px; }
.adm-set-tile span { color: var(--muted); font-size: 13px; }
.adm-set-tile em { font-style: normal; font-size: 12.5px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink); }
.adm-set-sub { margin: -8px 0 14px; }
.adm-set-form { max-width: 680px; }
.adm-set-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- Design approval (customer) ---------- */
.app-proof { scroll-margin-top: 16px; }
.app-proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.app-proof-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.app-proof-img { padding: 0; border: 0; background: #f3ece7; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; cursor: zoom-in; }
.app-proof-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-proof-img:focus-visible { outline: 2px solid var(--apo-ink, #3a2e2a); outline-offset: 2px; }
.app-proof-old { margin: 4px 0 10px; }
.app-proof-old summary { cursor: pointer; display: inline-block; }
.app-thread { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.app-thread li { max-width: 88%; padding: 10px 12px; border-radius: 14px; background: #f6efeb; }
.app-thread li.is-cust { align-self: flex-end; background: #3a2e2a; color: #fff; }
.app-thread li.is-cust small { color: #e6dad4; }
.app-thread small { display: block; font-size: 12px; color: #85766f; margin-top: 2px; }
.app-thread p { margin: 6px 0 0; white-space: normal; }
.app-proof-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .app-proof-actions { grid-template-columns: 1fr; } }
.app-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 16, 14, .92); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.app-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.app-lightbox-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; cursor: pointer; }

/* ---------- Design approval (staff) ---------- */
.adm-proof { scroll-margin-top: 70px; }
.adm-badge.awaiting_approval { background: #e9e1f5; color: #4b3a78; }
.adm-badge.is-changes, .adm-tag-changes { background: #fbe1c4; color: #7a4a10; }
.adm-tag-changes { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.adm-proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.adm-proof-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--line); }
.adm-thread { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.adm-thread li { padding: 10px 12px; border-radius: 12px; background: #f6efeb; max-width: 90%; }
.adm-thread li.is-staff { align-self: flex-end; background: #eef3ef; }
.adm-thread li.is-changes { background: #fdeedd; }
.adm-thread small { display: block; color: var(--muted); font-size: 12px; }
.adm-thread p { margin: 6px 0 0; }
.adm-proof-form { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.adm-proof-pick input[type=file] { padding: 14px; border: 2px dashed var(--line); border-radius: 12px; background: #fdfaf8; width: 100%; box-sizing: border-box; }
.adm-proof-reply { margin-top: 10px; }
.adm-proof-reply input { flex: 1 1 200px; }

/* ---------- Backend on phones ---------- */
@media (max-width: 700px) {
	.adm-main { padding: 14px 12px 60px; }
	.adm h1 { font-size: 20px; }
	.adm-card { padding: 14px; border-radius: 12px; }
	.adm input[type=text], .adm input[type=password], .adm input[type=number], .adm input[type=email], .adm input[type=date], .adm input[type=tel], .adm textarea, .adm select { font-size: 16px; } /* stops iPhone zooming in */
	.adm-btn { min-height: 44px; padding-left: 16px; padding-right: 16px; }
	.adm-inline { flex-wrap: wrap; }
	.adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.adm-board { grid-auto-columns: 85%; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px 10px; }
	.adm-col { scroll-snap-align: start; }
	.adm-job-actions { flex-wrap: wrap; }
	.adm-job-actions .adm-btn, .adm-job-actions form { flex: 1 1 auto; }
	.adm-job-actions form .adm-btn { width: 100%; }
	.adm-table-wrap, .adm-card > table, .adm-m { overflow-x: auto; display: block; }
	.adm-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.adm-thread li, .app-thread li { max-width: 100%; }
	.adm-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.adm-filters a { white-space: nowrap; }
}
.adm-btn { white-space: nowrap; }
@media (max-width: 700px) {
	.adm-inline > .adm-inline, .adm-inline > span.adm-inline { flex-wrap: wrap; min-width: 0; max-width: 100%; }
	.adm-main > .adm-inline:first-of-type, .adm-main > p + .adm-inline { gap: 8px; }
}
.apo-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.apo-offer-actions .apo-btn { flex: 1 1 140px; }
.apo-offer-login { margin: 4px 0 14px; }