:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #1d2939; background: #f6f8fb; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f8fb; }
.shell { min-height: 100vh; padding-bottom: 5.5rem; }
.topbar { background: linear-gradient(135deg, #7c3d4e, #4d2334); padding: 1.2rem max(1.25rem, calc((100% - 760px) / 2)); box-shadow: 0 2px 12px #3d1d2b33; }
.brand { color: #fff; display: inline-flex; align-items: center; gap: .65rem; font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.brand-icon { align-items: center; background: #ffffff24; border-radius: 50%; display: inline-flex; font-size: 1.45rem; height: 2.35rem; justify-content: center; width: 2.35rem; }
.content { margin: 0 auto; max-width: 760px; padding: 1.5rem 1rem 2rem; }
h1 { color: #172235; font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -.03em; margin: .15rem 0 .45rem; }
h2 { font-size: 1.15rem; margin-top: 0; }
h3 { font-size: 1rem; }
.eyebrow { color: #a14661; font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin: 0; }
.lead, .muted { color: #667085; }
.lead { font-size: 1rem; margin: 0 0 1.3rem; }
.dashboard-grid, .settings-grid { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-tile, .card, .panel { background: #fff; border: 1px solid #e7eaf0; border-radius: 1rem; box-shadow: 0 2px 8px #1722350d; }
.dashboard-tile, .card { color: inherit; display: flex; flex-direction: column; gap: .35rem; min-height: 9rem; padding: 1rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.dashboard-tile:hover, .card:hover { box-shadow: 0 8px 22px #1722351a; transform: translateY(-2px); }
.dashboard-tile > span:last-child, .card > span:last-child { color: #667085; font-size: .82rem; }
.tile-icon { align-items: center; background: #fdf0f3; border-radius: .7rem; color: #9b3856; display: flex; font-size: 1.3rem; height: 2.6rem; justify-content: center; margin-bottom: .5rem; width: 2.6rem; }
.jobs .tile-icon { background: #eef5ff; color: #3569a8; } .returns .tile-icon { background: #fcf2e7; color: #a85d20; } .billing .tile-icon { background: #edf8f0; color: #287845; }
.page-grid { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); }
.panel { padding: 1rem; }
.form-panel { position: sticky; top: 1rem; }
.form-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: .35rem; font-size: .87rem; font-weight: 650; min-width: 0; }
input, select, textarea, button { border: 1px solid #d0d5dd; border-radius: .6rem; font: inherit; max-width: 100%; min-width: 0; padding: .65rem .7rem; width: 100%; }
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #a14661; box-shadow: 0 0 0 3px #a1466122; outline: none; }
button { background: #8e3b55; color: #fff; cursor: pointer; font-weight: 700; width: auto; }
button.secondary { background: #fff; border-color: #d0d5dd; color: #344054; } button.danger { background: #b42318; } button:disabled { cursor: not-allowed; opacity: .55; }
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.actions a, .back-link { color: #8e3b55; font-weight: 700; text-decoration: none; }
.back-link { display: inline-block; margin-bottom: .8rem; }
.search { margin-bottom: .8rem; }
.list-rows { display: grid; gap: .65rem; }
.list-row { align-items: center; border: 1px solid #eaecf0; border-radius: .75rem; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto auto; padding: .75rem; }
.list-row > div { display: grid; gap: .2rem; min-width: 0; } .list-row span { color: #667085; font-size: .8rem; overflow-wrap: anywhere; }
.list-row button { padding: .45rem .65rem; }
.reorderable { cursor: grab; } .reorderable:active { cursor: grabbing; } .reorder-actions { display: flex !important; gap: .35rem; }
.tree { margin: .5rem 0 0; padding-left: 1.25rem; } .tree li { margin-bottom: .55rem; }
.money { font-variant-numeric: tabular-nums; }
.error { color: #b42318; font-weight: 650; } .success { color: #087443; font-weight: 650; }
.app-footer { background: #ffffffed; border-top: 1px solid #e7eaf0; bottom: 0; display: flex; gap: .5rem; justify-content: space-around; left: 0; padding: .7rem max(1rem, calc((100% - 760px) / 2)); position: fixed; right: 0; z-index: 10; }
.app-footer a { color: #667085; display: grid; font-size: .75rem; gap: .15rem; justify-items: center; text-decoration: none; } .app-footer a.active { color: #8e3b55; font-weight: 800; }
.page-heading { justify-content: space-between; margin-top: 0; }
.page-heading > div { min-width: 0; }
.button-link { background: #8e3b55; border-radius: .6rem; color: #fff !important; display: inline-block; font-weight: 700; padding: .65rem .7rem; text-decoration: none; }
.secondary-link { background: #fff; border: 1px solid #d0d5dd; border-radius: .6rem; color: #344054 !important; display: inline-block; font-weight: 700; padding: .65rem .7rem; text-decoration: none; }
.summary-card { display: grid; gap: .35rem; margin-bottom: 1rem; }
.job-context { display: grid; gap: .25rem; margin-bottom: 1rem; }
.job-context > span:last-child { color: #667085; font-size: .84rem; }
.section-heading { justify-content: space-between; margin-top: 0; }
.section-heading h2, .section-heading p { margin-bottom: .2rem; }
.price-input { align-items: stretch; display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr) auto; }
.icon-button { align-items: center; background: #fff; color: #344054; display: inline-flex; font-size: 1.1rem; justify-content: center; min-height: 2.65rem; padding: .35rem; width: 2.65rem; }
.selection-toggle { margin: .35rem 0 .5rem; }
.item-action-bar { border-bottom: 1px solid #eaecf0; display: flex; gap: .5rem; margin-bottom: .4rem; overflow-x: auto; padding: .25rem 0 .75rem; }
.item-action-bar > * { flex: 0 0 auto; }
.item-action-bar button, .item-action-bar a { align-items: center; display: inline-flex; white-space: nowrap; }
.button-icon { font-size: 1.05em; margin-right: .35rem; }
.selection-help { display: block; font-size: .82rem; margin-bottom: .8rem; }
.check-label { align-items: center; display: flex; font-weight: 650; gap: .45rem; }
.check-label input { height: 1.05rem; width: 1.05rem; }
.item-cards { display: grid; gap: .65rem; }
.item-card { border: 1px solid #eaecf0; border-radius: .75rem; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) minmax(10rem, .7fr); padding: .75rem; }
.item-card > a, .readonly-card { color: inherit; display: grid; gap: .25rem; text-decoration: none; }
.item-card span { color: #667085; font-size: .84rem; overflow-wrap: anywhere; }
.item-controls { align-items: end; display: grid; gap: .55rem; }
.readonly-card { grid-template-columns: 1fr; }
.danger-panel { border-color: #fecdca; }
.customer-bill { background: #fff; border: 1px solid #e7eaf0; border-radius: 1rem; box-shadow: 0 2px 8px #1722350d; display: grid; gap: 1rem; padding: 1.25rem; }
.customer-bill > p { margin: 0; }
.bill-lines { border-bottom: 1px solid #eaecf0; border-top: 1px solid #eaecf0; display: grid; gap: .55rem; padding: .75rem 0; }
.bill-lines > div { display: flex; gap: 1rem; justify-content: space-between; }
.label-preview { border: 1px solid #d0d5dd; display: block; height: auto; max-width: 100%; width: 696px; }
@media (max-width: 600px) { .content { padding: 1.2rem .85rem 2rem; } .page-grid { grid-template-columns: 1fr; } .form-panel { position: static; } .form-grid { grid-template-columns: 1fr; } .list-row { grid-template-columns: minmax(0, 1fr) auto; } .list-row .money { grid-column: 1; } .app-footer a { font-size: .63rem; } .item-card { grid-template-columns: 1fr; } }