:root {
    --cz-primary: #2f6d4f;
    --cz-primary-dark: #234f39;
    --cz-primary-light: #e6f0ea;
    --cz-accent: #e8823c;
    --cz-accent-dark: #cc6c2b;
    --cz-bg: #f7f5f0;
    --cz-surface: #ffffff;
    --cz-text: #23291f;
    --cz-text-muted: #767f6d;
    --cz-danger: #c1443c;
    --cz-danger-light: #fbeae8;
    --cz-success: #2f6d4f;
    --cz-success-light: #e6f0ea;
    --cz-border: #e4e0d6;
    --cz-radius: 14px;
    --cz-radius-sm: 10px;
    --cz-nav-height: 66px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    background: var(--cz-bg);
    color: var(--cz-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding-bottom: calc(var(--cz-nav-height) + env(safe-area-inset-bottom, 0px));
}

a { color: var(--cz-primary); }

.cz-topbar {
    background: var(--cz-surface);
    border-bottom: 1px solid var(--cz-border);
    padding: .85rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cz-topbar .cz-brand {
    font-weight: 700;
    color: var(--cz-primary-dark);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.cz-topbar .cz-page-title {
    font-weight: 600;
    color: var(--cz-text);
    margin: 0;
    font-size: 1.05rem;
}

.cz-layout {
    display: flex;
    min-height: 100%;
}

.cz-sidebar {
    width: 240px;
    background: var(--cz-surface);
    border-right: 1px solid var(--cz-border);
    padding: 1.25rem .75rem;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
}

.cz-sidebar .cz-brand {
    font-weight: 700;
    color: var(--cz-primary-dark);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem 1.25rem;
    text-decoration: none;
}

.cz-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: var(--cz-radius-sm);
    color: var(--cz-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
    margin-bottom: .15rem;
}

.cz-nav-link:hover { background: var(--cz-primary-light); color: var(--cz-primary-dark); }

.cz-nav-link.active {
    background: var(--cz-primary);
    color: #fff;
}

.cz-main {
    flex: 1;
    min-width: 0;
    padding: 1.1rem 1rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.cz-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--cz-nav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cz-surface);
    border-top: 1px solid var(--cz-border);
    display: flex;
    z-index: 1040;
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}

.cz-bottom-nav a, .cz-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: var(--cz-text-muted);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
    background: none;
    border: none;
}

.cz-bottom-nav a i, .cz-bottom-nav button i { font-size: 1.28rem; }

.cz-bottom-nav a.active, .cz-bottom-nav button.active { color: var(--cz-primary); }

.card {
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-radius);
}

.cz-cta-card {
    border: 2px dashed var(--cz-border);
    border-radius: var(--cz-radius);
    background: var(--cz-surface);
    padding: 1.75rem 1.25rem;
    text-align: center;
    display: block;
    text-decoration: none;
    color: var(--cz-text);
    transition: border-color .15s, transform .1s;
}

.cz-cta-card:hover { border-color: var(--cz-primary); transform: translateY(-2px); color: var(--cz-text); }

.cz-cta-card .cz-cta-icon {
    font-size: 2.4rem;
    color: var(--cz-primary);
    margin-bottom: .5rem;
    display: block;
}

.btn-primary {
    background: var(--cz-primary);
    border-color: var(--cz-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--cz-primary-dark);
    border-color: var(--cz-primary-dark);
}

.btn-accent {
    background: var(--cz-accent);
    border-color: var(--cz-accent);
    color: #fff;
}
.btn-accent:hover { background: var(--cz-accent-dark); border-color: var(--cz-accent-dark); color: #fff; }

.badge-pendente { background: var(--cz-danger-light); color: var(--cz-danger); font-weight: 600; }
.badge-precificado { background: var(--cz-success-light); color: var(--cz-success); font-weight: 600; }

.cz-produto-card {
    border-radius: var(--cz-radius);
    border: 1px solid var(--cz-border);
    background: var(--cz-surface);
    padding: 1rem;
    height: 100%;
}

.cz-breakdown-bar {
    display: flex;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--cz-border);
    font-size: .68rem;
    color: #fff;
    font-weight: 600;
}
.cz-breakdown-bar > div { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.cz-seg-custo { background: #8a8f7e; }
.cz-seg-impostos { background: #c1443c; }
.cz-seg-operacional { background: #e8823c; }
.cz-seg-margem { background: #2f6d4f; }

.cz-margem-ok { color: var(--cz-success); font-weight: 700; }
.cz-margem-baixa { color: var(--cz-danger); font-weight: 700; }

.cz-linha-excluida { opacity: .4; text-decoration: line-through; }
.cz-linha-excluida select, .cz-linha-excluida input:not([type="checkbox"]) { pointer-events: none; background: var(--cz-bg); }

.cz-scanner-box {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-radius: var(--cz-radius);
    overflow: hidden;
    border: 1px solid var(--cz-border);
}

.form-control, .form-select {
    border-radius: var(--cz-radius-sm);
}

.form-control-lg, .form-select-lg {
    font-size: 1.1rem;
}

.toast-container { z-index: 1080; }

@media (min-width: 768px) {
    .cz-bottom-nav { display: none; }
}

@media (max-width: 767.98px) {
    .cz-sidebar { display: none; }
    .cz-main { padding-bottom: 1rem; }
}