:root{
	--bg:#f3f6fb;
	--card:#ffffff;
	--muted:#64748b;
	--accent:#2065d3;
	--danger:#e02424;
	--radius:12px;
}

html,body{height:100%;}
body{
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: linear-gradient(180deg, #f7fbff 0%, var(--bg) 100%);
	color:#0f172a;
	margin:0;
	-webkit-font-smoothing:antialiased;
}

.wrap{
	max-width:920px;
	margin:48px auto;
	background:var(--card);
	padding:28px;
	border-radius:var(--radius);
	box-shadow:0 8px 30px rgba(15,23,42,0.06);
}

.logo{font-size:28px;font-weight:700;text-align:center;margin-bottom:16px}

input,textarea,select{display:block;width:100%;padding:12px 14px;margin:6px 0;border:1px solid #e6eef8;background:#fbfdff;border-radius:10px;box-sizing:border-box}
input:focus,textarea:focus{outline:2px solid rgba(32,101,211,0.12);border-color:rgba(32,101,211,0.2)}

button{padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:#fff;cursor:pointer;font-weight:600}
button:hover{opacity:0.95}

.muted{color:var(--muted)}
.msg{color:var(--danger);margin-top:8px}

.header-row{display:grid;grid-template-columns:110px 1fr 1.8fr 140px;gap:12px;padding:6px 0;color:#64748b;font-weight:600}
.col-code,.col-name,.col-url{padding-left:6px}

.list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.config-row{display:grid;grid-template-columns:110px 1fr 1.8fr 140px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9}
.config-row input.code{width:100px}
.config-row input.name{padding:10px}
.config-row input.url{padding:10px}
.actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.actions button{min-width:76px;padding:8px 12px;border-radius:8px}

.btn-gen{background:var(--accent);color:#fff;border-radius:10px;padding:8px}
.btn-del{background:#ff6b6b;color:#fff;border-radius:10px;padding:8px}

.controls{display:flex;gap:8px;align-items:center;margin-top:14px}
.controls .left{flex:1}

/* Tablet enter button */
.big-btn{display:block;width:100%;padding:18px 14px;font-size:18px;border-radius:12px;margin-top:12px}

/* Login card variant */
.card-centered{max-width:720px;margin:40px auto;padding:30px;border-radius:14px;box-shadow:0 10px 30px rgba(2,6,23,0.06)}

/* Tidy header */
h2{margin:0 0 14px 0;font-weight:700;color:#0f172a}

@media(max-width:700px){
	.config-row{grid-template-columns:90px 1fr;grid-template-rows:auto auto;}
	.actions{flex-direction:row}
	.header-row{display:none}
}