:root{--bg:#f6f7fb;--card:#fff;--accent:#6366f1;--muted:#6b7280}
*{box-sizing:border-box}
.gradient-bg{background: linear-gradient(120deg, #f6f8ff 0%, #fff7f3 60%, #fffaf0 100%);}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;padding:8px 12px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 12px 30px rgba(99,102,241,0.35);transition:transform .08s ease,box-shadow .12s ease}

.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(99,102,241,0.4)}
.btn:active{transform:translateY(0);box-shadow:0 8px 18px rgba(79,70,229,0.45)}
.btn:focus{outline:3px solid rgba(126,34,173,0.35);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:18px;
	padding:18px;
	align-items:stretch;
}

.card{
	background: linear-gradient(180deg, #ffffff 0%, #fff8f6 100%);
	min-height:240px;
	padding:18px;
	border-radius:18px; /* rounded corners */
	border: 2px solid rgba(255,122,89,0.08);
	box-shadow: 0 18px 40px rgba(16,24,40,0.09);
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	backdrop-filter: blur(4px);
	position:relative;
	overflow:hidden;
}
.card.big{padding:18px}
.type{font-weight:800;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;color:#0f172a}
.desc{margin-top:8px;color:#111;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* Decorative accent behind cards */
.cards-wrap{padding:40px;background:radial-gradient(1200px 400px at 10% 10%, rgba(99,102,241,0.1), transparent 12%, transparent), linear-gradient(180deg, #fffaf6 0%, #fffdfb 100%);}

.card::before{
	content: '';
	position: absolute;
	right: -40px;
	top: -40px;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.24), rgba(99,102,241,0.08) 40%, transparent 60%);
	filter: blur(12px);
	pointer-events: none;
}
.meta{color:var(--muted);font-size:13px;margin-top:8px}
.actions{margin-top:12px}
.actions input{padding:8px;border-radius:8px;border:1px solid #e6e9ef;margin-right:8px}
.btn.small{padding:6px 10px;font-size:13px}
.muted{color:var(--muted)}
.badge{background:var(--accent);color:#fff;padding:6px 10px;border-radius:8px;font-weight:700}
.response{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9}
.ok{color:green;font-weight:700}
.formwrap{padding:18px}
label{display:block;margin:8px 0}
input[type="text"],textarea,input{width:100%;padding:8px;border-radius:8px;border:1px solid #e6e9ef}

/* Ensure native buttons and inputs get the same look */
button{font:inherit}
button.btn{appearance:none}

@media(max-width:540px){.grid{grid-template-columns:repeat(2,1fr)}}