:root {
    --green: #164194;
    --yellow: #ffdf00;
    --yellow-dark: #e7c900;
    --dark: #252525;
    --muted: #6b6b68;
    --line: #d6d6d1;
    --bg: #ededeb;
    --red: #b42318;
    --shadow: 0 7px 22px rgba(22, 22, 20, .09);
}

body { background: linear-gradient(180deg, #e7e7e4 0, #f2f2f0 260px); }

.top {
    height: 72px;
    border-bottom: 4px solid var(--yellow);
    background: #303030;
    box-shadow: 0 4px 15px rgba(0,0,0,.16);
}

.brand { color: #fff; letter-spacing: .01em; }
.brand span, .logo {
    width: 39px;
    height: 39px;
    border: 4px solid var(--yellow);
    border-radius: 3px;
    background: #164194;
    color: var(--yellow);
    box-shadow: inset 0 0 0 2px #fff;
}

.top nav a { color: #dededb; }
.top nav a:hover { background: #444; color: #fff; }
.top nav a.active { background: var(--yellow); color: #222; font-weight: 900; }
.page-title p, .eyebrow { color: #164194; }
.page-title h1 { letter-spacing: -.025em; }

.card, .metric, .week-chart, .export-panel, .pallet-list-card, .pallet-sheet {
    border-color: #d2d2ce;
    box-shadow: var(--shadow);
}

.card, .metric, .week-chart, .export-panel { position: relative; overflow: hidden; }
.card::before, .metric::before, .export-panel::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--yellow);
    content: "";
}

.step-no { background: var(--yellow); color: #222; }
.primary, .save, .filter-submit {
    background: var(--yellow);
    color: #222;
    box-shadow: 0 5px 14px rgba(212, 183, 0, .25);
}
.primary:hover, .save:hover, .filter-submit:hover { background: #ffe72e; }
.scan-btn { background: #164194; color: #fff; }
.scan-btn:hover { background: #0e337c; }
.secondary { background: #f4f0c9; border-color: #cfb900; color: #3b3600; }
input:focus, textarea:focus { border-color: #164194; outline-color: rgba(22,65,148,.16); }

.photo { border-color: #aaa99f; background: #f7f7f4; }
.photo span { color: #164194; }
.badge { background: var(--yellow); color: #282500; }

.dashboard .metric strong { color: #164194; }
.chart-line { stroke: #164194; }
.chart-dot { stroke: #164194; }
.chart-area { fill: rgba(255,223,0,.24); }
.week-chart { border-top: 4px solid var(--yellow); }

.quick-ranges button { background: #eee9b8; color: #373100; }
.quick-ranges button:hover { background: var(--yellow); }
.export-open { background: #164194; color: #fff; }
.export-open:hover { background: #0e337c; }
.format-buttons button { border-left: 5px solid var(--yellow); background: #eeeeeb; color: #222; }
.format-buttons button:hover { background: var(--yellow); }

.records-search button { background: #303030; border-bottom: 3px solid var(--yellow); }
.records-summary strong, .tpu-label, .card-arrow { color: #164194; }
.pallet-list-card { border-left: 5px solid var(--yellow); }
.pallet-list-card:hover { border-color: var(--yellow-dark); box-shadow: 0 10px 28px rgba(22,22,20,.14); }
.pallet-thumb.placeholder { background: #303030; color: var(--yellow); }
.pallet-meta span { background: #e9e9e5; }
.product-name.missing { color: #896f00; }

.sheet-header { border-bottom: 6px solid var(--yellow); background: #303030; }
.sheet-header .eyebrow { color: var(--yellow); }
.sheet-field { border-left: 3px solid var(--yellow); background: #eeeeeb; }
.sheet-footer { background: #e8e8e4; }
.shelf-life { color: #164194; }

.login-body { background: #292929; }
.login-card { border-top: 7px solid var(--yellow); }
.login-card .eyebrow { color: #164194; }

dialog { border: 1px solid #555; border-top: 5px solid var(--yellow); }
.export-dialog { box-shadow: 0 20px 60px rgba(0,0,0,.35); }

@media (max-width: 520px) {
    .top { height: 66px; }
    .brand span { width: 34px; height: 34px; }
    .container { padding-top: 21px; }
}