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

		:root {
			--bg: #FDF7E4;
			--bg-secondary: #FFFFFF;
			--text-primary: #1A1A1A;
			--text-secondary: #555555;
			--border: #1A1A1A;
			--accent: #FF6B35;
			--accent-secondary: #FFD23F;
			--accent-green: #2DD881;
			--accent-blue: #4ECDC4;
			--accent-purple: #9B5DE5;
			--accent-pink: #F15BB5;
			--accent-gold: #FFB800;
			--accent-red: #FF3B3B;
			--shadow: 4px 4px 0px #1A1A1A;
			--shadow-lg: 6px 6px 0px #1A1A1A;
			--shadow-hover: 8px 8px 0px #1A1A1A;
			--radius: 12px;
		}

		[data-theme="dark"] {
			--bg: #1A1A2E;
			--bg-secondary: #16213E;
			--text-primary: #FFFFFF;
			--text-secondary: #B8B8B8;
			--border: #FFFFFF;
			--shadow: 4px 4px 0px #FFFFFF;
			--shadow-lg: 6px 6px 0px #FFFFFF;
			--shadow-hover: 8px 8px 0px #FFFFFF;
		}

		body {
			font-family: 'Share Tech Mono', monospace;
			background: var(--bg);
			color: var(--text-primary);
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 29px;
			line-height: 1.6;
			background-image:
				radial-gradient(circle at 20% 80%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
				radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%);
		}

		.container {
			max-width: 600px;
			width: 100%;
		}

		.back-link {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--text-primary);
			text-decoration: none;
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 20px;
			padding: 10px 16px;
			z-index: 99999999;
			background: var(--accent-secondary);
			border: 3px solid var(--border);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			transition: all 0.15s ease;
		}

		.back-link:hover {
			transform: translate(-2px, -2px);
			box-shadow: var(--shadow-hover);
		}

		.back-link:active {
			transform: translate(2px, 2px);
			box-shadow: none;
		}

		.card {
			background: var(--bg-secondary);
			border: 4px solid var(--border);
			border-radius: 20px;
			padding: 32px;
			box-shadow: var(--shadow-lg);
			position: relative;
		}

		.card::before {
			content: '';
			position: absolute;
			top: -12px;
			left: 20px;
			width: 30px;
			height: 30px;
			background: var(--accent-blue);
			border: 3px solid var(--border);
			border-radius: 50%;
			z-index: -1;
		}

		.card::after {
			content: '';
			position: absolute;
			bottom: -12px;
			right: 20px;
			width: 40px;
			height: 40px;
			background: var(--accent);
			border: 3px solid var(--border);
			border-radius: 8px;
			transform: rotate(15deg);
			z-index: -1;
		}

		/* Header */
		.header {
			text-align: center;
			margin-bottom: 28px;
			padding-bottom: 24px;
			border-bottom: 4px dashed var(--border);
		}

		.header-badge {
			display: inline-block;
			background: linear-gradient(135deg, #4ECDC4 0%, #2DD881 100%);
			color: white;
			padding: 6px 16px;
			border-radius: 50px;
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 12px;
			border: 3px solid var(--border);
			box-shadow: 3px 3px 0px var(--border);
		}

		.header h1 {
			font-size: 28px;
			font-weight: 700;
			margin-bottom: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
		}

		.header h1 .icon-anim {
			font-size: 36px;
			animation: bounce 2s ease-in-out infinite;
			display: inline-block;
		}

		@keyframes bounce {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-8px);
			}
		}

		.header p {
			color: var(--text-secondary);
			font-size: 15px;
			font-weight: 500;
		}

		/* Step Indicator */
		.step-indicator {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-bottom: 28px;
		}

		.step-dot {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: var(--bg);
			border: 3px solid var(--border);
			transition: all 0.3s ease;
		}

		.step-dot.active {
			background: var(--accent-blue);
			width: 50px;
			border-radius: 50px;
			box-shadow: 3px 3px 0px var(--border);
		}

		/* Form */
		.form-group {
			margin-bottom: 24px;
		}

		.form-label {
			display: block;
			font-size: 13px;
			font-weight: 700;
			color: var(--text-primary);
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 10px;
		}

		.form-input {
			width: 100%;
			padding: 14px 18px;
			background: var(--bg);
			border: 3px solid var(--border);
			border-radius: var(--radius);
			color: var(--text-primary);
			font-size: 15px;
			font-family: inherit;
			font-weight: 500;
			box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.08);
			transition: all 0.15s ease;
		}

		.form-input:focus {
			outline: none;
			box-shadow: var(--shadow);
			transform: translate(-2px, -2px);
		}

		.form-input::placeholder {
			color: var(--text-secondary);
		}

		.form-hint {
			font-size: 12px;
			color: var(--text-secondary);
			margin-top: 8px;
			font-weight: 500;
			padding: 8px 12px;
			background: rgba(78, 205, 196, 0.15);
			border-radius: 8px;
			border-left: 4px solid var(--accent-blue);
		}

		/* Emoji preview pills */
		.emoji-preview {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-top: 10px;
			min-height: 32px;
		}

		.emoji-pill {
			background: var(--accent-secondary);
			border: 2px solid var(--border);
			border-radius: 20px;
			padding: 4px 10px;
			font-size: 18px;
			box-shadow: 2px 2px 0px var(--border);
			animation: popIn 0.2s ease-out;
		}

		@keyframes popIn {
			0% {
				transform: scale(0.6);
				opacity: 0;
			}

			80% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
				opacity: 1;
			}
		}

		/* Price preview */
		.price-preview {
			background: linear-gradient(135deg, rgba(78, 205, 196, 0.2) 0%, rgba(45, 216, 129, 0.2) 100%);
			border: 3px solid var(--border);
			border-radius: var(--radius);
			padding: 20px;
			margin-bottom: 24px;
			text-align: center;
		}

		.price-preview .label {
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: var(--text-secondary);
			margin-bottom: 8px;
		}

		.price-preview .formula {
			font-size: 14px;
			font-weight: 600;
			color: var(--text-secondary);
			margin-bottom: 10px;
		}

		.price-preview .total {
			font-size: 36px;
			font-weight: 700;
			color: var(--text-primary);
			background: white;
			display: inline-block;
			padding: 8px 24px;
			border-radius: 10px;
			border: 3px solid var(--border);
			box-shadow: var(--shadow);
		}

		[data-theme="dark"] .price-preview .total {
			background: var(--bg);
		}

		/* Warning box */
		.warning-box {
			background: linear-gradient(135deg, rgba(255, 59, 59, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
			border: 3px solid var(--accent-red);
			border-radius: var(--radius);
			padding: 16px;
			margin-bottom: 24px;
			display: flex;
			align-items: flex-start;
			gap: 12px;
		}

		.warning-box .icon {
			font-size: 24px;
			flex-shrink: 0;
		}

		.warning-box .content {
			font-size: 13px;
			font-weight: 500;
			line-height: 1.6;
		}

		.warning-box .content strong {
			display: block;
			font-size: 14px;
			color: var(--accent-red);
			margin-bottom: 4px;
			font-weight: 700;
		}

		/* Button */
		.btn {
			width: 100%;
			padding: 16px 24px;
			background: linear-gradient(135deg, #4ECDC4 0%, #2DD881 100%);
			border: 4px solid var(--border);
			border-radius: var(--radius);
			color: white;
			font-size: 16px;
			font-weight: 700;
			font-family: inherit;
			cursor: pointer;
			transition: all 0.15s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			text-decoration: none;
			box-shadow: var(--shadow-lg);
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		.btn:hover {
			transform: translate(-3px, -3px);
			box-shadow: 10px 10px 0px var(--border);
		}

		.btn:active {
			transform: translate(3px, 3px);
			box-shadow: none;
		}

		.btn:disabled {
			opacity: 0.5;
			cursor: not-allowed;
			transform: none;
			box-shadow: var(--shadow);
		}

		.btn:disabled:hover {
			transform: none;
			box-shadow: var(--shadow);
		}

		.btn-secondary {
			background: var(--bg);
			color: var(--text-primary);
			margin-top: 12px;
		}

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

		.btn-whatsapp {
			background: #25D366;
		}

		.btn-whatsapp:hover {
			background: #20BD5A;
		}

		/* Summary box (step 2) */
		.order-summary {
			background: linear-gradient(135deg, #4ECDC4 0%, #2DD881 100%);
			border: 4px solid var(--border);
			border-radius: var(--radius);
			padding: 24px;
			text-align: center;
			margin-bottom: 24px;
			box-shadow: var(--shadow);
			color: white;
		}

		.order-summary h3 {
			font-size: 13px;
			color: rgba(255, 255, 255, 0.85);
			margin-bottom: 8px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		.order-summary .summary-title {
			font-size: 22px;
			font-weight: 700;
			margin-bottom: 6px;
		}

		.order-summary .summary-detail {
			font-size: 14px;
			opacity: 0.9;
			margin-bottom: 4px;
		}

		.order-summary .summary-price {
			font-size: 28px;
			font-weight: 700;
			background: white;
			color: var(--text-primary);
			display: inline-block;
			padding: 8px 24px;
			border-radius: 8px;
			border: 3px solid var(--border);
			margin-top: 10px;
		}

		.order-summary .channel-link-display {
			font-size: 12px;
			background: rgba(0, 0, 0, 0.2);
			padding: 6px 12px;
			border-radius: 8px;
			margin: 8px 0;
			word-break: break-all;
			font-weight: 600;
		}

		/* QRIS section */
		.qris-section {
			text-align: center;
			margin: 24px 0;
			padding: 24px;
			background: white;
			border: 4px solid var(--border);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
		}

		[data-theme="dark"] .qris-section {
			background: var(--bg-secondary);
		}

		.qris-section h3 {
			font-size: 15px;
			margin-bottom: 16px;
			color: var(--text-primary);
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}

		.qris-note {
			font-size: 13px;
			color: var(--text-secondary);
			font-weight: 600;
		}

		/* Theme toggle */
		.theme-toggle {
			position: fixed;
			bottom: 24px;
			right: 24px;
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: var(--accent-purple);
			border: 4px solid var(--border);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			z-index: 1000;
			box-shadow: var(--shadow);
			transition: all 0.15s ease;
		}

		.theme-toggle:hover {
			transform: translate(-2px, -2px) rotate(15deg);
			box-shadow: var(--shadow-hover);
		}

		.theme-toggle:active {
			transform: translate(2px, 2px);
			box-shadow: none;
		}

		.hidden {
			display: none !important;
		}

		/* Footer decoration */
		.footer-decoration {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-top: 20px;
		}

		.footer-decoration span {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid var(--border);
		}

		.footer-decoration span:nth-child(1) {
			background: var(--accent-gold);
		}

		.footer-decoration span:nth-child(2) {
			background: var(--accent-blue);
		}

		.footer-decoration span:nth-child(3) {
			background: var(--accent-green);
		}

		.footer-decoration span:nth-child(4) {
			background: var(--accent-purple);
		}

		.footer-decoration span:nth-child(5) {
			background: var(--accent-pink);
		}

		/* Number input row */
		.number-row {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.number-btn {
			width: 44px;
			height: 44px;
			flex-shrink: 0;
			background: var(--accent-secondary);
			border: 3px solid var(--border);
			border-radius: 10px;
			font-size: 22px;
			font-weight: 700;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: var(--shadow);
			transition: all 0.15s ease;
			color: var(--text-primary);
		}

		.number-btn:hover {
			transform: translate(-2px, -2px);
			box-shadow: var(--shadow-hover);
		}

		.number-btn:active {
			transform: translate(2px, 2px);
			box-shadow: none;
		}

		.form-input.short {
			text-align: center;
			font-size: 20px;
			font-weight: 700;
		}

		@media (max-width: 480px) {
			body {
				padding: 16px;
			}

			.card {
				padding: 24px;
			}

			.header h1 {
				font-size: 22px;
			}

			.price-preview .total {
				font-size: 28px;
			}
		}

		@media (max-width: 360px) {
			body {
				padding: 12px;
			}

			.card {
				padding: 18px;
			}
		}