:root {
    --agri-green: #065f46;
    --agri-yellow: #facc15;
    --bg-soft: #f0fdf4;
    --agri-dark: #044e3a;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-soft); margin: 0; padding: 20px; }
.container { max-width: 1250px; margin: 0 auto; }
header { background: var(--agri-green); color: white; padding: 20px; border-radius: 15px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.header-content { display: flex; align-items: center; justify-content: center; gap: 20px; }
.main-logo { height: 70px; filter: brightness(0) invert(1); }

.grid-container { display: grid; grid-template-columns: 450px 1fr; gap: 40px; }

.form-section { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-top: 6px solid var(--agri-yellow); }

.mode-selector { background: #fdf6b2; padding: 15px; border-radius: 10px; border: 1px solid var(--agri-yellow); margin-bottom: 22px; display: flex; gap: 20px; align-items: center; }
.mode-selector label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: #374151; }

.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; font-size: 0.95rem; }

input, select, textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background-color: #f9fafb; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--agri-green); box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1); }

.btn-primary { width: 100%; background: var(--agri-green); color: white; padding: 15px; border: none; border-radius: 8px; font-weight: bold; font-size: 1.1rem; cursor: pointer; margin-top: 15px; }

.canvas-wrapper { display: flex; flex-direction: column; align-items: center; gap: 25px; background: #e5e7eb; padding: 30px; border-radius: 15px; }
canvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.25); background: white; }

#frontCanvas, #backCanvas { width: 340px; }

.download-box { margin-top: 30px; display: flex; gap: 15px; }
.btn-pdf { background: #dc2626; color: white; }
.btn-img { background: #2563eb; color: white; }

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