:root{
  --bg:#fafafa; --card:#fff; --muted:#6b7280; --accent:#4051f5;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; margin:0; background:var(--bg); color:#111; min-height:100vh;}
.auth-root{display:flex; min-height:100vh; align-items:stretch;}
.auth-left{flex:1; position:relative; overflow:hidden; display:block;}
.slideshow{position:absolute; inset:0;}
.slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.05); transition:opacity 1s ease, transform 8s ease; filter:brightness(0.8);}
.slide:nth-child(1){animation:slideAnim 16s infinite 0s}
.slide:nth-child(2){animation:slideAnim 16s infinite 4s}
.slide:nth-child(3){animation:slideAnim 16s infinite 8s}
.slide:nth-child(4){animation:slideAnim 16s infinite 12s}
@keyframes slideAnim { 0%{opacity:0; transform:scale(1.08);} 6%{opacity:1; transform:scale(1);} 24%{opacity:1;} 30%{opacity:0;} 100%{opacity:0;} }
.overlay-blur{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)); backdrop-filter: blur(6px);}

.auth-right{width:420px; display:flex; align-items:center; justify-content:center; padding:40px;}
.auth-card{width:100%; max-width:360px; background:var(--card); padding:26px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.08); border:1px solid rgba(2,6,23,0.04); text-align:center;}
.logo{font-size:28px; margin-bottom:12px;}
.brand{font-weight:700; margin-left:8px;}
.form input{width:100%; padding:12px; margin:8px 0; border-radius:8px; border:1px solid #e6e9ef;}
.btn{background:var(--accent); color:white; padding:10px 12px; border-radius:8px; border:0; cursor:pointer; width:100%; margin-top:8px;}
.btn.outline{background:transparent; color:var(--accent); border:1px solid rgba(64,81,245,0.12);}
.muted{color:var(--muted); font-size:13px; margin-top:8px;}
.small{font-size:12px;}
.hidden{display:none;}

.app{display:none;}
.app.hidden{display:none;}
.topbar{background:var(--card); padding:14px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e6e9ef;}
.container{display:flex; gap:16px; max-width:1120px; margin:18px auto; padding:0 12px;}
.sidebar{width:300px; flex-shrink:0;}
.mainview{flex:1;}
.box{background:var(--card); padding:12px; border-radius:8px; margin-bottom:12px; box-shadow:0 1px 3px rgba(16,24,40,0.03); border:1px solid #eef2ff;}
#authArea input, #authArea button, #searchInput, #photoCaption{width:100%; padding:8px; margin:6px 0; border-radius:6px; border:1px solid #e6e9ef;}
.menu{display:flex; gap:8px; margin-bottom:12px;}
.menu button{padding:8px 12px; border-radius:8px; border:0; background:#eef2ff; cursor:pointer;}
.menu button.active{background:var(--accent); color:#fff;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
.card{background:var(--card); border-radius:8px; overflow:hidden; border:1px solid #eee;}
.card img{width:100%; height:160px; object-fit:cover; display:block;}
.card .meta{padding:8px; display:flex; align-items:center; gap:8px;}
.avatar{width:36px; height:36px; border-radius:50%; background:#ddd; display:inline-flex; align-items:center; justify-content:center; font-weight:700;}
.btn-small{background:#f3f4f6; padding:6px 8px; border-radius:6px; cursor:pointer; border:0;}

.footer{max-width:1120px;margin:18px auto;padding:10px;color:var(--muted);font-size:13px;}

/* Responsive */
@media (max-width:900px){
  .auth-right{width:100%; padding:20px;}
  .auth-left{display:none;}
  .auth-root{flex-direction:column; padding:30px 0;}
  .auth-card{margin:0 16px;}
  .container{padding:0 8px; margin:8px auto;}
}