@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

:root{
	--bg: #E9E6FF;
	--card: #ffffff;
	--text: #1f2937;
	--muted:#6b7280;
	--primary:#6C63FF;
	--primary-ghost:#edeCff;
	--radius:16px;
	--shadow: 0 10px 30px rgba(17, 24, 39, .08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
	margin:0;
	background: var(--bg);
	font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: var(--text);
}

.container{ max-width: 720px; margin: 0 auto; padding: 20px 16px 32px; }
.card{ background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }

.header{ display:flex; align-items:center; gap:16px; margin-bottom: 10px; }
.header .title{ font-size: 22px; font-weight: 700; }
.header .subtitle{ margin-top: 2px; font-size: 14px; color: var(--muted); }

.banner{
	width:100%; height: 160px; border-radius: 12px;
	background: linear-gradient(135deg,#6C63FF22,#6C63FF11);
	margin-bottom: 16px; background-size: cover; background-position: center center;
}

label{ display:block; margin: 14px 2px 6px; font-size: 14px; color: var(--muted); font-weight: 600; }

select, textarea{
	width:100%; border: 1px solid #e5e7eb; padding: 12px 14px; border-radius: 12px;
	font-size: 15px; background: #fff; outline: none;
}

textarea{
	min-height: 80px; max-height: 220px; resize: vertical;
}

.actions{ display:flex; gap: 10px; margin-top: 16px; }
button{ flex:1; padding: 12px 16px; border-radius: 12px; border:0; cursor:pointer; font-weight:700; font-size: 15px; }
.btn-primary{ background: var(--primary); color: #fff; }
.btn-ghost{ background: var(--primary-ghost); color: var(--primary); }

.note{ color: var(--muted); font-size: 13px; margin-top: 6px; }
.center{ display:flex; align-items:center; justify-content:center; height: calc(100dvh - 40px); padding: 16px; }
.hidden{ display: none; }