* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: #f4f2ea;
	min-height: 100vh;
	color: #333;
}

.global-notice {
	z-index: 2000;
	background: #fbbf24;
	color: #1f2937;
	padding: 10px 16px;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.4;
	border-bottom: 2px solid #b45309;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.global-notice strong { color: #000; }

.site-footer {
	text-align: center;
	padding: 24px 16px 28px;
	margin-top: 40px;
	color: #555;
	font-size: 0.9em;
	border-top: 1px solid rgba(0,0,0,0.08);
}
.site-footer strong { color: #222; }

.container {
	width: 100%;
	margin: 0;
	padding: 20px;
	max-width: none;
}

header {
	text-align: center;
	color: #333;
	margin-bottom: 20px;
	padding: 30px 0 20px;
}

header h1 {
	font-size: 3.5em;
	margin-bottom: 10px;
	color: #222;
}

header p {
	font-size: 1.2em;
	color: #666;
	max-width: 600px;
	margin: 0 auto;
}

.top-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0 0 30px;
	padding: 0;
	background: transparent;
}

.nav-tab {
	flex: 1;
	padding: 14px 20px;
	background: white;
	border: 2px solid #222;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 700;
	font-size: 1em;
	color: #222;
	box-shadow: 4px 4px 0 #222;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
}

.nav-tab:hover { background: #f4f2ea; transform: translate(2px, 2px); box-shadow: 2px 2px 0 #222; }
.nav-tab:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #222; }
.nav-tab.active { background: #222; color: white; }
.nav-tab.not-ready { opacity: 0.6; }
.nav-tab.not-ready:hover { background: #fef3c7; color: #92400e; opacity: 1; }

.share-banner-actions { display: flex; align-items: center; gap: 18px; }
.banner-link {
	background: transparent;
	border: none;
	padding: 0;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.banner-link:hover { text-decoration: underline; }
.banner-link:hover .banner-link-arrow { transform: translateX(3px); }
.banner-link-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

.main-content {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

.controls-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.panel {
	background: white;
	border: 2px solid #222;
	border-radius: 6px;
	padding: 20px;
	box-shadow: 4px 4px 0 #222;
}

.panel h3 {
	margin-bottom: 15px;
	color: #444;
	font-size: 1.2em;
}

.btn {
	padding: 12px 24px;
	border: 2px solid #222;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 4px 4px 0 #222;
}
.btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #222; }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 #222; }

.btn-primary {
	background: #222;
	color: white;
	width: 100%;
	font-size: 18px;
	padding: 15px;
}

.btn-primary:hover:not(:disabled) {
	background: #000;
}

.btn-primary:disabled {
	background: #9ca3af;
	border-color: #6b7280;
	color: #f1f1f1;
	cursor: not-allowed;
	box-shadow: 4px 4px 0 #6b7280;
}

.btn-secondary {
	background: #28a745;
	color: white;
}
.btn-secondary:hover:not(:disabled) { background: #218838; }

.btn-danger {
	background: #dc3545;
	color: white;
	padding: 8px 16px;
	font-size: 14px;
}
.btn-danger:hover:not(:disabled) { background: #c82333; }

.btn-small {
	padding: 10px 20px;
	font-size: 14px;
	margin: 0;
	min-width: 120px;
}

.visualization-panel {
	background: white;
	border: 2px solid #222;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 4px 4px 0 #222;
	position: relative;
	width: 100%;
}

.visualization-content {
	display: flex;
	height: 80vh;
	min-height: 600px;
}

#threejs-container, #truck-threejs-container {
	flex: 1;
	position: relative;
	background: linear-gradient(45deg, #f0f2f5, #e9ecef);
}

.viewer-corner-controls {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	gap: 8px;
	z-index: 10;
}
.viewer-toggle-btn {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: white;
	border: 2px solid #222;
	color: #222;
	cursor: pointer;
	box-shadow: 2px 2px 0 #222;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.viewer-toggle-btn:hover { background: #f4f2ea; transform: translate(1px, 1px); box-shadow: 1px 1px 0 #222; }
.viewer-toggle-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #222; }
.viewer-toggle-btn.active {
	background: #222;
	color: #fff;
}

.legend-panel {
	width: 280px;
	background: #f8f9fa;
	border-left: 1px solid #e1e5e9;
	padding: 20px;
	overflow-y: auto;
}

.legend-panel h4 {
	margin: 0 0 20px 0;
	color: #333;
	font-size: 1.1em;
	text-align: center;
	border-bottom: 2px solid #222;
	padding-bottom: 10px;
}

.legend-placeholder {
	text-align: center;
	color: #666;
	font-style: italic;
	padding: 40px 20px;
}

.legend-item {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	padding: 10px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e1e5e9;
}

.color-cube {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	margin-right: 12px;
	border: 2px solid #333;
	flex-shrink: 0;
}

.legend-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.legend-name { font-weight: 600; color: #333; margin-bottom: 4px; }
.legend-details { font-size: 0.85em; color: #666; line-height: 1.3; }

.placeholder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;
	color: #666;
	padding: 20px;
}


.placeholder h3 { font-size: 2em; margin-bottom: 20px; color: #222; }
.placeholder p { font-size: 1.1em; max-width: 500px; line-height: 1.5; }

.strategy-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}

.strategy-tab {
	flex: 1;
	padding: 10px;
	background: white;
	border: 2px solid #222;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 700;
	color: #222;
	box-shadow: 3px 3px 0 #222;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.strategy-tab.active { background: #222; color: white; transform: translate(3px, 3px); box-shadow: 0 0 0 #222; }
.strategy-tab:hover:not(.active) { background: #f4f2ea; transform: translate(1px, 1px); box-shadow: 2px 2px 0 #222; }

.truck-selector-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 15px;
	padding-top: 12px;
	border-top: 1px solid #e1e5e9;
}
.truck-selector-row .truck-selector-label { font-weight: 600; color: #555; }
.truck-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.truck-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	background: #f8f9fa;
	border: 2px solid #222;
	border-radius: 4px;
	cursor: pointer;
	text-align: left;
	font: inherit;
	box-shadow: 3px 3px 0 #222;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.truck-tile:hover:not(.active) { background: #f4f2ea; transform: translate(1px, 1px); box-shadow: 2px 2px 0 #222; }
.truck-tile.active { background: #fff; transform: translate(3px, 3px); box-shadow: 0 0 0 #222; }
.truck-tile .truck-tile-label { font-size: 0.85em; font-weight: 600; color: #333; }
.truck-tile .truck-tile-meta { font-size: 0.75em; color: #666; }
.truck-tile svg { display: block; width: 100%; height: auto; background: #ffffff; border-radius: 4px; }

.strategy-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 15px;
}

.pallet-details { display: flex; flex-direction: column; gap: 8px; }

.pallet-detail-list { display: flex; flex-direction: column; gap: 8px; position: relative; }
.pallet-detail-list.has-fade::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 85%, #fff 100%);
	pointer-events: none;
	border-radius: 0 0 6px 6px;
}

.pallet-detail-item {
	background: #e9ecef;
	padding: 10px;
	border-radius: 6px;
	font-size: 0.9em;
	border-left: 3px solid #222;
}

.pallet-expand-btn, .box-expand-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	margin-top: 4px;
	background: white;
	border: 2px solid #222;
	border-radius: 4px;
	color: #222;
	cursor: pointer;
	font-size: 0.95em;
	font-weight: 600;
	box-shadow: 3px 3px 0 #222;
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.pallet-expand-btn:hover, .box-expand-btn:hover { background: #f4f2ea; transform: translate(1px, 1px); box-shadow: 2px 2px 0 #222; }
.pallet-expand-btn:active, .box-expand-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #222; }
.pallet-expand-btn .arrow, .box-expand-btn .arrow {
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	transition: transform 0.2s;
}
.pallet-expand-btn[data-expanded="true"] .arrow,
.box-expand-btn[data-expanded="true"] .arrow { transform: rotate(180deg); }

.load-section { display: flex; justify-content: center; padding: 10px 0; }

.use-solution-row {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #e1e5e9;
}

.pallet-config-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.pallet-overhang-row {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
}
.pallet-overhang-row label {
	font-weight: 600;
	color: #555;
	margin-bottom: 8px;
}
.pallet-overhang-row select {
	padding: 12px;
	border: 2px solid #222;
	border-radius: 4px;
	font-size: 15px;
	background: white;
}
.pallet-overhang-row select:focus { outline: none; box-shadow: 2px 2px 0 #222; }
.pallet-overhang-row .help-text {
	margin-top: 6px;
	color: #777;
	font-size: 0.85em;
	line-height: 1.4;
}

.config-item { display: flex; flex-direction: column; }
.config-item label { margin-bottom: 8px; font-weight: 600; color: #555; }

.config-item input, .truck-preset-row select {
	padding: 12px;
	border: 2px solid #222;
	border-radius: 4px;
	font-size: 16px;
	background: white;
}
.config-item input:focus, .truck-preset-row select:focus {
	outline: none;
	box-shadow: 2px 2px 0 #222;
}

.truck-preset-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
}
.truck-preset-row label { font-weight: 600; color: #555; }
.truck-preset-row select { flex: 1; min-width: 0; max-width: 100%; }

.box-header { margin-bottom: 20px; }
.box-header h3 { margin: 0; }

.box-table-container { overflow-x: auto; position: relative; }
.box-table-container.has-fade::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 85%, #fff 100%);
	pointer-events: none;
}
.box-row-extra { display: none; }

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

.box-table th, .box-table td {
	padding: 12px 8px;
	text-align: left;
	border-bottom: 1px solid #e1e5e9;
}

.box-table th {
	background-color: #f8f9fa;
	font-weight: 600;
	color: #555;
	position: sticky;
	top: 0;
}

.box-table input {
	width: 100%;
	padding: 8px;
	border: 1px solid #e1e5e9;
	border-radius: 4px;
	font-size: 14px;
}

.box-table input:focus { outline: none; border-color: #222; }

.box-table .btn-danger {
	padding: 6px 12px;
	font-size: 12px;
	white-space: nowrap;
}

.sku-input-wrapper { display: flex; align-items: center; gap: 8px; }
.box-icon { font-size: 16px; flex-shrink: 0; }

.sku-input-wrapper input {
	flex: 1;
	min-width: 140px;
	font-weight: 600;
	color: #222;
}

.box-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #e1e5e9;
}

.stat-item {
	text-align: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
}

.stat-value { font-size: 2em; font-weight: bold; color: #222; }
.stat-label { font-size: 0.9em; color: #666; margin-top: 5px; }

.loading {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	color: white;
}

.spinner {
	width: 360px;
	max-width: 80vw;
	height: 8px;
	background: rgba(255,255,255,0.2);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	margin-bottom: 24px;
}
.spinner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 40%;
	background: #fff;
	border-radius: 4px;
	animation: spinner-slide 1.4s ease-in-out infinite;
	will-change: transform;
}

@keyframes spinner-slide {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

.modal {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	border: 2px solid #222;
	border-radius: 6px;
	padding: 30px;
	max-width: 500px;
	width: 90%;
	box-shadow: 6px 6px 0 #222;
}

.modal-content h2 { margin-bottom: 15px; color: #222; }
.modal-content p { margin-bottom: 15px; color: #555; }

.share-url-row {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.share-url-row input {
	flex: 1;
	padding: 10px;
	border: 2px solid #222;
	border-radius: 4px;
	font-size: 14px;
	font-family: monospace;
}

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.readonly .btn-primary,
.readonly #loadBtn,
.readonly #loadTruckBtn,
.readonly #confirmShareBtn,
.readonly #useSolutionBtn { display: none !important; }

.readonly #shareBanner .btn-primary { display: inline-block !important; }

.readonly input,
.readonly select { pointer-events: none; background: #f4f4f4; }

.readonly .btn-danger,
.readonly .box-actions { display: none !important; }

@media (max-width: 768px) {
	html, body { overflow-x: hidden; max-width: 100%; }
	.container { padding: 10px; max-width: 100%; overflow-x: hidden; }
	header h1 { font-size: 2.5em; }
	header p { font-size: 1em; }
	.panel { padding: 15px; }
	.visualization-content { flex-direction: column; height: auto; min-height: 400px; }
	#threejs-container, #truck-threejs-container { height: 60vh; min-height: 400px; }
	.legend-panel { width: 100%; border-left: none; border-top: 1px solid #e1e5e9; max-height: 200px; }
	.pallet-config-row { grid-template-columns: 1fr; gap: 15px; }
	.truck-preset-row { flex-direction: column; align-items: stretch; gap: 8px; }
	.truck-preset-row select { width: 100%; }
	.box-table { font-size: 12px; }
	.box-table th, .box-table td { padding: 8px 4px; }
	.top-nav { max-width: none; }
}