:root {
  --accent: #c71948;
  --accent-dark: #a90f39;
  --accent-soft: #fff1f5;
  --ink: #18212f;
  --ink-soft: #344054;
  --muted: #697386;
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --surface-soft: #fafbfc;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --success: #147a50;
  --success-soft: #eaf7f0;
  --warning: #8a5b00;
  --warning-soft: #fff5d9;
  --danger: #ac153d;
  --danger-soft: #fdecef;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
}
* { box-sizing: border-box; }
html { color: var(--ink); background: var(--canvas); font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
strong, b, dd, .button, .status { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid rgba(199, 25, 72, .2); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 66px; padding: 0 clamp(18px, 3vw, 44px); display: flex; align-items: center; gap: 26px; color: #fff; background: #171b23; border-bottom: 1px solid #2a303a; }
.brand { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 114px; padding: 6px 9px 5px; border-radius: 9px; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.18); white-space: nowrap; }
.brand:hover { background: #f6f7f8; text-decoration: none; }
.brand img { display: block; width: 96px; height: auto; }
.brand .brandPortal { margin-right: -.32em; color: #171b23; font-size: 8px; font-weight: 850; line-height: 1; letter-spacing: .32em; }
.topbar nav { display: flex; align-items: center; gap: 3px; flex: 1; }
.topbar nav a, .navMenu > summary { position: relative; padding: 9px 11px; border-radius: 7px; color: #bcc4d0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.topbar nav > a:hover, .topbar nav > a.active, .navMenu > summary:hover, .navMenu.active > summary, .navMenu[open] > summary { color: #fff; background: #252b35; text-decoration: none; }
.topbar nav > a.active::after, .navMenu.active > summary::before { position: absolute; right: 11px; bottom: -11px; left: 11px; height: 2px; border-radius: 2px; background: #ed2d60; content: ""; }
.account { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.account > a { color: #f4f6f8; font-weight: 600; }
.account form { margin: 0; }
.account button, .navToggle { min-height: 36px; padding: 7px 11px; border: 1px solid #424a57; border-radius: 7px; color: #f4f6f8; background: transparent; cursor: pointer; }
.account button:hover, .navToggle:hover { background: #252b35; }
.navToggle { display: none; margin-left: auto; }
.navMenu { position: relative; }
.navMenu > summary { list-style: none; cursor: pointer; }
.navMenu > summary::-webkit-details-marker { display: none; }
.navMenu > summary::after { margin-left: 7px; color: #8f99a8; content: "⌄"; }
.navMenu > div { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; display: grid; min-width: 236px; padding: 7px; border: 1px solid #343c48; border-radius: 10px; background: #1e232c; box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.navMenu > div a { padding: 9px 11px; }
.navMenu > div a.active { color: #fff; background: #2b323d; }

.shell { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 72px; }
.pageHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.pageHead h1, .authCard h1 { max-width: 850px; margin: 3px 0 7px; color: var(--ink); font-size: clamp(28px, 3.2vw, 38px); font-weight: 730; line-height: 1.12; letter-spacing: -.035em; }
.pageHead p, .authCard p { margin: 0; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 750; color: var(--accent) !important; }
.pageActions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats article { position: relative; min-height: 112px; padding: 18px 19px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stats article::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: #d9dde3; content: ""; }
.stats article:first-child::before, .stats article.accentStat::before { background: var(--accent); }
.stats span { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.stats strong { display: block; margin-top: 12px; font-size: 29px; font-weight: 720; line-height: 1.1; letter-spacing: -.025em; }
.accentStat { border-color: #f1c8d4 !important; background: linear-gradient(150deg, #fff, #fff8fa) !important; }

.moduleGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.moduleGrid > a { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-content: center; min-height: 104px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.moduleGrid > a:hover { border-color: #c6ccd5; background: #fff; text-decoration: none; transform: translateY(-1px); }
.moduleGrid span { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.moduleGrid strong { align-self: end; font-size: 15px; font-weight: 700; }
.moduleGrid small { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 1.35; }

.grid2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.gridAside { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.cards { display: grid; gap: 14px; }
.projectGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.panel, .projectCard, .profitCard, .actionPanel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.panel { margin-bottom: 18px; padding: 22px; }
.panel.narrow { max-width: 650px; margin-inline: auto; }
.panel h2 { margin: 0 0 17px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.panelHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.panelHead h2 { margin: 0; }
.panelHead a { font-size: 12px; font-weight: 650; }

.actionPanel { margin: 0 0 18px; overflow: hidden; }
.actionPanel > summary { display: flex; align-items: center; min-height: 56px; padding: 14px 18px; color: var(--ink-soft); font-size: 14px; font-weight: 680; list-style: none; cursor: pointer; }
.actionPanel > summary::-webkit-details-marker { display: none; }
.actionPanel > summary::before { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-size: 16px; line-height: 1; content: "+"; }
.actionPanel > summary:hover { background: var(--surface-soft); }
.actionPanel[open] > summary { border-bottom: 1px solid var(--line); }
.actionPanel[open] > summary::before { content: "–"; }
.actionPanel > .actionBody { padding: 20px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border: 1px solid var(--ink); border-radius: var(--radius-sm); color: #fff; background: var(--ink); font-size: 13px; font-weight: 680; line-height: 1.2; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover { filter: none; text-decoration: none; transform: translateY(-1px); }
.button.primary { border-color: var(--accent); background: var(--accent); }
.button.primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button.secondary { border-color: var(--line-strong); color: var(--ink-soft); background: #fff; }
.button.secondary:hover { border-color: #aeb5bf; background: var(--surface-soft); }
.button.small { min-height: 32px; padding: 6px 9px; font-size: 11px; }
.button.success { border-color: var(--success); background: var(--success); }
.button.danger { border-color: #efbdca; color: var(--danger); background: #fff; }
.button.danger:hover { background: var(--danger-soft); }
.button[disabled] { opacity: .55; cursor: wait; transform: none; }

.form label, .signatureForm label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.form input, .form select, .form textarea, .inlineAssign input, .inlineAssign select, .rejectForm input, .assignmentRow input, .signatureForm input[type=text], .signatureForm input[name=signed_name], .compactForm input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: #fff; }
.form textarea { min-height: 92px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #aeb5bf; }
.form input:focus, .form select:focus, .form textarea:focus, .inlineAssign input:focus, .inlineAssign select:focus, .rejectForm input:focus, .assignmentRow input:focus { outline: 3px solid rgba(199, 25, 72, .12); border-color: var(--accent); }
.form small, .assignmentRow small { color: var(--muted); font-weight: 400; }
.stack { display: grid; gap: 15px; }
.formGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.formGrid .wide { grid-column: span 2; }

.tableWrap { max-width: 100%; margin: 0 -6px -3px; overflow-x: auto; scrollbar-color: #b9c0ca transparent; scrollbar-width: thin; }
table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #edf0f3; text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #fafbfc; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .075em; white-space: nowrap; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #fbfcfd; }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.35; }
td b { font-weight: 680; }

.status { display: inline-flex; width: max-content; padding: 3px 7px; border-radius: 999px; color: #4b5565; background: #eef1f4; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status.approved, .status.active, .status.paid, .status.signed { color: #11623f; background: var(--success-soft); }
.status.submitted, .status.paused, .status.issued, .status.pending, .status.company_signed, .status.contractor_signed { color: #795000; background: var(--warning-soft); }
.status.rejected { color: #981238; background: var(--danger-soft); }
.status.completed { color: #4b5565; background: #eef1f4; }

.projectCard { padding: 20px; }
.projectCard > div:first-child, .profitCard > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.projectCode { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .09em; }
.projectCard h2 { margin: 9px 0 3px; font-size: 20px; font-weight: 720; letter-spacing: -.02em; }
.projectCard p { margin: 0; color: var(--muted); font-size: 13px; }
.projectCard dl { display: flex; gap: 38px; margin: 20px 0 15px; }
.projectCard dl div { display: grid; gap: 3px; }
.projectCard dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.projectCard dd { margin: 0; font-size: 20px; font-weight: 720; }
.projectManage { margin-top: 12px; border-top: 1px solid var(--line); }
.projectManage > summary, details summary { color: var(--ink-soft); font-size: 13px; font-weight: 650; cursor: pointer; }
.projectManage > summary { padding: 13px 0 0; }
.projectManage > summary:hover, details summary:hover { color: var(--accent); }
.projectManageBody { padding-top: 12px; }
.assignmentList { display: grid; gap: 9px; margin: 14px 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.assignmentList h3, .assignTitle { margin: 0 0 7px; font-size: 13px; }
.assignmentGroup { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.assignmentRow { display: grid; grid-template-columns: minmax(160px, 1fr) 100px 130px auto; gap: 8px; align-items: center; }
.assignmentRow input { min-height: 36px; padding: 7px 9px; }
.assignmentRow strong { font-size: 12px; }
.assignmentRow strong small { display: block; font-weight: 400; }
.inlineAssign { display: grid; grid-template-columns: minmax(180px, 1fr) 100px 130px auto; gap: 8px; }
.removeAssignment { margin: 0; }

.profitGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.profitCard { padding: 19px; }
.profitCard h2 { margin: 8px 0 15px; font-size: 17px; font-weight: 700; }
.profitCard dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; }
.profitCard dl > div { padding: 0 12px; border-left: 1px solid var(--line); }
.profitCard dl > div:first-child { padding-left: 0; border-left: 0; }
.profitCard dt { color: var(--muted); font-size: 10px; }
.profitCard dd { margin: 4px 0 0; font-size: 14px; font-weight: 720; }
.profitCard details { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.profitCard ul { padding-left: 19px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.positive { color: var(--success); }
.negative, .deadline { color: var(--danger) !important; font-weight: 680; }

.invoiceList { display: grid; }
.invoiceList > a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 3px; border-bottom: 1px solid #edf0f3; color: var(--ink); }
.invoiceList > a:last-child { border-bottom: 0; }
.invoiceList > a:hover { background: #fbfcfd; text-decoration: none; }
.invoiceList span:last-child { text-align: right; }
.invoiceList small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.reviewActions { display: grid; gap: 7px; min-width: 220px; }
.reviewActions form { margin: 0; }
.rejectForm { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.reviewNote { color: var(--danger) !important; }
.compactForm { display: flex; gap: 6px; min-width: 170px; }
.compactForm input { width: 86px; min-height: 32px; padding: 5px 7px; }
.compactEdit { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; min-width: 350px; margin-top: 10px; }

.userStats article:first-child::before { background: var(--accent); }
.roleHelp { align-self: end; padding: 12px 14px; border: 1px solid #f0ccd6; border-radius: var(--radius-sm); color: var(--muted); background: var(--accent-soft); font-size: 12px; line-height: 1.55; }
.roleHelp b { color: var(--ink-soft); }
.userAdminList { display: grid; gap: 10px; }
.userAdminCard { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.userAdminSummary { display: grid; grid-template-columns: 42px minmax(220px, 1fr) minmax(190px, .8fr) auto; gap: 14px; align-items: center; padding: 15px 16px; }
.userAvatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); font-size: 16px; font-weight: 780; }
.userIdentity, .userRole { display: grid; min-width: 0; }
.userIdentity strong, .userRole b { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.userIdentity span, .userRole span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.userRole b { color: var(--ink-soft); }
.userManage { grid-column: 1 / -1; width: 100%; padding-top: 10px; border-top: 1px solid var(--line); }
.userManage > summary { width: max-content; margin-left: auto; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 7px; list-style: none; background: #fff; font-size: 11px; }
.userManage > summary::-webkit-details-marker { display: none; }
.userManage > summary::after { margin-left: 7px; content: "⌄"; }
.userManage[open] > summary::after { content: "⌃"; }
.userManageBody { margin-top: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.userDangerActions { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.userDangerActions form { margin: 0; }
.deleteUserForm { display: flex; align-items: flex-end; gap: 10px; }
.deleteConfirm { display: flex; align-items: flex-start; gap: 7px; max-width: 260px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.deleteConfirm input { flex: 0 0 auto; width: auto; margin: 2px 0 0; }

.contractList { display: grid; gap: 12px; }
.contractCard { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.contractMeta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.contractMeta h3 { margin: 0 0 4px; font-size: 15px; }
.contractMeta p, .contractMeta small { margin: 0; color: var(--muted); }
.signedReceipt { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; padding: 12px; border-radius: 8px; color: #11623f; background: var(--success-soft); font-size: 12px; }
.signatureForm { display: grid; gap: 12px; max-width: 700px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.signatureForm h4 { margin: 0; font-size: 14px; }
.companySignatureForm { padding: 16px; border: 1px solid #efc5d1; border-radius: 10px; background: #fff8fa; }
.signaturePad { display: block; width: 100%; height: 180px; border: 1px dashed #aeb5bf; border-radius: 9px; background: #fff; cursor: crosshair; touch-action: none; }
.checkLabel { display: flex !important; grid-template-columns: auto 1fr !important; align-items: flex-start; }
.checkLabel input { margin-top: 3px; }
.legalNote { font-size: 11px; }
.contractForm .contractBody, .contractEdit .contractBody { grid-column: 1 / -1; }
.contractBody textarea { min-height: 560px; font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; line-height: 1.55; }
.contractActions { display: flex; flex-wrap: wrap; gap: 8px; }
.contractEdit { margin-top: 13px; border-top: 1px solid var(--line); }
.contractEdit > summary { padding: 12px 0 0; }
.contractEdit > form { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

.flash { max-width: 900px; margin: 0 auto 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #eef1f4; font-size: 13px; font-weight: 600; }
.flash.success { border-color: #c9ead9; color: #11623f; background: var(--success-soft); }
.flash.error { border-color: #f1c4d0; color: #941034; background: var(--danger-soft); }
.empty, .muted { color: var(--muted); }
.authShell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #171b23, #263140); }
.authCard { width: min(450px, 100%); padding: 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: #fff; box-shadow: 0 26px 70px rgba(0,0,0,.28); }
.authBrand { display: grid; justify-items: center; gap: 5px; width: 100%; margin: 0 auto 24px; text-align: center; }
.authBrand img { display: block; width: min(210px, 72%); height: auto; }
.authBrand span { margin-right: -.32em; color: #171b23; font-size: 10px; font-weight: 850; line-height: 1; letter-spacing: .32em; }
.authCard > .eyebrow, .authCard > h1 { margin-right: auto; margin-left: auto; text-align: center; }
.authCard > h1 { margin-bottom: 24px; }

.filterGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; align-items: end; }
.filterActions, .reportTabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.filterActions .muted { font-size: 12px; }
.filterPanel { background: var(--surface-soft); }
.attentionList { display: grid; gap: 0; }
.attentionList a { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.attentionList a:last-child { border-bottom: 0; }
.attentionList strong { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.auditDetails { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 620px; font-size: 12px; }
.privacyRequest { border-top: 1px solid var(--line); padding: 18px 0; }
.plainCheck { display: flex !important; align-items: center; gap: 8px; }
.plainCheck input { width: auto; min-height: auto; }

@media (max-width: 1200px) {
  .topbar { gap: 14px; }
  .topbar nav a, .navMenu > summary { padding-inline: 8px; }
  .profitGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid2, .gridAside, .projectGrid { grid-template-columns: 1fr; }
  .formGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moduleGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { min-height: 62px; padding: 0 14px; gap: 10px; flex-wrap: wrap; }
  .brand { min-width: 102px; padding: 5px 8px 4px; border-radius: 8px; }
  .brand img { width: 86px; }
  .brand .brandPortal { font-size: 7px; }
  .navToggle { display: block; }
  .topbar nav { display: none; order: 4; flex-basis: 100%; padding: 4px 0 12px; }
  .topbar nav.open { display: grid; overflow: visible; }
  .topbar nav > a, .navMenu > summary { padding: 10px 11px; }
  .topbar nav > a.active::after, .navMenu.active > summary::before { top: 9px; right: auto; bottom: 9px; left: 0; width: 2px; height: auto; }
  .navMenu > div { position: static; min-width: 0; margin: 3px 0 5px 13px; border: 0; border-left: 1px solid #414a57; border-radius: 0; background: transparent; box-shadow: none; }
  .navMenu > div a { padding: 9px 11px; }
  .account > a { display: none; }
  .shell { width: min(100% - 24px, 1320px); padding-top: 26px; }
  .pageHead { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
  .pageHead h1 { font-size: 28px; }
  .moduleGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: 17px; }
  .formGrid { grid-template-columns: 1fr; }
  .formGrid .wide { grid-column: auto; }
  .inlineAssign, .assignmentRow, .assignmentGroup { grid-template-columns: 1fr; }
  .assignmentGroup { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .profitGrid { grid-template-columns: 1fr; }
  .tableWrap { margin-right: -17px; padding-right: 17px; }
  .reviewActions { min-width: 185px; }
  .compactEdit { grid-template-columns: 1fr; min-width: 250px; }
  .userAdminSummary { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; padding: 14px; }
  .userRole { grid-column: 2 / -1; }
  .userDangerActions, .deleteUserForm { display: grid; align-items: stretch; }
  .deleteConfirm { max-width: none; }
  .contractMeta { display: grid; }
  .signaturePad { height: 150px; }
}
@media (max-width: 480px) {
  .stats { gap: 9px; }
  .stats article { min-height: 98px; padding: 15px; }
  .stats strong { font-size: 25px; }
  .moduleGrid { grid-template-columns: 1fr; }
  .moduleGrid > a { min-height: 80px; }
  .profitCard dl { grid-template-columns: 1fr; gap: 9px; }
  .profitCard dl > div { padding: 0; border-left: 0; }
  .invoiceList > a { display: grid; }
  .invoiceList span:last-child { text-align: left; }
  .authCard { padding: 28px 22px; }
  .projectCard dl { gap: 24px; }
}