:root{--bg:#0f0f0f;--panel:#181818;--muted:#9a9a9a;--accent:#e6e6e6}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#0f0f0f;color:var(--accent);-webkit-text-size-adjust:100%}

.header{position:fixed;top:20px;right:30px;z-index:10}
.login-btn{background:transparent;border:1px solid rgba(255,255,255,0.12);padding:10px 16px;color:var(--accent);border-radius:8px;cursor:pointer;font-weight:700;backdrop-filter:blur(6px);transition:all .18s}
.login-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.6)}

.container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:60px 20px 40px}
.hero{max-width:1100px;text-align:center}

.title{font-size:clamp(48px,12vw,160px);line-height:0.9;margin:0;font-weight:900;letter-spacing:0;position:relative;color:transparent;text-align:center;overflow:hidden}

/* Per-letter shining effect */
.title .letter{display:inline-block;font-family:inherit;line-height:1;color:transparent;background:linear-gradient(90deg,#f5f5f5 10%,#e6e6e6 50%,#f5f5f5 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;transition:transform .24s ease, filter .24s ease;filter:brightness(1);text-shadow:0 6px 22px rgba(0,0,0,0.5);margin:0;padding:0}
.title .letter{animation:letter-shine 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * 0.18s)}

@keyframes letter-shine{
	0%{transform:translateY(0) scale(1);filter:brightness(1);text-shadow:0 6px 22px rgba(0,0,0,0.5)}
	40%{transform:translateY(-2px) scale(1.02);filter:brightness(1.6);text-shadow:0 10px 36px rgba(230,230,230,0.14)}
	60%{transform:translateY(-1px) scale(1.01);filter:brightness(1.35);text-shadow:0 8px 30px rgba(230,230,230,0.10)}
	100%{transform:translateY(0) scale(1);filter:brightness(1);text-shadow:0 6px 22px rgba(0,0,0,0.5)}
}

/* Slight overall sheen that occasionally sweeps slowly */
.title::after{content:"";position:absolute;inset:0;left:-160%;height:120%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.06) 48%,rgba(255,255,255,0.10) 52%,transparent 72%);transform:skewX(-12deg);filter:blur(6px);pointer-events:none;mix-blend-mode:screen;animation:slow-sweep 6.5s ease-in-out infinite}
@keyframes slow-sweep{0%{left:-160%}50%{left:140%}100%{left:140%}}

.subtitle{margin-top:18px;color:var(--muted);font-size:clamp(16px,2.5vw,20px)}

.card{margin-top:36px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:20px;border-radius:12px;color:var(--muted);max-width:720px;margin-left:auto;margin-right:auto;box-shadow:0 8px 30px rgba(0,0,0,0.6)}

.footer{position:static;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,rgba(0,0,0,0.06),rgba(0,0,0,0.04));color:var(--muted);font-size:13px;border-top:1px solid rgba(255,255,255,0.02)}
.footer-left{font-size:13px;color:var(--muted)}
.social-icons{display:flex;gap:12px;align-items:center}
.social-icons a{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;transition:background .14s,color .14s}
.social-icons a:hover{background:rgba(255,255,255,0.03);color:var(--accent)}
.social-icons svg{display:block}

/* Projects */
.projects{margin-top:40px;text-align:left}
.projects h2{color:var(--accent);margin-bottom:12px}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.projects-grid{background:transparent}
.project-card{background:rgba(255,255,255,0.02);padding:16px;border-radius:10px;border:1px solid rgba(255,255,255,0.01);color:var(--muted);box-shadow:0 6px 18px rgba(0,0,0,0.45)}

.projects-empty{grid-column:1/-1;padding:20px;border:1px dashed rgba(255,255,255,0.03);border-radius:10px;color:var(--muted);text-align:center;background:rgba(255,255,255,0.01)}

/* project image */
.project-card img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.04)}
.project-card h3{font-size:18px;margin-bottom:6px;color:var(--accent)}

/* admin actions on each project card */
.project-card .card-actions{display:flex;gap:8px;margin-top:12px}
.project-card .card-actions button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.project-card .card-actions button svg{opacity:0.9}
.project-card .card-actions button:hover{background:rgba(255,255,255,0.03);color:var(--accent)}

/* dropzone for uploads */
.dropzone{border:2px dashed rgba(255,255,255,0.04);padding:12px;border-radius:10px;text-align:center;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:10px}
.dropzone.dragover{background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.12);color:var(--accent)}

/* file preview */
#filePreview img{max-width:120px;max-height:80px;border-radius:8px;border:1px solid rgba(255,255,255,0.04)}

/* snackbar undo */
.snackbar{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:#111;padding:12px 16px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);color:var(--accent);display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,0.6);z-index:60}
.snackbar .undo-btn{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--accent);padding:6px 10px;border-radius:8px;cursor:pointer}

/* toast notification (bottom-right) */
.toast{position:fixed;right:18px;bottom:18px;background:#2b0000;color:#ffdede;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,0,0,0.12);z-index:80;box-shadow:0 6px 12px rgba(0,0,0,0.6);font-weight:600;font-size:12px}

/* Modal */
.login-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
.login-modal.show{visibility:visible;opacity:1}
.modal-card{background:#171717;padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);width:100%;max-width:420px;color:var(--accent)}

/* make images scale within their containers to avoid causing horizontal overflow */
img{max-width:100%;height:auto;display:block}

/* ensure form controls don't trigger mobile zoom by keeping font-size readable */
input,textarea,select,button{font-size:16px}
.input{width:100%;padding:10px 12px;margin-top:8px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--accent)}
.modal-actions{display:flex;justify-content:flex-end;margin-top:12px;gap:8px}
.btn{padding:9px 14px;border-radius:8px;border:0;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--muted)}
.btn.primary{background:#e6e6e6;color:#111;font-weight:700}

/* Admin panel */
.admin-panel{position:fixed;top:20px;right:20px;background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);color:var(--accent);display:flex;gap:8px;align-items:center;z-index:20}
.admin-panel .admin-label{font-weight:700;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.02);backdrop-filter:blur(4px)}

/* prettier add button */
.admin-panel .add-btn{width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.06);color:var(--accent);font-size:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,0.45);transition:transform .16s ease,box-shadow .16s ease}
.admin-panel .add-btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,0.55)}
.admin-panel .add-btn:active{transform:translateY(-1px)}

/* prettier logout button */
.admin-panel .logout-btn{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--accent);padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer;transition:background .14s ease,transform .14s ease;display:inline-flex;align-items:center;gap:8px}
.admin-panel .logout-btn svg{transform:translateY(-1px)}
.admin-panel .logout-btn:hover{background:rgba(255,255,255,0.04);transform:translateY(-2px)}
.admin-panel .logout-btn:active{transform:translateY(0)}

.admin-actions{display:flex;gap:10px;margin-left:10px}

.projects-grid .project-card h3{margin:0 0 6px 0}
.projects-grid .project-card p{margin:0;color:var(--muted)}

@media (max-width:900px){
	.container{padding:30px 16px}
	.hero{max-width:680px}
	.projects-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
	.project-card img{height:120px}
	.card{padding:16px}
	.subtitle{font-size:15px}
	.modal-card{max-width:92%;min-width:unset;padding:18px}
	.admin-panel{right:12px;top:12px;padding:6px 6px}
}

@media (max-width:480px){
	.header{right:10px;top:12px}
	.container{padding:18px 12px}
	.hero{padding-top:10px}
	.title{font-size:clamp(34px,20vw,72px)}
	.subtitle{font-size:14px}
	.card{margin-top:18px;padding:14px}
	.projects{margin-top:20px}
	.projects-grid{gap:12px}
	.project-card{padding:12px}
	.project-card img{height:100px}
	/* Make modal full-width friendly */
	.modal-card{width:calc(100% - 28px);max-width:none;min-width:unset;border-radius:12px}
	.modal-actions{flex-direction:column;align-items:stretch}
	.modal-actions .btn{width:100%}
	.input{padding:12px}
	#filePreview img{max-width:100px;max-height:72px}
	/* Admin panel: move to bottom and expand full width */
	.admin-panel{left:12px;right:12px;top:auto;bottom:14px;padding:8px 12px;border-radius:12px;justify-content:space-between}
	.admin-panel .admin-label{display:none}
	.admin-panel .add-btn{width:38px;height:38px}
	.admin-panel .logout-btn{padding:8px}
	/* Snackbar and toast adjusted for small screens */
	.snackbar{left:12px;right:12px;transform:none}
	.toast{left:12px;right:12px;bottom:12px}
}

/* small tweaks to ensure form controls are usable on touch */
.input, .btn{touch-action:manipulation}

/* ensure clickable admin icons have sufficient hit area */
.admin-panel button{padding:8px}

@media (hover:none){
	.login-btn,.admin-panel .add-btn{box-shadow:none}
}

@media (max-width:360px){
	.title{font-size:42px}
	.project-card img{height:86px}
}