:root {
    --pe-primary: #4938d7;
    --pe-primary-dark: #392db2;
    --pe-soft: #eef2ff;
    --pe-navy: #0f172a;
    --pe-muted: #64748b;
    --pe-border: #e2e8f0;
    --pe-success: #059669;
    --pe-success-bg: #ecfdf5;
    --pe-success-border: #bbf7d0;
    --pe-warning-bg: #fffbeb;
    --pe-warning-border: #fde68a;
    --pe-warning: #92400e;
    --pe-danger: #dc2626;
    --pe-radius: 18px;
    --pe-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: linear-gradient(to bottom, #f8fafc, #ffffff, #f1f5f9);
    color: var(--pe-navy);
}

.pe-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.pe-sidebar {
    background: var(--pe-soft);
    border-right: 1px solid var(--pe-border);
    padding: 20px;
}

.pe-main {
    padding: 20px;
}

.pe-main-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -20px -20px 20px;
    padding: 14px 20px;
    background: rgba(248, 250, 252, 0.94);
    border-bottom: 1px solid var(--pe-border);
    backdrop-filter: blur(14px);
}

.pe-tab-btn {
    border: 1px solid var(--pe-border);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.2s ease;
}

    .pe-tab-btn:hover,
    .pe-tab-btn.is-active {
        background: var(--pe-primary);
        border-color: var(--pe-primary);
        color: #fff;
    }

.pe-stack {
    display: grid;
    gap: 20px;
}

.pe-card {
    background: #fff;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    padding: 24px;
    box-shadow: var(--pe-shadow);
}

.pe-card-sm {
    background: #fff;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    padding: 20px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.pe-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.pe-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pe-logo {
    width: 250px;
    max-width: 100%;
    object-fit: contain;
}

.pe-title {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
}

.pe-subtitle {
    margin: 4px 0 0;
    color: var(--pe-muted);
    font-size: 14px;
}

.pe-section-title {
    margin: 0 0 10px;
    color: var(--pe-primary);
    font-size: 20px;
    font-weight: 900;
}

.pe-small-heading {
    margin: 0 0 14px;
    color: var(--pe-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 900;
}

.pe-muted {
    color: var(--pe-muted);
}

.pe-grid-2 {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
}

.pe-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pe-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pe-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pe-label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #334155;
}

.pe-input,
.pe-select {
    width: 100%;
    border: 1px solid var(--pe-border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    background: #fff;
}

    .pe-input:focus,
    .pe-select:focus {
        outline: 2px solid #c7d2fe;
        border-color: var(--pe-primary);
    }

.pe-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 12px 16px;
    border: none;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s ease;
}

.pe-btn-primary {
    background: var(--pe-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(73, 56, 215, 0.22);
}

    .pe-btn-primary:hover {
        background: var(--pe-primary-dark);
    }

.pe-btn-secondary {
    background: #fff;
    color: var(--pe-primary);
    border: 1px solid var(--pe-border);
}

    .pe-btn-secondary:hover {
        background: var(--pe-soft);
    }

.pe-btn-danger {
    background: #fff;
    color: var(--pe-danger);
    border: 1px solid #fecaca;
}

    .pe-btn-danger:hover {
        background: #fef2f2;
    }

.pe-btn-block {
    width: 100%;
}

.pe-nav-btn {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 12px 16px;
    text-align: left;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

    .pe-nav-btn:hover {
        background: var(--pe-soft);
        color: var(--pe-primary);
    }

.pe-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pe-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pe-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid var(--pe-border);
    border-radius: 14px;
}

.pe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .pe-table th {
        background: var(--pe-soft);
        color: var(--pe-primary);
        text-align: left;
        padding: 12px;
    }

    .pe-table td {
        padding: 12px;
        border-top: 1px solid var(--pe-border);
    }

.pe-summary {
    position: sticky;
    top: 24px;
}

.pe-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--pe-border);
}

    .pe-metric-row span {
        color: var(--pe-muted);
        font-size: 14px;
        font-weight: 800;
    }

    .pe-metric-row strong {
        color: var(--pe-primary);
        font-size: 24px;
        font-weight: 900;
    }

.pe-info {
    background: var(--pe-soft);
    color: var(--pe-primary);
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    padding: 14px;
    font-weight: 800;
    font-size: 14px;
}

.pe-success-card {
    background: var(--pe-success-bg);
    color: #047857;
    border: 1px solid var(--pe-success-border);
    border-radius: 14px;
    padding: 16px;
}

.pe-warning-card {
    background: var(--pe-warning-bg);
    color: var(--pe-warning);
    border: 1px solid var(--pe-warning-border);
    border-radius: var(--pe-radius);
    padding: 24px;
}

.pe-code {
    background: #020617;
    color: #e0e7ff;
    padding: 16px;
    border-radius: 14px;
    overflow-x: auto;
    font-size: 13px;
}

.pe-hidden {
    display: none !important;
}

@media (max-width: 1000px) {
    .pe-layout {
        grid-template-columns: 1fr;
    }

    .pe-sidebar {
        display: none;
    }

    .pe-grid-2,
    .pe-grid-3,
    .pe-grid-4,
    .pe-form-grid,
    .pe-button-grid {
        grid-template-columns: 1fr;
    }

    .pe-summary {
        position: static;
    }

    .pe-header-left {
        flex-direction: column;
        align-items: flex-start;
    }
}

.pe-page {
    min-height: 100vh;
    overflow: hidden;
}

.pe-container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 18px;
}

.pe-topbar {
    position: sticky;
    top: 16px;
    z-index: 50;
    padding-top: 16px;
}

.pe-nav-shell {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pe-nav {
    flex: 1;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--pe-border);
    border-radius: 18px;
    padding: 0 18px;
    box-shadow: var(--pe-shadow);
    backdrop-filter: blur(14px);
}

.pe-nav-links {
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
}

    .pe-nav-links a {
        padding: 9px 12px;
        border-radius: 999px;
        color: #334155;
        text-decoration: none;
    }

        .pe-nav-links a:hover,
        .pe-nav-links .active {
            background: var(--pe-soft);
            color: var(--pe-primary);
        }

.pe-hero {
    text-align: center;
    padding: 64px 18px 48px;
}

.pe-badge {
    display: inline-flex;
    background: var(--pe-soft);
    color: var(--pe-primary);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 900;
}

.pe-hero-title {
    max-width: 850px;
    margin: 22px auto 0;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -2px;
}

    .pe-hero-title span {
        display: block;
        color: var(--pe-primary);
    }

.pe-hero-copy {
    max-width: 680px;
    margin: 20px auto 0;
    color: var(--pe-muted);
    font-size: 18px;
    line-height: 1.6;
}

.pe-center-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.pe-preview {
    max-width: 680px;
    margin: 40px auto 0;
}

.pe-preview-total {
    margin-top: 18px;
    background: linear-gradient(135deg, var(--pe-primary-dark), var(--pe-primary));
    color: white;
    padding: 14px;
    border-radius: 12px;
    font-weight: 900;
    text-align: center;
}

.pe-pill-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.pe-pill {
    background: white;
    border: 1px solid var(--pe-border);
    color: var(--pe-primary);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}

.pe-section {
    padding: 64px 18px;
}

.pe-section-heading {
    text-align: center;
    font-size: 34px;
    font-weight: 950;
    margin: 0;
}

.pe-section-copy {
    max-width: 680px;
    margin: 12px auto 36px;
    text-align: center;
    color: var(--pe-muted);
    line-height: 1.6;
}

.pe-price {
    font-size: 38px;
    font-weight: 950;
    color: var(--pe-primary);
    margin: 16px 0;
}

.pe-featured {
    border: 2px solid var(--pe-primary);
    background: linear-gradient(to bottom, #fff, var(--pe-soft));
    transform: translateY(-10px);
}

.pe-footer {
    border-top: 1px solid var(--pe-border);
    padding: 40px 18px;
    text-align: center;
    color: var(--pe-muted);
    font-size: 14px;
}

@media(max-width: 900px) {
    .pe-nav-links {
        display: none;
    }

    .pe-nav-shell {
        flex-direction: column;
    }

    .pe-logo {
        width: 210px;
    }

    .pe-featured {
        transform: none;
    }
}

.pe-savings-highlight {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.pe-best-price-cell {
    background: #ecfdf5;
    color: #047857;
    font-weight: 900;
}

.pe-best-badge {
    display: inline-flex;
    margin-left: 8px;
    background: #059669;
    color: #ffffff;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 900;
}

.pe-small-text {
    font-size: 12px;
    color: #047857;
}

/* FULL ROW HIGHLIGHT FOR SAVINGS */
.pe-row-savings {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
}

    .pe-row-savings:hover {
        background: #d1fae5;
    }

.pe-positive {
    color: #059669;
    font-weight: 900;
}

/* subtle text */
.pe-small-text {
    font-size: 12px;
    color: #64748b;
}

.pe-saving-badge {
    background: #059669;
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: 6px;
}

.pe-savings-card {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
}

/* Simple workflow theme applied to the main app */
:root {
    --pe-primary: #176b5c;
    --pe-primary-dark: #0f4f44;
    --pe-soft: #edf3f0;
    --pe-navy: #17211f;
    --pe-muted: #66736f;
    --pe-border: #dbe5e1;
    --pe-success: #137a4b;
    --pe-success-bg: #effaf5;
    --pe-success-border: #b7ddce;
    --pe-warning-bg: #fff8e7;
    --pe-warning-border: #ead49a;
    --pe-warning: #7a5512;
    --pe-danger: #b42318;
    --pe-radius: 8px;
    --pe-shadow: 0 18px 48px rgba(23, 33, 31, 0.08);
}

body {
    background: #f6f8f5;
    color: var(--pe-navy);
    overflow-x: hidden;
}

.pe-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    max-width: 100vw;
    overflow-x: hidden;
}

.pe-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--pe-border);
    padding: 22px;
}

.pe-main {
    padding: 22px;
    min-width: 0;
    overflow-x: hidden;
}

.pe-main-tabs {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

.pe-tab-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background: #ffffff;
    color: var(--pe-muted);
    padding: 9px 10px;
    text-align: center;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pe-tab-btn:hover,
    .pe-tab-btn.is-active {
        background: #ffffff;
        border-color: rgba(23, 107, 92, 0.35);
        color: var(--pe-primary);
        box-shadow: 0 8px 22px rgba(23, 107, 92, 0.1);
    }

.pe-card,
.pe-card-sm,
.pe-warning-card,
.pe-success-card,
.pe-info,
.pe-table-wrap,
.pe-code,
.pe-input,
.pe-select,
.pe-btn,
.pe-nav-btn {
    border-radius: var(--pe-radius);
}

.pe-card {
    border-color: var(--pe-border);
    box-shadow: var(--pe-shadow);
    min-width: 0;
}

.pe-card-sm {
    border-color: var(--pe-border);
    box-shadow: none;
}

.pe-header {
    align-items: center;
    margin-bottom: 18px;
}

.pe-app-header {
    margin-bottom: 14px;
}

.pe-logo {
    width: 190px;
}

.pe-title {
    font-size: 30px;
    letter-spacing: 0;
}

.pe-subtitle {
    color: var(--pe-muted);
}

.pe-section-title {
    color: var(--pe-navy);
    font-size: 22px;
}

.pe-small-heading {
    color: var(--pe-muted);
    letter-spacing: 0.08em;
}

.pe-nav-btn {
    min-height: 44px;
    color: var(--pe-muted);
    font-weight: 800;
}

    .pe-nav-btn:hover {
        background: var(--pe-soft);
        color: var(--pe-primary);
    }

.pe-btn-primary {
    background: var(--pe-primary);
    color: #ffffff;
    box-shadow: none;
}

    .pe-btn-primary:hover {
        background: var(--pe-primary-dark);
    }

.pe-btn-secondary {
    background: #ffffff;
    color: var(--pe-primary);
    border: 1px solid var(--pe-border);
}

    .pe-btn-secondary:hover {
        background: var(--pe-soft);
    }

.pe-input,
.pe-select {
    border-color: var(--pe-border);
    font-weight: 700;
}

    .pe-input:focus,
    .pe-select:focus {
        outline: 3px solid rgba(23, 107, 92, 0.16);
        border-color: var(--pe-primary);
    }

.pe-table-wrap {
    border-color: var(--pe-border);
    max-width: 100%;
}

    .pe-table th {
        background: var(--pe-soft);
        color: var(--pe-primary);
    }

.pe-summary {
    top: 22px;
}

.pe-metric-row strong,
.pe-price {
    color: var(--pe-primary);
}

.pe-info {
    background: var(--pe-soft);
    border-color: rgba(23, 107, 92, 0.25);
    color: var(--pe-primary);
}

.pe-success-card,
.pe-savings-card,
.pe-savings-highlight,
.pe-best-price-cell,
.pe-row-savings {
    background: var(--pe-success-bg);
    color: var(--pe-success);
}

.pe-success-card,
.pe-savings-card {
    border-color: var(--pe-success-border);
}

@media (max-width: 1000px) {
    .pe-main-tabs {
        grid-template-columns: 1fr;
    }
}

.pe-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    background: currentColor;
    vertical-align: -0.16em;
    -webkit-mask: var(--pe-icon-mask) center / contain no-repeat;
    mask: var(--pe-icon-mask) center / contain no-repeat;
}

.pe-icon-user,
.pe-icon-users {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.pe-icon-user-plus {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21a6 6 0 0 0-12 0'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");
}

.pe-icon-settings {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1A2 2 0 1 1 4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1A2 2 0 1 1 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6h.1a1.7 1.7 0 0 0 1.9-.3l.1-.1A2 2 0 1 1 19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.6 1h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
}

.pe-icon-logout,
.pe-icon-arrow-left {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
}

.pe-icon-calculator {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E");
}

.pe-icon-chart,
.pe-icon-file-chart {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M8 16v-5'/%3E%3Cpath d='M12 16V8'/%3E%3Cpath d='M16 16v-3'/%3E%3C/svg%3E");
}

.pe-icon-bolt,
.pe-icon-play {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 10-13h-7l1-7Z'/%3E%3C/svg%3E");
}

.pe-icon-plug {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v4a6 6 0 0 1-12 0V8Z'/%3E%3C/svg%3E");
}

.pe-icon-file-text,
.pe-icon-receipt {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h6'/%3E%3C/svg%3E");
}

.pe-icon-plus {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.pe-icon-upload {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E");
}

.pe-icon-search {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.pe-icon-grid {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.pe-icon-tag,
.pe-icon-coins {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}

.pe-icon-route {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Cpath d='M12 19h3a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h3'/%3E%3C/svg%3E");
}

.pe-icon-check {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
}

.pe-icon-chevron {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.pe-icon-serving,
.pe-icon-bakery,
.pe-icon-calendar,
.pe-icon-store,
.pe-icon-scale,
.pe-icon-save {
    --pe-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M6 10a6 6 0 0 1 12 0'/%3E%3Cpath d='M8 14h8'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

.pe-nav-btn,
.pe-nav-links a,
.pe-pill,
.pe-card h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pe-nav-btn {
    white-space: nowrap;
    font-size: 13px;
    padding: 11px 10px;
}

.pe-sidebar .pe-btn {
    white-space: nowrap;
}

.pe-page {
    background: #f6f8f5;
}

.pe-topbar {
    top: 0;
    padding: 16px 0;
    background: rgba(246, 248, 245, 0.92);
    backdrop-filter: blur(14px);
}

.pe-nav {
    border-radius: var(--pe-radius);
}

.pe-hero {
    padding-top: 48px;
}

.pe-badge,
.pe-pill {
    align-items: center;
    border-radius: var(--pe-radius);
}

.pe-hero-title {
    color: var(--pe-navy);
    letter-spacing: 0;
}

.pe-hero-title span {
    color: var(--pe-primary);
}

.pe-preview-total {
    background: var(--pe-primary);
    border-radius: var(--pe-radius);
}

.pe-featured {
    background: #ffffff;
    border: 2px solid var(--pe-primary);
}

/* Flatten the app sidebar into a simple navigation rail */
.pe-sidebar > .pe-stack {
    gap: 24px;
}

.pe-sidebar .pe-card-sm {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.pe-sidebar .pe-card-sm + .pe-card-sm {
    padding-top: 4px;
}

.pe-sidebar .pe-card-sm .pe-stack {
    gap: 8px;
}

.pe-sidebar .pe-small-heading {
    margin: 0 0 10px;
    padding: 0 10px;
}

.pe-sidebar-heading {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background: #ffffff;
    color: var(--pe-muted);
    cursor: pointer;
    padding: 9px 10px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 900;
}

.pe-sidebar-heading:hover {
    border-color: rgba(23, 107, 92, 0.35);
    color: var(--pe-primary);
}

.pe-sidebar-heading .pe-icon {
    transition: transform 0.18s ease;
}

.pe-sidebar-heading[aria-expanded="false"] .pe-icon {
    transform: rotate(-90deg);
}

.pe-sidebar-section-items {
    display: grid;
    gap: 8px;
}

.pe-sidebar-section-items.pe-hidden {
    display: none;
}

.pe-sidebar .pe-btn,
.pe-sidebar .pe-nav-btn {
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: var(--pe-radius);
    background: transparent;
    box-shadow: none;
    color: var(--pe-muted);
    padding: 9px 10px;
    text-align: left;
}

.pe-sidebar .pe-btn-primary,
.pe-sidebar .pe-btn-secondary,
.pe-sidebar .pe-btn-danger {
    background: transparent;
    border: 0;
    color: var(--pe-muted);
}

.pe-sidebar .pe-btn:hover,
.pe-sidebar .pe-nav-btn:hover,
.pe-sidebar .pe-btn-primary:hover,
.pe-sidebar .pe-btn-secondary:hover,
.pe-sidebar .pe-btn-danger:hover {
    background: var(--pe-soft);
    color: var(--pe-primary);
}

.pe-sidebar .pe-btn-danger:hover {
    color: var(--pe-danger);
}

.pe-sidebar-search {
    width: 100%;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background: #ffffff;
    padding: 9px 10px;
    color: var(--pe-navy);
    font-size: 12px;
    font-weight: 800;
}

.pe-sidebar-note {
    margin: 0;
    color: var(--pe-muted);
    font-size: 12px;
    line-height: 1.45;
}

.pe-sidebar-list {
    display: grid;
    gap: 8px;
}

.pe-saved-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 6px;
    align-items: stretch;
}

.pe-saved-project button {
    min-width: 0;
    border: 0;
    border-radius: var(--pe-radius);
    background: transparent;
    color: var(--pe-muted);
    cursor: pointer;
    padding: 8px 10px;
    text-align: left;
}

.pe-saved-project button:hover {
    background: var(--pe-soft);
    color: var(--pe-primary);
}

.pe-saved-project strong,
.pe-saved-project span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe-saved-project strong {
    color: var(--pe-primary);
    font-size: 11px;
    font-weight: 950;
}

.pe-saved-project span {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 800;
}

.pe-saved-project .pe-saved-delete {
    display: grid;
    place-items: center;
    color: var(--pe-danger);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.pe-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(23, 33, 31, 0.42);
    padding: 20px;
}

.pe-modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 24px;
}

.pe-modal-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.pe-modal-brand {
    display: inline-flex;
}

.pe-modal-brand img {
    width: 190px;
    max-width: 100%;
    display: block;
}

.pe-modal-heading {
    margin-bottom: 18px;
}

.pe-modal-heading h2 {
    margin: 0;
    color: var(--pe-navy);
    font-size: 24px;
    font-weight: 950;
}

.pe-modal-heading p {
    margin: 5px 0 0;
    color: var(--pe-muted);
    font-size: 14px;
}

.pe-modal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background: #ffffff;
    color: var(--pe-muted);
    cursor: pointer;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.pe-modal-close:hover {
    background: var(--pe-soft);
    color: var(--pe-primary);
}

.pe-reference-pill {
    margin: 12px 0 18px;
    border: 1px solid rgba(23, 107, 92, 0.22);
    border-radius: var(--pe-radius);
    background: var(--pe-soft);
    color: var(--pe-primary);
    padding: 14px;
    text-align: center;
    font-size: 20px;
    font-weight: 950;
}

.pe-modal-grid {
    display: grid;
    gap: 12px;
}

.pe-modal-grid label {
    display: grid;
    gap: 6px;
}

.pe-modal-grid span {
    color: var(--pe-muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pe-settings-sections {
    display: grid;
    gap: 18px;
}

.pe-settings-sections section {
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    padding: 16px;
}

.pe-settings-sections h3 {
    margin: 0 0 12px;
    color: var(--pe-primary);
    font-size: 18px;
    font-weight: 950;
}

.pe-settings-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.pe-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    padding: 10px;
}

.pe-settings-row strong,
.pe-settings-row span {
    display: block;
}

.pe-settings-row span {
    margin-top: 3px;
    color: var(--pe-muted);
    font-size: 12px;
    font-weight: 800;
}

.pe-toggle-list {
    display: grid;
    gap: 8px;
}

.pe-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    padding: 10px 12px;
    color: var(--pe-navy);
    font-weight: 850;
}

.pe-main #view-calculator > .pe-grid-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.pe-main #view-calculator > .pe-grid-2 > .pe-stack,
.pe-main #view-calculator > .pe-grid-2 > aside {
    min-width: 0;
}

.pe-demo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(23, 107, 92, 0.22);
    border-radius: var(--pe-radius);
    background: #ffffff;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(23, 33, 31, 0.05);
}

.pe-demo-banner div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.pe-demo-banner strong {
    color: var(--pe-primary);
    font-size: 14px;
    font-weight: 950;
}

.pe-demo-banner span {
    color: var(--pe-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-demo-banner .pe-btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 12px;
    white-space: nowrap;
}

.pe-table-input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background: #ffffff;
    padding: 9px 10px;
    color: var(--pe-navy);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.pe-table-input:focus {
    outline: 3px solid rgba(23, 107, 92, 0.14);
    border-color: var(--pe-primary);
}

.pe-item-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.pe-item-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) repeat(5, minmax(72px, 0.7fr));
    gap: 10px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background: #ffffff;
    padding: 12px;
}

.pe-item-row label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.pe-item-row span {
    color: var(--pe-muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pe-summary .pe-btn-block {
    min-height: 44px;
}

.pe-conversion-card {
    margin-top: 18px;
    border: 1px solid rgba(23, 107, 92, 0.22);
    border-radius: var(--pe-radius);
    background: var(--pe-soft);
    padding: 16px;
}

.pe-conversion-card h3 {
    margin: 0;
    color: var(--pe-primary);
    font-size: 18px;
    font-weight: 950;
}

.pe-conversion-card p {
    margin: 8px 0 14px;
    color: var(--pe-muted);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

@media (max-width: 700px) {
    .pe-demo-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 1200px) {
    .pe-main #view-calculator > .pe-grid-2 {
        grid-template-columns: 1fr;
    }

    .pe-item-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pe-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .pe-main-tabs {
        flex-wrap: wrap;
    }

    .pe-tab-btn {
        flex: 1 1 calc(50% - 8px);
    }

    .pe-form-grid,
    .pe-grid-2,
    .pe-grid-3,
    .pe-grid-4,
    .pe-button-grid,
    .pe-item-row {
        grid-template-columns: 1fr;
    }

    .pe-modal-heading {
        flex-direction: column;
    }
}

.pe-auth-page {
    min-height: 100vh;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 28px 18px;
    background:
        linear-gradient(135deg, rgba(23, 107, 92, 0.08), transparent 42%),
        #f6f8f5;
}

.pe-auth-shell {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) 420px;
    gap: 28px;
    align-items: start;
}

.pe-auth-copy {
    padding: 10px 0;
}

.pe-auth-copy .pe-logo {
    width: 190px;
}

.pe-auth-title {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
}

.pe-auth-intro {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 540px;
    font-size: 16px;
}

.pe-auth-checklist {
    display: grid;
    gap: 12px;
    margin-top: 26px;
    color: var(--pe-primary);
    font-weight: 900;
}

.pe-auth-checklist div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pe-auth-card {
    padding: 24px;
}

.pe-auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 22px;
    padding: 4px;
    background: var(--pe-soft);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
}

.pe-auth-tab {
    min-height: 42px;
    border: 0;
    border-radius: calc(var(--pe-radius) - 2px);
    background: transparent;
    color: var(--pe-muted);
    cursor: pointer;
    font-weight: 900;
}

.pe-auth-tab.is-active {
    background: #ffffff;
    color: var(--pe-primary);
    box-shadow: 0 8px 18px rgba(23, 33, 31, 0.08);
}

.pe-auth-message {
    margin: 18px 0 4px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    padding: 12px;
    font-weight: 800;
    font-size: 13px;
}

.pe-auth-message-info {
    background: var(--pe-soft);
    color: var(--pe-primary);
}

.pe-auth-message-success {
    background: var(--pe-success-bg);
    border-color: var(--pe-success-border);
    color: var(--pe-success);
}

.pe-auth-message-error {
    background: #fff5f5;
    border-color: #f5c2c0;
    color: var(--pe-danger);
}

.pe-auth-workspace {
    transition: opacity 0.2s ease;
}

.pe-auth-workspace-muted {
    opacity: 0.78;
}

.pe-auth-card .pe-btn-block {
    margin-top: 18px;
}

.pe-auth-links {
    margin-top: 14px;
}

.pe-auth-links .pe-btn {
    flex: 1;
}

@media (max-width: 900px) {
    .pe-auth-page {
        display: block;
        padding: 18px 14px 28px;
    }

    .pe-auth-shell {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pe-auth-card {
        order: 1;
    }

    .pe-auth-copy {
        order: 2;
        display: grid;
        gap: 12px;
    }

    .pe-auth-copy .pe-logo {
        width: 170px;
    }

    .pe-auth-copy .pe-badge {
        margin-top: 8px !important;
    }

    .pe-auth-title,
    .pe-auth-intro {
        text-align: left;
    }

    .pe-auth-title {
        margin-top: 0;
        font-size: 30px;
    }

    .pe-auth-checklist {
        margin-top: 6px;
    }
}

@media (max-width: 640px) {
    .pe-auth-copy {
        display: none;
    }

    .pe-auth-card {
        padding: 20px;
    }

    .pe-auth-links {
        display: grid;
    }
}