/* Reset et base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
	color: #f1f5f9;
	min-height: 100vh;
	line-height: 1.6;
}

.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Header */
header {
	text-align: center;
	margin-bottom: 40px;
	padding: 40px 0;
}

header h1 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.logo {
	width: 50px;
	height: 50px;
	border-radius: 12px;
}

header p {
	font-size: 1.1rem;
	opacity: 0.8;
	color: #94a3b8;
}

h2 {
	color: #e2e8f0;
	margin-bottom: 20px;
	font-size: 1.5rem;
}

/* Sections */
.section, .upload, .gallery-section {
	background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
	border: 1px solid rgba(59, 130, 246, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Upload row */
.upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#file-input{flex:1;min-width:200px;padding:12px;border-radius:12px;border:1px solid rgba(59,130,246,0.3);background:rgba(15,23,42,0.8);color:#f1f5f9;transition:all 0.3s ease}
#file-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
#upload-btn{padding:14px 28px;border-radius:12px;background:linear-gradient(45deg,#3b82f6,#1d4ed8);color:#fff;border:none;cursor:pointer;font-weight:600;transition:all 0.3s ease}
#upload-btn:hover{background:linear-gradient(45deg,#2563eb,#1e40af);transform:translateY(-2px);box-shadow:0 8px 25px rgba(59,130,246,0.4)}

/* Image preview */
#preview-container{width:100%;margin-top:16px;display:none}
#preview-container.show{display:block}
#image-preview{width:100%;max-height:300px;object-fit:contain;border-radius:12px;border:2px solid rgba(59,130,246,0.3);background:rgba(15,23,42,0.6)}

/* Message feedback */
.message{width:100%;padding:12px;border-radius:10px;margin-top:12px;font-weight:500;text-align:center;transition:all 0.3s ease}
.message.success{background:rgba(34,197,94,0.2);border:1px solid rgba(34,197,94,0.4);color:#22c55e}
.message.error{background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.4);color:#ef4444}
.message.info{background:rgba(59,130,246,0.2);border:1px solid rgba(59,130,246,0.4);color:#3b82f6}

/* Gallery grid */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tile{background:rgba(15,23,42,0.8);border-radius:12px;padding:12px;border:1px solid rgba(59,130,246,0.2);transition:all 0.3s ease;position:relative}
.tile:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(59,130,246,0.2);border-color:rgba(59,130,246,0.4)}
.tile img{width:100%;height:160px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform 0.3s ease}
.tile img:hover{transform:scale(1.05)}
.meta{margin-top:10px;font-size:13px;color:#cbd5e1}
.name{font-weight:600;color:#e2e8f0;margin-bottom:6px;word-break:break-word}
.info{color:#94a3b8;margin-bottom:8px}
.info a{color:#3b82f6;text-decoration:none}
.info a:hover{text-decoration:underline}

/* Link display */
.link-container{background:rgba(15,23,42,0.6);padding:8px;border-radius:8px;margin-top:8px;display:flex;gap:6px;align-items:center;overflow:hidden}
.copy-url{flex:1;min-width:0;padding:8px;font-size:11px;border-radius:6px;background:transparent;border:1px solid rgba(59,130,246,0.2);color:#3b82f6;font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-btn{padding:6px 10px;border-radius:6px;background:rgba(59,130,246,0.2);color:#3b82f6;border:1px solid rgba(59,130,246,0.3);cursor:pointer;font-size:11px;font-weight:600;transition:all 0.2s ease;white-space:nowrap;flex-shrink:0}
.copy-btn:hover{background:rgba(59,130,246,0.3);transform:scale(1.02)}
.copy-btn.copied{background:rgba(34,197,94,0.2);color:#22c55e;border-color:rgba(34,197,94,0.3)}

/* Responsive tweaks */
@media (max-width: 768px) {
	.container { padding: 15px; }
	header h1 { font-size: 2rem; flex-direction: column; gap: 10px; }
	.upload { flex-direction: column; align-items: stretch; }
}