.basar-app {
		font-family: 'Segoe UI', sans-serif;
		color: #333;

		display: flex;
		flex-direction: column;
		align-items: center;
        max-width: 100%;
        padding: 0 12px;
	}

	.basar-app h1,
	.basar-app h2 {
		margin: 0.3em;
		text-align: center;
	}

	.basar-app label {
		display: block;
		margin-top: 1em;
		font-weight: bold;
	}

	.basar-app #listDescription,
	.basar-app .instructions {
		background: #ecf0f1;
		border-radius: 5px;
		text-align: center;
		color: #7f8c8d;
	}

	.basar-app #listDescription {
		width: 300px;
		max-width: 90%;
		padding: 1em;
		margin-bottom: 0.5em;
		font-size: 0.95em;
	}

	.basar-app .instructions {
		padding: 1em;
		margin: 1em 0;
		font-size: 0.9em;
	}

	.basar-app .list-controls {
		margin-bottom: 1em;
	}

	.basar-app #listSelector {
		width: 300px;
		max-width: 90%;
		padding: 0.6em;
		border-radius: 4px;
	}

	.basar-app input[type="text"],
	.basar-app input[type="number"] {
		width: 300px;
		max-width: 90%;
		padding: 0.6em;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 1em;
		margin-bottom: 0.5em;
	}

	.basar-app #newListNameInput {
		width: 100%;
		padding: 0.6em;
		margin-bottom: 1em;
	}

	.basar-app table {
		border-collapse: collapse;
		width: 90%;
		background: white;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		overflow: hidden;
		margin: 1em 0;
	}

	.basar-app th,
	.basar-app td {
		border-bottom: 1px solid #e0e0e0;
		padding: 0.8em;
		text-align: left;
		vertical-align: middle;
	}

	.basar-app th {
		background: #3498db;
		color: white;
	}

	.basar-app th:last-child,
	.basar-app td:last-child {
		text-align: center;
	}

	.basar-app input.table-input {
		width: 100%;
		padding: 0.6em;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 1em;
		margin: 0;
	}

	.basar-app input.table-input:focus {
		border-color: #3498db;
		outline: none;
	}

	.basar-app input.table-input[data-field="preis"] {
		text-align: right;
	}

	.basar-app button,
	.basar-app a.mailto {
		background: #3498db;
		color: white;
		padding: 0.8em 1.2em;
		border: none;
		border-radius: 5px;
		font-size: 1em;
        font-family: inherit;
        line-height: 1;
        min-height: 44px;
		cursor: pointer;
		margin: 0.5em;
		text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
		transition: background 0.3s;
	}

	.basar-app button:hover,
	.basar-app a.mailto:hover {
		background: #2980b9;
	}

	.basar-app .danger-action {
		background: #e74c3c;
	}

	.basar-app a.mailto.is-disabled {
		pointer-events: none;
		opacity: 0.7;
		background: #95a5a6;
	}

    /* Ensure identical height for the three main action controls */
    .basar-app #downloadBtn,
    .basar-app #mailBtn,
    .basar-app #resetBtn {
        box-sizing: border-box;
        height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

	/* Modal Popup Styles */
	.basar-app .modal-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		animation: saleslistFadeIn 0.3s;
	}

	.basar-app .modal {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		background: white;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		padding: 2em;
		max-width: 400px;
		width: 90%!important;
        margin-left:unset!important;
		z-index: 1001;
		animation: saleslistSlideIn 0.3s;
	}

	.basar-app .modal h3 {
		margin: 0 0 1em 0;
		color: #333;
		font-size: 1.3em;
	}

	.basar-app .modal p {
		margin: 0 0 1.5em 0;
		color: #666;
		line-height: 1.5;
	}

	.basar-app .modal-buttons {
		display: flex;
		gap: 0.5em;
		justify-content: flex-end;
	}

	.basar-app .modal-btn {
		padding: 0.6em 1.2em;
		border: none;
		border-radius: 5px;
		font-size: 0.9em;
		cursor: pointer;
		transition: background 0.3s;
	}

	.basar-app .modal-btn.primary {
		background: #3498db;
		color: white;
	}

	.basar-app .modal-btn.primary:hover {
		background: #2980b9;
	}

	.basar-app .modal-btn.secondary {
		background: #95a5a6;
		color: white;
	}

	.basar-app .modal-btn.secondary:hover {
		background: #7f8c8d;
	}

	.basar-app .modal-btn.danger {
		background: #e74c3c;
		color: white;
	}

	.basar-app .modal-btn.danger:hover {
		background: #c0392b;
	}

	.basar-app .modal-btn.cancel {
		background: #95a5a6;
		color: white;
	}

	.basar-app .modal-btn.cancel:hover {
		background: #7f8c8d;
	}

    /* Row action button (clear row) */
    .basar-app .clear-btn {
        background: #f39c12;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 0.4em 0.8em;
        font-size: 0.85em;
        cursor: pointer;
        transition: background 0.3s;
        margin: 0;
    }

    .basar-app .clear-btn:hover {
        background: #d68910;
    }

	/* Status Message Styles */
	.basar-app .status-message {
		background: #f39c12;
		color: white;
		padding: 0.5em 1em;
		border-radius: 4px;
		font-size: 0.9em;
		margin: 0.5em;
		display: none;
		text-align: center;
		animation: saleslistFadeIn 0.3s;
	}

	/* Disabled Button Styles */
	.basar-app button:disabled {
		background: #95a5a6 !important;
		cursor: not-allowed;
		opacity: 0.7;
	}

	.basar-app button:disabled:hover {
		background: #95a5a6 !important;
	}

	@keyframes saleslistFadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes saleslistSlideIn {
		from {
			transform: translate(-50%, -60%);
			opacity: 0;
		}

		to {
			transform: translate(-50%, -50%);
			opacity: 1;
		}
	}

    /* Row add UI hidden (functions kept) */
    .basar-app #addRowBtn {
        display: none !important;
    }