:root{
  --red:#D12A2A;
  --green:#1E793C;
  --cream:#fff9f2;
  --ink:#222;
  --muted:#666;
  --card:#ffffff;
  --shadow: 0 10px 20px rgba(0,0,0,.08);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%, #fff, var(--cream)) fixed;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100svh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.flag-bar{height:6px;background:linear-gradient(90deg, var(--green) 33.33%, #fff 33.33% 66.66%, var(--red) 66.66%);animation:slide 2s ease-out}
@keyframes slide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-badge{font-size:28px;transform:rotate(-10deg);transition:transform .3s}
.brand:hover .brand-badge{transform:rotate(0)}
.brand-word{font-family:'Playfair Display',serif;font-size:20px}
.brand-word em{font-style:normal;color:var(--red)}
.nav{display:flex;gap:14px;align-items:center}
.nav .btn{background:var(--red);color:#fff;padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);border:none}
.nav .link{background:none;border:none;cursor:pointer}
.container{max-width:1100px;margin:0 auto;padding:18px;flex:1;width:100%}
.fade-in{animation:fade 400ms ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 16px;margin:12px 0;text-align:center}
.hero h1{font-family:'Playfair Display',serif;font-size:40px;line-height:1.1;margin:0 0 10px}
.hero .underline{background:linear-gradient(transparent 70%, rgba(209,42,42,.25) 0%)}
.hero .sub{color:var(--muted);max-width:640px;margin:0 auto 18px}
.cta{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--green);color:#fff;box-shadow:var(--shadow)}
.bounce{animation:bounce 1.4s infinite}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
.section-title{font-family:'Playfair Display',serif;margin:20px 0 10px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.hover-rise{transition:transform .2s, box-shadow .2s}
.hover-rise:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.1)}
.thumb{position:relative;aspect-ratio:1/1;overflow:hidden}
.thumb.big{aspect-ratio:auto}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .thumb img{transform:scale(1.03)}
.badge{position:absolute;top:10px;left:10px;background:#000a;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
.badge.rating{right:10px;left:auto;background:var(--red)}
.card-body{padding:10px}
.meta{color:var(--muted);font-size:13px;display:flex;gap:6px}
.title{font-weight:600;margin-top:4px}
.auth .form{display:grid;gap:10px;padding:16px;max-width:520px;margin:0 auto}
.auth h2{font-family:'Playfair Display',serif}
label{display:grid;gap:6px;font-size:14px}
input,select,textarea{padding:10px;border:1px solid #ddd;border-radius:12px;background:#fff}
button.btn{cursor:pointer}
.btn{background:var(--red);color:#fff;padding:10px 16px;border:none;border-radius:12px}
.btn.outline{background:#fff;border:1px solid var(--red);color:var(--red)}
.btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid #ddd;color:#111}
.alert{background:#fff3f3;border:1px solid #ffd0d0;color:#8a1a1a;padding:10px;border-radius:12px;margin:10px 0}
.site-footer{margin-top:auto;text-align:center;padding:18px;color:var(--muted);background:#fff}
.pulse{animation:pulse 1.8s infinite}
@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.profile-header{display:flex;gap:14px;align-items:center;padding:12px}
.profile .avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--shadow)}
.avatar.small{width:36px;height:36px;border-width:2px}
.pill{display:inline-block;background:linear-gradient(90deg, var(--green), var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.tabs{display:flex;gap:8px;margin:12px 0}
.tabs button{padding:10px 14px;border-radius:999px;border:1px solid #eee;background:#fff;cursor:pointer}
.tabs .active{background:var(--ink);color:#fff}
.tab-content.hidden{display:none}
.post.card{padding:10px;max-width:720px;margin:0 auto}
.post .notes{margin:10px 2px}
.actions{display:flex;gap:10px}
.empty{display:grid;place-items:center;background:#fff;border-radius:var(--radius);padding:24px;color:var(--muted);box-shadow:var(--shadow)}