:root {
    color-scheme: dark;
    --bg: #494A4A;
    --bg-2: #3F4040;
    --panel: #494A4A;
    --panel-2: #545555;
    --line: rgba(255, 255, 255, .18);
    --border: var(--line);
    --text: #FFFFFF;
    --muted: rgba(255, 255, 255, .72);
    --brand: #A1C116;
    --brand-2: #166F9A;
    --brand-3: #A1C116;
    --warn: #F59D16;
    --danger: #B51B1B;
    --surface-gradient: #494A4A;
    --radius: 0px;
}

.structure-wizard {
    margin: .45rem .55rem .75rem;
}

.compact-header {
    padding-block: .4rem;
    margin-bottom: .35rem;
}

.compact-header h1 {
    font-size: 1.35rem;
}

.entry-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .48);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.entry-dialog {
    width: min(880px, 100%);
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
    padding: 1rem;
}

.entry-dialog h2 {
    margin: 0 0 .85rem;
}

.entry-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: .75rem;
}

.entry-action {
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    min-height: 92px;
    padding: .8rem;
    text-align: left;
}

.entry-action:hover {
    border-color: var(--brand);
}

.entry-action strong,
.entry-action span {
    display: block;
}

.entry-action span {
    color: var(--muted);
    margin-top: .25rem;
}

.entry-action.disabled {
    cursor: not-allowed;
    opacity: .55;
}

.toolbar-actions,
.ai-structure-prompt,
.preview-tabs,
.structure-node-main,
.structure-placeholder,
.node-selection {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ai-structure-prompt {
    align-items: stretch;
    margin-top: .45rem;
}

.ai-structure-prompt textarea {
    flex: 1;
    min-height: 46px;
}

.article-import-panel {
    margin-top: .45rem;
}

.menu-card-import-box {
    border: 1px solid rgba(161, 193, 22, .45);
    background: rgba(0, 0, 0, .08);
    padding: .5rem;
    margin-bottom: .5rem;
}

.wizard-busy-notice {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--brand);
    background: rgba(161, 193, 22, .16);
    color: var(--text);
    margin-top: .5rem;
    padding: .75rem .9rem;
}

.wizard-busy-notice strong,
.wizard-busy-notice span {
    display: block;
}

.wizard-busy-notice span {
    color: var(--muted);
    margin-top: .15rem;
}

.busy-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: tiinsight-spin .85s linear infinite;
    flex: 0 0 auto;
}

@keyframes tiinsight-spin {
    to {
        transform: rotate(360deg);
    }
}

.menu-card-source {
    grid-template-columns: 118px minmax(260px, 1fr) auto;
}

.source-label {
    display: inline-flex;
    align-items: center;
    color: var(--text);
    font-weight: 900;
}

.import-source {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    gap: .5rem;
    align-items: stretch;
}

.article-ai-start {
    margin: .45rem .55rem .75rem;
}

.article-ai-start-header {
    margin: .45rem .55rem .55rem;
}

.article-ai-start-header h1 {
    margin: .1rem 0 .25rem;
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
}

.article-ai-start-header p {
    color: var(--muted);
    margin: 0;
}

.page-kicker {
    color: var(--brand);
    display: block;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.article-dashboard-band {
    border-block: 1px solid var(--border);
    padding: .75rem 0 .8rem;
}

.article-dashboard-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.article-dashboard-heading h2,
.article-dashboard-heading span {
    margin: 0;
}

.article-dashboard-heading > div > span,
.dashboard-period {
    color: var(--muted);
    font-size: .78rem;
}

.article-dashboard-metrics {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.article-dashboard-metric {
    background: #343635;
    border: 1px solid #727674;
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 154px;
    padding: .85rem .9rem 0;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.article-dashboard-metric:hover,
.article-dashboard-metric:focus-visible {
    background: #3b4037;
    border-color: var(--brand);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
    color: var(--text);
    outline: none;
    transform: translateY(-2px);
}

.article-dashboard-metric > span,
.article-dashboard-metric > small {
    color: var(--muted);
    display: block;
}

.article-dashboard-metric > span {
    font-size: .78rem;
    font-weight: 800;
}

.article-dashboard-metric > strong {
    color: var(--text);
    display: block;
    font-size: 2.1rem;
    line-height: 1.2;
    margin: .2rem 0;
}

.article-dashboard-metric > small {
    flex: 1;
}

.article-dashboard-metric > b {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: var(--brand);
    display: flex;
    font-size: .78rem;
    font-weight: 900;
    justify-content: space-between;
    margin: .65rem -.9rem 0;
    min-height: 38px;
    padding: 0 .9rem;
}

.article-dashboard-metric > b::after {
    content: "›";
    font-size: 1.25rem;
    line-height: 1;
}

.article-dashboard-metric.attention {
    border-color: rgba(245, 157, 22, .6);
}

.article-dashboard-metric.attention > strong {
    color: #ffd17c;
}

.article-list-scope small {
    color: var(--muted);
    display: block;
    line-height: 1.35;
    margin-top: .35rem;
}

.article-editor-actions {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.warehouse-generation-panel {
    margin-bottom: .75rem;
}

.warehouse-generation-toolbar {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(240px, 1fr) auto auto auto;
}

.warehouse-generation-toolbar > label:first-child {
    display: grid;
    gap: .3rem;
}

.warehouse-generation-toolbar .check-field {
    align-items: center;
    display: flex;
    gap: .4rem;
    min-height: 42px;
}

.warehouse-summary {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin-bottom: .75rem;
}

.warehouse-summary > div {
    background: var(--panel-2);
    border: 1px solid var(--border);
    display: grid;
    gap: .2rem;
    padding: .75rem;
}

.warehouse-summary span {
    color: var(--muted);
    font-size: .8rem;
}

.warehouse-summary strong {
    color: var(--brand);
    font-size: 1.55rem;
}

@media (max-width: 1100px) {
    .warehouse-generation-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .warehouse-summary {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 650px) {
    .warehouse-generation-toolbar,
    .warehouse-summary {
        grid-template-columns: 1fr;
    }
}

.article-editor-action {
    align-items: center;
    background: #343635;
    border: 1px solid #727674;
    color: var(--text);
    display: grid;
    gap: .7rem;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    min-height: 76px;
    padding: .7rem .85rem;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.article-editor-action:hover,
.article-editor-action:focus-visible {
    background: #3b4037;
    border-color: var(--brand);
    color: var(--text);
    outline: none;
    transform: translateY(-1px);
}

.article-editor-action-code {
    align-items: center;
    background: var(--brand);
    color: #151713;
    display: flex;
    font-size: .78rem;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.article-editor-action-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.article-editor-action-copy strong {
    font-weight: 900;
}

.article-editor-action-copy small {
    color: var(--muted);
    font-size: .78rem;
}

.article-editor-action > b {
    color: var(--brand);
    font-size: 1.45rem;
}

.article-ai-command-panel,
.article-import-wizard-panel {
    margin-top: .7rem;
}

.ai-command-row,
.article-ai-import-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: .5rem;
    align-items: stretch;
}

.article-ai-import-row.compact {
    grid-template-columns: auto auto;
    justify-content: start;
}

.menu-import-start-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.45fr) minmax(280px, .8fr);
    gap: .65rem;
    align-items: stretch;
}

.menu-import-card {
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .08);
    padding: .65rem;
    display: grid;
    gap: .55rem;
    align-content: start;
}

.wizard-import-card {
    border-color: rgba(161, 193, 22, .75);
}

.menu-import-copy {
    display: grid;
    gap: .15rem;
}

.menu-import-copy strong {
    color: var(--text);
    font-weight: 900;
}

.menu-import-copy span {
    color: var(--muted);
    line-height: 1.35;
}

.menu-import-url-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    gap: .5rem;
    align-items: stretch;
}

.menu-import-instruction {
    display: grid;
    gap: .3rem;
}

.import-picture-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 34px;
    color: var(--text);
    font-weight: 800;
}

.import-picture-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.import-picture-option small {
    color: var(--muted);
    font-weight: 500;
}

.menu-import-instruction span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.menu-import-instruction textarea {
    width: 100%;
    min-height: 58px;
    resize: vertical;
}

.menu-card-source {
    grid-template-columns: auto minmax(170px, 220px) minmax(320px, 1fr) auto auto;
}

.import-profile-select {
    min-width: 190px;
}

.ai-command-row textarea {
    min-height: 64px;
}

@media (max-width: 900px) {
    .article-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .article-editor-actions,
    .menu-import-start-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .article-dashboard-heading {
        align-items: start;
        flex-direction: column;
        gap: .25rem;
    }

    .article-dashboard-metrics {
        grid-template-columns: 1fr;
    }
}

.menu-ai-panel {
    margin: .45rem .55rem .75rem;
}

.compact-ai-action-list {
    margin-top: .55rem;
}

.article-import-table-wrap {
    margin-top: .65rem;
    overflow: auto;
    border: 1px solid var(--border);
}

.article-import-start-table {
    min-width: 1180px;
}

.wizard-article-review-table {
    min-width: 1900px;
}

.wizard-article-review-table .import-article-column {
    min-width: 260px;
}

.wizard-article-review-table .import-price-column {
    width: 220px;
    min-width: 220px;
}

.wizard-article-review-table .import-category-column {
    min-width: 285px;
}

.wizard-article-review-table .import-type-column {
    min-width: 180px;
}

.import-price-editor {
    display: grid;
    grid-template-columns: 170px 24px;
    align-items: center;
    gap: 7px;
    width: 205px;
    min-width: 205px;
}

.import-price-editor span {
    font-weight: 700;
    color: var(--text);
}

.import-category-column small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.25;
}

.import-category-select,
.import-type-select {
    min-height: 40px;
}

.retail-image-cell {
    width: 132px;
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
}

.retail-image-cell img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
}

.retail-image-cell label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.retail-image-cell input[type="checkbox"] {
    width: auto;
}

.import-help-text {
    color: #cfcfcf;
    font-size: 12px;
    padding: 4px 10px 8px 10px;
}

.article-import-start-table input,
.article-import-start-table select,
.article-import-start-table textarea {
    width: 100%;
}

.article-import-start-table textarea {
    min-width: 14rem;
    min-height: 3.4rem;
    resize: vertical;
}

.article-import-start-table .import-price-editor input[type="number"] {
    box-sizing: border-box;
    width: 170px;
    min-width: 170px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.article-import-start-table .import-price-editor input[type="number"]::-webkit-inner-spin-button,
.article-import-start-table .import-price-editor input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.article-import-start-table .existing-row {
    background: rgba(161, 193, 22, .08);
}

.article-import-start-table .validation-error-row {
    background: rgba(180, 36, 36, .22);
    outline: 1px solid rgba(255, 89, 89, .75);
}

.article-import-start-table .validation-warning-row {
    background: rgba(221, 166, 38, .14);
    outline: 1px solid rgba(255, 203, 89, .55);
}

.menu-import-validation {
    display: grid;
    gap: 6px;
}

.menu-followup-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.file-button {
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 .85rem;
    font-weight: 700;
}

.file-button input {
    display: none;
}

.file-button.disabled {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
}

.article-import-preview {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .035);
    margin-top: .55rem;
    padding: .65rem;
}

.menu-card-import-preview {
    border: 1px solid rgba(161, 193, 22, .65);
    background: rgba(255, 255, 255, .035);
    margin-top: .55rem;
    padding: .65rem;
}

.menu-card-import-preview .section-title span {
    color: var(--muted);
    font-size: .78rem;
}

.wizard-step {
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--muted);
    padding: .45rem .65rem;
    font-weight: 900;
}

.wizard-step.active {
    border-color: var(--brand);
    color: #0b1300;
    background: var(--brand);
}

.wizard-stage {
    margin-top: .55rem;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .08);
    padding: .65rem;
}

.department-import-table-wrap {
	overflow-x: auto;
}

.department-import-table {
	min-width: 1050px;
}

.department-import-table td {
	vertical-align: top;
}

.department-import-table td:nth-child(2),
.department-import-table td:nth-child(6) {
	min-width: 210px;
}

.department-import-table td:nth-child(4) {
	min-width: 220px;
}

.department-import-table input,
.department-import-table select {
	width: 100%;
	min-height: 38px;
}

.department-import-table small {
	display: block;
	margin-top: 5px;
	color: var(--muted);
}

.department-menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.department-menu-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 92px;
	padding: 14px;
	border: 1px solid var(--line-color, #6f7a63);
	background: #3f423f;
}

.department-menu-card h3,
.department-menu-card p {
	margin: 3px 0;
}

.department-menu-card p {
	color: #d2d7cf;
	font-size: 12px;
}

.department-menu-number {
	color: #a8d20b;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.department-proposal-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--line-color, #6f7a63);
	background: #343834;
}

.department-proposal-navigation > div {
	display: flex;
	align-items: center;
	gap: 12px;
}

.department-proposal-navigation strong {
	color: #a8d20b;
}

.proposal-saved-state {
	padding: 4px 8px;
	border: 1px solid #a8d20b;
	color: #c8f04b;
	font-size: 12px;
	font-weight: 700;
}

@media (max-width: 800px) {
	.department-proposal-navigation,
	.department-proposal-navigation > div {
		align-items: stretch;
		flex-direction: column;
	}
}

.compact-title {
    margin-bottom: .4rem;
}

.warehouse-import-choice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .5rem;
}

.warehouse-import-label {
    color: var(--text) !important;
    font-size: .82rem !important;
    font-weight: 900;
    margin-right: .15rem;
}

.warehouse-import-hint {
    flex: 1 1 360px;
    color: var(--muted);
    font-size: .76rem;
}

.wizard-category-tree {
    max-height: 520px;
    overflow: auto;
    padding-right: .35rem;
}

.menu-card-article-table {
    min-width: 1320px;
}

.menu-card-groups {
    display: grid;
    gap: .6rem;
    max-height: 560px;
    overflow: auto;
    padding-right: .35rem;
}

.menu-card-group {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    padding: .55rem;
}

.menu-card-group-head {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto;
    gap: .5rem;
    align-items: center;
}

.menu-card-group-head label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: var(--text);
}

.menu-card-group-head input[type="checkbox"],
.menu-card-button-row input[type="checkbox"] {
    width: auto;
}

.menu-card-buttons {
    display: grid;
    gap: .35rem;
    margin-top: .45rem;
}

.menu-card-button-row {
    display: grid;
    grid-template-columns: auto 70px minmax(220px, 1fr) 100px minmax(180px, .7fr);
    gap: .45rem;
    align-items: center;
}

.menu-card-button-row .sort,
.menu-card-button-row .article-id,
.menu-no-field input {
    text-align: center;
}

.menu-no-field {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.menu-no-field input {
    width: 76px;
}

.import-table-wrap {
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--border);
}

.import-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
}

.import-table th,
.import-table td {
    border-bottom: 1px solid var(--border);
    padding: .35rem;
    text-align: left;
    vertical-align: top;
}

.import-table th {
    background: rgba(22, 111, 154, .18);
    color: var(--text);
    font-size: .72rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.import-table input,
.import-table select {
    width: 100%;
}

.import-table input[type="checkbox"] {
    width: auto;
}

.import-table td:nth-child(5),
.import-table td:nth-child(6),
.import-table td:nth-child(7),
.import-table td:nth-child(8),
.import-table td:nth-child(9) {
    width: 92px;
}

.import-table small {
    color: var(--muted);
    display: block;
    margin-top: .15rem;
}

.category-editor-layout {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: .75rem;
    margin: .45rem .55rem .75rem;
}

.category-overview {
    max-height: calc(100vh - 120px);
}

.category-overview-node {
    border: 1px solid var(--border);
    background: var(--panel);
    margin-bottom: .35rem;
    padding: .45rem;
}

.category-overview-node strong,
.category-overview-node span,
.category-overview-node small {
    display: block;
}

.category-overview-node span {
    color: var(--text);
    margin-top: .3rem;
}

.category-overview-node small {
    color: var(--muted);
    padding-left: .55rem;
}

.category-workspace {
    min-height: 640px;
}

.category-tree-editor {
    margin-top: .75rem;
}

.category-node {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .035);
    margin: .45rem 0 .45rem 0;
    padding: .5rem;
}

.category-node.node-subgroup {
    border-color: rgba(161, 193, 22, .7);
}

.category-node.node-category {
    border-color: rgba(22, 111, 154, .85);
}

.category-node-row {
    display: grid;
    grid-template-columns: 135px minmax(220px, 1fr) repeat(3, auto) auto auto auto;
    gap: .45rem;
    align-items: center;
}

.category-node-row label {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    white-space: nowrap;
}

.category-node-row input,
.category-node-row select {
    min-height: 38px;
}

.category-node-row label input {
    width: 76px;
}

.category-name {
    font-weight: 700;
}

.category-status {
    color: var(--muted);
    min-width: 46px;
}

.category-children {
    border-left: 2px solid var(--brand);
    margin-left: 1.1rem;
    padding-left: .75rem;
}

.button.compact {
    min-height: 30px;
    padding: .25rem .45rem;
}

.button.icon {
    min-width: 34px;
    padding-inline: .45rem;
}

.button.danger {
    border-color: rgba(181, 27, 27, .8);
    color: #fff;
}

.preview-tabs {
    margin-top: .75rem;
    overflow-x: auto;
}

.preview-tab {
    min-width: 230px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    padding: .55rem .7rem;
    text-align: left;
    cursor: pointer;
}

.preview-tab.active {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.preview-tab strong,
.preview-tab span {
    display: block;
}

.preview-tab span {
    color: var(--muted);
    font-size: .78rem;
    margin-top: .2rem;
}

.structure-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: .75rem;
    margin-top: .45rem;
}

.structure-body.without-palette {
    grid-template-columns: 1fr;
}

.structure-palette {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .04);
    padding: .6rem;
    min-height: 360px;
    max-height: 680px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: .5rem;
}

.palette-header {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: baseline;
}

.palette-header span {
    color: var(--muted);
    font-size: .72rem;
    text-align: right;
}

.palette-list {
    overflow-y: auto;
    min-height: 0;
    padding-right: .25rem;
}

.palette-item {
    border: 1px solid var(--border);
    background: var(--panel);
    padding: .45rem .55rem;
    margin-bottom: .35rem;
    cursor: grab;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: .35rem;
    align-items: center;
}

.palette-item:active,
.palette-item.dragging {
    cursor: grabbing;
    opacity: .72;
}

.palette-item strong,
.palette-item span {
    display: block;
}

.palette-item span {
    color: var(--muted);
    font-size: .75rem;
    margin-top: .15rem;
}

.palette-item-main {
    min-width: 0;
}

.palette-item-main b {
    display: block;
    color: var(--accent);
    font-size: .78rem;
    margin-top: .18rem;
}

.palette-edit-button {
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.palette-edit-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.structure-tree {
    min-width: 0;
    padding-left: .35rem;
    --branch-line: rgba(161, 193, 22, .9);
}

.structure-node {
    --tree-line: rgba(161, 193, 22, .65);
    --node-border: rgba(214, 231, 232, .42);
    --node-bg: rgba(255, 255, 255, .035);
    --connector-y: 1.35rem;
    position: relative;
    border: 2px solid var(--node-border);
    background: var(--node-bg);
    padding: .42rem .5rem .5rem .6rem;
    margin: .42rem 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.structure-node.root-node {
    --tree-line: var(--brand);
    --node-border: rgba(214, 231, 232, .42);
    --node-bg: rgba(255, 255, 255, .045);
    padding-top: .55rem;
}

.structure-node.group-node {
    --node-border: rgba(161, 193, 22, .78);
}

.structure-node.leaf-node {
    --tree-line: rgba(214, 231, 232, .32);
    --node-border: rgba(161, 193, 22, .7);
    --node-bg: rgba(255, 255, 255, .025);
    --connector-y: 1.05rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.structure-node.node-type-context,
.structure-node.node-type-choice {
    --node-border: rgba(161, 193, 22, .78);
}

.structure-node.root-node.group-node {
    --node-border: rgba(214, 231, 232, .42);
}

.structure-node.frame-color-1 {
    --node-border: rgba(97, 182, 194, .86);
}

.structure-node.frame-color-2 {
    --node-border: rgba(232, 184, 70, .86);
}

.structure-node.frame-color-3 {
    --node-border: rgba(177, 145, 224, .86);
}

.structure-node.frame-color-4 {
    --node-border: rgba(224, 126, 74, .86);
}

.structure-node.frame-color-5 {
    --node-border: rgba(102, 196, 135, .86);
}

.structure-node.frame-color-6 {
    --node-border: rgba(232, 113, 151, .86);
}

.structure-node.outgoing-color-1 > .structure-children {
    --branch-line: rgba(97, 182, 194, .98);
}

.structure-node.outgoing-color-2 > .structure-children {
    --branch-line: rgba(232, 184, 70, .98);
}

.structure-node.outgoing-color-3 > .structure-children {
    --branch-line: rgba(177, 145, 224, .98);
}

.structure-node.outgoing-color-4 > .structure-children {
    --branch-line: rgba(224, 126, 74, .98);
}

.structure-node.outgoing-color-5 > .structure-children {
    --branch-line: rgba(102, 196, 135, .98);
}

.structure-node.outgoing-color-6 > .structure-children {
    --branch-line: rgba(232, 113, 151, .98);
}

.structure-node.child-node::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: var(--connector-y);
    width: 1.35rem;
    border-top: 4px solid var(--branch-line);
}

.structure-node.child-node::after {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: -.85rem;
    bottom: -.85rem;
    border-left: 4px solid var(--branch-line);
}

.structure-node.child-node.last-sibling::after {
    bottom: calc(100% - var(--connector-y));
}

.structure-node.collapsed {
    margin-bottom: .25rem;
}

.structure-node.selected {
    outline: 1px solid var(--brand);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .22),
        0 0 0 2px rgba(161, 193, 22, .24);
}

.structure-node-main {
    flex-wrap: wrap;
    align-items: center;
    padding: .18rem .2rem;
}

.group-node > .structure-node-main {
    background: rgba(0, 0, 0, .11);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    margin: -.15rem -.2rem .35rem -.2rem;
    padding: .38rem .35rem;
}

.leaf-node > .structure-node-main {
    background: rgba(0, 0, 0, .08);
}

.structure-node-main .node-name {
    min-width: 260px;
    flex: 1 1 320px;
    font-weight: 600;
}

.node-article-number {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.node-article-number .article-number-input {
    width: 94px;
    min-height: 32px;
    padding: .25rem .4rem;
}

.node-article-number .article-number-input.invalid {
    border-color: #d9534f;
    box-shadow: 0 0 0 1px rgba(217, 83, 79, .4);
}

.node-number-message {
    margin: .2rem .35rem .35rem;
    color: var(--muted);
    font-size: .78rem;
}

.node-number-message.error {
    color: #ffb6b3;
}

.structure-node-main select {
    min-width: 135px;
}

.node-toggle,
.node-toggle-spacer {
    width: 30px;
    min-width: 30px;
    text-align: center;
}

.node-toggle {
    font-weight: 800;
    color: var(--brand);
}

.node-kind-icon {
    width: 24px;
    min-width: 24px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

.drop-marker {
    color: var(--brand);
    font-weight: 700;
    width: 18px;
    text-align: center;
}

.node-drag-handle {
    color: var(--muted);
    cursor: grab;
    user-select: none;
    font-weight: 700;
    letter-spacing: 1px;
    min-width: 28px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .15rem;
}

.node-drag-handle:active,
.node-drag-handle.dragging {
    cursor: grabbing;
    opacity: .72;
}

.node-selection {
    gap: .25rem;
}

.node-selection label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--muted);
    font-size: .72rem;
}

.node-selection input {
    width: 46px;
    min-height: 30px;
    padding: .2rem .3rem;
}

.node-state {
    color: var(--muted);
    font-size: .75rem;
    min-width: 110px;
}

.node-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.node-action-button {
    min-width: 42px;
    min-height: 38px;
    padding: .35rem .7rem;
    font-size: 1.12rem;
    line-height: 1;
}

.structure-node-main label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .75rem;
}

.structure-node input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.structure-node input[type="number"]::-webkit-outer-spin-button,
.structure-node input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.small-money,
.small-price {
    width: 76px;
}

.printer-combobox {
    width: 100%;
    min-width: 150px;
}

.printer-combobox.compact {
    width: 145px;
    min-width: 145px;
    min-height: 30px;
    padding: .3rem .45rem;
    font-size: .75rem;
}

.node-prices {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.node-prices label {
    display: flex;
    align-items: center;
    gap: .2rem;
    margin-bottom: 0;
}

.node-confidence {
    color: var(--muted);
    font-size: .75rem;
    white-space: nowrap;
}

.node-mark {
    min-height: 30px;
    border: 1px solid rgba(161, 193, 22, .45);
    background: rgba(161, 193, 22, .12);
    padding: .25rem .5rem;
    color: var(--text) !important;
}

.node-mark input {
    width: auto;
    min-height: 0;
}

.node-printers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.node-printers label {
    gap: .2rem;
    margin-bottom: 0;
}

.node-category,
.node-print {
    width: 155px;
    min-height: 30px;
}

.node-structure-template select {
    width: 230px;
    max-width: 32vw;
    min-height: 30px;
}

.node-print {
    width: 118px;
}

.node-notes {
    color: var(--muted);
    font-size: .75rem;
    margin-top: .35rem;
    padding-left: .2rem;
}

.article-only-layout {
    display: none;
}

.structure-placeholder {
    position: relative;
    margin-top: .35rem;
    opacity: .86;
}

.structure-children {
    position: relative;
    margin-left: 1.55rem;
    padding-left: 1rem;
    padding-top: .15rem;
    --branch-line: rgba(161, 193, 22, .72);
}

.node-type-context > .structure-children,
.node-type-choice > .structure-children {
    --branch-line: rgba(97, 182, 194, .78);
}

.structure-children > .structure-node:first-child {
    margin-top: .2rem;
}

.structure-children > .structure-node:last-child {
    margin-bottom: .2rem;
}

.structure-placeholder {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px dashed rgba(214, 231, 232, .18);
    background: rgba(0, 0, 0, .08);
    padding: .35rem .45rem;
}

.structure-placeholder-entry {
    flex: 1 1 260px;
    min-width: 0;
}

.structure-placeholder-entry input {
    width: 100%;
}

.article-suggestion-list {
    margin-top: .25rem;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--brand);
    background: rgba(0, 0, 0, .16);
    color: var(--text);
}

.article-suggestion-item {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    background: transparent;
    color: inherit;
    text-align: left;
    padding: .5rem .65rem;
    cursor: pointer;
}

.article-suggestion-item:hover,
.article-suggestion-item:focus {
    background: rgba(161, 193, 22, .25);
}

.article-suggestion-item strong,
.article-suggestion-item span {
    display: block;
}

.article-suggestion-item span {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .75rem;
}

.structure-placeholder input {
    flex: 1 1 260px;
    min-height: 32px;
    border-style: dashed;
}

.button.mini {
    min-height: 30px;
    padding: .25rem .5rem;
}

.node-edit-button {
    color: var(--brand);
    font-weight: 900;
}

.node-delete-button {
    font-weight: 900;
}

.button.danger {
    border-color: #8f4a4a;
    color: #f1c1c1;
}

.validation-list {
    margin-top: .75rem;
}

.notice.error {
    border-color: #8f4a4a;
    background: #4d3030;
    color: #ffdede;
}

.ti-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .52);
    padding: 1rem;
}

.ti-modal {
    width: min(1180px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
}

.ti-modal-header,
.ti-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--brand-2);
    color: var(--text);
    padding: .75rem .9rem;
}

.ti-modal-header span {
    display: block;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
}

.ti-modal-actions {
    justify-content: flex-end;
}

.article-settings-dialog {
    min-height: 520px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: .75rem;
    padding: .85rem;
}

.settings-grid section {
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .08);
    padding: .75rem;
}

.settings-grid h3 {
    margin: 0 0 .65rem;
    font-size: .95rem;
}

.settings-grid label {
    margin-bottom: .5rem;
}

.settings-grid input,
.settings-grid select,
.settings-grid textarea {
    min-height: 34px;
    padding: .45rem .55rem;
}

.settings-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.settings-inline label {
    flex: 1 1 80px;
}

.settings-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 34px;
}

.settings-check input {
    width: auto;
    min-height: 0;
}

@media (max-width: 1100px) {
    .structure-body {
        grid-template-columns: 1fr;
    }

    .structure-palette {
        max-height: 320px;
    }

    .structure-node-main .node-name {
        min-width: 180px;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #3F4040;
    color: var(--text);
    padding: .72rem .8rem;
}

textarea {
    resize: vertical;
}

label {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

h1, h2, p {
    margin-top: 0;
}

h1 {
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: .6rem;
}

h2 {
    font-size: 1rem;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--line);
    background: var(--bg);
    padding: 1rem;
}

.main {
    min-width: 0;
}

.top-row {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    backdrop-filter: blur(12px);
    padding: 0 1.5rem;
}

.top-row span {
    display: block;
    color: var(--muted);
    font-size: .85rem;
}

.content {
    padding: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.5rem;
}

.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand);
    color: #1F1F1F;
    font-weight: 900;
}

.brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
    padding: .2rem;
}

.brand-title {
    font-weight: 900;
}

.brand-subtitle {
    color: var(--muted);
    font-size: .82rem;
}

.navbar-toggler {
    display: none;
}

.nav-scrollable nav {
    display: grid;
    gap: .4rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem .9rem;
    border-radius: var(--radius);
    color: var(--muted);
}

.nav-link.active,
.nav-link:hover {
    background: rgba(161, 193, 22, .18);
    color: var(--text);
}

.hero, .card, .builder-panel, .result-panel, .chart-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: none;
}

.hero {
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 1rem;
    background: var(--surface-gradient);
}

.hero-logo {
    width: min(320px, 80vw);
    max-height: 90px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    padding: .5rem;
}

.hero p {
    max-width: 760px;
    color: var(--muted);
}

.eyebrow {
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 900;
}

.grid {
    display: grid;
    gap: 1rem;
}

.cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
    padding: 1.2rem;
}

.card p {
    color: var(--muted);
    margin-bottom: 0;
}

.button {
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: .8rem 1rem;
    font-weight: 800;
    color: var(--text);
    cursor: pointer;
}

.button:disabled {
    cursor: wait;
    opacity: .65;
}

.button.primary {
    background: var(--brand);
    color: #1F1F1F;
    box-shadow: none;
}

.button.secondary {
    background: var(--panel-2);
    border-color: var(--line);
}

.button.full {
    width: 100%;
}

.button.openai-button {
    border-color: rgba(161, 193, 22, .55);
    background: #545555;
}

.button.profile-delete {
    min-width: 86px;
    border-color: rgba(255, 110, 110, .35);
    color: #ffc1c1;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-inline: 1.15rem;
}

.page-header p {
    color: var(--muted);
}

.journal-dashboard {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding: 1rem 0 1.15rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sales-dashboard {
    display: grid;
    gap: .85rem;
    margin-bottom: 1.15rem;
    padding: 1rem 0 1.15rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sales-dashboard-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.sales-dashboard-heading span {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .78rem;
}

.sales-dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 1.15rem;
}

.sales-dashboard-loading {
    color: var(--brand) !important;
    font-weight: 700;
    white-space: nowrap;
}

.sales-dashboard-heading-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}

.sales-dashboard-settings-button,
.sales-dashboard-settings-close,
.sales-dashboard-widget-setting-order button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text);
    cursor: pointer;
}

.sales-dashboard-settings-button {
    min-height: 36px;
    padding: .45rem .65rem;
    border-color: var(--brand);
    font-size: .75rem;
    font-weight: 700;
}

.sales-dashboard-settings-button:hover,
.sales-dashboard-settings-button:focus-visible,
.sales-dashboard-settings-close:hover,
.sales-dashboard-widget-setting-order button:hover:not(:disabled) {
    background: var(--panel-2);
    color: var(--brand);
}

.sales-dashboard-settings-dialog {
    width: min(1080px, 96vw);
    border-radius: 10px;
    overflow: hidden;
}

.sales-dashboard-settings-dialog .ti-modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.sales-dashboard-settings-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: transparent;
}

.sales-dashboard-settings-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-height: min(72vh, 760px);
    overflow: auto;
    padding: 1rem;
}

.sales-dashboard-settings-help,
.sales-dashboard-settings-body > .notice {
    grid-column: 1 / -1;
    margin: 0;
}

.sales-dashboard-settings-help {
    padding: .6rem .7rem;
    border-left: 3px solid var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, var(--bg-2));
    color: var(--muted);
    font-size: .78rem;
}

.sales-dashboard-settings-section {
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-2) 84%, transparent);
}

.sales-dashboard-settings-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .65rem;
}

.sales-dashboard-settings-section-heading h3 {
    margin: 0;
    font-size: .9rem;
}

.sales-dashboard-settings-section-heading span {
    display: block;
    margin-top: .15rem;
    color: var(--muted);
    font-size: .7rem;
}

.sales-dashboard-settings-section-heading > b {
    flex: 0 0 auto;
    padding: .25rem .45rem;
    border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 9%, var(--bg-2));
    color: var(--brand);
    font-size: .67rem;
    text-transform: uppercase;
}

.sales-dashboard-widget-settings-list {
    display: grid;
    gap: .4rem;
}

.sales-dashboard-widget-setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: stretch;
    gap: .75rem;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--line);
    border-left: 3px solid transparent;
    border-radius: 7px;
    background: var(--bg-2);
    transition: border-color .15s ease, opacity .15s ease;
}

.sales-dashboard-widget-setting.is-active {
    border-left-color: var(--brand);
}

.sales-dashboard-widget-setting.is-hidden {
    opacity: .62;
}

.sales-dashboard-widget-setting-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .65rem;
    min-width: 0;
}

.sales-dashboard-widget-setting-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.sales-dashboard-widget-setting-toggle input {
    width: 18px;
    height: 18px;
    margin: .08rem 0 0;
    accent-color: var(--brand);
}

.sales-dashboard-widget-setting-toggle strong,
.sales-dashboard-widget-setting-toggle small {
    display: block;
}

.sales-dashboard-widget-setting-toggle strong {
    font-size: .82rem;
}

.sales-dashboard-widget-setting-toggle small {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.3;
}

.sales-dashboard-widget-setting-toggle > b {
    min-width: 34px;
    padding: .18rem .3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 14%, transparent);
    color: var(--muted);
    font-size: .6rem;
    text-align: center;
}

.sales-dashboard-widget-setting.is-active .sales-dashboard-widget-setting-toggle > b {
    background: color-mix(in srgb, var(--brand) 17%, transparent);
    color: var(--brand);
}

.sales-dashboard-widget-setting-order {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.sales-dashboard-widget-setting-order > span {
    margin-right: .2rem;
    color: var(--muted);
    font-size: .65rem;
    text-transform: uppercase;
}

.sales-dashboard-widget-setting-order button {
    width: 30px;
    height: 30px;
    padding: 0;
}

.sales-dashboard-widget-setting-order button:disabled {
    cursor: default;
    opacity: .3;
}

.sales-dashboard-widget-preview {
    --preview-accent: var(--brand);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    grid-template-rows: auto 1fr;
    gap: .4rem .65rem;
    min-width: 0;
    min-height: 94px;
    padding: .6rem .7rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--preview-accent) 48%, var(--line));
    border-left: 4px solid var(--preview-accent);
    border-radius: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--preview-accent) 7%, var(--bg-2)), var(--bg-2) 72%);
}

.sales-dashboard-widget-preview.kpi {
    grid-template-columns: 1fr;
}

.sales-dashboard-widget-preview.profit,
.sales-dashboard-widget-preview.quantity,
.sales-dashboard-widget-preview.winner {
    --preview-accent: #5bc7a5;
}

.sales-dashboard-widget-preview.vat,
.sales-dashboard-widget-preview.guests,
.sales-dashboard-widget-preview.payments,
.sales-dashboard-widget-preview.employees,
.sales-dashboard-widget-preview.stores,
.sales-dashboard-widget-preview.departments,
.sales-dashboard-widget-preview.regions,
.sales-dashboard-widget-preview.time {
    --preview-accent: #56b5dc;
}

.sales-dashboard-widget-preview.loser {
    --preview-accent: var(--warn);
}

.sales-dashboard-widget-preview-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--preview-accent);
}

.sales-dashboard-widget-preview-heading > span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sales-dashboard-widget-preview-heading > em {
    margin-left: auto;
    color: var(--muted);
    font-size: .58rem;
    font-style: normal;
}

.sales-dashboard-widget-preview-values {
    align-self: center;
    min-width: 0;
}

.sales-dashboard-widget-preview-values > strong,
.sales-dashboard-widget-preview-values > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-widget-preview-values.combined {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
}

.sales-dashboard-widget-preview-values.combined > small {
    margin: 0 0 0 .55rem;
    padding-left: .6rem;
    border-left: 1px solid var(--line);
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
    text-align: right;
}

.sales-dashboard-widget-preview-values > strong {
    font-size: .9rem;
}

.sales-dashboard-widget-preview-values > small {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .65rem;
}

.sales-dashboard-widget-preview-chart {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 3px;
    height: 42px;
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--preview-accent) 34%, var(--line));
}

.sales-dashboard-widget-preview-chart > i {
    width: 6px;
    border-radius: 2px 2px 0 0;
    background: var(--preview-accent);
    opacity: .76;
}

.sales-dashboard-widget-preview-chart > i:nth-child(1) { height: 26%; }
.sales-dashboard-widget-preview-chart > i:nth-child(2) { height: 54%; }
.sales-dashboard-widget-preview-chart > i:nth-child(3) { height: 38%; }
.sales-dashboard-widget-preview-chart > i:nth-child(4) { height: 72%; }
.sales-dashboard-widget-preview-chart > i:nth-child(5) { height: 58%; }
.sales-dashboard-widget-preview-chart > i:nth-child(6) { height: 92%; }

.sales-dashboard-margin-section {
    display: grid;
    gap: .65rem;
}

.sales-dashboard-margin-help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .45rem;
    padding: .6rem .7rem;
    border: 1px solid color-mix(in srgb, var(--brand) 36%, var(--line));
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand) 7%, var(--bg-2));
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.45;
}

.sales-dashboard-margin-help .mud-icon-root {
    color: var(--brand);
}

.sales-dashboard-margin-filter {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(180px, 320px);
    align-items: center;
    justify-content: start;
    gap: .6rem;
    margin: 0;
    color: var(--muted);
    font-size: .7rem;
}

.sales-dashboard-margin-filter input,
.sales-dashboard-margin-input input {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg-2);
    color: var(--text);
}

.sales-dashboard-margin-filter input {
    width: 100%;
    padding: 0 .65rem;
}

.sales-dashboard-margin-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    max-height: 300px;
    overflow: auto;
    padding-right: .2rem;
}

.sales-dashboard-margin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    margin: 0;
    padding: .5rem .55rem;
    border: 1px solid var(--line);
    border-left: 3px solid transparent;
    border-radius: 5px;
    background: var(--bg-2);
}

.sales-dashboard-margin-row.is-configured {
    border-left-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 5%, var(--bg-2));
}

.sales-dashboard-margin-name {
    display: grid;
    min-width: 0;
}

.sales-dashboard-margin-name strong {
    overflow: hidden;
    color: var(--text);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-margin-name small {
    color: var(--muted);
    font-size: .64rem;
}

.sales-dashboard-margin-input {
    display: grid;
    grid-template-columns: 72px auto;
    align-items: center;
    gap: .4rem;
}

.sales-dashboard-margin-input input {
    width: 72px;
    padding: 0 .5rem;
    text-align: right;
}

.sales-dashboard-margin-input b {
    color: var(--muted);
    font-size: .67rem;
    white-space: nowrap;
}

.sales-dashboard-margin-empty {
    padding: 1rem;
    border: 1px dashed var(--line);
    color: var(--muted);
    text-align: center;
}

.sales-dashboard-purchase-price-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #66717a;
    background: #34393c;
}

.sales-dashboard-purchase-price-link > div {
    display: grid;
    gap: 3px;
}

.sales-dashboard-purchase-price-link span {
    color: #c5cdd1;
    font-size: .82rem;
}

.sales-dashboard-purchase-price-link .button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.purchase-price-assistant {
    display: grid;
    gap: 16px;
}

.purchase-price-safety-note {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    border-left: 4px solid #9aca0d;
    background: #343a31;
}

.purchase-price-safety-note span,
.purchase-price-count span {
    color: #c5cdd1;
}

.purchase-price-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.purchase-price-toolbar > label {
    display: grid;
    gap: 5px;
    min-width: min(420px, 100%);
}

.purchase-price-count {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
}

.purchase-price-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #60676b;
}

.purchase-price-table td:first-child,
.purchase-price-table th:first-child {
    width: 42px;
    text-align: center;
}

.purchase-price-table td:nth-child(n+4) {
    white-space: nowrap;
}

.purchase-price-table td strong,
.purchase-price-table td small {
    display: block;
}

.purchase-price-table td small {
    margin-top: 3px;
    color: #aeb8bd;
}

.purchase-price-results {
    display: grid;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #687075;
}

.purchase-price-suggestion-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.purchase-price-suggestion {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #636b70;
    background: #34383b;
}

.purchase-price-suggestion.selected {
    border-color: #9aca0d;
    box-shadow: inset 3px 0 #9aca0d;
}

.purchase-price-suggestion > header,
.purchase-price-suggestion > header label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.purchase-price-suggestion > header label span {
    display: grid;
    gap: 2px;
}

.purchase-price-suggestion > header small,
.purchase-price-suggestion p {
    color: #bdc6ca;
}

.purchase-price-confidence {
    padding: 4px 7px;
    border: 1px solid #6d767b;
    font-size: .75rem;
    white-space: nowrap;
}

.purchase-price-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.purchase-price-values > span,
.purchase-price-values > label {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid #555e63;
    background: #2b3033;
}

.purchase-price-values small {
    color: #aeb8bd;
}

.purchase-price-values input {
    width: 100%;
}

.purchase-price-sources {
    display: grid;
    gap: 5px;
}

.purchase-price-sources a {
    color: #c8ed5c;
    overflow-wrap: anywhere;
}

.purchase-price-recipes {
    display: grid;
    gap: 8px;
}

.purchase-price-recipes article {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) auto minmax(280px, 2fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #5d666b;
    background: #303538;
}

.purchase-price-recipes article > div {
    display: grid;
    gap: 3px;
}

.purchase-price-recipes small,
.purchase-price-recipes span {
    color: #bdc6ca;
}

.purchase-price-recipes em {
    grid-column: 1 / -1;
    color: #f5bd59;
}

@media (max-width: 980px) {
    .sales-dashboard-purchase-price-link,
    .purchase-price-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .purchase-price-suggestion-list {
        grid-template-columns: 1fr;
    }

    .purchase-price-values,
    .purchase-price-recipes article {
        grid-template-columns: 1fr;
    }
}

.sales-dashboard-settings-actions > span {
    flex: 1 1 auto;
}

.sales-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.sales-dashboard-kpi {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: .08rem .6rem;
    min-width: 0;
    min-height: 92px;
    padding: .75rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.sales-dashboard-kpi > .mud-icon-root {
    grid-row: 1 / 4;
    color: var(--brand);
}

.sales-dashboard-kpi > span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sales-dashboard-kpi > strong {
    overflow: hidden;
    font-size: 1.15rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-kpi > small {
    overflow: hidden;
    color: var(--muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-kpi.combined {
    grid-template-rows: auto 1fr;
}

.sales-dashboard-kpi.combined > .mud-icon-root {
    grid-row: 1 / 3;
}

.sales-dashboard-kpi-split {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    min-width: 0;
    margin-top: .15rem;
}

.sales-dashboard-kpi-split > div {
    min-width: 0;
}

.sales-dashboard-kpi-split > div.average {
    margin-left: .55rem;
    padding-left: .65rem;
    border-left: 1px solid var(--line);
    text-align: right;
}

.sales-dashboard-kpi-split strong,
.sales-dashboard-kpi-split small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-kpi-split strong {
    font-size: 1.05rem;
    line-height: 1.15;
}

.sales-dashboard-kpi-split small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .62rem;
}

.sales-dashboard-kpi.profit,
.sales-dashboard-kpi.cost,
.sales-dashboard-kpi.quantity {
    border-left-color: #5bc7a5;
}

.sales-dashboard-kpi.profit > .mud-icon-root,
.sales-dashboard-kpi.cost > .mud-icon-root,
.sales-dashboard-kpi.quantity > .mud-icon-root {
    color: #5bc7a5;
}

.sales-dashboard-kpi.vat,
.sales-dashboard-kpi.guests {
    border-left-color: #56b5dc;
}

.sales-dashboard-kpi.vat > .mud-icon-root,
.sales-dashboard-kpi.guests > .mud-icon-root {
    color: #56b5dc;
}

.sales-dashboard-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.sales-dashboard-action {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: .1rem .65rem;
    min-width: 0;
    min-height: 104px;
    padding: .8rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.sales-dashboard-action:hover,
.sales-dashboard-action:focus-visible,
.sales-dashboard-action.active {
    border-color: var(--brand);
    background: var(--panel-2);
}

.sales-dashboard-action.active {
    box-shadow: inset 0 0 0 1px var(--brand);
}

.sales-dashboard-action:disabled {
    cursor: wait;
    opacity: .68;
}

.sales-dashboard-action > .mud-icon-root {
    grid-row: 1 / 4;
    color: var(--brand);
}

.sales-dashboard-action > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sales-dashboard-action > strong,
.sales-dashboard-action > small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-dashboard-action.profile {
    grid-template-rows: auto auto minmax(160px, 1fr) auto;
    min-height: 280px;
    border-left-color: #a1c116;
    overflow: visible;
}

.sales-dashboard-profile-values {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    min-width: 0;
    padding: .2rem 0 .35rem;
}

.sales-dashboard-profile-values > span {
    display: grid;
    gap: .05rem;
    min-width: 0;
}

.sales-dashboard-profile-values strong {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.15;
    white-space: nowrap;
}

.sales-dashboard-profile-values small {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-profile-chart {
    grid-column: 2;
    min-width: 0;
    height: 160px;
    min-height: 160px;
    overflow: visible;
    pointer-events: none;
}

.sales-dashboard-profile-chart .echart-host {
    width: 100%;
    min-height: 160px;
}

.sales-dashboard-profile-description {
    grid-column: 2;
    white-space: nowrap;
}

.profile-dashboard-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    align-items: start;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .025);
}

.profile-dashboard-status.eligible {
    border-color: rgba(161, 193, 22, .55);
    background: rgba(161, 193, 22, .07);
}

.profile-dashboard-status > .mud-icon-root {
    margin-top: .1rem;
    color: var(--brand);
}

.profile-dashboard-status span {
    display: grid;
    gap: .15rem;
}

.profile-dashboard-status small {
    color: var(--muted);
    line-height: 1.35;
}

.sales-dashboard-sparkline {
    grid-column: 2;
    display: flex;
    align-items: end;
    gap: 2px;
    height: 34px;
    min-width: 0;
    margin-top: .3rem;
    padding-top: .25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.sales-dashboard-sparkline > i {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 18px;
    border-radius: 1px 1px 0 0;
    background: var(--brand);
    opacity: .86;
}

.sales-dashboard-action > strong {
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
}

.sales-dashboard-ranking {
    grid-column: 2;
    display: grid;
    gap: .22rem;
    min-width: 0;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: dashboard-rank;
}

.sales-dashboard-ranking > li {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: baseline;
    min-width: 0;
    padding-top: .2rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    counter-increment: dashboard-rank;
}

.sales-dashboard-ranking > li::before {
    content: counter(dashboard-rank) ".";
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.sales-dashboard-ranking strong {
    overflow: hidden;
    color: var(--text);
    font-size: .78rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-dashboard-ranking span {
    color: var(--text);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.sales-dashboard-ranking small {
    grid-column: 2 / 4;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.15;
}

.sales-dashboard-action > small {
    color: var(--muted);
    font-size: .72rem;
    white-space: nowrap;
}

.sales-dashboard-action.loser {
    border-left-color: var(--warn);
}

.sales-dashboard-action.loser > .mud-icon-root {
    color: var(--warn);
}

.sales-dashboard-action.payments,
.sales-dashboard-action.employees {
    border-left-color: #56b5dc;
}

.sales-dashboard-action.payments > .mud-icon-root,
.sales-dashboard-action.employees > .mud-icon-root {
    color: #56b5dc;
}

.sales-dashboard-selection {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: .55rem .7rem;
    border: 1px solid var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, var(--bg-2));
}

.sales-dashboard-error {
    padding: .55rem .7rem;
    border: 1px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 9%, var(--bg-2));
    color: var(--text);
    font-size: .76rem;
}

.sales-dashboard-selection > .mud-icon-root {
    color: var(--brand);
}

.sales-dashboard-selection strong,
.sales-dashboard-selection span {
    display: block;
}

.sales-dashboard-selection span {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .74rem;
}

.journal-dashboard-heading,
.journal-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.journal-dashboard-heading {
    padding-inline: 1.15rem;
}

.journal-dashboard-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
}

.journal-dashboard-heading h2,
.journal-section-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.journal-dashboard-heading span,
.journal-section-heading span {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .78rem;
}

.journal-refresh {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
}

.journal-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .65rem;
}

.journal-kpis.journal-kpi-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-kpi {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: .1rem .65rem;
    min-height: 116px;
    padding: .85rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.journal-kpi:hover,
.journal-kpi:focus-visible {
    border-color: var(--brand);
    background: var(--panel-2);
}

.journal-kpi:disabled {
    cursor: wait;
    opacity: .68;
}

.journal-kpi > .mud-icon-root {
    grid-row: 1 / 4;
    color: var(--brand);
}

.journal-kpi > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.journal-kpi > strong {
    font-size: 1.65rem;
    line-height: 1.1;
}

.journal-kpi > small {
    color: var(--muted);
    font-size: .72rem;
}

.journal-kpi-preview {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--line);
}

.journal-kpi-details .journal-kpi {
    align-content: start;
    min-height: 310px;
}

.journal-kpi.composite {
    cursor: default;
}

.journal-kpi.composite:hover {
    border-color: var(--line);
    border-left-color: var(--warn);
    background: var(--bg-2);
}

.journal-threshold-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid color-mix(in srgb, #d946ef 65%, var(--line));
    border-left: 4px solid #d946ef;
    background: color-mix(in srgb, #d946ef 7%, var(--bg-2));
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.journal-threshold-alert:hover,
.journal-threshold-alert:focus-visible {
    background: color-mix(in srgb, #d946ef 12%, var(--bg-2));
}

.journal-threshold-alert > .mud-icon-root {
    color: #d946ef;
}

.journal-threshold-alert small {
    color: var(--muted);
    font-size: .72rem;
}

.journal-kpi.danger {
    border-left-color: #ef6b6b;
}

.journal-kpi.danger > .mud-icon-root {
    color: #ef6b6b;
}

.journal-kpi.transfer {
    border-left-color: #56b5dc;
}

.journal-kpi.transfer > .mud-icon-root {
    color: #56b5dc;
}

.journal-kpi.warning {
    border-left-color: var(--warn);
}

.journal-kpi.warning > .mud-icon-root {
    color: var(--warn);
}

.journal-kpi.critical {
    border-left-color: #d946ef;
    background: color-mix(in srgb, #d946ef 5%, var(--bg-2));
}

.journal-kpi.critical > .mud-icon-root {
    color: #d946ef;
}

.journal-kpi.threshold {
    border-left-color: #d946ef;
}

.journal-kpi.threshold > .mud-icon-root {
    color: #d946ef;
}

.journal-sequence-cell {
    min-width: 34rem;
    max-width: 58rem;
    white-space: pre-wrap;
    line-height: 1.45;
}

.journal-dashboard-details {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(340px, 1.35fr) minmax(220px, .9fr);
    gap: 1rem;
}

.journal-ranking,
.journal-transfers,
.journal-events {
    min-width: 0;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}

.journal-link-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.journal-link-button:hover,
.journal-link-button:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
}

.journal-ranking ol,
.journal-preview-list {
    display: grid;
    gap: .55rem;
    margin: .8rem 0 0;
    padding: 0;
    list-style: none;
}

.journal-ranking li,
.journal-preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    align-items: center;
}

.journal-ranking li > span,
.journal-preview-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-ranking li > b,
.journal-preview-row > b {
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.journal-preview-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.journal-preview-values > small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
}

.journal-ranking li > i,
.journal-preview-row > i {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, .09);
}

.journal-ranking li > i::after,
.journal-preview-row > i::after {
    display: block;
    width: var(--journal-share);
    max-width: 100%;
    height: 100%;
    background: var(--brand);
    content: "";
}

.journal-transfer-list {
    display: grid;
    margin-top: .65rem;
}

.journal-transfer-list article,
.journal-transfer-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.journal-transfer-list time {
    color: #8fd3ef;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.journal-transfer-list strong,
.journal-transfer-list span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-transfer-list span {
    margin-top: .16rem;
    color: var(--muted);
    font-size: .72rem;
}

.journal-event-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .65rem;
	max-height: 230px;
	overflow-y: auto;
	padding-right: .2rem;
}

.journal-event-list button,
.journal-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    min-height: 40px;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text);
    cursor: pointer;
}

.journal-event-list button:hover,
.journal-event-list button:focus-visible {
    border-color: var(--warn);
}

.journal-event-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
}

.journal-event-list b {
    color: var(--warn);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.journal-event-list .journal-event-all {
	grid-column: 1 / -1;
	border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
}

.journal-event-list .journal-event-all .mud-icon-root {
	flex: 0 0 auto;
	color: var(--warn);
}

.journal-dashboard-settings-dialog {
    width: min(1040px, 96vw);
    overflow: hidden;
}

.journal-dashboard-settings-body {
    display: grid;
    gap: 1rem;
    max-height: min(74vh, 780px);
    padding: 1rem;
    overflow: auto;
}

.journal-threshold-settings,
.journal-push-settings,
.journal-threshold-results {
    padding: .85rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-2) 84%, transparent);
}

.journal-push-settings-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(154, 205, 0, .45);
    background: rgba(154, 205, 0, .06);
}

.journal-push-settings-content > span {
    display: grid;
    gap: 4px;
}

.journal-push-interval {
    display: grid;
    gap: .25rem;
    min-width: 12rem;
}

.journal-push-interval > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.journal-push-interval select {
    width: 100%;
}

.journal-push-interval small {
    color: var(--muted);
    max-width: 16rem;
}

.journal-push-settings-content > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 780px) {
    .journal-push-settings-content {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .journal-push-settings-content > div {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .journal-push-settings-content > div .button {
        flex: 1;
    }
}

.journal-threshold-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.journal-threshold-grid > label {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(120px, .55fr);
    align-items: center;
    gap: .2rem .7rem;
    padding: .65rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
}

.journal-threshold-grid > label > span {
    font-weight: 700;
}

.journal-threshold-grid > label > small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .7rem;
}

.journal-threshold-grid input {
    width: 100%;
    min-width: 0;
}

.journal-threshold-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.journal-threshold-input b {
    display: grid;
    place-items: center;
    min-width: 48px;
    padding-inline: .4rem;
    border: 1px solid var(--line);
    border-left: 0;
    background: var(--panel-2);
    color: var(--muted);
    font-size: .68rem;
}

.journal-discount-thresholds {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.journal-discount-thresholds-heading,
.journal-discount-threshold-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(135px, .34fr) minmax(165px, .42fr);
    align-items: center;
    gap: .7rem;
}

.journal-discount-thresholds-heading h4 {
    margin: 0;
    color: var(--accent);
    font-size: .82rem;
    text-transform: uppercase;
}

.journal-discount-thresholds-heading > div > span,
.journal-discount-note,
.journal-discount-name small,
.journal-discount-threshold-row label > small {
    color: var(--muted);
    font-size: .68rem;
}

.journal-discount-column-labels {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: minmax(135px, .81fr) minmax(165px, 1fr);
    gap: .7rem;
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
}

.journal-discount-threshold-list {
    display: grid;
    gap: .4rem;
}

.journal-discount-threshold-row {
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
}

.journal-discount-name,
.journal-discount-threshold-row label {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.journal-discount-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-discount-threshold-row input {
    width: 100%;
    min-width: 0;
}

.journal-discount-note {
    margin: .15rem 0 0;
}

.journal-threshold-breach-list {
    display: grid;
    gap: .4rem;
}

.journal-threshold-breach-list > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line));
    background: color-mix(in srgb, var(--warn) 5%, var(--bg-2));
}

.journal-threshold-breach-list .mud-icon-root,
.journal-threshold-breach-list > div > b {
    color: var(--warn);
}

.journal-threshold-breach-list span strong,
.journal-threshold-breach-list span small {
    display: block;
}

.journal-threshold-breach-list span small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .7rem;
}

.journal-threshold-breach-list > div > b {
    font-size: .72rem;
    text-align: right;
}

.journal-loading,
.journal-empty {
    min-height: 86px;
    display: grid;
    place-items: center;
    margin-top: .65rem;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

.report-layout {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1180px) {
    .sales-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-kpis.journal-kpi-details {
        grid-template-columns: 1fr;
    }

    .journal-dashboard-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-events {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
	.sales-dashboard-heading,
	.sales-dashboard-heading-tools {
		align-items: stretch;
		flex-direction: column;
	}

	.sales-dashboard-settings-button {
		width: 100%;
	}

	.sales-dashboard-settings-body {
		grid-template-columns: 1fr;
		padding: .65rem;
	}

	.sales-dashboard-widget-setting {
		grid-template-columns: 1fr;
	}

	.sales-dashboard-widget-preview {
		min-height: 88px;
	}

	.sales-dashboard-settings-section-heading {
		align-items: flex-start;
	}

	.sales-dashboard-margin-list {
		grid-template-columns: 1fr;
	}

	.sales-dashboard-margin-filter {
		grid-template-columns: 1fr;
	}

	.sales-dashboard-settings-help,
	.sales-dashboard-settings-body > .notice {
		grid-column: auto;
	}

	.sales-dashboard-settings-actions {
		flex-wrap: wrap;
	}

	.sales-dashboard-settings-actions > span {
		display: none;
	}

    .sales-dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .sales-dashboard-actions {
        grid-template-columns: 1fr;
    }

    .journal-dashboard-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .journal-dashboard-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .journal-refresh {
        justify-content: center;
    }

    .journal-kpis,
    .journal-dashboard-details {
        grid-template-columns: 1fr;
    }

    .journal-events {
        grid-column: auto;
    }

    .journal-threshold-alert,
    .journal-threshold-breach-list > div,
    .journal-threshold-grid > label {
        grid-template-columns: 1fr;
    }

    .journal-threshold-alert small,
    .journal-threshold-breach-list > div > b {
        text-align: left;
    }

    .journal-threshold-grid {
        grid-template-columns: 1fr;
    }

    .journal-discount-thresholds-heading,
    .journal-discount-threshold-row {
        grid-template-columns: 1fr;
    }

    .journal-discount-column-labels {
        display: none;
    }
}

.master-layout {
    display: grid;
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.master-sidebar,
.editor-panel,
.hierarchy-panel,
.ai-panel,
.menu-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.master-sidebar {
    position: sticky;
    top: 80px;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    max-height: calc(100vh - 96px);
    overflow: auto;
}

.master-workspace {
    display: grid;
    gap: 1rem;
}

.master-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 1rem;
    align-items: start;
}

.editor-panel,
.hierarchy-panel,
.ai-panel,
.menu-panel {
    padding: 1rem;
}

.article-list,
.draft-list {
    display: grid;
    gap: .45rem;
}

.ai-preview,
.ai-action-list,
.duplicate-list {
    display: grid;
    gap: .55rem;
}

.ai-preview {
    margin-top: .9rem;
}

.ai-action-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    padding: .75rem;
}

.ai-action-card small,
.ai-action-card span,
.duplicate-list span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
}

.ai-action-card strong {
    display: block;
    margin: .2rem 0;
}

.duplicate-list {
    border: 1px dashed rgba(245, 157, 22, .65);
    border-radius: var(--radius);
    padding: .7rem;
}

.ai-component-list {
    margin: .55rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: .8rem;
}

.notice.error {
    border-color: rgba(181, 27, 27, .8);
    color: #ffc6c6;
}

.legacy-ai-drafts {
    margin-top: 1rem;
}

.article-row,
.draft-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text);
    padding: .75rem;
    text-align: left;
    cursor: pointer;
}

.article-row:hover,
.article-row.active,
.draft-row:hover {
    border-color: rgba(161, 193, 22, .65);
    background: #545555;
}

.article-row small,
.draft-row span,
.section-title span,
.block-heading span,
.block-item span,
.menu-button span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    margin-top: .2rem;
}

.article-row b {
    color: var(--brand);
    white-space: nowrap;
}

.editor-toolbar,
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.editor-toolbar h2,
.section-title h2,
.ai-panel h2 {
    margin-bottom: 0;
}

.article-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.article-form .wide {
    grid-column: 1 / -1;
}

.category-picker-trigger {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
    padding: .55rem .7rem;
    text-align: left;
}

.category-picker-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-picker-trigger strong {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: .76rem;
}

.category-picker-backdrop {
    justify-content: flex-end;
    padding: 0;
}

.category-picker-dialog {
    width: min(480px, 96vw);
    height: 100vh;
    max-height: 100vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-width: 0 0 0 1px;
}

.category-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: #147ca5;
    color: #fff;
}

.category-picker-header h2 {
    margin: .15rem 0 0;
    font-size: 1.2rem;
}

.category-picker-header .eyebrow {
    color: rgba(255, 255, 255, .78);
}

.category-picker-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

.category-picker-search {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
}

.category-picker-search label {
    display: block;
    margin-bottom: .35rem;
}

.category-picker-search input {
    width: 100%;
}

.category-picker-tree {
    overflow: auto;
    padding: .55rem;
}

.category-picker-row {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: transparent;
    color: var(--text);
    padding: .45rem .6rem .45rem calc(.6rem + var(--category-level) * 1.15rem);
    text-align: left;
}

.category-picker-row:hover,
.category-picker-row:focus-visible {
    background: rgba(20, 124, 165, .2);
}

.category-picker-row.selected {
    background: #147ca5;
    color: #fff;
}

.category-picker-row.group .category-picker-name {
    font-weight: 700;
}

.category-picker-chevron {
    text-align: center;
    opacity: .8;
}

.category-picker-number {
    color: var(--muted);
    font-size: .72rem;
}

.category-picker-row.selected .category-picker-number {
    color: rgba(255, 255, 255, .78);
}

.category-picker-empty {
    padding: 2rem 1rem;
    color: var(--muted);
    text-align: center;
}

.category-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--border);
    padding: .8rem 1rem;
}

.category-picker-footer span {
    color: var(--muted);
    font-size: .72rem;
}

.price-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}

.price-strip label {
    margin: 0;
}

.price-strip span {
    display: block;
    margin-bottom: .35rem;
}

.notice.compact {
    margin-bottom: 0;
}

.block-tree {
    display: grid;
    gap: .45rem;
}

.block-heading {
    border: 1px solid rgba(22, 111, 154, .65);
    border-radius: var(--radius);
    background: rgba(22, 111, 154, .22);
    padding: .75rem;
}

.block-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    padding: .65rem .75rem;
    cursor: grab;
}

.block-item:active {
    cursor: grabbing;
}

.block-child {
    margin-left: 1rem;
    padding-left: .8rem;
    border-left: 2px solid var(--line);
}

.block-actions {
    display: flex;
    gap: .35rem;
}

.icon-button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #545555;
    color: var(--text);
    cursor: pointer;
}

.add-block-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    margin-top: 1rem;
}

.empty.slim {
    min-height: 160px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: .55rem;
}

.menu-button {
    min-height: 76px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text);
    padding: .7rem;
    text-align: left;
}

.menu-button.type-1 {
    border-color: rgba(161, 193, 22, .65);
}

.menu-button.type-2 {
    border-color: rgba(22, 111, 154, .75);
}

.menu-button.type-3 {
    background: #545555;
}

.article-only-layout {
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
}

.pos-editor {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pos-control-panel,
.pos-workbench,
.button-inspector {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.pos-control-panel {
    position: sticky;
    top: 80px;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    max-height: calc(100vh - 96px);
    overflow: auto;
}

.pos-workbench {
    min-width: 0;
    padding: 1rem;
    overflow-x: auto;
}

.pos-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pos-toolbar span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    margin-top: .2rem;
}

.pos-tool-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.pos-editor-stage {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: max-content;
    max-width: none;
}

.pos-screen-shell {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #bfbfbf;
    padding: 0;
    flex: 0 0 auto;
}

.pos-editor-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 32px auto;
    width: max-content;
    max-width: none;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #8c8c8c;
    overflow: visible;
}

.pos-menu-layout {
    grid-column: 1;
    position: relative;
    min-width: 0;
    max-width: 100%;
    display: block;
    background: #bfbfbf;
    overflow: hidden;
}

.pos-dialog-title {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 1rem;
    height: 32px;
    padding-left: .5rem;
    background: #8a8a8a;
    color: #ffffff;
    font-weight: 900;
}

.pos-dialog-actions {
    display: none;
    gap: .35rem;
    padding-right: .35rem;
}

.confirm-button,
.cancel-button {
    width: 48px;
    height: 28px;
    border: 1px solid #ffffff;
    background: #4c4c4c;
    color: #a6ce12;
    font-size: 1.3rem;
    font-weight: 900;
}

.cancel-button {
    color: #d4262d;
}

.pos-screen {
    position: relative;
    flex: 0 0 auto;
    border: 2px solid #d7d7d7;
    background: #838583;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
    overflow: hidden;
}

.pos-key {
    position: absolute;
    z-index: 2;
    display: grid;
    place-content: center;
    gap: .25rem;
    border: 2px solid #ffffff;
    border-radius: 0;
    color: #050505;
    text-align: center;
    font-weight: 900;
    cursor: grab;
    overflow: hidden;
    min-width: 0;
    padding: .25rem;
    user-select: none;
    transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease, opacity .12s ease, transform .12s ease;
}

.pos-group-page {
    position: absolute;
    z-index: 20;
    display: grid;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 0;
    background: #4a4c4a;
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.pos-group-page:hover {
    background: #5a5d5a;
}

.pos-group-page:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.pos-key:active {
    cursor: grabbing;
}

.pos-key.dragging {
    z-index: 8;
    opacity: .82;
    transform: scale(1.035);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .42), 0 0 0 3px rgba(143, 210, 61, .75);
    pointer-events: none;
}

.pos-key.preview-shift {
    z-index: 3;
    opacity: .74;
    outline: 2px dashed rgba(143, 210, 61, .85);
    outline-offset: -5px;
}

.pos-key.article-drop-preview {
    z-index: 12;
    opacity: .9;
    pointer-events: none;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .42), 0 0 0 3px rgba(143, 210, 61, .85);
    transform: scale(1.025);
}

.pos-key.selected {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.pos-key.active-group {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .16);
}

.pos-key strong {
    position: relative;
    z-index: 2;
    white-space: pre-line;
    line-height: 1.05;
    font-size: clamp(.75rem, 1rem, 1.2rem);
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pos-key-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

.pos-key-image-caption {
    align-self: end;
    width: calc(100% + .5rem);
    margin: 0 -.25rem -.25rem;
    padding: .32rem .25rem;
    color: #ffffff;
    background: rgba(16, 20, 18, .72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

.pos-key span {
    color: rgba(0, 0, 0, .62);
    font-size: .68rem;
}

.pos-key.type-1,
.pos-key.type-2 {
    background: #d09552 !important;
}

.pos-key.type-3 {
    background: #7d78ee;
}

.pos-key.type-8 {
    color: #050505;
    cursor: default;
}

.pos-article-list {
    display: grid;
    gap: .45rem;
}

.pos-article-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.pos-article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.pos-article-table th,
.pos-article-table td {
    padding: .45rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
    vertical-align: top;
}

.pos-article-table th {
    position: sticky;
    top: 0;
    background: #142024;
    cursor: pointer;
    z-index: 1;
}

.pos-article-row {
    cursor: grab;
}

.pos-article-row:hover {
    background: rgba(143, 210, 61, .12);
}

.pos-article-row small {
    display: block;
    color: var(--muted);
    margin-top: .15rem;
}

.pos-article {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(13, 18, 17, .88);
    padding: .7rem;
    cursor: grab;
}

.pos-article:active {
    cursor: grabbing;
}

.pos-article span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    margin-top: .2rem;
}

.menu-ai-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #10191c;
    padding: 1rem;
    margin-bottom: 1rem;
    display: grid;
    gap: .8rem;
}

.ai-menu-prompt {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #081012;
    color: var(--text);
    padding: .8rem;
    font: inherit;
}

.ai-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.ai-preview-grid > div,
.ai-action-list article {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0b1315;
    padding: .7rem;
}

.ai-preview-grid strong,
.ai-action-list strong {
    display: block;
}

.ai-action-select {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    font-size: .78rem;
    margin-bottom: .35rem;
}

.ai-action-select input {
    width: auto;
}

.ai-preview-grid span,
.ai-action-list span,
.ai-action-list small {
    display: block;
    color: var(--muted);
    margin-top: .25rem;
}

.ai-action-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .6rem;
}

.ai-health-table {
    max-height: 360px;
    overflow: auto;
}

.ai-health-table table {
    min-width: 980px;
}

.button-inspector {
    margin-top: 1rem;
    padding: 1rem;
}

.compact-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pos-function-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
    padding: 10px;
    border-left: 1px solid #eeeeee;
    background: #4a4d4d;
    overflow: auto;
    min-width: 160px;
    flex: 0 0 auto;
}

.pos-function-panel.tools-outside {
    width: 280px;
    max-height: none;
    overflow: visible;
    align-self: start;
    border-left: 1px solid #eeeeee;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    box-sizing: border-box;
}

.pos-save-tool {
    grid-column: 1 / -1;
    min-height: 42px;
    border: 1px solid #b7ef5a;
    background: #8fd23d;
    color: #061006;
    font-weight: 900;
    text-align: center;
}

.pos-save-tool:hover {
    background: #a4e554;
}

.pos-proposal-tool {
    grid-column: 1 / -1;
    min-height: 42px;
    border: 1px solid #8da03a;
    background: #4a4f4f;
    color: #ffffff;
    font-weight: 900;
    text-align: center;
}

.pos-proposal-tool:hover:not(:disabled) {
    border-color: #b7ef5a;
    color: #cfff4a;
}

.pos-proposal-tool:disabled {
    opacity: .55;
    cursor: wait;
}

.pos-selection-tool {
    grid-column: 1 / -1;
    min-height: 42px;
    border: 1px solid #b7ef5a;
    background: #2f3636;
    color: #ffffff;
    font-weight: 900;
    text-align: center;
}

.pos-selection-tool:hover:not(:disabled) {
    background: #3e4747;
    color: #cfff4a;
}

.pos-selection-tool:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pos-debug-log {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    max-height: 150px;
    overflow: auto;
    padding: 8px;
    border: 1px solid #7c8585;
    background: #2f3434;
    color: #dfe8e8;
    font-size: .72rem;
}

.pos-debug-log strong {
    color: #ffffff;
    font-size: .78rem;
}

.pos-debug-log span {
    display: block;
    color: #c8d2d2;
}

.pos-function-reserved {
    position: relative;
    display: grid;
    place-content: center;
    gap: .4rem;
    padding: .75rem;
    border: 2px dashed var(--brand);
    background: rgba(161, 193, 22, .16);
    color: #ffffff;
    text-align: center;
    font-weight: 900;
    flex: 0 0 auto;
    overflow: hidden;
    pointer-events: none;
}

.pos-function-top-reserved,
.pos-function-left-reserved,
.pos-function-right-reserved,
.pos-function-bottom-reserved {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
}

.pos-function-top-reserved {
    background: rgba(238, 238, 238, .64);
    border-bottom: 1px solid rgba(255, 255, 255, .9);
    overflow: hidden;
    pointer-events: none;
}

.pos-function-preview-key {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .75);
    opacity: .82;
    filter: saturate(.74) brightness(1.12);
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
    overflow: hidden;
    padding: 2px;
    pointer-events: none;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .22);
}

.pos-function-preview-key > span {
    white-space: pre-line;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.pos-function-preview-key.function-alert {
    background: #a00000 !important;
    color: #ffffff !important;
    opacity: 1;
    filter: none;
    font-size: 1.05rem;
    box-shadow: none;
}

.pos-function-preview-key.function-grid {
    display: block;
    padding: 0;
    background: #f6f6f6 !important;
    color: #050505 !important;
    opacity: 1;
    filter: none;
    box-shadow: none;
}

.function-grid-view {
    display: grid;
    grid-template-rows: auto repeat(5, minmax(18px, 1fr));
    width: 100%;
    height: 100%;
    background: #ffffff;
    color: #050505;
    font-size: .66rem;
    font-weight: 700;
    text-align: left;
}

.function-grid-head,
.function-grid-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 52px 56px;
    align-items: center;
}

.function-grid-head {
    background: #eeeeee;
    color: #000000;
    border-bottom: 1px solid #c6c6c6;
}

.function-grid-row {
    border-bottom: 1px solid #cfcfcf;
}

.function-grid-row:nth-child(2) {
    background: #b9e8ff;
}

.function-grid-head span,
.function-grid-row span {
    min-width: 0;
    padding: 1px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.function-grid-head span:not(:last-child),
.function-grid-row span:not(:last-child) {
    border-right: 1px solid #c6c6c6;
}

.pos-function-preview-key.function-numpad {
    display: block;
    padding: 0;
    background: #545454 !important;
    color: #ffffff !important;
    opacity: 1;
    filter: none;
    box-shadow: none;
}

.function-numpad-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
    height: 100%;
}

.function-numpad-view span {
    display: grid;
    place-items: center;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    font-weight: 900;
}

.pos-function-preview-key.function-receipt-action {
    background: #008f08 !important;
    color: #ffffff !important;
    opacity: 1;
    filter: none;
    font-size: 1.15rem;
    box-shadow: none;
}

.pos-function-preview-key.function-total-value {
    background: #8f928a !important;
    color: #ffff00 !important;
    opacity: 1;
    filter: none;
    font-size: 1rem;
    box-shadow: none;
}

.pos-function-preview-key.function-info-value {
    background: transparent !important;
    color: #ffff00 !important;
    border-color: transparent;
    opacity: 1;
    filter: none;
    box-shadow: none;
    font-size: .95rem;
    justify-items: start;
    padding: 2px 6px;
    text-align: left;
}

.pos-function-reserved > strong,
.pos-function-reserved > span:not(.pos-function-preview-key),
.pos-function-reserved > small {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.pos-function-reserved strong {
    font-size: 1.25rem;
}

.pos-function-reserved > span:not(.pos-function-preview-key),
.pos-function-reserved > small {
    color: #ffffff;
}

.pos-function-template {
    position: relative;
    grid-column: 1 / -1;
    height: 82px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: #333737;
    overflow: hidden;
}

.pos-function-template-key {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .8);
    color: #050505;
    font-size: .65rem;
    font-weight: 900;
    text-align: center;
    overflow: hidden;
    padding: 2px;
}

.pos-new-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.pos-new-group span {
    grid-column: 1 / -1;
    color: #ffffff;
    font-size: .82rem;
}

.pos-new-group button,
.pos-tool {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #e8e8e8;
    background: #3f4242;
    color: #ffffff;
    font-weight: 800;
    box-sizing: border-box;
}

.pos-grid-tools {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: #383c3c;
    color: #ffffff;
    box-sizing: border-box;
}

.pos-grid-tools span {
    grid-column: 1 / -1;
    font-weight: 900;
}

.pos-grid-tools label {
    color: #ffffff;
    font-size: .72rem;
    margin: 0;
}

.pos-grid-tools input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
    padding: .35rem;
    text-align: center;
    background: #707070;
    border-color: #808080;
    color: #b7dc1a;
    font-weight: 900;
}

.pos-grid-tools button {
    grid-column: 1 / -1;
    min-height: 38px;
    border: 1px solid #e8e8e8;
    background: #3f4242;
    color: #ffffff;
    font-weight: 900;
    width: 100%;
    box-sizing: border-box;
}

.pos-tool {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: .35rem;
    text-align: left;
    padding: .35rem;
    height: 44px;
    line-height: 1.05;
}

.pos-tool span:last-child {
    overflow-wrap: anywhere;
    font-size: .82rem;
}

.pos-tool.disabled {
    opacity: .38;
}

.pos-tool.active {
    background: #5b6262;
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.tool-icon {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 1.15rem;
}

.pos-size-box {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .6rem;
    margin-top: 1rem;
    color: #ffffff;
}

.pos-size-box strong {
    grid-column: 1 / -1;
    text-align: center;
}

.pos-size-box label {
    color: #ffffff;
    margin: 0;
}

.pos-size-box input {
    margin-top: .25rem;
    padding: .35rem;
    text-align: center;
    background: #707070;
    border-color: #808080;
    color: #b7dc1a;
    font-weight: 900;
}

.quick-tool-panel {
    margin-top: 1rem;
}

.color-palette {
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: .5rem;
}

.color-palette button {
    width: 34px;
    height: 34px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
}

.article-row {
    padding: 0;
    overflow: hidden;
}

.article-row-checkbox {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-left: .75rem;
    accent-color: var(--brand);
    cursor: pointer;
}

.article-row-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 0;
    background: transparent;
    color: inherit;
    padding: .75rem;
    text-align: left;
    cursor: pointer;
}

.article-row-content > span {
    min-width: 0;
}

.unused-article-selection {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .55rem .75rem;
    padding: .7rem;
    border: 1px solid rgba(211, 145, 24, .65);
    background: rgba(211, 145, 24, .08);
}

.unused-article-selection label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
}

.unused-article-selection label input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
}

.unused-article-selection .selection-count {
    color: var(--muted);
    font-size: .78rem;
    text-align: right;
}

.unused-article-selection .button {
    grid-column: 1 / -1;
    width: 100%;
}

.menu-tool-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 20, 20, .58);
    backdrop-filter: blur(2px);
}

.menu-tool-dialog {
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 16px;
    border: 1px solid #eeeeee;
    border-radius: 6px;
    background: #505151;
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

.menu-tool-dialog-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.menu-tool-dialog-title h2 {
    margin: 0;
    font-size: 1.15rem;
}

.menu-tool-dialog-title span {
    display: block;
    margin-top: 3px;
    color: #d8e7ef;
    font-size: .86rem;
}

.dialog-close {
    width: 34px;
    height: 34px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #3c3e3e;
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.modern-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
}

.modern-color-swatch {
    min-height: 58px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 7px;
    box-shadow: inset 0 -26px 36px rgba(0, 0, 0, .18);
}

.modern-color-swatch span {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .48);
    color: #ffffff;
    font-weight: 800;
    font-size: .72rem;
}

.modern-color-swatch.selected {
    outline: 3px solid #9bd23c;
    outline-offset: 2px;
    border-color: #ffffff;
}

.custom-color-row {
    margin-top: 14px;
    display: grid;
    grid-template-columns: auto 72px 1fr;
    gap: 12px;
    align-items: center;
}

.custom-color-row label {
    margin: 0;
    color: #ffffff;
    font-weight: 800;
}

.custom-color-row input[type="color"] {
    width: 72px;
    height: 40px;
    padding: 3px;
    border: 1px solid #cccccc;
    background: #303232;
}

.color-preview-chip {
    height: 40px;
    border: 1px solid #ffffff;
    border-radius: 5px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.font-tool-grid {
    display: grid;
    grid-template-columns: 2fr 120px 120px;
    gap: 12px;
    align-items: end;
}

.font-tool-grid label,
.font-toggle-row label {
    color: #ffffff;
    font-weight: 800;
}

.font-tool-grid select,
.font-tool-grid input[type="number"],
.font-tool-grid input[type="color"] {
    margin-top: 5px;
}

.font-tool-grid input[type="color"] {
    height: 40px;
    padding: 3px;
}

.font-toggle-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid #6d6f6f;
    border-radius: 5px;
    background: #444646;
}

.font-toggle-row input {
    width: auto;
    margin-right: 6px;
}

.font-preview-card {
    margin-top: 14px;
    min-height: 96px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid #808080;
    border-radius: 6px;
    background: #d6d1c8;
    color: #000000;
    line-height: 1.15;
}

.font-preview-card span {
    margin-top: 6px;
    font-size: .78em;
    opacity: .76;
}

.builder-panel {
    position: sticky;
    top: 80px;
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.panel-section {
    display: grid;
    gap: .8rem;
}

.panel-section.two {
    grid-template-columns: 1fr 1fr;
}

.report-time-clear {
    min-height: 0;
    padding: .35rem .6rem;
    white-space: nowrap;
}

.report-period-toolbar {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--line);
    background: var(--panel);
}

.report-period-toolbar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.report-period-toolbar-heading > span {
    display: grid;
    gap: .2rem;
    min-width: max-content;
}

.report-period-toolbar-heading small,
.report-period-hint {
    opacity: .72;
    line-height: 1.35;
}

.report-date-shortcuts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.report-date-shortcut {
    min-height: 30px;
    padding: .35rem .65rem;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.report-date-shortcut:hover:not(:disabled),
.report-date-shortcut.active {
    border-color: var(--accent);
    color: var(--accent);
}

.report-date-shortcut:disabled {
    cursor: default;
    opacity: .55;
}

.report-period-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(125px, 1fr)) auto auto;
    align-items: end;
    gap: .55rem;
}

.report-period-fields > label {
    display: grid;
    gap: .35rem;
}

.report-period-fields > label > span {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .78;
}

.report-period-apply {
    min-height: 42px;
    white-space: nowrap;
}

.report-profile-panel {
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
}

.profile-scope-hint {
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

.report-run-panel {
    position: sticky;
    top: 72px;
    z-index: 2;
    padding: .85rem;
    border: 1px solid rgba(161, 193, 22, .55);
    border-radius: var(--radius);
    background: var(--bg-2);
    box-shadow: none;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.report-column-groups {
    display: grid;
    gap: 1rem;
}

.report-column-group {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.report-column-group + .report-column-group {
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}

.report-column-group-heading {
    display: grid;
    gap: .12rem;
}

.report-column-group-heading strong {
    color: var(--brand);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.report-column-group-heading small {
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.25;
}

.report-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.report-column-option {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: center;
    gap: .48rem;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: .48rem .55rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.report-column-option:hover,
.report-column-option:focus-within {
    border-color: color-mix(in srgb, var(--brand) 65%, var(--line));
    background: color-mix(in srgb, var(--brand) 6%, var(--panel-2));
}

.report-column-option.selected {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 11%, var(--panel-2));
}

.report-column-option input {
    position: relative;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 1px solid #8f9697;
    border-radius: 0;
    background: var(--bg);
    cursor: pointer;
}

.report-column-option input:checked {
    border-color: var(--brand);
    background: var(--brand);
}

.report-column-option input:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 6px;
    height: 3px;
    border-left: 2px solid #1f1f1f;
    border-bottom: 2px solid #1f1f1f;
    transform: rotate(-45deg);
}

.report-column-option span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.15;
}

.report-group-chips {
    max-height: 15rem;
    overflow-y: auto;
    padding-right: .25rem;
}

.report-grouping-details {
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(13, 18, 17, .35);
}

.report-grouping-details summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .75rem;
    align-items: center;
    cursor: pointer;
    list-style-position: outside;
}

.report-grouping-details summary span {
    font-weight: 700;
}

.report-grouping-details summary small {
    max-width: 15rem;
    overflow: hidden;
    color: var(--muted);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-grouping-details[open] summary {
    margin-bottom: .8rem;
}

.report-auto-grouping {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    margin: 0;
    padding: .7rem;
    border: 1px solid rgba(161, 193, 22, .32);
    border-radius: .55rem;
    background: rgba(161, 193, 22, .07);
}

.report-auto-grouping input {
    width: auto;
    margin-top: .15rem;
}

.report-auto-grouping span {
    display: grid;
    gap: .2rem;
}

.report-auto-grouping small {
    color: var(--muted);
    line-height: 1.35;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(13, 18, 17, .88);
    color: var(--text);
    cursor: pointer;
}

.chip input {
    width: auto;
}

.result-panel {
    min-height: 520px;
    padding: 1rem;
    scroll-margin-top: 5.25rem;
}

.notice, .warning-list {
    border: 1px solid rgba(242, 184, 75, .35);
    background: rgba(242, 184, 75, .12);
    border-radius: var(--radius);
    color: #ffe1a6;
    padding: .8rem;
    margin-bottom: 1rem;
}

.ai-compare {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .025);
    padding: .85rem;
    margin-bottom: 1rem;
}

.ai-run-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .85rem;
}

.ai-run-card {
    display: grid;
    gap: .2rem;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0f171a;
    color: var(--text);
    padding: .8rem;
}

.ai-run-card span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ai-run-card strong {
    font-size: 1.05rem;
}

.ai-run-card small {
    color: var(--muted);
}

.ai-run-card.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px rgba(139, 213, 60, .35);
}

.ai-compare-table {
    overflow: auto;
}

.ai-compare-table table {
    width: 100%;
    min-width: 720px;
}

.ai-compare-table th,
.ai-compare-table td {
    border-bottom: 1px solid var(--line);
    padding: .55rem;
    vertical-align: top;
}

.ai-compare-table td.diff {
    background: rgba(242, 184, 75, .11);
    color: #ffe1a6;
}

.empty {
    min-height: 380px;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--muted);
}

.result-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.result-toolbar span {
    margin-left: .6rem;
    color: var(--muted);
}

.badge {
    display: inline-flex;
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .78rem;
    font-weight: 800;
}

.badge.warn {
    color: #1b1300;
    background: var(--warn);
}

.chart-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem;
}

.chart-card-header h2 {
    margin: 0;
}

.chart-control-groups {
    display: grid;
    justify-items: end;
    gap: .5rem;
    min-width: 0;
}

.chart-period-shortcuts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.chart-period-shortcut {
    min-height: 31px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #485154;
    color: var(--text);
    padding: .28rem .65rem;
    font-size: .78rem;
    font-weight: 800;
}

.chart-period-shortcut:hover:not(:disabled),
.chart-period-shortcut.active {
    border-color: var(--brand);
    background: rgba(139, 213, 60, .18);
    color: var(--brand);
}

.chart-period-shortcut:disabled {
    cursor: not-allowed;
    opacity: .35;
}

.chart-variants {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.chart-variant {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #10191d;
    color: var(--text);
    padding: .35rem .65rem;
    font-weight: 800;
}

.chart-variant.active {
    border-color: var(--brand);
    background: rgba(139, 213, 60, .16);
    color: var(--brand);
}

.print-report-header,
.print-report-footer {
    display: none;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

@media (max-width: 720px) {
    .report-period-toolbar-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .report-date-shortcuts {
        justify-content: flex-start;
    }

    .report-period-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .chart-control-groups {
        justify-items: stretch;
    }

    .chart-period-shortcuts,
    .chart-variants {
        justify-content: flex-start;
    }
}

.report-table-wrap {
    max-height: min(62vh, 760px);
}

.table-reset-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th, td {
    padding: .72rem .8rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

th {
    position: sticky;
    top: 0;
    background: #202a2f;
    color: #dce8e6;
    font-size: .78rem;
    text-transform: uppercase;
}

.report-table .table-heading-row th {
    top: 0;
    z-index: 3;
    height: 42px;
    padding: 0;
}

.table-sort-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    padding: .65rem .8rem;
    font: inherit;
    font-weight: 800;
    text-align: left;
    text-transform: inherit;
}

.table-sort-button:hover,
.table-sort-button:focus-visible {
    background: rgba(161, 193, 22, .14);
    color: #ffffff;
}

.table-sort-button .mud-icon-root {
    flex: 0 0 auto;
    color: var(--brand);
    font-size: 1rem;
}

.report-table .table-filter-row th {
    top: 42px;
    z-index: 2;
    padding: .38rem .5rem;
    background: #182226;
    text-transform: none;
}

.table-filter-field {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 128px;
    height: 32px;
    border: 1px solid #586267;
    background: #3f4040;
    padding: 0 .45rem;
}

.table-filter-field:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px rgba(161, 193, 22, .25);
}

.table-filter-field .mud-icon-root {
    flex: 0 0 auto;
    color: #aeb7ba;
    font-size: .95rem;
}

.table-filter-field input {
    width: 100%;
    min-width: 82px;
    height: 30px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    padding: 0;
    font-size: .78rem;
}

.table-filter-field input::placeholder {
    color: #aeb7ba;
    opacity: 1;
}

.table-empty-row {
    height: 96px;
    color: var(--muted);
    text-align: center;
}

tfoot td {
    background: #3F4040;
    font-weight: 900;
}

.skeleton {
    height: 220px;
    border-radius: var(--radius);
    background: #545555;
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite linear;
}

.skeleton.short {
    height: 80px;
    margin-top: 1rem;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

#blazor-error-ui {
    background: #2a1800;
    color: #ffe1a6;
    bottom: 0;
    display: none;
    left: 0;
    padding: .75rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
}

.user-area {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.user-area span {
    color: var(--text);
    font-weight: 800;
}

.user-area form {
    margin: 0;
}

.button.ghost {
    border-color: var(--line);
    background: transparent;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: var(--bg);
}

.login-card {
    width: min(100%, 440px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: clamp(1.25rem, 4vw, 2rem);
    box-shadow: none;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.login-brand img {
    width: 86px;
    height: 54px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    padding: .35rem;
}

.login-brand h1 {
    margin: 0;
    font-size: 2rem;
}

.login-copy {
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.login-form {
    display: grid;
    gap: .9rem;
}

.echart-host {
    width: 100%;
    min-height: 360px;
}

.chart-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.update-center-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .2rem .55rem;
    color: var(--muted);
    font-weight: 800;
}

.status-pill.ok {
    border-color: rgba(161, 193, 22, .65);
    color: var(--brand);
}

.status-pill.danger {
    border-color: rgba(181, 27, 27, .75);
    color: #ffc6c6;
}

.muted-row {
    opacity: .62;
}

.row-actions {
    white-space: nowrap;
}

.row-actions .button {
    padding: .45rem .65rem;
    margin-right: .3rem;
}

.log-list {
    display: grid;
    gap: .35rem;
}

.log-row {
    display: grid;
    grid-template-columns: 90px 110px 160px minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: .45rem 0;
    color: var(--muted);
}

.log-row strong {
    color: var(--text);
}

.update-box {
    display: grid;
    gap: .45rem;
    max-width: 620px;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .04);
    padding: 1rem;
}

.login-form label span {
    display: block;
    margin-bottom: .35rem;
}

.check-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .1rem 0;
}

.check-row input {
    width: auto;
}

.check-row span {
    margin: 0;
}

.login-button {
    width: 100%;
}

.alert-error {
    border: 1px solid rgba(255, 107, 119, .5);
    border-radius: var(--radius);
    background: rgba(255, 107, 119, .12);
    color: #ffd3d8;
    padding: .85rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-scrollable nav {
        display: flex;
    }

    .top-row {
        display: none;
    }

    .report-layout, .master-layout, .master-columns, .pos-editor, .cards {
        grid-template-columns: 1fr;
    }

    .menu-import-start-grid,
    .menu-import-url-row {
        grid-template-columns: 1fr;
    }

    .builder-panel, .master-sidebar, .pos-control-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .content {
        padding: 1rem;
    }

    .page-header, .result-toolbar {
        display: grid;
    }

    .panel-section.two {
        grid-template-columns: 1fr;
    }

    .report-period-fields {
        grid-template-columns: 1fr;
    }

    .article-form,
    .price-strip {
        grid-template-columns: 1fr;
    }

}

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    :root {
        color-scheme: light;
    }

    body.print-report-mode {
        background: #ffffff;
        color: #111820;
    }

    body.print-report-mode .sidebar,
    body.print-report-mode .top-row,
    body.print-report-mode .page-header,
    body.print-report-mode .builder-panel,
    body.print-report-mode .result-toolbar,
    body.print-report-mode .report-period-toolbar,
    body.print-report-mode .notice,
    body.print-report-mode .table-filter-row,
    body.print-report-mode #blazor-error-ui {
        display: none !important;
    }

    body.print-report-mode .app-shell,
    body.print-report-mode .main,
    body.print-report-mode .content,
    body.print-report-mode .report-layout,
    body.print-report-mode .result-panel {
        display: block;
        min-height: auto;
        width: 100%;
        padding: 0;
        margin: 0;
        background: #ffffff;
        border: 0;
        color: #111820;
    }

    body.print-report-mode .report-print-area {
        display: block;
    }

    body.print-report-mode .print-report-header,
    body.print-report-mode .print-report-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        color: #111820;
    }

    body.print-report-mode .print-report-header {
        border-bottom: 2px solid #A1C116;
        padding-bottom: .7rem;
        margin-bottom: .9rem;
    }

    body.print-report-mode .print-report-header h1 {
        color: #111820;
        font-size: 22pt;
        line-height: 1.1;
        margin: 0 0 .25rem;
    }

    body.print-report-mode .print-report-header p {
        color: #4b5860;
        margin: 0;
    }

    body.print-report-mode .print-report-header img {
        width: 105px;
        height: auto;
        object-fit: contain;
    }

    body.print-report-mode .print-report-footer {
        border-top: 1px solid #ccd5d8;
        margin-top: .8rem;
        padding-top: .5rem;
        color: #4b5860;
        font-size: 9pt;
    }

    body.print-report-mode .eyebrow {
        color: #4f8f16;
        font-size: 8pt;
        margin: 0 0 .2rem;
    }

    body.print-report-mode .chart-card,
    body.print-report-mode .table-wrap,
    body.print-report-mode .warning-list {
        background: #ffffff;
        border: 1px solid #ccd5d8;
        color: #111820;
        break-inside: avoid;
    }

    body.print-report-mode .chart-card {
        padding: .7rem;
        margin-bottom: .8rem;
    }

    body.print-report-mode .chart-card h2 {
        color: #111820;
        margin-bottom: .5rem;
    }

    body.print-report-mode .table-wrap {
        overflow: visible;
    }

    body.print-report-mode table {
        min-width: 0;
        width: 100%;
        font-size: 8.5pt;
        page-break-inside: auto;
    }

    body.print-report-mode tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    body.print-report-mode th,
    body.print-report-mode td {
        padding: .32rem .38rem;
        border-bottom: 1px solid #d7dfe2;
        color: #111820;
        white-space: normal;
    }

    body.print-report-mode th {
        position: static;
        background: #eef3f4;
        color: #111820;
    }

    body.print-report-mode .table-sort-button {
        min-height: 0;
        padding: 0;
        color: #111820;
        pointer-events: none;
    }

    body.print-report-mode .table-sort-button .mud-icon-root {
        display: none;
    }

    body.print-report-mode tfoot td {
        background: #f3f7f8;
        color: #111820;
    }
}

.import-article-cell {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.import-article-cell input {
    min-width: 16rem;
    flex: 1;
}

.mini-icon-button.import-expand-button {
    width: 1.7rem;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid #7f8a90;
    background: #3f4446;
    color: #fff;
    font-weight: 700;
}

.import-block-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0 .45rem;
    border: 1px solid #a1c116;
    background: rgba(161, 193, 22, .14);
    color: #e8ff75;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.import-components-row td {
    background: rgba(0, 0, 0, .12);
}

.import-component-tree {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .45rem 0 .45rem .2rem;
}

.import-component-row {
    display: grid;
    grid-template-columns: 1rem 5.8rem minmax(16rem, 1fr) auto minmax(5rem, auto) minmax(11rem, auto) minmax(4rem, auto);
    align-items: center;
    gap: .55rem;
    margin-left: calc(var(--level) * 1.35rem);
    padding: .45rem .55rem;
    border: 1px solid rgba(161, 193, 22, .62);
    background: #424747;
}

.import-component-connector {
    width: .9rem;
    height: 1px;
    border-top: 2px solid #a1c116;
}

.warehouse-preview-table-wrap {
    overflow-x: auto;
}

.warehouse-preview-table {
    min-width: 1120px;
}

.warehouse-preview-table td {
    vertical-align: top;
}

.warehouse-preview-table td:nth-child(2) input {
    min-width: 18rem;
}

.warehouse-preview-table td:nth-child(4) {
    display: grid;
    grid-template-columns: 5rem 7rem;
    gap: .35rem;
}

.warehouse-preview-table small,
.warehouse-price-source {
    display: block;
    margin-top: .25rem;
}

.warehouse-strategy-badge,
.warehouse-price-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(161, 193, 22, .72);
    background: rgba(161, 193, 22, .14);
    color: #e8ff75;
    font-size: .76rem;
    font-weight: 800;
    padding: .22rem .42rem;
}

.warehouse-price-source {
    max-width: 26rem;
    overflow-wrap: anywhere;
}

.recipe-preview-tree {
    display: grid;
    gap: .6rem;
    margin-top: .65rem;
}

.recipe-preview-card {
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .1);
    padding: .65rem;
}

.recipe-root {
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr) auto;
    align-items: center;
    gap: .55rem;
    border-left: 4px solid var(--brand);
    background: var(--panel-2);
    padding: .65rem .75rem;
}

.recipe-root span,
.recipe-branch small,
.recipe-warehouse-node small {
    color: var(--muted);
}

.recipe-branch {
    display: grid;
    grid-template-columns: 2rem minmax(16rem, 1fr) minmax(10rem, auto) minmax(12rem, auto) minmax(14rem, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .65rem .65rem .1rem 1rem;
}

.recipe-connector {
    height: 1.4rem;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
}

.recipe-branch label {
    display: grid;
    grid-template-columns: auto 6rem;
    align-items: center;
    gap: .35rem;
}

@media (max-width: 1050px) {
    .recipe-branch {
        grid-template-columns: 1.5rem 1fr;
    }

    .recipe-branch > :not(.recipe-connector) {
        grid-column: 2;
    }
}

.import-component-type {
    color: #cfe2e8;
    font-size: .78rem;
    font-weight: 700;
}